Product Finder
Improving usability and usefulness of the CHOICE product finder tool
CHOICE is a member funded, not for profit, consumer advocacy group in Australia that leads the way in helping consumers to choose the best products and services.
They have online reviews of over 5000 tested products and services. The results of these tests are made available through the CHOICE website on a tool known as Product Finder. Users have the ability to filter through product reviews to help them in their buying decisions.
My role
Product/Interaction Designer
Skills
Usability testing
Visual design
Art direction
Illustration
Timeline
November 2018
PROBLEM
Finding products on mobile is difficult
CHOICE’s Product Finder had significant usability issues particularly for its mobile users. As the purpose of Product Finder is to help consumers find products that are best for their needs, the usability challenges impeded users from sourcing useful information. As CHOICE had undergone a rebrand, Product Finder was also required to reflect new brand styles.
The product finder tool before our team updated it
PROCESS
Lay of the land
There has been repeat negative feedback from users about the difficulties in using Product Finder on mobile, with rising bounce rates from Product Finder pages.
Our wall with my sketches to inspire and visualise our teams objectives
Our goals
We used an opportunity canvas to frame the business problems, user problems and decide on the scope and metrics. The insights from these workshops allowed the Product Manager to define the teams vision and goals.
- Improve the usability and usefulness of our Product Finder, focussing on a mobile first, device inclusive experience.
- Apply new brand
- Prepare the tool for future business initiatives and other innovation activities
Usability audit
In order to decide what areas of Product Finder needed improving, I conducted a usability audit focussed on the mobile context, to understand the pain points, which I then shared and presented to the team.
With a long laundry list of improvements, we needed to unpack the findings and determine the priorities to get the most value out of the improvements we identified. We collaborated over an ICE (Impact, Confidence, Ease) scoring sheet and assessed what could be kept in the backlog and what activities we wanted to achieve in the first release.
The usability audit deck I presented to my team showing all found usability issues with product finder for desktop and mobile.
UI Design
Product finder tool is responsive and scales across mobile, tablet and desktop viewpoints
Brand redesign
By improving the features of the Product Finder, I also needed to update the styles and incorporate the new brand. This involved looking at form control styles, form patterns and layout options. Inclusivity is something that CHOICE values highly and accessibility to the website is a priority. In order for the tool to be WCAG 2.0 AA compliant, each style and layout was guided by accessibility principles.
The old brand elements that needed a redesign
UI exploration
When we scored the various usability issues, our team realised we had to keep the structural integrity of the page in order to build fast and lean. Exploring the design of the user interface also meant I needed to stay on a lean course, but we could still get the usability improvements we prioritised through this cosmetic facelift.
Slider interaction design iterations
Atomic design
Before I designed “molecules”, I had to break things down into smaller “atomic” parts – deciding on a typographic hierarchy and how colours of the brand were represented. Between myself and another Interaction Designer, we decided to use CHOICE blue to indicate an interactive element. JOIN green was a requirement from Marketing, which we used for all instances of joining to become a CHOICE member.
Translating new brand styles for digital
Molecule design
When the foundational “atoms” were established, I went ahead and designed the molecules. In particular the interactive states of the filter as this was what the team agreed as the most value in improving. Also as part of rebranding, page fonts and colours, including the product cards needed to be adjusted.
Rolling out the new styles into functional features of the tool
The filter no longer takes up the first few scrolls of the page and is hidden in the button. This means product cards are quicker to get to. Product cards are also easier to scan with changes to typeface and button colours.
The filter now has larger tap targets so checkboxes and inputs can be tapped and selected with ease on smartphone devices.
With over 200 product finders and a large team of content producers who manage the content within product finder pages, it was important for us to have a testing plan that would cause the least amount of disruption. We rolled out a few categories at a time, quality checking together as a team.
TAKEAWAYS
What I learnt from this project
Design in agile
Design work is traditionally dealt with in a waterfall manner, so it was challenging to implement design in an agile way. There was a balance that I needed to maintain, to work ahead but not too far ahead and to regulate feedback loops.
Keep it lean, keep them keen
Agile is fast paced and as the Product Owner had a clear cut roadmap, keeping lean with the design was key to meeting the deadline. Often times design can be the first to dilute and de-scope because it is considered less effort and time. I’ve learnt to know when to make the compromises, but also help to maintain quality by offering other solutions.
Design + Code relationship
Regular catch ups and getting the opinions of the Developer(s) is important in building a Designers relationship with the Development teams. A shared mindset early on in the piece can really help to prevent designing and building unnecessary components.
SPECIAL THANKS
Product manager Chris Coward
UX Adam Barnwell
Digital content specialist Jason Treuen and Jen Paterson
Front-end developer Matthew Barry
Back-end developer Jie Chen
Scrum Master/Agile Coach Michelle Walker