ANIMALE Wine is a local Seattle winery that sells its wine online, on Amazon.com, and in various stores across Washington.
E-Commerce Website Redesign
Pen and paper
ANIMALE Wine has a disorganized e-commerce checkout process, as well as a website that doesn’t clearly show the wine and wine club membership offerings. How might ANIMALE wines better showcase their wine offerings and increase sales of their products.
The goals of this e-commerce website redesign were:
- Organize the e-commerce checkout process.
- Make ANIMALE Wine products more easily discoverable.
- Give users the option to read and write reviews about products.
- Make it easy for users to sign up for newsletters and to attend events.
By showcasing the wines offered both with visuals and information, providing more options for the subscription wine club, and making the checkout process less complicated, ANIMALE Wine can increase their e-commerce revenue, build a more loyal customer base, and attract new audiences looking for wine.
I conducted market research, an e-commerce website competitive analysis, and user interviews to gain a better understanding of what already existed in the market and what drove people to order wine online.
I developed my research data into a user persona and context scenarios. My primary persona for ANIMALE Wine is Laura Kapoor, a 39 year old screenwriter living in Seattle.
I created a storyboard and user flow to help me better understand Laura’s process of moving through the website. I explored various iterations of the user flow, landing on a dynamic flow where different paths can lead to one another to cross-promote tasks. I reorganized the navigation bar and created a site map of both the current ANIMALE Wine website, as well as the proposed website.
I sketched out each screen using Laura and the three context scenarios as tools to guide me. Using my research, persona, and sketching, below are a few of the main focuses I identified:
- Adding multiple images to product pages.
- Adding ratings and the ability to review specific products.
- Enhancing the educational aspect of product pages, with information about wine details, vineyards, and reviews.
- Simplifying the checkout process by making it only one step.
I used Sketch to create the wireframes. I built more than 30 screens to demonstrate the three context scenarios, and then created a prototype in InVision for usability testing.
Below are the wireframes for the first context scenario: Browse wine offerings, review a product, identify any nearby stores carrying the wine, add wine to cart, and checkout online.
Usability Testing and Iterations
Usability testing was an integral part of the process and provided useful insight on how to create a better customized experience. I tested with three users and these were my main takeaways:
Iteration #1: Changed the wording in the Wine Club page to make it clear that users still needed to check out before officially becoming a club member.
Iteration #2: Added a search bar to aid in the wine discovery process for users who know what they want.
In addition to the way a website functions, the look of the screens can also have an impact on the user. I added in visual elements to the homescreen to explore the branding.
If I had access to ANIMALE Wine's data, I would document the baseline metrics and identify what constitutes success. These success metrics are based on the primary user's needs and goals. I would measure the results from my redesigns and compare them to the results from the original design to see what functions and features worked or needed improvement.
These are the Key Performance Indicators (KPIs) I would measure:
- Increase wine and wine club sales revenue by 15% by the end of the year.
- Grow the mailing list by 10% in six months.
- Increase number of reviews written about products.
- Increase the number of Event shares by 5%.
What I Learned
Through this e-commerce website redesign, I learned:
- The value of competitive research and getting a sense for what currently exists in a similar market to improve upon.
- I learned the value of creating symbols and using a column layout to maintain alignment in Sketch.
- How to better organize my design process.
- To design with the user persona in mind, as the user's needs guided my design priorities.
Though much progress was made on the redesign of ANIMALE Wine, there is still more that I would like to accomplish moving forward:
- More user testing and iteration on current screens, as well as future screens.
- Explore a further in-depth rebrand of site and logo.
- Further refine the checkout process with more user testing.