Design Scoping & Decision Articulation: Car Rental Dashboard UI

Project Summary

Project Background

It’s a design test I did for a consulting agency.

I didn’t make the cut nor chance to articulate my design decision, so in this project I try to share my train of thoughts of how I ended up with the final output.

In this project scenario, I act as a designer in a consulting agency who received a brief from a client, a car rental company.

Project Scope

• Scoping the design based on the brief
• Designing the UI
• Articulating the design decision

Design Brief Summary

Problem Statement

How might we create a homepage that is digestible at a glance and visually captivating for the users?

Functionalities

The dashboard will be divided into 4 sections:

• Maps
• Statistics
• Orders
• Schedule

Wireframe

In the brief, it’s stated that the company has done user research and gathered their user feedbacks.

Based on those data, their team comes up with this wireframe:

Full design brief can be accessed here: https://docs.google.com/document/d/1GkDF-3ms-iptiq9branlyOPwD-f3NmKBiZT2hrQNuhw/edit?usp=sharing

Scope Breakdown

Before I started executing the brief, I did a design scoping based on it. On this scoping session, I identify what components could be kept as is, added, or removed altogether.

The full design scoping documentation can be accessed here: https://docs.google.com/spreadsheets/d/1aNy91rmARBcroAZDa-BBvgwqWbdTamRPaB-hOc1ieqs/edit?usp=sharing

Design Decision Articulation

Here are some considerations I make when designing the dashboard UI.

Car Information Pop Up

On the Map’s pop-up, I kept how the information are shown as is (icon + data format) except for the due date because icon alone couldn’t tell what does it mean in a glimpse, (is it start date, due date, or something).

With the information spelled out, the Admins don’t always needs to remember what that icon signifies. Hopefully reducing their cognitive load.

Other information (customer name and phone number) could still be signified by the icons because, for the Admins, the context is quite clear that the contacts' information are customers’.

Statistics Cards

The company’s performance metrics in a selected period of time are shown on these cards.

Here are some design considerations regarding this section:

• The “+” symbol is added to emphasize that the nominal values shown are indicating the change in value.
• The cards’ color scheme is set into 2 different colors (green and red) to emphasize that the metric shown in green is better the more it increases, and the metric shown in red is better the less it increases.
• The percentage value indicator is removed because it would be misleading instead of helpful. This can be proven by these cases:
• When the metrics value is “0” at the start of the time frame.
• When the nominal value is increasing linearly, the percentage value will decrease exponentially over time.

Schedule Timeline Toggles

On the brief, the behavior of the timeline related to the timeline view is like this:

It’s quite unintuitive because more popular services like Google Calendar, Airtable (timeline view), etc. adopting these following behaviors.

Therefore, I made some changes accordingly in hope that the mental model needed to navigate this function is similar to more popular services out there, hence reducing the cognitive load.

Fleets Live Statuses

This function is not stated on the brief, but I add this to help the Admin know how many fleets are currently available heuristically.