OVERVIEW
The Cox Automotive Mobility web app equips dealerships, OEMs, and fleets to explore new opportunities in car sharing, online purchase, fleet management, and on-demand access.

The feature-heavy app serves a variety of users from mid and heavy-duty fleets to rental and loaner fleets at dealerships.

ROLE
Research and testing, visual design, user experience

CONTENTS
Design tenets
What does the app do
Exploring hierarchy
Browser sizing
Components and patterns

The app had become a glut of features added over time with little intention so we identified a few fundamental principles to inform the design going forward.

1. Group like content

2. Show most important data at-a-glance

3. Fewer clicks to do a job

4. Make it self-serve (the early app needed highly trained users due to an overly complex UI)

With our tenets in mind, we began documenting our existing features plus any new ideas. Working with our customers, we grouped like features into sections. In those sections, we again grouped like features and categorized those features by importance and frequency of use.

Features ranked by need and frequency of use means we can start exploring hierarchy. Figure 2 (wireframe) and Figure 3 (visual design) show the redesign of the Vehicle Summary page in the app using hierarchy.

1. Top-level data makes better use of screen space with a horizontal cascade.

2. Feature menu released from the More menu (…) and placed closer to the content it controls.

3. Hierarchy allows more important data to rise to the top of the card stack while allowing additional info above the fold.

Insight: Users often specifically navigate to the Vehicle Summary page (Figure 3) after learning of an issue (DTC or alert) via email (contextual lead-in). The juxtaposition of the alerts and map allows the user to get an idea of what, where, and how to resolve any issue.

During our research, we learned our users work a system called “swivel chair”, meaning the work they do exists across many digital tools⎼accomplish a task then spin around to another system to accomplish then next. Even if a user is working on a desktop or laptop-size screen, they will most likely squeeze their windows to fit multiple.

For the feature tabs that extend off the screen, we placed tabs that would most likely be used on a small screen as the first options so as to not hide the most likely tabs. See Figure 4.

Credits: Thumbnail image by Aleksey Zatevahin