Cheddar Web Platform MVP
Overview
Commbank x15 Ventures Cheddar is an ecommerce cashback and loyalty app for Gen-Z & Millennials. Cheddar was initially launched only as an iOS app. User and competitive research indicated that introducing a new web channel would allows users to both discover Cheddar’s deals, and increase the user activation and retention.
My contribution
Senior UX Designer (Design lead of Cheddar)
The team
2x Principal Engineers 1x Head of Product 1x Growth Marketing Manager
Year
2022
The tools
Miro Figma MS Powerpoint MS Teams Notion JIRA Untitled UI Chakra UI
The activities
Bet doc (product one-pager) Competitor research Conceptual mockups Internal stakeholder workshops User flows Low fidelity designs Shape-ups (PRDs) High fidelity design Scrum User Stories Web design system foundations
Challenge
Cheddar initially launched as an iOS App targeted at Gen-Z. Through user research and market insight we learned that while many users like to browse and discover deals on their mobile phones, they prefered to sign up and make purchases through their laptops.
We had limited engineering resources available to tackle this challenge, so we decided to build the web platform in iterated stages with each stage improving the product while solving a new business or user problem.
Approach
Problem exploration and solution iteration
We conducted qualitative user research on potential features to get feedback from users on their desire and expectations for a web platform. It became clear that most users expected a web platform as an essential part of the product.
The approach taken was to begin the process by drafting a hypothesis and shape-up bet canvas. That was reviewed by product, engineering and growth team members so that we could discuss the initial approach and solution.
Using our existing app as a starting point, I created initial user flows and low-fidelity designs for two different launch approaches: One designed to have an activation outcome on the first iteration, and another designed with an acquisition outcome on the first iteration. The product manager compared the approaches in a shape-up pitch.
To establish a strong foundation for the web platform, we agreed to build a web design system and component library. An off-the-shelf Figma design system and React UI component library to accelerate the go-to-market and create the foundations for a web design system. These were both customisable for the Cheddar UI.
There was a bottom-up and top-down approach taken to high-fidelity design. The design system was built from the bottom up, starting with design tokens like colours, column layouts, spacing, and typography.
Then, the components required for the initial pages like buttons, deal cards, pop-ups and footers, and navigation were designed. Before defining the first version of the initial set of pages. User stories with acceptance criteria explaining the design components and page were then created.
As this was a new platform, there was quite a bit of lean UX with the lead front-end engineer as we road-tested the designs with the fledgling design system to make sure design decisions were feasible.