Implementing a filter for Grocery vs. Third-Party products
Date 02/07/2023
Project brief
Customers were having difficulty finding grocery items in their search results due to the amount of Marketplace products on the page. The team decided to design a filter or toggle that users could select to filter out Marketplace products.
My role on the project :
As a part of the helios team at Loblaws digital . I worked in the Front-End Platform team which is one of 6 domains in the new platform Product/Tech org. The purpose of the front-end domain is to build flexible components that can be utilized for multiple use cases across all platforms and lines of business. As a designer on this team I worked closely with design teammates, product managers and developers.
My Responsibilities as a (Associate Product Designer ) on the team:
UI/UX
Prototyping
Interaction
Design Research
User Testing
Timeline:
2 weeks
Team Members
Myself (Associate Product Designer )
Tara Cadewell ( Senior Product Designer )
Boris Yu ( Senior Product Designer )
Eve Cuthbertson (Senior Design Researcher)
Tools:
Figma
Coda
UX playbook
User test #1
Challenge
Approach:
The team decided to user test our design for the Marketplace Toggle.
The design for Marketplace Toggle was shaped by double diamond method
How might we simplify the ecommere experience for Marketplace Toggle
We started looking into different labels for the filter and wanted to make sure the filter is easy to understand for the users and satisfy business stakeholders.
We ran a quick survey and received quite conclusive results. We included an open-ended response with our proposed options.
Test Results:
Sold By Loblaws was the preferred label.
The open-ended answers showed that it was very clear people understood the filter concept, and leaned towards language they'd seen at other retailers.
20/30 participants selected "Sold by Loblaws" from the list we provided, and 8/30 participants suggested something similar to "Sold by Loblaws" from a description of the filter
Open-ended responses:
User test # 2
After reviewing user interviews for the first testing , we uncovered
- majority of user understood the new wording “sold by loblaws”
- people liked the connection to loblaws brand
Although our design met users' needs , unfortunately the results did not meet the stakeholders and business needs.
So we regrouped and planned out our ideas for the 2nd marketplace toggle test.
We decided as a team what questions we wanted to ask in the second test , so we can target the right users.
We took stakeholders feedback into consideration and came up with a filter option that worked for our 25nd test
We decided to go with a filter label “Sold by PC Express”.
We created the prototype to do testing with a filter labeled Sold by PC Express to see if the label communicates the purpose of the“Sold by PC Express”
In the Playbook UX we launched an unmoderated usability test with our prototype.
Test Results
After reviewing the test results, I created an Affinity map to group together user’s feedback.
Overall, the “Sold by PC Express” filter label was generally understood but we could explore a label that has less room for misinterpretation (i.e. “Sold In Store”). There is a risk that new customers will not understand what the “Sold by PC Express” label means without explanation.
4/5 participants understand the “Sold by PC Express” filter
On a scale of 1-5 (5 being easy to understand)
40% rated 5/5
40% rated 4/5
1/5 participants were slightly confused by the “Sold by PC Express” filter
On a scale of 1-5 (5 being easy to understand)
20% rated 3/5
2/5 participants looked for filter wording with “store” in it on first try
“PC Express is not quite obvious wording for people to know that this is in store pick up items, a little bit ambiguous to people who don’t know what that is.” — Muhammad
Based on users written responses in the test results, we received some re-design suggestions to test in the near future.
One participant clicked “Our Brands” because they thought that that would encompass Loblaws. Interesting… do we think this would also filter out marketplace products? (Exception of Loblaws products sold through Marketplace).
One Participant first clicked to filter by "Sellers" (which is interesting, would PC Express be in there?), then they clicked "Our Brands" and finally clicked "Sold by PC Express".
Suggestion to add a tool tip icon to the filter button filter placement (to explain what the filter does… but wouldn’t it be great if we could align on a label that people understand immediately?)
40% of users found sold by PC Express very easy to understand based on the results of the questionnaire in Ux playbook
The results showed 2 key insights
- customers understand the purpose of the marketplace filter.
-user can see the difference between sold by Loblaws and market place when shopping
In conclusion, stakeholders were satisfied with the test results for “Sold by PC Express”.
Summary
While conducting user research I learned user actions will sometimes differ from the test results.
Always re-read through the data to confirm that the results make sense for the users and business needs at the same time.
Summarize test results to a shorter format when presenting.
Only present the most valuable and impactful information, this makes it easier to digest information vs an overly detailed story.
Always start with why? Why are you testing, what the test is and the test results.
Lastly, always be prepared for any unexpected presentations to review the results with the Design Team.
