Designing e-commerce experience for pottery - UI/UX case study
Welcome to my first UI/UX case study. I will share my process and explain the design decisions I took along the way.
Problem Statement
As part of an assignment at 10kdesigners, we had been given the assignment to design an E-commerce app for the user in a particular niche (in my case that’s pottery).
This is how I approached the problem statement AKA the Design Process.
Research:
The start of every design project is really cool. You get to work on a completely new topic on which you have no idea before. And that’s how I started on this, with no idea about the pottery business and e-com design patterns. So I started with secondary research to fill out the gaps.
1️⃣ Why not Amazon and Flipkart?
- If you searched for pottery products you get to see these results
2. The future is niche E-commerce
“The Long Tail Effect” suggests that the online marketplace is drifting away from mainstream products and moving towards niche products.
2️⃣ Why an App?
3️⃣ Understanding pottery market and supply chain
PS: Due to time constraints this Case Study concentrate on designing an E-Com platform only.
4️⃣ General E-com Research
Here I started with finding out how design helps in building an E-commerce business. And reviewed tons of apps to understand e-com design patterns.
Why user experience matters in e-commerce?
Simple, Positive User experience = Stakeholders Profit (Even a 0.5% difference in conversion can make a difference of thousands of dollars.)
Objectives
Based on the research, I laid out the following objectives for the project
- Make the shopping easy, quick and enjoyable.
- Balancing Educating user, the number of steps in the flow, and the amount of data collected with ease of getting through the flow quickly.
Information Architecture
Product Catalogue
I started looking at all kinds of pottery products that will be part of the e-com product catalogue.
Websites like Bhoomi pottery, SARA, Mitticool and The Ceramic Shop also helped me categorize and label the information.
App Navigation
The next task for me is to design App Navigation, I've used whimsical to map the flow of the app.
Wireframes
Now the overall structuring is done I started with wireframing to get an idea of what goes where. The process I followed was simple.
- I started writing down what goes on the page in just plain text.
- Created design elements for each one of them.
- Iterated on different layouts.
Once I was satisfied with the layout, I moved to Figma for visual design
Visual Design
Here I started creating high fidelity versions of the selected wireframes and started iterating and polishing them further to reach the objective.
Home Page
The home page is the first introduction to the site and the range of product sold. A glance over the homepage should indicate the store’s product diversity.
Filter & Sort
- Filters allow the user to narrow down the list of items to a manageable number that satisfies their specified criteria.
- Filters also act as an education touchpoint for people who have less experience.
Here I decided to go with multiple filters at once, as it
- Works better for slower connections.
- Helps narrow down the search quickly.
Search
Checkout
Designed a multipage checkout process, so the user can focus on one task at a time. This help user as they can see their position in the process and can easily go back to the previous one.
Other Screens
Measuring Success
At the end of the day, it’s an E-commerce platform. Hence the success is tightly related to the number of products sold. Besides, various KPI can be tracked to measure the success and improve the experience further.
Example:
- Shopping cart abandonment rate
- Checkout abandonment
- Number of transactions
- Conversion rate
- Returning customer orders
Learnings & Challenges
- Since this was my first time designing an app, there were so many new things, So I started learning how to design as per Human Interface Guidelines, how to do secondary research, Branding, Design Systems etc.
- As visual iterations take a lot of time, this helped me realise the importance of wireframes. Taking important decision at the wireframing stage is the key to save time.
- As designers, we make design decisions at every pixel, but as we progress tend to forget what decision lead the where. This is where the documentation comes in. It not only helps you to keep track of design but also helps you to communicate design effectively.
- After the project was done, I realised the research I’ve done is not enough to launch something like this IRL. To launch a real product definitely needs more research to back the design decisions.
Mess behind the scenes 🙈
