Responsive Web Design

St. George Spirits

A new, responsive website for a America's original craft distillery

Case study image
View prototype

My Role

UX Researcher, UX Designer, Interaction Designer, UI Designer

Team

Self-directed, with guidance from course mentor

tools

Sketch, Affinity Designer, InVision, Draw.io

Duration

80 hours over 2 weeks

challenge

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.

Project objectives:

  • 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.

Outcome

A high-fidelity prototype of the new responsive website and a bold, modern logo to capture the artistry and legacy of St. George Spirits.

Process

Design Thinking process

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:

Site audit of the current website.

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.

My process for arriving from interview notes to user needs for a persona.

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.

User persona outlining goals, needs, frustrations, and motivations.

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.

Product design lives at the intersection of business and user goals.

Phase 3: ideate

I took to pen and paper (well, post-its) to generate as many solutions as I could in short sprints.

Ideating!

Then, I prioritized solutions with business+user goals in mind.

Product roadmap to prioritize website features.

Phase 4: Design

I began the interaction design process by creating the website's sitemap.

I modified the existing site architecture so that navigation is simpler and more intuitive.

Next, I mapped out three user flows showing how Andrea (our persona) would use the website.

User flow diagram mapping out how each page is used to accomplish various tasks.

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.

Task flow of a user finding where to buy a particular gin.

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.

Mid-fidelity wireframes of the website's main pages.

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.

Responsive wireframes for the homepage and product locator page.

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.

Revisions for the product locator page.

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.

The final website design (desktop).

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.

Interact with the final prototype in InVision.
Demo of the final design

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.

Reflection

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.

Let's build something together

Interested in working together? Drop me a line – I'd love to hear from you.
I'm currently available for consulting on UX design and Webflow projects.

SAY HELLO