UI Design  |  UX Research & Design  E-Commerce Website

UI & UX Design  |  Website Design  E-Commerce

Project Overview

__________

The historic Distillery District is a much loved shopping destination in Toronto. While consumers continue to turn to online platforms for shopping and browsing, how do we translate the Distillery District experience into a website?

Our task was to develop a new website to promote the stores and products of the Distillery District in Toronto.

Client: School Project

Product: Website Design

Our Team:  Me: UI & UX, Graham & Shubhani: UX

Design Sprint: 2 weeks

Tools: Sketch, Invision, & Illustrator

UX Research

__________

Research Methods

We spent a day on site at the Distillery District conducting field research in the form of customer surveys and vendor interviews.  Our goal was to get to know the needs and frustrations of Distillery customers, as well as the vendors in the district.

We spent a day on site at the Distillery District conducting field research in the form of customer surveys and vendor interviews.  Our goal was to get to know the needs and frustrations of Distillery customers, as well as the vendors in the district.

Who are our users?

Through our research, we were able to determine that most people come to the Distillery District for the experience. They like the history and the atmosphere. They value it’s uniqueness and are interested in buying locally produced products.

We came up with 2 user personas to help summarize our findings: the tourists, and the local.

Through our research, we were able to determine that most people come to the Distillery District for the experience. They like the history and the atmosphere. They value it’s uniqueness and are interested in buying locally produced products.

We came up with 2 user personas to help summarize our findings: the tourists, and the local.

Who are our vendors?

We were surprised to find that there was a large divide among the different types of vendors in the Distillery District. There were generally 2 types of stores: Retailers and Artists/Makers.

We were surprised to find that there was a large divide among the different types of vendors in the Distillery District. There were generally 2 types of stores: Retailers and Artists/Makers.

vendors chart

Identifying Opportunity

Identifying Opportunity

__________

What makes our site unique?

What makes our site unique?

We had identified a gap in the market: There was no good outlet for local Toronto vendors to sell their handmade products.  E-commerce platforms available are impersonal, flooded with too many vendors, and don't cater to small artisinal companies. We needed to create a carefully curated e-commerce site that captured the unique feel of the Distillery District.

We had identified a gap in the market: There was no good outlet for local Toronto vendors to sell their handmade products.  E-commerce platforms available are impersonal, flooded with too many vendors, and don't cater to small artisinal companies. We needed to create a carefully curated e-commerce site that captured the unique feel of the Distillery District.

Design and site structure

Design and site structure

With our personas in mind, we began low-fi sketches, followed by mid fidelity wireframes in Sketch.  Through testing and iterative designs, we landed on a simple navigation that resembled traditional e-commerce, with added room for artist profiles and events.

With our personas in mind, we began low-fi sketches, followed by mid fidelity wireframes in Sketch.  Through testing and iterative designs, we landed on a simple navigation that resembled traditional e-commerce, with added room for artist profiles and events.

midfi screens

UI Research

UI Research

__________

What should the UI say to users?

What should the UI convey to users?

I began to ask myself general questions about the visuals of the site.  A design inception sheet helped me ask the right questions. The first question being "why?"

Why?: To give users a unique shopping experience comparable to visiting the Distillery District. 

I began to ask myself general questions about the visuals of the site.  A design inception sheet helped me ask the right questions. The first question being "why?"

Mood: Old-meets-new, welcoming, personal, unique, slightly quirky

Colour: Warm and soothing with refreshing pops of colour

Movement: Fluid, smooth

Shape: Rounded, simple

Why?: To give users a unique shopping experience comparable to visiting the Distillery District. 

Mood: Old-meets-new, welcoming, personal, unique, slightly quirky

Colour: Warm and soothing with refreshing pops of colour

Movement: Fluid, smooth

Shape: Rounded, simple

Visual Inspiration

What does the competition look like?

My visual research started with e-commerce sites, but I quickly realized that the clean and flat aesthetic of many online stores didn't feel right for Distillery. I wanted the Distillery website to be friendly and warm.  It needs to show the historic nature of the district, while at the same time appealing to a hip young crowd. 

I continued my research by looking at different types of websites: barbershops, bars, coffee shops, and breweries. 

My visual research started with e-commerce sites, but I quickly realized that the clean and flat aesthetic of many online stores didn't feel right for Distillery. I wanted the Distillery website to be friendly and warm.  It needs to show the historic nature of the district, while at the same time appealing to a hip young crowd. 

I continued my research by looking at different types of websites: barbershops, bars, coffee shops, and breweries. 

ui inspo

UI Development

UI Development

__________

__________

mood board

Mood Board

Mood Board

I gathered images to create a mood board, keeping an emphasis on "old-meets-new" as I feel this perfectly embodies the Distillery District. 

Texture also became important in creating a warm and friendly feeling.

The mood board included my proposed colour palette which had some calming desaturated tones, with a pop of turquoise and yellow.  Again, this plays into the juxtaposition of old-meets-new.

I gathered images to create a mood board, keeping an emphasis on "old-meets-new" as I feel this perfectly embodies the Distillery District. 

Texture also became important in creating a warm and friendly feeling.

The mood board included my proposed colour palette which had some calming desaturated tones, with a pop of turquoise and yellow.  Again, this plays into the juxtaposition of old-meets-new.

Logo Development

Logo Development

As reflected in the mood board, a lot of logo inspiration came from vintage signs and packaging.  I looked at several different fonts and compositions before coming to the final version.

As reflected in the mood board, a lot of logo inspiration came from vintage signs and packaging.  I looked at several different fonts and compositions before coming to the final version.

logo variations2

Final Logo Design

I chose this final version because I feel it is most versatile: the shape is balanced, and it doesn't include any small elements that might scale poorly.

Final Logo Design

I chose this final version because I feel it is most versatile: the shape is balanced, and it doesn't include any small elements that might scale poorly.

logo black
christmas logo development

I really liked the more ornate version, however it wasn't right for the logo.  I later incorporated it into the hero text for the homepage.

I did really like the more ornate logo version, however it wasn't right for the logo.  I later incorporated it into the hero text for the homepage.

Style Tile

Style Tile

I began looking at visual elements such as fonts and buttons.  The style tile shows all of these elements coming together and gives an idea of how the final site will look.

Style Tile

I began looking at visual elements such as fonts and buttons.  The style tile shows all of these elements coming together and gives an idea of how the final site will look.

The Final Product

The Final Product

__________

__________

The homepage was put into high fidelity to show how the completed product would look.  Future consideration would include bringing the rest of the screens into high-fi and building out the remaining screens, such as each individual artist's page.

The homepage was put into high fidelity to show how the completed product would look.  Future consideration would include putting the rest of the site into high-fi and building out the remaining screens, such as each individual artist's page.

Homepage V2-new Copy 3