Corks ecommerce website
Overview
Corks is a brick & mortar store in LoHi, Denver. In this concept work, I designed an e-commerce website for Corks that accomplishes an intuitive shopping experience for users while ensuring in-store values and business goals are met.
contributions
User & Stakeholder Interviews, Sketches, Wireframes, Usability Testing, Information Architecture
project Circumstance
2 weeks, low fidelity wireframes and clickable prototype
TOOLS USED
Contextual inquiry, user & stakeholder interviews, affinity diagram, competitive analysis, sketching, prototyping (paper & InVision), usability testing, wireframing (Sketch)
research
user interviews
A few classmates & I visited Corks and asked customers open-ended questions using the 5 Whys method to learn what brought them in.
Affinity Diagram
Through user feedback, I learned what kept people coming back was their affordable prices, close proximity to their home/work and the great customer service & wine recommendations they get in store.
observation
No one we spoke to knew Corks offered a unique value proposition: 250 highly rated wines. $15 or less. Since users can't learn this by speaking directly to staff online, I wanted to make sure that message was clear on the homepage.
User Personas
In store interviews helped me develop personas based on 3 main user types: Price Conscious Consumer, Frequent Wine Drinker and Uninformed Drinker
I kept these user's goals, needs & barriers in mind when designing the e-commerce site's feature layout
Early Sketch Iterations
Numerous iterations were sketched to try out different design layouts.
With hundreds of wines, I needed to organize the hierarchy of information to make it easier for users to quickly find what they're looking for.
Usability Tests & wireframes
homepage
- During usability tests, no one noticed the value prop & were confused over who was rating the wines
- I rearranged the homepage features and included a brief summary of how Corks rates their wine. This resulted in a feeling of good value from users!
Checkout
- Users thought the checkout process could be more streamlined, so I combined them into one page
Confirmation
- Users were concerned they might accidentally place the order again since the "place order" button was still visible
- I removed the modal and created a new page for order confirmation to solve that issue