Tracking App

Untitled 2.001.png

Client: NDA signed with Client
Role: User Interface & Digital Design

The client came to us with high fidelity wireframes of a tracking app for airplanes hoping for a quick turnaround into a functioning app within weeks. We were provided with brand guideline meant for print, which we had to work with to develop a short digital design language system in order to move forward.The challenges for this app were in the

small things that make large impact, like how much content we should be fitting into one page versus what amount of content is legible on one page. Prototypes for the app was presented to the company, and now is being developed to be used internally.

*only limited screens and process are shown due to client NDA*

 
 

Initial Wireframes from the Client
We received high fidelity wireframes from our client. We then worked with them to develop another version of the wireframes that were more nuanced and based on the user experience. We explored different flows and user journeys to improve the app further. This is also the phase where we began thinking about the UI in terms of hierarchy in type and colour.

 
Untitled 2.002.jpeg
 

Final Product
We developed a visual language, a sort of mini design language system for the app. Our client was working with multiple brand identities, all of which were based in print. So we had to test many different visual languages in order to agree on one which looked clean and delivered the information, and represented the brand. One which had room to grow but also was defined for others.

 
Untitled 2.003.jpeg

Colour: We had to limit our usage of color. The app is designed for folks who are used to seeing their information on interfaces that are primarily black and white so the information could be clear. So we took that limited palette as an inspiration to build our colour palette. Colour was only to be used when alerting our user, in all other cases it was kept to the brand navy blue and white.

Untitled 2.006.jpeg

Visualizations: For any instance were we had to use a visualization to convey information, it had to
be highly functional. Our users are in a stressful environment all day, so we had to make sure any time they were confronted with information, it was worth their time. There was no room for decorative graphics.

Untitled 2.005.jpeg

Typography: The biggest challenge for this app was information hierarchy. Every screen was home to an intense amount of information that absolutely had to be together in order for the user to find the app useful. For screens like this, the smallest changes were the most important. Increasing type size by a few point, or increasing line height is all it took to make the app more legible, and less cluttered and overwhelming. We constantly asked ourselves through our user journeys “what do we need to know when we enter this page?”

Untitled 2.004.jpeg

The Flow: Although we received high fidelity wireframes from the start we had to push back against our client and question the intention behind features. Often features were hidden and more complicated to the user than it should have been. So we worked together to develop flows were things were accessible.