Toolbar redesign to help engineers manage data more efficiently and accurately
Time
10 weeks, 2022
My role
UX/UI Designer
UX Researcher
Team
Chris W - Project Manager
Guannan L - UX Designer/Researcher
Jonathan B - Business Strategy
Ryan D, Kaustubh G - Developers
Jacob A, Thomas M - Engineers & Data Analysts

Overview

In 2022, I joined a drone engineering start-up as a sole UX designer to redesign their SaaS platform, elevateFM, where drone engineers use different tools to annotate map for clients.
The goal of this project is to solve toolbar problems that cause the low efficiency of drawing data. I conducted a series of research to identify 2 key toolbar issues. Then I grouped tools and redesigned the visual hierarchy that aligns the engineer’s actual mental models to increase engineers’ map markup efficiency by 37%.
Problem
The current toolbar is cluttered, making it difficult for engineers to select the right tool to draw markup data.
An engineer drawing data on the old platform

Solution Overview

Before
Navbar has confusing information architecture:
  • Tools were mixed on Nav bar
  • Multiple states at the same time
Toolbar has less intuitive visual hierarchy:
  • No label for recognition
  • Not organized
  • Different visual style
  • Accessibility failure
After
New navbar and toolbar
head-side-brain
Reorganized IA for Engineers
The IA of tools was organized in a way that aligns engineer’s mental models and familiarity.
Intuitive Visual Hierarchy
The hierarchy and layout are redesigned with common patterns. Each tool is easier to recognize.
Efficiency through Accessibility
Keyboard shortcuts for further productivity. Target size, color contrast all meet AAA level.
Customized Icons for Unique Domains
Due to our unique engineering domain, I designed custom visual symbols for each tool to minimize the cognitive load on engineers.

Research

Identified 2 key defects.
By heuristic evaluation (discovery), observation on 8 engineers (validation), and prioritization (alignment with stakeholders), I identified the 2 main defects that caused low engineering efficiency.
1. Easily making mistakes
50% of engineers accidentally clicked the wrong buttons, because some tools were mixed on the Nav bar and can be activated at the same time, which doesn't fit user mental models.
2. Selecting tools slowly
Tools were not organized and labeled, which made 87.5% of engineers hovered over icons waiting for tooltips everytime, or selected the wrong tools and then bounced to different ones.
Insight - 2 issues
Problems that caused low engineering efficiency:
1. Confusing information architecture (IA)
2. Less intuitive visual hierarchy

Design Goal

After sharing my findings with the stakeholders,  we decided to address the toolbar issue as a priority and set up the goals. At the end, we want to help engineers with those goals:
Engineers find the right tools faster.
Engineers make less mistakes.
We also defined 3 success metrics:
1. Fit engineer mental models
2. Easier recognition
3. Accessibility (never been considered in the previous platform)

Solving Issue 1: Confusing IA

Method
Group tools and rank them in drop-down menus for engineers to make a faster decision.
Which grouping method better fits engineers’ mental models?
Grouping tools by data type was a big challenge against the existing grouping method. So I needed more research to make sure we are on the right track.
Interview - Discovered that engineers think about data type first and group data files by data type.
By 4 interviews with engineers, I found they categorize original data files by data type and then draw them on the platform. So there is a sequence when they think about the data.
Card sorting - Validated that grouping tools by data type fits engineers’ mental models.
Interviews with all engineers would be time-consuming, so I used card sorting to verify that grouping tools by data type to fit their mental models.
Ranking survey - Set default buttons and order of other buttons.
I made a survey of 12 engineers and collected the frequency of use of each tool (by grade).

Initial Toolbar Solution

Tool groups with dropdown menus

Group Critique & Iteration

Through usability testing, I found most senior engineers think it is less easy to read the tool labels. So I did iteration to balance learnability with productivity and efficiency for both junior engineers and senior engineers.
Tool labels with repeated technical writing were more difficult to read, so I moved the verb from labels to sub-columns to keep labels concise.

Accessibility

Design for users with motor and visual impairments.
Keyboard shortcuts benefit both users with motor disabilities and expert engineers who use shortcuts for efficiency.

Iterated Toolbar Solution

Toolbar and tool dropdown menus

Solving Visual Hierarchy Issue

Method
Redesign the layout and placement of the toolbar with common patterns to help engineers avoid making mistakes.
Old platform
Different function contents were merged into one place which is less intuitive.
Constrain
Competitive analysis is not accurate.
Competitive analysis could help find the common pattern of UI and layout, but there is limited access to competitive products.
How to overcome it?
Analyzed other data analysis products that engineers were familiar with to reduce the learning curve.
By analyzing the engineer user journey and products they use daily, I found a common layout pattern that best fits their mental model.
Wireframes
Final Design

Usability Testing

I created functional prototypes and moderated usability sessions with 6 engineers, all of them passed the testing sessions.
100%
of participants completed the 5 tasks successfully
91.5 - Excellent
Average System Usability Scale Score

Impact

37%+
faster engineers drawing data
16%+
error rate reduction of engineers drawing data
86%
satisfaction score
1st
accessibility guidelines for the company

Lessons Learned

Be adaptive to unique needs and unexpected changes.
Every industry is unique so we might meet some unexpected situations. I always keep responsive to new information, ask more questions, do more research, and stay empathetic to adjust strategies. In this case, I used observation on engineer's daily workflow to find many opportunities to improve the platform!
Use shared language to get all stakeholders on the same page.
We want to make sure that all stakeholders have a clear shared understanding of the domain and problem before we get into the solution exploration space. We we want to use shared plain language and result-driven presentations to communicate effectively.
Keep familiarity and efficiency at the same time.
Users could be familiar with an old product and still use it even if it is not efficient and satisfying. When I was redesigning, I carried over the interface and interaction that engineers were familiar with into the new design. This reduced their learning curve and ensured user familiarity and efficiency at the same time.
Back to Top
Check out other interesting projects: