Role: Lead UX Designer, UX Researcher
Process
October to December: research and synthesis
January to May: designing, prototyping, testing, iterating
May: finalized design system components
October to December: research and synthesis
January to May: designing, prototyping, testing, iterating
May: finalized design system components
Team
PM: Damien Plouzek
Engineering: Kristin Vaughn, Rob Wright, Liah Wallace, Jack Mueller
Additional support: Sierra Willenburg (UX), Christina Cuatto (PM), Christina Wong (UX Research)
PM: Damien Plouzek
Engineering: Kristin Vaughn, Rob Wright, Liah Wallace, Jack Mueller
Additional support: Sierra Willenburg (UX), Christina Cuatto (PM), Christina Wong (UX Research)
The main purpose of this project is to update Dealer Finder’s UI to accomodate for our new navigation container (shell nav). The shell nav contains a thin sidebar on the left, which is incompatible with the sidebar-heavy filtering in Dealer Finder. In my revamp, I moved the filtering to the top of the page instead.
Since this is an internal tool used by DealerOn employees across departments, I crafted a survey to understand how each respondent uses Dealer Finder. The six-question survey received 44 responses.
“This is what I call top tier research synthesis.”
I collected all responses and categorized them into groups such as team, usage, and feedback. Using my synthesis, I proposed a roadmap prioritized by feature and worked with Director of Product Christina Cuatto to finalize it.
Some features I suggested based on my research, such as copy text functionality, icon changes, and column renaming, are now live.
First drafts
Test Prototype
Task: Find all dealers with the make Ford who have Apex enabled.
This was actually the fourth prototype I created to test; the other tasks were too complicated for unfamiliar users.
“Feels easier to access.”
Prototype Testing results, 34 responses
Action items
↓
The filters need to take up less vertical space
↓
Any filters added via the “More Filters” button need to appear next to the “More Filters” button for organizational clarity
↓
Filter elements must all visually align in terms of height, etc. Design system needs updating
Tackling layout and alignment
Designing a new removable combo box
Front end software engineer Kristin Vaughn was concerned about the accessibility of the removable combo box. The x/close button was placed too close to the label. I worked with her to design a new, more accessible component for our design system.
The leftmost option is the original. The options next to it are newer iterations.
Here are the components we settled on. One is removable (for additional filters) and one is not (for default filters).
This is one of my many contributions to our design system.
Deliverables
Adding and removing columns
Rearranging columns
Exporting search results
Filtering by custom code
Copying text and opening links
Feedback
Takeaways
Taking a survey on how the current tool is used reveals problem areas and core user groups. You can return to those core user groups with further questions.
When making prototype tasks, choose a straightforward task that won’t frustrate users but will allow you to learn what you’re trying to learn. In the earlier drafts of my test prototype, the tasks I chose were too complex (ie: having testers find dealers in the Ford OEM required them to select “OEM” from “More Filters” and then choose “Ford,” instead of the most obvious process of choosing “Ford” from “Make.” Christina Cuatto asked, “what are we trying to learn from this?” which brought me back to our initial goal, which was to test how users felt about the layout change from sidebar to topbar, not if they knew they had to choose “OEM” from “More Filters” first.
Double check if components are accessible. My team has also recently had to increase the height of our interactive components (ie: buttons) from 36px to 44px in accordance with WCAG’s minimum target size guide.
Product roadmaps are a PM’s best friend.
As always, get feedback and iterate and get feedback and iterate.