Local e-Commerce: Redesigning Living Wine

Grace Transue
5 min readNov 1, 2020

How might we diversify website traffic and increase online sales for a local business during a pandemic?

During our second week at Ironhack, we were tasked to find a local business in need of a website redesign. My team reached out to a shop specializing in premium wines and gourmet products that needed their website to reflect their modern, luxurious brand.

Photo by Kelsey Chance on Unsplash

Research

Stakeholder Interview:

We started our process by interviewing the stakeholders at Living Wine to gain more insight. We found that 90% of all purchases were done in-store, while only about 10% of purchases were done online. We discussed their goals to increase sales, reach more consumers, and implement international shipping. For the purpose of this project, they wanted us to focus on ease of purchasing while also implementing a website design that would better represent the brand.

Original website:

Here’s the current website! All the necessary information is available, but the information architecture is confusing, overwhelming, and in many cases redundant.

So…

How might we increase online sales and expand the customer audience?

We aimed to create a more clean and simple site map to help drive website traffic and increase sales. The main customer demographic is currently higher income Portuguese individuals, usually above 50 years old. We created our primary user persona with this in mind. We wanted the new website to be both accessible for the current customer demographic and enticing for a new younger audience.

We researched top competitors and compiled a list, focusing our attention on the top four. We compared what they sell, who their main customer audience is, and what their website offers in order to gain additional insights.

User Research

Survey:

We surveyed 63 people to learn more about their consumption of alcohol and gourmet groceries, as well as their online shopping habits. Our survey revealed a secondary persona comprising of mostly women between 26 and 35, most of which drink wine but don’t currently purchase it online. 90% of our surveyed individuals purchase wine/spirits as gifts, so we felt it would be important to also highlight gift ideas on the new website.

User Interviews:

Then we interviewed five individuals to learn more about what they value when purchasing wine and gourmet products. A main takeaway was that the user enjoys recommendations from wine store employees and having guidance while they shop. What pairs with the wine? What’s organic? What’s the expert favorite? That made us wonder… how can a website still offer that experience?

Design

Site Map:

My team got together and created a new site map to reflect our vision for the information architecture. We decided to keep our home page as simple as possible with two main options: “Shop now” and “Visit us”. We originally planned on having a step after you opt to shop that would give you the options of “Products”, “Promotions”, and “Expert tips” but this later proved to be an unnecessary and frustrating step for the user. To validate our site map, we created a card sorting test to see how users would organize products, tips, and promotions. Card sorting is an insightful and great tool to see how the user imagines the flow of a website. It’s easy to become wrapped up in your own vision when designing a user flow, so getting real outside feedback is key. We were able to make valuable changes and finalize the happy path we would focus on.

Final site map (happy path highlighted in pink!)

Lo-Fi Design:

To design our lo-fidelity prototype as a team, we used the round robin method. We each started on a different screen of our happy path and sketched out what we imagined the page would look like. After a minute of sketching, we passed the paper to the next person and would either sketch a new version or make annotations to the previous person’s sketch. We gathered all our sketches and highlighted the parts we liked and the aspects that needed improvement. In the end, we had a consensual lo-fidelity product to start testing.

Testing

Lo-Fi Testing:

We tested our lo-fidelity prototype and tasked users with purchasing a bottle of red wine. We hoped to see if our filtering and sorting options were intuitive, and wanted to find out if our flow was simple enough. After testing… and testing… and testing more, we found that we still had too many steps. Our carousel method for sorting beverage types was too lengthy and frustrating so we needed to redesign. Our check mark method to move through the payment process wasn’t intuitive enough, and the icons we added to products to feature “best sellers”, “organic wines” and “expert favorites” needed a key.

Mid-Fi Testing:

With all the changes from our lo-fidelity user testing, we created a mid-fidelity prototype to test. We discovered some basic prototyping issues, alignment problems, and found that users thought our pop-up screens were too large and intrusive. Most importantly, we realized that users weren’t realizing they should click on the product image to see more information and instead were just adding the products directly to their cart. We added a “more” button next to “add to cart” to keep the options more clear.

We created our final mid-fidelity prototype, organizing Living Wine in an informative and modern manner. With this prototype we believe that the in-store experience is better re-created with helpful guidance for every visitor. The new experience is helpful, safe and accessible. Chin Chin!

FINAL PROTOTYPE!

I experienced an immense amount of personal growth during this project, specifically in my understanding of site mapping and the user testing process. I became even more familiar with mid-fidelity prototyping and grew as a team member, constantly adapting to different ways of thinking and collaborating. We were so proud of the final product!

--

--