THE CHALLENGE

Create an Intuitive and Personalized Online Shopping Experience for Users

Corks Wine Shop does not offer a way for customers to explore and purchase wines online. My challenge was to design a low-fidelity, e-commerce site for Corks Wine Shop that would allow users to efficiently find and purchase wine with the same personalized touch as an in-store shopping experience.

THE SOLUTION

Dynamic Navigation

The simplistic and flexible navigation allows users to search, explore, and filter wines based on the context of the shopping experience. 

Personalized Recommendations

Users can feel confident in the wine they select by having detailed descriptions of the wine’s taste, food pairing recommendations, customer ratings, and sommeliers reviews. 

Seamless Checkout Process

Users can save time when making a wine purchase due to a simple and efficient checkout process. 

THE STORY

My Role: UX Researcher & Designer

I was fully responsible for the entire design process including user research, UX design, UI design, iterative design, visual design, project management. 

Timeline: 10 days
Tools: Sketch, Invision, Keynote

01. DISCOVER

Competitive Analysis

What makes Corks unique? 

Conducting competitive analysis allowed me to assess the strengths and weaknesses of competitors and identify opportunities to innovate and differentiate. 

1

Direct competitors did not provide users with an e-commerce shopping experience.  

Contextual Inquiry + 8 Interviews

In order to solve real problems, we needed to listen to real users

Obtaining user insight allowed us to get into the minds of users and advocate their needs against business and technology constrains. My goal was to determine my user’s wine purchasing behaviors, needs, and pain points. 

Here is what users said...

“I don’t have the time to browse. I can come into Corks, ask for help, and get exactly what I want” 

02. DEFINE

Affinity Diagrams

What are the key problems our users are experiencing?

I took all of the fuzzy data from my research and organized it into an affinity diagram. Affinity diagrams allowed me to sort through the data and identify key problems our users were experiencing. 

Here are the consistent problems we found:

Users need a better way to...

Search & Explore 

Search for their favorites or explore new wines in an intutive and efficient way. 

So, who are the ideal users experiencing these problems?

I created a primary and secondary persona in order to visualize the ideal user who would experience these problems.  This allow me to step into the lives of our users and design solutions for their problems. The personas drove the entire design process- allowing me to stay focused and unbiased. 

How would our personas use the app to solve their problem? 

Now I needed to visualize how the personas would interact with the site in a way that would meet their needs and solve their problems. User flows are driven interactions that allowed me to map out the path that users may take to complete a task. This also helped identify key design elements.

03. DEVELOP

Ideation & Sketching

I did a brain dump of all the possible ways to solve our user's problems. I visualized various interfaces with rough sketches and the information architecture through a rough sketch site map. I immediately started testing with paper sketches with users in order to generate feedback and make iterations! 

Prototype + Test + Iterate

After testing various paper prototypes and gaining valuable user feedback, I was able to narrow down interface designs and build my low fidelity prototype in Sketch.  Greyscale wireframes allowed me to test concept vs. appearance (and save time!). Here are a few screens I annotated after testing. 

Product Browse Page

What I learned

1. Most novice wine drinkers wanted to search for wines by taste and flavor vs. type.

What I changed

1. In the navigation bar, make it accessible for users to filter through wines by taste. 

What I learned

2. After selecting the "add to cart" button, users had a difficult time navigating to the checkout page. 

3. Users often overlooked the "ratings" section. When prompted, users identified ratings and reviews as one of the same. 

What I changed

2. Make it more apparent that an item was added to the cart and provide users with an optional link to the checkout. 

3. Change "ratings" to "awards" in order to differentiate this section from the customer reviews. 

Checkout Page

What I learned

4. Users expressed that they would never use direct banking for an e-commerce site. 

5. Users predicted that the "proceed to confirmation" button would charge their card and take them to a confirmation page of their purchase. This makes logical sense! However, I designed it so that the button would not charge their card; it would take users to the confirmation page they could finalize order before purchasing.

This process of designing, testing, and iterating continued until we established our final prototype...

04. DELIVER

Low Fidelity Prototype

It is important to note that the final prototype is not complete. If the design process were to continue, I would build out more features, apply visual design elements, and continue to test and iterate.