Project StatementThis piece is a zoomed-in, detailed look at the build of one component (filters) that was part of a greater effort in establishing a design system and component library to resolve inconsistencies in design across business verticals at Nerdwallet and to enable teams to quickly launch marketplaces while offering a concise browsing experience for users.
❋ RoleUX Designer & Researcher: gathering data points across verticals, investigating user pain points and needs, wireframing, concepting, facilitating design sprint workshops, advocating and nurturing stakeholder relationships.
❋ Project Goals• Accommodate both current on-boarding & rate table pattern and future iterations
• Create a template for filters & sort that can be used across marketplaces
• Drive consensus around the new template & interaction patterns
• Define a mental model for structuring search, sorting, & filtering
❋ Success MetricFor this component to be adopted across each vertical, the filters redesign needed to break even or improve on current filter engagement rates. With the larger component library project, success measures also included: increased trust, usability, and consistency across marketplaces.
Project Plan
Working with a Product Manager and Product Designers from other verticals, we agreed on a plan that would entail two weeks of Research & Exploration. This phase would include competitive research, brainstorming and sketching, prototyping 3 concepts, and creating a test plan for usability testing. The following two weeks would focus on Prototyping and Design. This phase would include testing two prototypes for usability, iteration, and retesting these prototypes, sharing findings with the team, deciding on one direction, and final design.
User Testing
In the testing phase, our main goal was to gather insight on usability & discoverability of desktop & mobile filters by designing remote task-oriented sessions utilizing usertesting.com. I designed two scenario, task-oriented tests for the two mobile and two desktop designs shown below.
Results & Final Designs
• Overall pattern (core, main, more) works without issue
• Overall, the dropdown “thin line” UI element confused users and seemed like an input field. Explore more explicit affordances.
• Meet conventional expectations
• Users prefer “apply” buttons for confirmation when using filters
• On desktop, users expect “sort” to be called out explicitly in the header area
• “Filters” may be clearer than “Refine” as the initial label
• Speak in human terms: Users recognize city names, not zip codes
• Give clear feedback when results are sorted (animation, colored columns, etc)
Style Guide
The following Style Guide was created as a resource for the component library team (designers and engineers) to implement the components across Nerdwallet’s desktop and mobile experience. This Style Guide was also used in stakeholder conversations to share/advocate for the wide use of the component and adherence to tested and defined systems.
Adoption & Results
For the filter component to get adopted by the verticals (mortgage, insurance, small business, and banking), this redesign needed to break even or improve on filter engagement rates. After measuring engagement rates before and after implementation, the team saw no to minimal change in most verticals and 8% increase in engagement on the Banking vertical desktop experience.
