Norden Aquavit

Norden Aquavit

A modern and functional website for a fast growing start-up company.

VIEW WEBSITE

The Client

  • Norden Aquavit
  • Parent Company Norden Spirits

Role

  • Designer
  • Developer

Goals

  • Redesign of website.
  • Showcase the product’s unique distillation method.
  • Integrate a product map search function.
  • Implement an age check upon site entry.
  • Incorporate an email sign-up method.
  • Incorporate trade resources on the website.

Timeline

  • May 2019 – September 2019
  • QA Follow-up: October 2019

Website

Overview

Norden Aquavit is a Michigan-made and distilled spirit with a connection to its Scandinavian roots. (Aquavit is a Scandinavian spirit akin to gin.)

Background

Norden Aquavit had an outdated website with limited functionality. Their business was growing, and as they became more well-known Norden Aquavit needed their website to reflect a superior product and showcase their Michigan distillery process.

I designed a custom website for Norden Aquavit that met their needs and improved the overall functionality of the website. Among other successfully accomplished goals, the client has experienced a 30% increase in contacts and 15% increase in email capture. Norden Aquavit said the new website was, “Better than they had ever expected”.

Original Norden Aquavit website.

The Project

Build a custom designed website that improved user-based functionality and increase the number of contacts and email addresses the client received. Create brand cohesion by matching the client’s brand aesthetic to the site design.

The Process

1. Understanding the Problem

  • One-on-one meeting with client to determining pain points and needs.
  • Evaluation of existing website.

2. Discovery

  • Develop target audience.
  • Identify Brand Attributes to help define the brand and design the most appropriate solution for client and users.
  • Research competitor websites to discover what is seemingly important to them as well as develop inspiration for design.
  • Establish Goals.

3. Ideation

  • Use collected research to informed the creation of wireframes and site map.
  • Present site map and lo-fidelity and medium-fidelity wireframes to client.
  • Restructure site map and wireframes based on client feedback.
  • Produce hi-fidelity mock-ups displaying an enhanced information structure and flow.

4. Design

  • Design process begins, informed by Target Audience, Brand Attributes and final sitemap and wireframe concept.
  • Develop a hi-fidelity mock-up from design iterations to present to the client, which is approved.
  • Using the approved prototype, interior page design iterations are developed, and hi-fidelity mock-ups presented.
  • Final designs are developed and approved.
  • Develop Style Guide.

5. Development & Testing

  • Developing website, key components of website and user testing.

6. Results & Takeaways

  • Brief analysis of project outcome and key takeaways.

7. Follow-up QA

  • Review client notes / bugs of new website, update where possible / within scope of project. Evaluate the website on my end to determine if there are any issues that need to be resolved before project close.

1

Understanding the Problem

Section Summary

  • One-on-one meeting with client to determining pain points and needs.
  • Evaluation of existing website.
Next: Step 2
Back to: The Process

Pain Points

After meeting with the client and conducting an evaluation of their existing website I determined the pain points and wants and needs that would be the focus of my redesign.

  • The existing Norden Aquavit website did not reflect the asthetic of the client’s brand.
  • The client wanted an email address capture method.
  • There was no age check upon site entry to see if the user was 21+.
  • The client desired a page sharing media accolades and the ability to update.
  • The client wanted the ability to update the cocktail recipe page.
  • The existing list of retailers who carried their product was outdated. The client desired a location map to display retailers.
  • The client underscored the importance of communicating their distillation process, the botanicals they used and the traditions. These points were not highlighted enough in the existing site.
  • The client expressed a need for an FAQ page due to the number of questions they received regarding their product.

Website Evaluation

I conducted an evaluation of the Norden Aquavit website to determine, outside of the clients pain points and desires, what I thought could be improved upon.

  • The existing website was outdated in design and lacked a strong brand voice.
  • The existing website lacked a statement clearly defining what the website was about.
  • The information flow of the existing site was choppy and indistinct. Employing hierarchy in the new design would bring structure and improve information intake.
  • The existing recipe page displayed cocktail images with a recipe link beneath them. The link opened in a new tab, taking the user away from the site.
  • Brand imagery was not used well throughout the site – a missed opportunity for brand cohesion and recognition.
  • Imagery of the product was not used in a compelling way. Visual interest must be maintained throughout site.
  • The existing site was not responsive – excluding mobile users from viewing the site.
  • To promote a feeling of trustworthiness, the existing site should change to an HTTPS protocol from an HTTP protocol.

2

Discovery

Section Summary

  • Develop target audience.
  • Identify Brand Attributes to help define the brand and design the most appropriate solution for client and users.
  • Research similar product websites to discover what is seemingly important to them as well as develop inspiration for design.
  • Establish Goals.
Next: Step 3
Back to: The Process

Target Audience

Established target audience to identify the needs and expectations of the user as well as understand them better, ensuring the finished product will benefit them and have a positive impact.

Liquor Promoters / Trade or Industry Person

This user is familiar with Aquavit’s rise to popularity. They will want to get to know Norden Aquavit well, gaining insight into their distillation method. They will look for answers to questions that will help make an informed decision on whether or not to carry or promote this product, such as:

  • Learning the ingredients and where they are from.
  • Learning the flavor profile.
  • Discovering that this brand is Michigan made and organic will set it apart.
  • Any industry awards the product has won will help substantiate the product.
  • Reading about the maker / owner will elicit trust and possibly a sense of familiarity.
  • Having downloadable materials available as a takeaway will help remind this user of the product and ultimately make an informed decision on whether or not to carry the product.
  • This user will want to know how to acquire a sample of the product.

Liquor Retailers / Bars and Restaurants

This user will want to know if this product will sell at their establishment, will it make them money. This will be determine by how well the brand presents itself through its website.

  • This is a fairly new spirit to the market and half of these users have not heard of it before. They will want to learn the story of Aquavit.
  • Is the brand sophisticated? Modern? Interesting?
  • Has this product won any awards, are there reviews?
  • The ability to display the user’s contact information as a product retailer will be key.
  • Learning the flavor profile and viewing cocktail recipes will be helpful in determining if this product fits in with the user’s other offerings.

The Craft Cocktail Public

This user has familiarity with product from either sampling or seeing it at a bar or restaurant.

  • This user is a trendsetter and most products they like will be trendy.
  • This user doesn’t know the story of Aquavit, so they will be interested to learn.
  • That the product is organic or sustainable will be a selling point.
  • Seeing that the product has won awards will make this user feel like the product is special.
  • Learning about the owner/maker will help the user relate to the product.
  • Describing the flavor profile and offering cocktail recipes will make this user feel more informed.
  • This user will want to know how to procure the product.

What I Learned From My Audience

  • A product finder map is very important.
  • Cocktail recipes with flavor profile descriptions are important and keep users coming back.
  • Displaying awards will give the product credibility and help establish trust.
  • An owner bio will help users relate to the product.
  • A definition of Aquavit at minimum is necessary – should go into the story.
  • It will be important to show the product is Michigan-made and organic.
  • The site design should be modern, sophisticated and lean towards trendy.

Brand Attributes

Norden Aquavit’s brand attributes were determined to help define a voice for the brand, informing an appropriate design solution for the client and users.

Six terms were established, choosing the top three and then the term that most described the brand in said category.

NORDEN AQUAVIT BRAND ATTRIBUTES

Competitive Research

I began researching websites that were potential competition for Norden Aquavit and websites notable for specifically promoting aquavit and websites of liquor brands more notably used in craft cocktails.

  • 1copperandkings.com –use of video clip on home page.
  • 2stgeorgespirits.com –media reviews on images in the slideshow of home page and their “Spirits Locator” page.
  • 3brooklyngin.com –The styling of this website paired well with the aesthetic of Norden Aquavit. Modern imagery of product in use, “Cocktails” page with enticing imagery, “Store Locator” page.
  • 4chareau.us –Clean, simple and modern. Wonderful use of imagery, “Cocktails” page uses beautiful imagery and displays recipe with hover. “Ingredients” page used as inspiration for Norden Aquavit “Botanicals” page.
  • 5copenhagendistillery.com –Very modern, clean site. A bit more sterile stylistically. Interesting “Recipes” page with video clips playing the steps of the recipe.

COMPETITOR WEBSITES

Research Findings

Displaying a large image of the bottle of liquor seemed prevalent and well as enticing imagery for ingredients and cocktails. Some websites were a little dated while many tended to lean toward a modern, clean aesthetic, however lacked a touch of uniqueness, something I wanted to maintain while also offering a modern edge. A store locator or map of where to find the liquor is prevalent as well as a pop-up window requesting age.

Goals

Informed by the information learned in the Understanding the Problem and in Discovery, I established goals.

To summarize: Re-design the Norden Aquavit website, incorporating functionality lacking in existing site and updating the design to match the client’s aesthetic.

  • Create a pop-up requesting confirmation of 21+ to enter the site. An easy way to become more reputable in the trade/industry while also improving user trust
  • Create a pop-up for email address capture.
  • The addition of a media page with the ability to add accolades.
  • Better cocktail recipe functionality that kept users on the site, as well as the ability to add recipes in the future.
  • The addition of a map displaying the current retailers throughout the country.
  • Increase user engagement by adding “where to” suggestion links, interactive recipe cards, a video clip of the distillation process and increase the number of images displaying the distillation process and product.

3

Ideation

Section Summary

  • Use collected research to informed the creation of wireframes and site map.
  • Present site map and lo-fidelity and medium-fidelity wireframes to client.
  • Restructure site map and wireframes based on client feedback.
  • Produce hi-fidelity mock-ups displaying an enhanced information structure and flow.
Next: Step 4
Back to: The Process

Initial Wireframes & Navigation Logic

Used collected research to inform wireframes and sitemap. Below is existing navigation along with additional pages and sections the client desired.

EXISTING NAV & ADDITIONAL PAGES

Using the information from above, I needed to organize the page layout and determine what pages the sections lived, finding the best solution for navigating through the site. I took pen to paper and sketched different scenarios for site logic, ordering in a way that would make most sense to a user. I then sketched initial wireframe concepts.

INITIAL WIREFRAME SAMPLE

Sitemap & Wireframe Presentation

Medium fidelity wireframe and sitemaps presented to the client.

I offered two examples, one with the client’s suggested menu items as well as a more simplistic approach with with fewer menu items. I also suggested alternative menu item names for “Process” and “How to Enjoy”: “Our Method” and “Enjoy”. I felt “Our Method” spoke to their unique take on the distillation process, and “Enjoy” was a simplified and friendlier version of “How to Enjoy”, further supporting the client’s desired aesthetic.

PRESENTED WIREFRAMES & SITEMAPS

Final Sitemap & Wireframe

During the presentation of my wireframes the sitemap was discussed with the client which yielded a simplified version of the navigation, providing ease of use and maintaining a clean design. I took this abbreviated version of the navigation and created a final wireframe and sitemap.

FINAL SITEMAP

FINAL WIREFRAME

4

Design

Section Summary

  • Design process begins, informed by Target Audience, Brand Attributes and final sitemap and wireframe concept.
  • Develop a hi-fidelity mock-up from design iterations to present to the client, which is approved.
  • Using the approved prototype, interior page design iterations are developed, and hi-fidelity mock-ups presented.
  • Final designs are developed and approved.
  • Develop Style Guide.
Next: Step 5
Back to: The Process

Style Guide

Created a Style Guide to maintain uniformity. Using established color and asset patterns throughout the site will help the user ascertain order and information structure.

Color Palette

Norden Aquavit had established brand colors. I chose to use the green as the primary color, matching their organic, local roots. The peach is a strong color and only needed as accent.

Typography

Norden Aquavit had a specific typeface used for marketing: ‘League Gothic’. This typeface is bold, narrow and has a heaviness to it. I used this for headings and titles and chose to use ‘Lato’ for the main content, a simple, light sans-serif font with a roundness, complimenting ‘League Gothic’.

Logo & Brand Imagery

Norden Aquavit had an existing logo and brand imagery from their bottle label. I chose 5 pieces of brand imagery and used them in a repeated pattern throughout the website.

Initial Design Iterations & Mock-Up

Informed from my Brand Attributes list defining the Norden Aquavit brand, my Target Audience needs and the final sitemap and wireframe concept the design process begins, moving through several iterations before settling on a hi-fidelity mock-up to present to the client.

INITIAL DESIGN ITERATIONS

Designing Interior Pages – Part 1

Using the approved home page design, the interior page design is developed, and hi-fidelity mock-ups presented. My initial design concept depicting the product bottle next to a cocktail was rejected but the overall design concept was well-received.

INITIAL INTERIOR PAGE DESIGN

Designing Interior Pages – Part 2

Design of the interior pages was solidified and hi-fidelity mock-ups were presented and accepted. At this stage I did advise the client against the large amount of content they presented, but upon their insistence the content was used. I employed brand imagery, large headlines and images to separate the content into chunks, making it more palatable for the user.

FINAL INTERIOR PAGE DESIGN

Final Design & Hi-Fidelity Mock-Ups

The design was finalized and hi-fidelity mock-ups presented to the client, which were approved for development.

FINAL DESIGN HI-FIDELITY MOCK-UPS

5

Development & Testing

Section Summary

  • Developing website, key components of website and user testing.
Next: Step 6
Back to: The Process

Key Components

Development of the website began. A blank WordPress theme, HTML + CSS were primarily used with plug-ins where necessary to speed up development. Key components of the website were created: map, contact form, popup and download links.

“ON BRAND” STYLIZING FOR MAPS, FORMS & POP-UPS

CONTACT FORM

POP-UPS & DOWNLOAD LINKS

Testing

The development phase of the Norden Aquavit website was coming to a close. I needed to perform testing on the website to ensure the website worked as promised.

Four testers screened the website and noted any oddities or issues they came across. I especially wanted to know that the map, contact form and popup were functioning as desired. I also wanted the testers to view the website on a variety of screen sizes to know if there was a problem with the responsive behavior. From the testing results I was able to find issues with the website that I may not know existed otherwise. I resolved all issues and was ready to launch the website.

Final Design

The final website was sophisticated and modern, reflecting the Norden Aquavit brand through color, imagery and customization. Users can easily navigate through the updated site structure, watch the distillation process in action, sign up with their email address to receive updates and even locate a retailer carrying Norden Aquavit.

Responsive Design

6

Results & Takeaways

Section Summary

  • Brief analysis of project outcome and key takeaways.
Next: Step 7
Back to: The Process

Results

Since the implementation of the new Norden Aquavit website, my client couldn’t be happier. They displayed it on Instagram and Facebook and were met with enthusiasm for the site and the product. As stated by my client, “the website is much more than they anticipated”.

Key Takeaways

  • This was by far my largest project to date, incorporating aspects of web development I had not encountered before, expanding my skill-set even farther.
  • This was great experience working with a client who may not always agree with the direction I was taking the project. Adjustments needed to be made to satisfy the client while still maintaining optimal design and user experience.
  • I gained knowledge of the behind the scenes inter-workings of a website, such as Google Maps & API keys, SEO, social media optimization and configuring email servers:

7

Follow-Up QA

Section Summary

  • Review client notes / bugs of new website, update where possible / within scope of project. Evaluate the website on my end to determine if there are any issues that need to be resolved before project close.
Back to: The Process

Follow-Up QA

QA follow-up two weeks from product release

  • After the product release allowed time for the client to review the website for any bugs and to hear feedback from users. I reviewed the website again after two weeks and discovered some issues that needed to be corrected, including sizing adjustments and accessibility occurrences with text contrast.
  • I also put together instructions on how to add new recipes to the website.
  • My QA findings and directions can be downloaded in PDF format below.
Close Menu