Discovering Stories of the Distillery District
A UX Case Story (Study)
This study documents my second project at RED, and our first group project. Here’s my story of working as one of four UX design students and our work on revamping an e-commerce website!
Opportunity:
To build an ecommerce website for one area of the Distillery District in Toronto with the goal of promoting shopping locally, and ultimately bringing in more sales.
For those not familiar, the Distillery District is a historical area located in the south-east side of downtown. As its name implies, it was once an industrial area, but has since been restored into today’s centre for high-end fashion boutiques, art galleries, culture, and eateries, while retaining its European cobblestone character. If you’re still curious, here’s more information.
Research
We employed various methods of research at various points of the project. We started off doing some organizational and domain research on the Distillery itself, like learning more about the district, their offerings, tenants, history, and so forth, through online research (secondary). We found that most of the stores in Distillery District already had their own individual online stores. The existing site is essentially a directory to their external respective websites.
We also went to visit the site on the first day and conducted in-person interviews with shoppers and business owners there (primary research). It was later in the evening when a lot of shops were closed and it was a cold winter evening, but we still managed to catch a few shoppers and shop owners.
Our key findings were consistent between both sides:
- It’s an expensive shopping area with high quality, unique and artisanal products
- They enjoy the great service
- Relationships between the customers and shop owners and the sense of community were key to shoppers continuing to go back
- Both sides mentioned that there was a lack of support and consistency between stores, and also between stores and the administration (of the Distillery).
Alongside the interviews, we conducted an online study on general online shopping habits and had 50 participants. Here, the key findings were:
- The most important factor when online shopping is quality, followed closely by pricing.
- Great customer service was also important.
However, there was a disconnect between those we interviewed and those we surveyed. Given this, and that the Distillery District is a high-end shopping area — we can’t lower any prices, therefore, it was about focusing on communicating that the high prices are justified because they also offer what people value the most when shopping:
- Want high-quality goods
- Value great customer service
- Unique items
As an aside, I researched into “e-commerce” itself to provide a larger context to ground our data as I thought it would be important to better understand how to strategize our eventual product. I quickly came across the concept of O2O — or:
“Online-to-offline commerce is a business strategy that draws potential customers from online channels to physical stores.”
Source: Investopedia
More specifically, how we can employ the “click-and-mortar” business model, aka an omnichannel strategy of integrating both online and offline channels holistically into one consistent experience and not seeing them as separate and competing?
With both primary and secondary research in hand, we used an affinity diagram to make sense of all of this and create a persona we would create a product around.
Planning
And here she is! Our persona — The Fashion Connoisseur:
Eleanor has a refined sense of style, and motivated by exclusivity and which means finding unique, artisanal products of high quality and craftsmanship. Therefore, pricing isn’t as much of an issue for her. She likes to support indie brands and artists because she values feeling a sense of connection with its maker. However, she’s a busy young professional and so convenience, service, and time is something that is also important.
Journey Map
We completed a Journey Map of our persona buying something online to identify the who, what, where, when, why, and how — including opportunities for our product. This helped to see that the whole journey needs to be convenient and timely and we kept this in mind when designing…
Design
At this point, at the back of our minds, we were going to do a traditional e-commerce site, curating top products from various merchants of the Distillery onto one big e-store. This was the first hiccup when we realized that this wasn’t a viable solution. Most of the stores already had their own e-stores, so did creating an additional one requiring real-time maintenance make sense? Nope.
Back to the drawing board….or white board.
We looked back to our research and reviewed what drew people to the Distillery (what they did well), and what were the pain points (what they didn’t do well). People like our persona liked the Distillery because it was a place offering exclusive, unique, high-quality goods. Part of that experience was also about being able to connect and support with the indie makers’ stories.
But one of the frustrations was the lack of consistency across the shops — both offline and online. It wasn’t easy to use the website. If someone wanted to browse shops or products online, they had to go to each store’s individual website…who wants to do that?!
So stepping back, we determined that our overarching mission was to help users discover stories of the stores (makers) more consistently and easily. Instead of focusing on the selling of individual products, it was shifting the focus to providing easy and consistent access to the stores/makers’ unique stories and offerings.
Many of the fashion websites we saw were laid out in in a magazine-style — that is grid like and driven by strong visuals and otherwise, a clean and modern aesthetic, and featured blog articles. This makes sense — high-end fashion is often associated with fashion magazines.
Building
We did some rough rough screen sketches, and I digitalized the site map, while we initially all did a few wireframes in Sketch to create our first prototype of our site on InVision.
Testing
We then did a few user tests and got some valuable feedback:
Navigation menu
The three items all seemed disjointed from each other…especially Articles. We also were advised to scrap the search bar. So, how could we get it to flow better? We started adding things back in like Contact, About….but it felt to me like we were going backwards and just making a generic site…but, we realized the answer was just under our nose! We wanted to tell a story right? And what are all these articles, anyway? STORIES! So it turns out we just needed to rearrange and rename them. We did so in a way that mimics how a user would ideally use the site (and added a verb — subtle, but makes a big difference).
- Discover stories (articles, events, featured products or makers)
- Meet makers (profile page of each Maker/Store)
- Visit Distillery (info for visitors)
Lack of consistency across pages
It was pointed out that we arranged the articles/stories on the front page like a magazine, yet this wasn’t consistently carried through in the inner pages. Now we’ve make it consistent with the front by varying the images for visual interest.
Too text-heavy
Some of our pages, like the Maker page was seen as too text-heavy, with too little imagery. So, the new ones have more imagery including sliders and videos — for those who don’t want to read, you can still get the story through visuals.
Finally, related to navigation and flow, we also added the “Related Stories” feature at the bottom to connect the 3 core sections in a more horizontal way instead of how it was very “vertical” and separate from each other.
Prototype
Here is where our clickable mid-fidelity prototype stands. Have a click around to wander and discover The Distillery’s STORiES! (please keep in mind not everything is linked as it’s a working prototype)
Challenges, Limitations, & Lessons
Much like the last project, and probably for most projects, time is always a challenge. I personally would have liked the prototype to be a bit more polished had we had more time, but of course fixing up the structure and flow to meet the objective was more important to prioritize. With a short timeline (two weeks), it also wasn’t possible to step back from the project to see it through clearer eyes — the order of the navigation seems really obvious now in hindsight!
This was our first project in a team setting, so it took some time to learn about each other’s working styles, schedules, personalities, etc. Also, because we’re all still learning UX principles alongside the lessons, we took an approach of everyone doing a bit of everything throughout the process. This wasn’t the most time-efficient way, so in the future, I’d like to try a different approach of splitting up the work a bit more.
Lastly, It was really helpful for me to think about the project in an analogy. For us, it was the concept of stories, and more specifically the magazine (a compilation of mini stories). Sometimes learning all of these new concepts can be so abstract, so using an analogy to help translate a real-world experience into a digital one was handy for me to make the connection.
And, that’s the story of how my team and I integrated stories into the story of the Distillery District!
End.
