Legends Distillery
Legends Distillery is a whiskey distillery based in Israel. For this project I visually overhauled their website and updated their shop and tour booking flows, among others.
UX, Research, Responsive Web Design, Figma
.png)
.png)
Background
This project I was tasked to redesign an existing website and make it responsive for both web and mobile. I chose to redesign the website for Legends Distillery, they are a local distillery who make amazing whiskey but have a website that really needs to be improved.
Initial Research
The first step that I needed to take for this project was to look into the existing website for the distillery. I was able to learn what features the website currently offers and which areas need to be improved.
Interviews
As part of my researched I interviewed potential users of this website to learn what is important to users in a distillery website and what they would want to see as part of a redesign for this website.
Personas
Upon completing the initial research and interviews, I used the information I learned to create a couple of personas. These personas were used throughout the design process to guide my decisions.
Competitor Analysis
I then examined the websites of a few competitors to see what some of their strengths and weaknesses are. I was also hoping to see if any of these websites were able to offer some creative inspiration.
.png)
User and Task Flows
Before beginning the wireframes I laid out the user flows for the website. The flows for this design were relatively straight forward, as the main flows for the user would be buying whiskey and booking a tour.
Lo-Fi Wireframes
I began to create low fidelity wireframes for both the mobile and desktop sites. I tried to pay attention to keeping a consistent experience across both platforms.
Hi-Fi Wireframes
The next step was to create the high fidelity wireframes, again with the emphasis no consistency across mobile and desktop experiences. The biggest challenge with these designs was finding the adequate product photographs for all the different parts of the website.
Usability Testing
I took both the mobile and desktop wireframes and created a figma prototype. I asked users to test several flows and give their feedback, on both their ability to complete various tasks and the consistency between the platforms.
Iterations
The users gave some very helpful feedback. After hearing this I made a handful of iterations to both the mobile and desktop websites.
Iteration Example #1
Users expressed some confusion about the color and location of the "place order" button. Previously it was gray and disabled until all the relevant details were filled in, now after inputting all the details the "review and place order button" appears where the details were input. This makes it super easy for users to move through the flow because the information is presented right where they need it to be.
.png)
Iteration Example #2
The user pointed out that the tour booking flow needed many adjustments. Days in which there are no available tours are now shown on the calendar. A few details about the tour booking process were added to the top of the calendar to eliminate any possible confusion. A drop down menu to select the time was also added.
.png)
Updated Protoype
After iterating on all of the wireframes I updated the prototype for the website so that it would reflect the most up to date version of the product.
Final Wireframes
Below are a sample of the final wireframes for this project. I really enjoyed this project in which I designed a website in a different style than I usually go for. It was great to be able to practice working on responsive designs and translating that different style to many different viewport sizes.
%20(2).png)
Home Page
%20(2).png)
Products Page
%20(2).png)
Checkout
%20(2).png)
Tours
.png)
Products Page
%20(2).png)
Tours