Trebuchet Dashboard

Trebuchet Dashboard

Role UX/UI Designer

Tools Sketch, Zeplin & Invision

Platform Desktop & Mobile

Brief

The engineer & qa team use the CNS dashboard to deploy & test transactional emails. I was asked to improve the visual design and functionality.

Process

Empathize

Identify the pain points

How can we improve
the functionality of the dashboard?

Define

Create Visual Hierarchy

Research and look at UI patterns so that
it feels intuitive.

Refine

Start out with low-fi wireframes to figure out the userflow

Share with the team and get recommendations on what to improve

Repeat...

Build

Once the userflow is fleshed out. Create hi-fi
wireframes and prototype.

Work with dev, using Zeplin to hand off files.

Identify: Pain Points

Not User Friendly
At first glance it is hard to know where to start because of the lack of hierarchy and overall feels really busy.
Unclear Functionality
It is unclear what happens once the user clicks on one of the CTA’s on the top right ( Do all the content in the page update? )
Information Hard to Scan
The graph is hard to read and the information is hard to scan in the email section since there are a lot of columns.

Content

How can we improve the layout so that it feels intuitive?
How can we make the information easier to digest so that it can be shared externally to other teams?
What elements can we refine and what can we can rid of?

With those questions in mind, I first started a rough sketch to get an idea
of the user flow.

Sketch to Low Fidelity Wireframes

After sketching, and getting a better understanding of what the initial

layout will look like. I then created low fidelity wireframes on Sketch.

This helps iron out some details that felt like good ideas at first and gives me

an idea of what to improve.

Old Layout: Statistics

The old statistics page had of elements competing with each other ( Big CTA's & Tabs). Overall it wasn't clear what action the user needs to take and the UI elements felt clunky.

Improvements

Navigation
Left hand nav so User can view stats and email
Dropdown for Banners
Quickly access the different companies via dropdown
Filters
Users can filter by Environment, Email Type and Date Range
Hierarchy
Improved the layout by creating hierarchy through typography and UI elements. Labeling each section so it is easier to digest.

New Layout : Statistics

Old Layout: Email

The Emails sent section was hard to scan, there were a lot of columns and it wasn't clear if the information was important.
The CTA treatment felt repetitive and some of the buttons didn't actually work.

New Layout

Improvements

Tab Navigation
By breaking up the emails by status into tabs, it is easier for the user. This also works well on mobile view.
Consolidating Columns
The old layout had 11 columns , the new layout 6 columns! which gives the page a lot more breathing room and is easier on the eyes.
User Friendly
Updating the tables by adding icons for actions and adding status colors.