Product & Animation

BCGDV / MachineMax

User Experience
User interface
Branding
Industrial Design
Animation

Physics Playground - Matter.js

Softwares

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

  1. 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.

  2. 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.

  3. 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.).

  4. 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.

  5. 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.

steps.png

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:

  1. Demographics of the user.

  2. What kind of information they usually look for.

  3. Whether they research on others online/offline platforms.

  4. 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.

Event Journey.jpg
 

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.

 
Navigation.jpg
 
card.jpg
 
 

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.

 
Hierarchy.jpg
 
 

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.

 
categories.jpg
 
AT.jpg
 
 

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.

 
UI Components.jpg
 
 

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

Activity Section

 
People Section and Chat

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

Service and Settings menus

 
screens.jpg
 

Call to actions, states and other buttons

buttons.jpg
 

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.

 
colors.jpg
 
blue.jpg

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.

Hi-mid-lo.jpg
 
other color.jpg
 

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.

website.jpg
 

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.

OVER A DECADE OF MULTI—DISCIPLINARY DESIGN EXPERIENCE COLLABORATING TO MAKE BETTER PRODUCTS, CONTENT AND BRANDS. ──────── LET'S CONNECT ────────OVER A DECADE OF MULTI—DISCIPLINARY DESIGN EXPERIENCE COLLABORATING TO MAKE BETTER PRODUCTS, CONTENT AND BRANDS. ──────── LET'S CONNECT ────────
L