Zero to one
e-commerce
Research, ideate, design, test and deploy from end-to-end.
Role
Product designer
Team
Business owner
Duration
16 weeks
Tools
Figma, Webflow, HTML, CSS
A local patisserie shop was at the point of scaling it’s business and brand presence in the online market. The goal was to create an online presence that emanates it’s in-store impression and drive growth in sales through online orders.
Research: competitive analysis & top tasks survey
Competitive analysis
Performed a comprehensive analysis on 3 regional patisserie e-commerce sites and 2 patisserie from the AMS/EMEA market. The plan was to identify reoccurring UI patterns and user flows that met or improved usability heuristics.
Top tasks survey
Worked closely with owner to plan a top task survey that was distributed via a wide variety of channels, including: social media, and in-store invitations. Captured 152 responses which led to a calculated prioritization of top 5 tasks/actions a user intends to act on when visiting the online store.
Plan & Ideate
User flows were diagrammed to help visualize the user journey from where the began and ultimately ended. A clear blueprint of a happy path and sad paths were mapped out, the visualization helped wireframe our experience to ensure our users can easily stay on the happy path.
Early research of top tasks and competitive analysis of features were also crucial in the design decision making process.
Design
Efficiently design
Created foundational components and variants to allow for efficiency and scalability, built out a minimal design system, including, guidelines, type scale, color palette, and reusable components/variants and section templates.
Product detail accordion
Research showed that customers actively searched for product (pastry) details, such as, how to prepare for best taste, ingredients used, and storing methods.
Knowing this, we leveraged an accordion UI pattern to house these information in each product page and within the questions section of the homepage.
Product detail accordion
FAQ accordion
Low friction add to cart
An “add to cart” button is added to each product card, aimed to reduce friction when users browse and try to find products they’d like to purchase.
Final polish
