St. George Spirits
A new, responsive website for a America's original craft distillery
Founded in 1982, St. George Spirits is a craft distillery known for leading the modern American craft spirits movement. The company is passionate about distillation in all forms and dedicated to creating quality products from quality ingredients. However, the current website wasn't designed to be displayed on mobile devices and doesn't meet key usability standards.
- Redesign the St. George website to be responsive and improve overall usability
- Refresh the company's branding to better reflect the business's story and legacy, in order to engage and retain new customers
The project and content presented here are speculative and for educational purposes only; I am not affiliated with St. George Spirits.
A high-fidelity prototype of the new responsive website and a bold, modern logo to capture the artistry and legacy of St. George Spirits.
Phase 1: Research
I started the project researching the craft distilling industry and how St. George positions itself in relation to competitors. Through interviews with local craft spirits experts, I discovered that St. George doesn't really have direct competitors because of its diverse products. While most other local craft distilleries are newer and tend to focus on a single type of spirit (e.g. whiskey or gin), St. George distills everything from gin to liqueurs to absinthe. Its positioning is directly linked to its legacy as one of the pioneers of the crafts spirits movement in the U.S.
I also conducted a site audit of the current website to identify where to make improvements:
Given that, I began to understand how St. George has survived so long without a responsive website. Interviews with ten St. George customers confirmed that most people find out about St. George by word of mouth and simply walked into the distillery on a weekend afternoon for a tour or guided tasting. Only one interviewee had even seen the website prior to their visit.
View the full empathy map here.
Phase 2: Define
With user needs identified, I created a user persona – a benchmark that I use to check that my designs are always on the right track. I chose this archetype and characteristics based on insights from market research and user interviews; the majority of customers were millennials (ages 26 to 34) who were interested in learning about and trying new things with their friends.
Next, I defined the problem using Point of View statements and How Might We questions.
Before jumping into solutions, I mapped out business and user goals to ensure that I was ideating with both in mind.
Phase 3: ideate
I took to pen and paper (well, post-its) to generate as many solutions as I could in short sprints.
Then, I prioritized solutions with business+user goals in mind.
Phase 4: Design
I began the interaction design process by creating the website's sitemap.
Next, I mapped out three user flows showing how Andrea (our persona) would use the website.
I took one of the branches from the user flow to create a task flow – a more detailed view of how Andrea would achieve her goals using the website.
Then, I designed the main pages in the task flow (finding the retail location of a product on the website) in mid-fidelity. These are the screens I later prototyped and tested with users.
Since the goal is to design a responsive website, I also created mid-fidelity wireframes in tablet and mobile sizes for two of the pages.
Phase 5: Prototype
I created a desktop prototype of the website and went out to coffee shops to test it with St. George customers. (I chose to visit coffee shops, rather than bars, this time because I didn't feel it was appropriate to walk around a bar with my laptop, out of respect for bar/restaurant staff and patrons.) Through usability testing, I found that the locator page layout needed to be improved so that the input fields are clearer.
Before adding detailed content and colors, I moved on to designing a new logo and modernizing some of the branding. Then, I created a UI kit with elements to use in the final UI design. View the UI kit here.
During the process of creating the final high-fidelity wireframes, I realized that I could be a bit more visually creative with some of the content layout. I looked to a few brewery websites for inspiration before settling on a final design.
I built a high-fidelity prototype in InVision to make it easier for the client to interact with the website design before it's shipped. Using this, a developer can also pull the assets and measurements needed to build out the website.
Phase 6: Iterate
My next steps are to revisit the product roadmap and continue designing additional features, while incorporating client feedback and improving on previously designed features/pages.
Many of the customers I spoke to were satisfied with St. George Spirits as is, making it difficult for me to identify any pain points to improve upon. Additionally, most customers hear about St. George from friends and don't interact with the website, which doesn't justify an investment in redesigning the website at all. But because this project was speculative and part of my design coursework, I had to move forward with the website.
If I were working with the St. George team, I would explore a more cost-effective way to update the website, as well as other ways to increase brand awareness.