User Experience
User interface
Branding
Industrial Design
Animation
MachineMax
Revolutionary wireless Telematics to maximise the profitability of off-highway fleets using smart sensors and next-generation analytics.
The Problem
Tracking the utilisation and location of individual machines or fleets of vehicles has traditionally been an inaccurate and time consuming manual process.
With no accurate visibility of how machines are being utilized, machine usage is suboptimal, resulting in higher operating costs and losses in production. For example, unnecessary idling increases fuel costs and unplanned downtime reduces productivity.
Typically, a large construction company will have a fleet of high-value machinery, but unfortunately, very little insight into what the utilization of their machinery is during working hours or it’s location at the start or end of a shift.
If off-highway machinery is on hire, having insights to the real world utilisation empowers the contractor with accurate data to evaluate if the machinery is fully required or for the duration of the agreed operating hours.
Solution
MachineMax provides a LoRaWAN® telematics solution which is described as a “Fitbit for machines”.
Simplicity is at the core of the solution and once installed, the MachineMax sensors start transmitting real-time data that indicates if the equipment is on, off, idling and its location. Previously, an operator would have to manually record this data, enter it into a database and be slow to respond by taking actions retroactively.
By providing real-time information and on-demand reports in a user-friendly fashion, the MachineMax solution provides a clear, genuine oversight.
The sensors only report key metrics (vibration & GPS location) as integrating too many endless metrics results in operators being swamped with data but no highlight how to turn this into actionable insights.
By monitoring vibration, the solution can help to determine:
VEHICLE UTILIZATION/ACTIVITY
IDLE HOURS
FUEL WASTE
UNEXPECTED DOWNTIME
OPERATOR BEHAVIOUR
LOCATION
Application
With an extremely simple installation, the sensor is attached to the machinery using military-grade magnets and takes about 1 minute to interface with a computer.
The sensor is now active, and it transmits via LoRa, real-time data that indicates if the machinery is on, off, or idling and its GPS position.
A locally installed LoRaWAN® gateway listens for the encrypted device transmission and routes the data to the LORIOT Network Server via an internet connection (4G, Wifi, Ethernet, etc.).
As the device is already provisioned on the LORIOT Network Server, the server authenticates, authorises and routes the encrypted device data to the MachineMax application server.
The data is decoded within the MachineMax analytics application and displayed with clear insights on the computers and smartphones of the key decision-makers.
The return
With MachineMax’s data insights, fleet operators can dramatically increase the active utilisation and productivity of their machinery while reducing require input.
With precise evidence of the active utilisation of machinery, it is possible to record wasted hours and ensure rental contracts reflect active hours.
Access to this new data also made it easier to control fuel costs, coordinate on-site machinery, and schedule machinery operators. This process not only maximises output but also minimises input so the project can run more efficiently.
Working in a dynamic environment means machinery performance is changing daily and requires continuous monitoring. MachineMax sensors make this possible and encourage constant evaluation
Fleet managers can make informed, effective changes and ensure operations run as lean as possible.
MAXIMISE MACHINERY UTILISATION
IMPROVE OPERATOR EFFICIENCY
IMPROVE MAINTENANCE SCHEDULING
REDUCE WASTED HOURS
REDUCE FUEL AND RENTAL COSTS
LOCATE EQUIPTMENT
Course of Action
As a starting base, I broke down the project into key milestones. I conducted a high-level usability test to identify how key features are used within the existing app’s framework and identify any shortcomings keeping in mind business goals to prioritize the feature content and functionality off the app.
User Research & Usability Study
I interviewed 7 members of the Old Oak TC buildings willing to share their experience with the current app allow me to understand their goals and pain points. I also designed a short focused survey to gather information about:
Demographics of the user.
What kind of information they usually look for.
Whether they research on others online/offline platforms.
How would they rate their experience with the app.
Analysis & Findings
From the 7 conducted interviews and 32 responses from the survey, I derived the following key insights:
75% of the responders fell between the 18–24 age bracket while 25% fell in the 25–40 bracket.
Browse an average of 1 hours or less a week on the current TC app.
Modern technology friendly and find it easier to adopt newer technology.
24 of 32 responders consider themselves as introverts.
26 of 32 users would first go into Facebook or WhatsApp channels to get the information they are looking for.
Key Quotes directly from user:
“I’m not very informed about our activities really.”
“I’m interested to know what’s on but I don’t use the app really but I look at the newsletter.”
“I have no skills to meet people on my own.”
“I spent all my time in reading the irrelevant news.”
“I wish I knew that! Maybe information management at this building is a major issue.”
User Goals: The goals TC building members want to accomplish mainly revolved around the experience of knowing what’s happening at the building and potentially getting to meet other members along. They want to save time researching and ideally check for reviews and see what others say.
Pain points: Users shared a common sentiment that there is an overabundance of irrelevant information on the app, no personalized recommendations on their home feed and features that they do not particularly need.
Concept story boarding
I made a visual storyboard to get the bigger picture of how they will explore the app and what were the circumstances.
Structural Definition / Wireframes
The user’s understanding of every element is predicated on the other elements in the composition and their context.
Compositional elements are treated accordingly in order to form visual relationships and thereby establish visual hierarchy across a design.
Here are some key points from the wire-framing stage.
Navigation
Clear flow with minimal steps, Swipe left or right to navigate and Up or down to browse content.
Navigation labels are easy to locate at the top and bottom of the screen.
Announcements Cards / Activities Cards / Places Cards
Cards contains content and actions from a single subject.
They have relevant and actionable information easy to scan.
Hierarchy
Keeping clearly visible elements with sufficient contrast and size brings a clear hierarchy of importance.
Key information that is discernable at a glance with CTA at the top or bottom of the screen.
Hidden categories
Categories, which are dynamic according to the section are placed at the top of the card hidden behind a click working as a toggle to filter content.
Assistive readers
Our app will contain appropriate content labelling for those who experience a text-only version.
Labeling doesn’t have to be visible on the front end to be read on voice over.
Touch interface screen readers will allow users to run their finger over the screen to hear what is directly underneath. To select an item, the user must double tap.
Activity Section
Long cards displayed one at a time are easier to scan and demand focus.
In addition the layout of each screen contains a single Blue button for CTAs which commands attention.
When users clicks a card this expands to fill the full screen using a parent-child transition to reveal information.
Activity Section
People Section and Chat
People Section
Horizontal scroll helped to navigate and organize content across different screens.
Horizontal scrollable content like People section remain off-screen until scrolled.
Each tab contain content that is distinct from the other, on community section we have 3 different sections:
Activity / People / Places.
Service and Settings menus
Hidden menus to accommodate content within the app layouts.
The placement and list-style content of this menus clearly identify them as navigation.
Service and Settings menus
Call to actions, states and other buttons
Brand colors and new additions to the palette
Beyond the logo, color is the most recognizable aspect of the brand identity.
The Collective color palette has two groups, primary and secondary palettes, the color palette has been modified for digital channels like the app and website. Six of their original brand colors have been altered subtly to insure web accessibility.
Blue and Black
The app shows more than one button in a layout at a time, so a high-emphasis button are accompanied by medium- and low-emphasis buttons that perform less important actions.
Website design concept
The website was not on the scope but I created this concept where I applied much of the latest brand refinements as a reference for future developments. Defining a concept upfront can help shape everything that follows: the interactions, the relationship between elements, the tone of voice and copy, the transitions, the animations, etc. Once you have a strong concept, all these aspects start to align.
Conclusion
The app received great feedback. The video in particular helped raise a lot of interest in the project internally.
Members of TC and company employees largely validated the app’s feature roadmap and their enthusiasm gave such traction to this project overall that development phase launched immediately after the concepting and design phases.
As the sole designer on this project, I got the chance to work on all key aspects of this project from end-to-end. From the initial user needs and discovery phase I moved onto creating the app’s concept and key features, as well as designing the concept website, brand refinements, 2 major demo videos, the detailed style guide up to pixel perfect prototypes.
This is now is in the hands of The Collective’s in-house development team.