A Place You Will Find Uniqueness and Creation.
Project Overview
ABOUT
CHALLENGE
SOLUTION
MY ROLE
Casey is an online phone case shop where customers can design their phone cases. Moreover, it offers a platform for customers to showcase and sell their designs.
The online purchasing process can be cluttered, confusing, long and discouraging. So my design challenge became: make the process intuitive, efficient and encouraging.
By having an easy navigation for the site and simple checkout process, users will have a much smoother and more enjoyable shopping experience.
For this solo project, I did user research and conducted a competitive analysis through other online stores to understand and synthesize users needs that led to ideation and design decisions. For deliverable, I made a clickable prototype in InVision to demonstrate the user journey with final visual design.
Case Study
RESEARCH
Competitive Analysis
By identifying other online stores and analyzing the characteristics such as navigated sections, page payouts, page elements and checkout process, I discovered that most of them have confusing organization for sections in their navigation bar. I also found that ASOS’s checkout flow is very intuitive and smooth, especially for their existing customers, and it became the guide for designing checkout flow for Casey.
Personas
I did user research among my friends, mostly having specific styles since Casey is about creativity and uniqueness. I concluded two major groups of customers I am going to target: Users who explore and users who create. I also found that trendy users browse products on Instagram, so I thought a section for phone case posts from Instagram on homepage can give an idea of how our products can fit users tastes and styles.
DESIGN
User Flow
With the research result, I started to map out journeys for my users. This final user flow shows all the logical steps for my two main customers when he or she is browsing, exploring, and purchasing.
Ideation
After gathering all the information, I thought I could focus on designing two main stages: Shopping stage and checkout stage.
1. Well-organized homepage, list page and product page
First, the site needs to have clear Information architecture that user will know where to go to achieve their goal and where they are so they aren't lost. Providing enough information like featured section but not too overwhelming can guide users to find what the they like. Also, adding filter or quick view functions can save users’ time while they are shopping.
2. Condensed checkout flow
Checkout process is usually where users get tired and want to drop out because it takes a long time to fill out every information step by step. Simplifying the steps from information input, review to order placement as one page form instead of having shipping and billing info. happen in different stages can improve the efficiency and user experience.
Information Architecture
Based on my personas and user flow, I built a site map to reflect the most important elements of the website.
Wireframes
While wire-framing these main pages, I looked up e-commerce websites and used my competitive analysis to borrow the best elements into the organizational structure of the website to provide a better shopping experience to the users.
FINAL
Landing Page
and Product Page
Minimal style with the use of white space provides a simple and clean user interface so users won't feel overwhelmed, and the products can be more outstanding. Clear Information architecture makes the website very intuitive so users can easily find what they need.
Checkout
By condensing the checkout process, users don't have to go on multiple pages to fill in their information. They can have these done in one page and review all the input to avoid mistake in the next page before placing order.
Customization
and User Profile
In my user flow, all the major steps were considered, but I only made the persona "Sally's" flow in details into the prototype. The customization stage is also very important as well as user profile where designers can save and publish their designs.
These will be my next step to make this e-commerce web design more completed.
