B2C Product Page Research & Design
Overview
Note: Some info and research has been omitted for privacy.
B2C eComm photography and videography kit
The product page is core to the business, MPB gets approximately 26,000-27,000 product views everyday. So a fractional increase in conversion can be a huge revenue boost.
I had previously performed multiple usability tests on the product page and collated the insights into a report which informed the design improvements to the page.
Role:
Leading User Research & Design
Collaborated with:
• Lead Product Owner
• Design System Designer
• FE Developers
Tools & Methodologies:
- Google Optimize CRO (Conversion Rate Optimisation)
- In-person Usability testing
- Maze (remote testing)
- Service Blueprint
- Thematic Analysis of results
- Journey mapping (Whiteboarding/Post-its)
- Figjam wireframe
- Figma Prototype
Problem scope
Research insights (Just key highlights)
- Lack of context around MPB's definition of Condition Gradings.
- No 'compare product' features
- Image carousel usability
- Clarity of MPB USPs (Unique selling points)
- Visibility of trading kit in
UX Research
Process
1. Thematic analysis of 1 year's worth of research, including round of:
• Remote user testing
• In-person Usability testing
• Maze (remote testing)
• Fullstory (behavioural analysis tool)
• Service Design Blueprint findings
2. Journey mapping hypotheses (Whiteboarding Post-its)
3. UI for usability tests
4. CRO testing hypotheses (Google Optimize)
5. Update & Implement Designs into platform
6. Validity Tests (In-person usability tests)
User testing - Logging observations
After interviews are conducted, I would log them into my notion database where I weigh impact and frequency to determine a priority.
Workshop
Along with the relevant Product Owner, problem areas were mapped onto a Figjam board, potential solutions are proposed to overcome the higher priority issues.
A workshop is then conducted to consider feasibility, effects on other departments and a phasing of concepts (so as not to overwhelm the engineering department).
Design and usability test
Presenting usability results to Stakeholders
a). Initially findings were presented to the Design team, Head of Product and Product Owner/s related to the area of research.
During this, 'next steps' suggestions were presented and a plan of action is enacted.
b). Once designs are refined, a deck is built highlighting research-drivers to present to C-Suite stakeholders before moving to development.
User Testing (Figma + Maze)
- Remote user tests were built in Figma and exported into Maze.
- In-person user tests stayed in Figma and performed on relevant devices.
Design
Phased approach:
This project was huge, releasing all the changes at once would mean we miss what changes impacted the most. We decided phasing the integrations would help us learn what had the greatest impacts so we can apply those learnings to future challenges.
Development
I worked closely with Frontend developers during the implementation of many parts of the design to ensure the vision comes to life. I set up regular checkins to problem solve and consider scenarios that had been overlooked.
Considerations include:
- CLS (Cumulative Layout Shift) to improve SEO performance of pages.
- Skeleton frames.
- Interaction design e.g. animation.
- Design System concentric.
- Unhappy path (non standard journey mapping).
