K. Levy Wine Co.
Redesign of an e-commerce website
Time: 4 weeks
Key Skills: Collaboration, Survey, Interviews, Wire Framing,
User Testing, Hi Fidelity Prototyping, Logo Design, Presenting
Primary Tools: Figma, Miro, Slack
Background
For this client project I worked with two other designers to redesign the site experience of KLevyWineco.com with the goal of making his website more usable and understandable and increasing subscriptions to his wine club.
The wine club provides members with 6 bottles of wine each quarter. The members also receive tech sheets about the wine and recipe and pairing cards. A big part of the club experience is meeting once a month with the founder and other club members to drink and discuss wine, play games, and meet the wine maker of one of the wines they were sent.
The process we followed looked like this:
(Click to enlarge)
Discovery
To start, we conducted a competitive analysis of FIVE other wine clubs and looked at the following heuristics:
4 - consistency and standards
6 - recognition rather than recall
8 - aesthetic and minimalist design
Insights
These sites did not overload the user with information. They revealed inform progressively, as needed.
They had one strong, simple aesthetic throughout the whole site.
They employed clear CTAs
Personas
I created two personas that represent the client’s summary of the types of customers who are already a part of his wine club.
The client told us that part of his user base is young professionals who like to buy expensive wines as a status symbol. They want to be perceived as “wine-savvy” by their friends and want their good taste to be recognized.
The second client type was described as a retiree who appreciates the good things in life. This person also likes the opportunities for continued learning opportunities and community offered by Kris’s wine club.
Survey
We sent out a survey to find potential customers for KLevywineCo. We wanted to talk to these potential users and figure out what their wine habits and preferences were. Check out some key findings below:
38% Drank 3-6 bottles of wine/mo
44% Spend $10-$15 per bottle of wine
50% Regularly purchase wine online
88% Want to choose own wines
Interviews
We were able to speak with two current wine club members and five potential wine club members that we found through our screener survey.
The potential members intimated that they would want more control over the wine club experience. They would like to be able to choose their own wines and inform K. Levy about their preferred flavor notes and dryness of their wines. They were wary about meeting with strangers to discuss wine, but were open to trying it.
Current members expressed how much fun they had in the monthly club meetings. They wanted to see more of that experience highlighted on the website.
Problems to Solve
We wanted to be able to give users more control over when they could get their wines (monthly or quarterly) and be able to pick which wines they wanted. However, our client’s business model could not allow for these changes yet, due to his current supply chain. He wants to allow for more user control over shipments in the future.
We decided to focus our efforts on the following three problems:
Drive website users to conversion
Bring website into adherence with Nielsen’s Usability Heuristics, with a special focus on the following heuristics:
4 - consistency and standards
6 - recognition rather than recall
8 - aesthetic and minimalist design
Make clearer the wine club experience, highlighting the monthly club meetings
Usability issues that needed correcting:
Information Architecture
The first element we redesigned was the site map. We found it difficult to navigate the site, especially when it came to signing up for the wine club. Users had to rely heavily on recall to navigate the site since there was not recognizable consistency. When one of our potential users walked through the site, he totally missed the page that had the bulk of information about what was included in a wine club subscription. The services page had several sub-pages that we knew could be simplified.
Site map before redesign:
Site map after redesign:
Design
We created wireframes for the redesign, focussing on FIVE screens - Home, Info, Checkout, Services, and Confirmation.
We focused on fixing usability issues, the wine club subscription flow, and highlighting the wine club experience.
Client Feedback on Wireframes
The client did not like the new logo I proposed. He identifies strongly with his current logo and he already had branded merchandise with his logo and didn’t want to update it.
He wanted to made sure that we made clear his club benefits, which are - wine made easy, learn about wine, get wine shipped to your door.
He also clarified that he offers B2B services to wine brands and also to companies that have nothing to do with wine.
We took this feedback in and implemented these changes in our hi-fidelity prototypes.
Style Guide:
After the client’s feedback, we started working on a style guide for hi-fidelity prototypes.
First Iteration of HiFi Prototype:
Colors - For the colors, we wanted to soften the red white and blue theme that the client was using on his current website. The red on the website was a loud red, a shade that doesn’t carry positive psychological connotations. We wanted to swap out that red for a wine colored hue.
Imagery - We wanted to add in images of the community experience of Kris’s wine club. We also grabbed some stock images for more general images to set the mood
Font - We paired Roboto with Playfair Display to elevate the look of the site to an elegant, editorial style. We did this because the client wanted his website to look more “refined”.
Testing:
We tested the above designs remotely, in moderated tests with 5 participants. Most of the feedback received was on the scale and spacing of elements on the site and the checkout page.
Checkout form feedback:
The First and Last name inputs on the checkout form should be two different boxes
We needed to include input for a billing address
The field texts should be darker in color to aid in ADA accessibility
Revised Checkout Page:
Final Designs
Here are before and after images of some of the changes made to the K Levy Wine Co website.
We simplified the design and architecture of the website and fixed usability issues, while highlighting
the wine club experience and making it easier for users to sign up for the wine club.
The Finished Product
For a clickable prototype, click here.
What I Learned
• Selling UX
Client was unsure about letting us talk to his users for research. We explained why it was important and he came around.
• Balancing Business Needs/ User Needs/ Tech Constraints
The client had all of his business services on his home page. When we showed the page to users they were confused why they were seeing this B2B information that wasn’t applicable to them. We kept the info, made it clearer, and moved it to its own page.
We considered adding an e-commerce page and account page to the website. However, we were able to talk with the site developer who mentioned that adding those features would cost money and that the site owner was not willing to spend that money yet.
• UXers are Organizers
Organizing site nav, project plan, meetings, feedback sessions, workshops was a lot to keep track of, but something I realized is one of my strengths.
