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

TL;DR

TL;DR

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.

Category filters

When on the pastry selection page, filters were introduced as part of the experience to easily narrow down the search and increase opportunity of products being added to cart.

Inline add to cart

Category filters

When on the pastry selection page, filters were introduced as part of the experience to easily narrow down the search and increase opportunity of products being added to cart.

Category filters

Inline add to cart

Category filters

Final polish

Let's connect

Let's connect

Let's connect