Katie Saunders
UX/UI Designer
UX UI BRANDING UX RESEARCHER UI DESIGNER CASE STUDY
COMPANY BRIEF
ReVibe is an eCommerce site focused around the resale of secondhand clothing while solely acting as the middle man to curate a seamless experience between buyers and sellers. The intention behind it all is to promote the idea of reducing landfill waste, reusing clothes that have already been made, and recycling when we are ready to do a closet refresh.
THE PROBLEM
The project manager provided data showing 50% of users open an average of seven item pages and then abandon the site without moving anything into the cart. Additionally 70% of the users who placed an item in the cart do not purchase it. Data shows that users abandon the cart at the registration page. The hypothesized conclusion was that users could not determine which product was best based on relative features; when users did add to the cart it took to much time to ensure a successful checkout.
THE USERS
RESEARCH & DISCOVERY
Competitor Analysis
BRAINSTORMING INTERACTIONS
Affinity mapping became a rapid fire of observations on everything I saw pertaining to the user experience. I highlighted a few categories below which helped put different notes in the corresponding places.
Check Out
Display items in cart Display shipping and taxes Save for later or remove from cart Option to enter shipping information to calculate shipping prices UI Psychology using tags like “This item is popular” Recommended items that the user may like Create an account/check out as guest
Product Page
Estimated shipping fees Seller information & reviews Add to favorites or Add to cart No measurements or a generic size guide Buyer protection Bundle with other products from that particular seller = discount Photos Item description/condition
Login/Sign Up
SSO Optional sign up or continue as guest Prompted to sign up for an account at checkout Atleast 3 step sign up process Incentives to persuade users to create an account using things like the ability to save for later, and saving preferences.
BRANDING & UI ELEMENTS
Once the ideas started flowing, I got to brain storming when it came to brand names. Through the competitive analysis I realized that the names’ relevance to the actual act of reselling clothes was moot, so I had free range on the creativity.
The final decision to proceed with ReVibe was based around originality and workability of the name. The secondhand eCommerce site is not an original concept so a lot of the names that were brainstormed felt like they could be easily mistaken for other competitors (i.e. Thriftr and Thriftify). ReVibe was a fresh name that fully encompassed the idea of someone reusing a piece of clothing and turning into a new outfit.
Color Palette
ReVibe is a brand committed to sustainability and advocating for the environment, and what color better to signify nature than the color of nature itself- Green.
MAPPING RED ROUTES
Entering this stage in the design process helped me hone in on the direction I was taking in terms of red routes and designs. I once again narrowed down the MVPs into two user flows, which later was exclusively focused on an efficient checkout flow.
Overall Goals for the User Flow:
-
Ability to checkout as a guest while still capturing the user’s email
-
Single page check out process
-
Easy add to cart option
-
Quick checkout to prevent cart abandonment
Check Out
WIREFRAMING
Product Page
Cart View
Checkout Page
USER TESTING
To ensure the design concept would perform with the target user, I conducted five usability tests on th prototype that I created in Figma using low fidelity wire frames. Users were gathered from the Slack cohort after taking a short survey determining they were the right users for the eCommerce niche.
TASK 1 Add the item to your cart
TASK 2 View your cart
TASK 3 Proceed to the check out
TASK 4 Utilize SSO for google, and continue through to completion of check out
Usability tests resulted in 100% completion for all the tests.
USER FEEDBACK
Following the usability testing, I was able to figure out exactly what worked and what didn’t. The best way I could conceptualize the results were through empathy maps encompassing the results from the testing.
IMPLEMENTING CHANGE
Cart View
Check out
Order Confirmation
USER TESTING PT.2
To ensure the design concept would perform with the target user, I conducted five usability tests on th prototype that I created in Figma using high-fidelity wire frames. Users were sourced via personal outreach to those I knew used sites similar to ReVibe and would provide great input based on previous experience.
-
SCENARIO 1 Browse the product page for information, and when you’re ready go ahead and buy it
-
QUESTION 1 As we navigate throughout the flow what information feels necessary and on the other hand, obsolete?
-
QUESTION 2 Throughout the checkout process, does it feel quick and easy or as a user are there points of hang up? Where or why not?
-
QUESTION 3 Do you feel confident in your purchase and in the sites delivery of your order?
Usability tests resulted in 100% completion and lots of great suggestions such as taking off the “remove” option for products in the item cart view and replacing it with the + or - for the item count.
First Iteration
Final Iteration
Design & Iterate... Again
First Iteration
Final Iteration
The changes implemented into the final iteration of ReVibe was mainly focused on overall aesthetics instead of functionality. More attention was paid to consistency of page layouts and how it transitioned between different screens. As well as spacing and organization of tabs.
First Iteration
Final Iteration
REFLECTING ON THE PROCESS
CHALLENGES
My biggest challenge was the sourcing target users for my initial interviews, I did not account for people not showing up since it was a fairly niche user group, I didn’t expand my search which was a learning curve I will not take chances with again.
COLLABORATION
Being the sole designer on this project made it difficult when it came to getting second opinions. My project manager was helpful in narrowing down exactly what I needed to do, and what could be put on the backburner for now since it wasn’t the overall focus of the business goal.
WHAT I LEARNED
ReVibe taught me a tremendous amount about the true day to day work of a designer. Since I wasn’t designing a full eCommerce site, it was interesting to really home in on one specific flow and build it out to the best of my ability. I gained more attention to detail and what it takes to have a great, functional design.
NEXT STEPS
Design home page to enhance browsing experience.
Design a responsive website.
Develop the site and study the impact it has on its users, both buyers and sellers.