E-commerce app for Bakeware — A UX Casestudy
Total Time: 2 Weeks
My Role: Product Designer
The COVID-19 pandemic has caused a surge in demand for baking ingredients as people use their time to develop a new hobby. Interest in bread making, in particular, has soared. Recently, there has been a spike in internet searches for bread recipes and guides to developing a sourdough starter. The sales of essential baking ingredients and equipment grew up to 647 %, but many people faced problems finding quality baking Ingredients and types of equipment.
This assignment’s goal was to create a mobile e-commerce experience for users to browse catalogues, find the items they’re looking for, initiate checkout, and complete the purchase
Breaking down the Problem Statement
- Smooth user experience
- Easy and non-complex User Interface
- Building a bridge between the product and consumer
I followed an iterative process to come up with the desired outputs. Every step in my process has been through several iterations to achieve optimal goals.
Brainstorming: I utilized this time to understand how a potential customer who lands on my e-commerce takes decisions, what factors affect his/her decision-making process and how can I engage them to visit the store often
- Shoppers make emotional Decisions
- Images of products that you sell should be visible on the home screen without scrolling
- Lack of control is the #1 reason why the user doesn’t make a purchase
Competitive Analysis: In this phase, I visited a bunch of E-commerce stores to observe the User Flow they follow. The most common flow that I found was:
Product Discovery: I visited a few E-commerce stores that sell Bakeware and surfed them to see:
- The kind of products that are sold
- This process was helpful for me to understand how a user navigates through the app and what decisions can they possibly make, and lack of what functionalities could be a major turn off
- IA also made me understand what information I should include that will help the user make their decisions and will lead to a higher conversion rate.
To understand the kind of information I should keep on my screen, I need first to understand, Who is my potential customer?
“Nothing is ever so good that it can’t stand a little revision, and nothing is ever so impossible and broken down that a try at fixing it is out of the question.”
― Rebecca Solnit, Hope in the Dark
Wireframes are a powerful tool in a design’s early-stage. These quick and dirty layouts helped me to communicate ideas sooner in the design process. They encourage a faster cycle of feedback and iteration. Wireframes make them an incredibly powerful deliverable.
- My process involved brainstorming layouts using a pen and paper; this helped me get more results in less time.
- Low fidelity wireframes include the essential content and visuals and are usually static (not interactive). They are often used to help map out the shell of the interface, its screens, and underlying information architecture.
- Then I hopped into Figma and turned the final Lo-Fidelity wireframes into digital wireframes so that making Mid-Fidelity wireframes.
- Medium fidelity wireframes start to define specific elements and visual hierarchy.
If your customer cannot find a product, it merely does not exist.
Keeping a search box on every page until the customer reaches a destination.
Consider writing something helpful that helps that accelerate the decision-making process.
Making hassle-free Onboarding and Checkout Experiences