Improving the Distillery District Website Design: UX Case Study
Time: 2 weeks
Resources: 4 team members
My role: User research, part of the design and prototype evaluation
1. Overview
If you love art, specialty stores, and outdoor markets, the distillery district is the right place for you. The distillery contains numerous cafes, restaurants and shop housed within heritage buildings of the former Gooderham and Worts distillery. The 13 acres district comprises more than 40 heritage buildings and ten streets, and is the largest collection of Victorian-era industrial architecture in North America. The distillery is now a major link connecting millennials, Gen X and Gen Z to Toronto’s hazy, booze-filled past.
2. Scope:
A. The challenge
While shopping local, on site provides an unique experience, the way consumers shop is changing. And local stores are predicted to lose millions of dollars in retail sales. Based on this statement, our task, as a team of 4 UX designers, was to create an online experience that helps drive more traffic to the local market as well as increase community engagement.
B. Goal
Our goal was to improve the current website design, so that we can elevate the distillery online experience to help draw more business in the local stores.
C. Approach
With a two week time constraint, we outlined our deliverables as follow: define problem statements, get insights by conducting survey; Summarize the results of the surveys into personas, user journeys. Then create a site map, draw wireframes and run usability test to validate the design. In the sections below, I will describe in more details the process to achieve each deliverable.
3. User Research
A. Surveys and CC Analysis
Our objective in creating surveys was to better understand: consumer demographic — consumer shopping behavior — Consumer experience at local shops — vendors characteristics — vendors online presence — vendors challenges to maintain an engaged online presence.
We conducted 2 surveys:
1) Online survey with 31 consumers over 3 day period.
2) In-person survey with 15 vendors at the distillery district over 4 hour period;
We also performed a competitive analysis for 2 direct and 2 indirect competitors websites, comparing : ease of navigating, information provided about vendors, promotions/discounts feature.
B. Insight from surveys and CC analysis
We put the data collected from the surveys into an affinity diagram for better visualization, sorting and analysis purposes.
The online (consumer) survey results revealed that:
- Most customers were local shoppers;
- These customers were active on social media;
- Promotions and discounts influence greatly influence their shopping decisions;
- They enjoy shopping locally to support the economy, however they associate local shopping with high prices, low inventory and crowds.
The in-person (vendor) survey results revealed that:
- The majority of the vendors range from small boutiques to medium size stores;
- Vendors have a weak presence on social media;
- Vendors lack resources to maintain an engaged online presence to reach their target market;
- Vendors want more exposure; discovery is currently happening through word of mouth.
With the competitive analysis we were able to conclude that some competitors did a better job at providing information about vendors on their websites; and that featuring promotions/deals was a big selling point.
C. Users and Audience
From the survey’s results we created two personas:
- Consumer: Frederique, a young female in the twenties who loves art and cultures. she appreciates craftsmanship of artisan products. She likes to use technology to discover new places to find unique and special gifts for special occasions and holidays. She enjoys shopping online but missed the human touch of building personal relationships while shopping in person.
- Vendor: Iorek, owner of a small art boutique, for seven years, who wants to increase exposure, promote the arts and reach out to a larger base of customers. But he has limited resources to develop an in depth online presence.
We described their in-store as well as online experiences with costumer journey maps.
4. Design
After the research phase, we were able to get a better understanding of the goal, motivation and frustration of the users. We reviewed the websites of some direct and indirect competitors for inspiration. As a group we came up with a list of ideas. We draw some sketches on paper (lo-fi) to clarify those ideas. See pictures below.
We quickly tested our lo-fi, based on the feedback we created the site map and started designing the working prototype (mid-fi) using Figma. Some key pages we designed include:
- Landing Page which highlights “deals” of the day, and features 5 vendors on a weekly basis
- Vendor page which provides information about all vendors in the distillery district, as well as links to their social media. The vendor information can be filtered by categories. Vendors with special deals are tagged
- Promo Page which provides a list of all sales promo currently running by distillery district’s vendors
- An interactive map to easily discover vendors on sites , especially for first time visitors.
Link to the working prototype: https://www.figma.com/file/cBp1rJnyRzJFcSR6wkQjuq/P2-Distillery-District-Squad?node-id=0%3A1
5. Testing the working prototype
Before testing we defined the usability test objectives and wrote the script. The script consisted of scenarios and set of tasks to execute. We conducted the test with 7 participants. The usability test feedback was mostly positive. Our participants overall enjoyed the online experience, they liked the neat interface, the layout, simple language. Some of the main issues encountered while testing were:
A. Key Findings
Task 1: Users were asked to find the list of event happening this week at the distillery.
Issue: They could not locate events because they are listed under art and culture tab. Users expected a separate tab for event.
Task 2: Users were asked to locate vendors on the map, and find direction to go from vendor A to vendor B.
Issue: While the interactive map looks interesting, the map did not make sense to them without the directory listing. The search function was not intuitive.
Task 3: Users were asked to list all promos currently running. Issue: They found promos in a slider overwhelming. They worried about missing promos because of the slider. The would prefer having more control over the information display.
B. Future Considerations
Given it was a 2 week sprint, we did not have time to implement the major changes from the usability test. Some future considerations for the website would include:
- Directory listing linked to the interactive map ;
- Giving options to users to display promos in static frame;
- Providing promo code that could be scanned and redeemed in store;
- Incorporate an e-commerce aspect to the website where vendors can sell their most popular items online to pick-up in store.
6. Outcomes and lessons Learned
A. Outcomes
The improved design of the website allows consumers to be more informed about promos running at the distillery district. Before visiting vendors, customers can easily look them up online and know what to expect in store. Those who are not familiar with the distillery district layout, can now refer to the interactive map to find their way. No need to spend hours trying to locate a vendor or getting lost. These added features to the existing web platform will create more interactions between customers and vendors, which in return will drive more traffic to the stores.
B. Lessons Learned
In the process of improving the design the distillery district website, I learned to:
- Create surveys that gather accurate feedback from stakeholders which can yield to good quality data. While sorting the affinity diagram to find trends we realized that some of the questions we asked were not relevant enough. The surveys could have been shorter; that would have saved us time sorting and analyzing.
- Manage time effectively, complete each task on time, and iterate fast. We barely had time to implement even the smallest changes after testing the mid-fi. This would not have been an ideal situation for us, if we were working for a client.
