Empathizing With the User
Quantitative Data
Competetive Audit
Personas
User Interviews
Starting With Quantitative Data
I first looked into improving the experience on this page when looking at click data. Clicks on left-rail search filters were very low and limited to keyword, price, mileage, make, and model. Clicks on the large featured ad were almost non-existent. I made a research plan to find out why.
User Personas
Understanding who is using the search results page was key for understanding how to meet user needs. Based on previous customer interviews and data collected from around our organization, I was able to define 4 distinct user personas.
Competetive Audit
I learned through a competitive audit that although the page's feature set was consistent with experiences on competitor sites, some aspects of the page layout broke convention. The most obvious of these aspects being the large featured ad pushing listings below the fold, and grouping of links occupying the same level of hierarchy.
User Interviews
Moderated usability sessions were conducted with 8 users that represented the 2 buying/browsing personas. Data from these interviews was analyzed and these seven insights were identified.
1. The large featured ad is not helpful or relevant
2. Search filters are confusing and hard to use
3. Users are unable to complete the sort listings task
4. Users prefer larger photos
5. Keyword search is the most used search method
6. Users contact sellers from detail pages, not the SRP
7. Users prefer infinite scroll and ignore pagination
Starting the Design
Ideation
Wireframing
Low-fidelity Prototype
Usability Study
Ideation
A team ideation session was held during which several ideas were quickly wireframed. The team chose the best direction to design and test. According to principles of agile development and design thinking, ideation is most successful when everyone on the team is involved.
Wireframing
Featured ads now occupy 1st position and are relevant to search
Prominent keyword searh field
Infinite scroll
Larger photos
Closable filters
Low-fidelity Prototype
I created a low-fidelity prototype using Adobe XD. The prototype was created quickly and included limited representations of product features. This allowed me to gather initial feedback to our idea before committing a lot of resources to building the page.
Round 1 Findings
1. Users want more listings per page
2. The "sort" menu is difficult to find
Round 2 Findings
1. Fixed to filters cover too much space on smaller screen sizes
2. Fav heart grouped with contact is confusing
Refining the Design
Mockups
High-fidelity Prototype
Accessibility Audit
Build, Test, Iterate
Mockups
User feedback showed that shoppers had a strong preference to see many listings together in one view without scrolling. We made the left hand rail hidable to accomodate another column of listings. Less frequently used filters are closed by default to visually simplify the UI.
High-fidelity Prototype
Accessibility Audit
1. All text meets WCAG contrast standards and size standards (4.5:1 text to background value ratio, sized at least 14pt for bold and 16pt for non bold text)
2. Tabbable focus states on all clickable page components including chips and contact buttons.
3. Facets with sliding selector bars also have corresponding input fields since sliders aren't usable through screen readers.
Impact
The new search results page was rolled out incrementally, starting at visibility for 1% of our users and slowly increasing visibility over a 2 month period. This gave me an opportunity to talk to users and customer service representatives about how successful the changes we made were.
I also sent surveys to our users to gauge sentiment about the significant changes we had made to this page. Comments were 75% positive.
Impressions for search results increased by 45%, most likely due to the infinite scroll feature that was introduced in the release.