2 months | 2023 | 1 UX Designer | 1 Project Manager | 1 CTO
The project
The client, CURA, is a freight logistics management provider. They partnered with an agency over 3 years to develop a web app to manage client relationships and freight tracking.
Although the foundational code for the app is sound, they wanted a visual update to give the app a more modern look and feel so it can eventually be sold Whitelabel to other providers in their industry.
The product
With my team’s support, I introduced a sleek and tidy interface that solved the usability problems users currently face in the app and set the foundation for growth.
The new design system
improved previously hard-to-find features
standardized navigation, color and typography, and
set the dev team up to build atomic design components
boosted depleted morale after a long stretch of disappointment
Discovery research
Brokers dreaded using the CURA app. We needed a serious refresh to improve negative sentiment.
33% of this project was discovery research. The CURA team felt that the previous agency didn’t understand their business and wanted to dedicate enough time for me to learn as much as I could about the industry.
Key learnings
Brokers currently use a Google spreadsheet to manage the movement of freight
Documentation is handled via phone and e-mail, personal relationships are key
International freight is tracked using dozens of websites, and brokers do a lot of guesswork throughout the day to find it
Brokers are resistant (sick of) to scrolling and want to see all details on one screen
The current app “looks old”, has unclear interactions, sloppy alignment, and no visual consistency
Information Architecture
Navigation
To make features easy to find, I introduced structure by standardizing the navigation.
Previously, the nested navigation had redundant items, missing action icons, and unclear design treatments like underlined links.
Learnings from an audit and similar projects led me to design a single-level navigation rail for pages and an action row header that eliminated a tab-bar.
Wireframes
Round 1
My first approach was to design the interface like a scrollable document. In the discovery interviews, the CURA brokers mentioned how much they like “tabbing” in the current app. I took this to mean using keyboard navigation to tab through fields and logically assumed this would increase efficiency.
I was wrong. They had meant they liked the tabbed interface in the current app, so I had them demonstrate before moving into round 2 so we knew we were on the same page.
Round 2
Brokers aren’t accustomed to using keyboard navigation; rather than try to change user behavior and convince them there could be a faster way to work, I went back to the 2-column layout.
I was pushed to give more attention to sizing and whitespace and used containers to group items. The result is a refreshed take on the 2-column layout with a header row for action buttons, search, and progress in the app.
Visual design
The cyan color used in CURA’s logo is the accent color in the current app. Although it does capture attention, it does lead to contrast issues as the background for buttons with white text and in a small font size against the black background.
Cyan is a difficult color to use with small font sizes. With standardized typography, a deeper blue and a couple of new colors to the palette have a more focused and calming effect. It also became more accessible with higher foreground and background contrast.
Final thoughts
The goal of this project was to show that our agency could improve the visual design of a single flow, within the time and budget scoped. CURA has hired the team to redesign the remaining screens using atomic design components.