Daniel Brightman

UX/UI Designer

YAK MAT Mobile App

for YAK ACCESS

  • Lead UX/UI Design
  • Dauntless

Overview

YAK ACCESS supplies complete access matting solutions for various types of construction projects throughout North America. Dauntless, the digital agency I was working for, was contracted to help automate their systems related to large and frequent deliveries of matting to often remote locations.

I was an integral part of the team that designed two entirely new apps for YAK ACCESS — one, YAK MAT, is a customer facing app for clients to manage their project deliveries and track individual loads, YAK DRIVER, a mobile app for sub-contracted drivers to manage their loads, navigate to their destinations, and update on problems and estimated arrival times.

YAK ACCESS

YAK ACCESS has in place a paper-based system for organising and tracking mat deliveries and pickups. This requires frequent phone calls between the client, the drivers and YAK ACCESS to track loads. Customers do not reliably know how many and what types of mats they are receiving on a daily basis. The challenge was to develop a mobile app for use by the customer that allowed them to track the progress of their project, quantity, type and status of mat deliveries and improve communications about specific loads.

As part of the design team responsible for the experience and design of the app, I led the UX/UI work, producing all major deliverables e.g. wireframes, UI designs and prototypes for client presentations and production.

Research and Discovery

I carried out a competitor analysis, reporting on what digital solutions similar companies offer. There were no direct competitors that offered a customer app, so I had to look at companies in different industries that did. I reviewed design and content that was done well, and features that could be included in our app.

As a team, we used the competitor analysis to compile a features and functionality list. These features and functions were then prioritised using the MoSCoW methodology into what would be included in release one (MVP) and subsequent releases.

The biggest challenge of the MVP would be the project management feature. How to display all the loads that are part of a project, when and what is being delivered and to where. Volume here was the main problem; a project could contain tens of thousands of mats, but a truck can only hold a maximum of 18, and a site could potentially only handle 30-40 loads per day. Deliveries could go on for many months.

To overcome this challenge, I broke it down into manageable chunks, creating sections to view specific aspects of the project; Overview, Map, Locations and Loads.

The Overview, displays the important top level information of the project for easy reference, purchase order numbers, key dates, a table displaying the number and type of mats; ordered, delivered, returned and active.

Map, showing the project drop off locations and any deliveries that are en-route.

Locations, provides overview information specific to each of the drop-off locations associated with the project.

Loads, showing how many deliveries are being made ‘today’, tomorrow and the day after. These are then broken down further into Delivered, In Transit and Scheduled. Then each categorised into AM and PM delivery slots. From here a single load’s details can be viewed. With the client’s feedback I decided to make only three days-worth of deliveries available to the user. This cut down on information overload, not overwhelming the user with hundreds of days of deliveries. It was also considered that anything beyond three days wasn’t going to be relevant to the immediate needs of the project/user.

Design

I created wireframes for the app based on user flows. Using InVision I then created a working prototype to present to the client. This helped the client visualise the app and informed decision makers about proposed features and content. The wireframes were updated iteratively following client feedback, from meetings and comments on the prototype.

After the wireframes were signed off, working in two week sprints alongside the development company based in Portugal I designed the user interface. Using Adobe XD I produced UI designs for each of the user stories in the backlog. I drew icons in Adobe Illustrator. Again, I uploaded designs to InVision and created a working prototype for client review, I also annotated the prototype with technical notes, as a guide for the developers on how elements interact and animate, for example: 'notification will animate in from the bottom, remain for ten seconds then animate off screen.'

When the screens were ready for production, I uploaded them into Zeplin for handover to the developer team. From these I also created a UI board/guidelines (desgin system) explaining the rules and design decisions of the app providing the building blocks for the developers Guidelines include specific instructions for interface elements such as: colour palette, typefaces used and sizes, and the amount of padding required around elements.

Lessons learned

The development of the app is still ongoing.

After the wireframes and the UI designs were produced it would have been good to get the prototypes in front of some real users for user testing, not just the client. This could have provided valuable feedback including:

  • Can the user carry out the tasks outlined by the app?
  • Are there any problems/pain points?
  • Which features are useful?
  • Does the user need to see more or less information?

Due to time constraints imposed by the client this was step was missed, which means the first piece of user testing will be when the MVP is released in the near future.