Designing a 157 Years Old Market’s Website — a UX Case Study
The following case study is part of a design challenge from my UX course at Red Academy Toronto.
Overview
Well known for its independent spirit, colourful shopfronts, vibrant murals, and eclectic businesses, Kensington market has been Toronto’s charm since its establishment in 1862. The market is incredibly diverse; it is filled with many cultures and is a mixture of local historical shops as well as a new wave of more upscale cafes and restaurants. Despite its long-standing, there is a growing concern that Canadians will lose interest in shopping locals as people being drawn online more and more.
Brief
Design a desktop website for Kensington Market that will increase interest in shopping local, supplement the sales of the shops, and increase community engagement. There are no guidelines in terms of the website feature; however, the website is required to have an e-commerce function.
Deliverable
Create a medium fidelity prototype as the final product in 2 weeks period.
Role and Tool Used
Throughout this project, I am working as a UX designer, together with my other three teammates (Mehraban, Melissa, and Lily). We are using Sketch and InVision to design and prototype the website.
Research
Our research objective is to find out if there is an existing problem in the market that can be solved using a website.
5 business owners interviews, 4 consumer interviews, 1 Business Improvement Area (BIA) representative interview, 65 online survey respondents
Direct interview
We focus on getting people’s impressions of the market, their likes and dislikes, whether there are existing pain points or not, awareness of the market’s online presence, and their thoughts on Kensington with an e-commerce platform. Additionally, for the BIA representative, we also ask about the market’s future goals and their masterplan.
Online survey (posted on subreddits and Facebook groups)
This is my very first UX research online survey, and an important key learning is never underestimated the process of creating a survey. It is not as easy as it looks like and it took so many tests and iterations to get the form to work perfectly fine.
Newbie tips: Do not lead respondents who didn’t pass the screening questions directly to the ‘exit’. Instead, ask them more questions, get to know why they didn’t pass the screening. (e.g. if they have never been to Kensington Market: do they know the market? why they have never been there?).
Field Research
What is a better way to learn about a market than actually going to the market + some shopping, right? 😬
Insights from Research
We sorted the problems that we find from the research by asking ourselves whether: 1) a digital product is the best way to solve the problem 2) it brings any value to the market 3) it fulfills our project brief.
Since finding the ‘right’ problem is our initial research objective, we got caught off and became too focused that we forget to look at the bigger picture and to see if there is underlying opportunities and gaps that in fact can be the best way to start our project. Additionally, many problems we encountered were problems that are best solved offline and is out of our scope.
So what we did was to take a step back, try to look at the bigger picture and see if there is any red thread and reanalyze the brief and the study results.
Affinity Diagram
The findings from our research were organized on an affinity map to understand their relationship to each other better and to find gaps and opportunities. Our study revealed a common concern for:
- Preserving the community.
- Keeping the market’s offline experience since this is the uniqueness of the market.
An important key learning from this research stage:
“Sometimes digital product is not meant to solve a problem, it is meant to enhance existing goodnesses and opportunities.”
We decided that our digital product will act only as complementary to the offline experience. The main goal is to increase market traffic and sales that will also build awareness and contribute to community preservation.
However, since e-commerce is a required feature, we spent some times thinking about how to incorporate it. Kensington is very diverse that it is hard to pick on an item or category that can represent Kensington as a whole. If we decided to sell every type of product in Kensington, it would be more likely for the users to be overwhelmed. Moreover, from our interviews, we found out that many business owners are resistant in using e-commerce platform since they lack digital product knowledge and do not have time to manage it.
So we decided to incorporate the feature by selling BIA’s merchandises (t-shirts, hats, tote bags, etc.). The idea behind it is all the merch will be designed by Kensington artists, and all proceed will be given back to the community.
Competitor analysis
Starting to know the direction of our project, we dig a little deeper on the market competitors to find inspirations and opportunities. The competitors we analyzed are markets that compete with Kensington market or online platforms that have the same niche.
Planning
Target Market
On the planning stage, we first created provisional personas of a potential website user based on our research. From our interview with the business owners, we found out that the most frequent visitors are locals and tourists. Therefore, we create personas for both that will act as a guide to help us focus on who we’re designing for and to ensure that we fulfill their specific needs.
“As a Toronto native, i want to support Kensington artists and local businesses in order to preserve the character of the community.” — Neha
“As a world traveller, I want to plan an itinerary for my Kensington trip so that I can have a share-worthy experience while minding my time and budget constraints.” — Mustafa
Our Proposal
Based on Neha and Mustafa’s story, we re-scoped and ended up with two goals:
To find places that fit the user’s time and budget while fully experiencing the market (Nurture the offline experience, increase shops sales, and increase shops traffic).
To collect money for the Kensington BIA to help the market as a whole (Preserving the community).
Site Map
One of the features that sets us apart from our competitors is the trip planner. The trip planner allows users to create a travel plan by selecting pictures that interest them. From the pictures that are chosen, a list will be generated that shows where the pictures were taken. Moreover, the list can be edited by the user and can be sent to their email. Since many visitors are tourist, it is crucial to create something interactive and appealing, and one of them is by using pictures (Image is proven to be more attractive than just text).
Design
Low-fi
We started the design process by creating pencil sketches individually to brainstorm and generate ideas; once we are done, we grouped back to combine the designs.
Mid-fi
5 main pages, 46 artboards
Usability Test
3 tasks, 5 user test participants
Tasks:
- Imagine you are trying to find a restaurant in Kensington Market for lunch. You want to find a place that isn’t too crowded and fits your limited budget. Use Kensington’s website to find recommendations. (goal: Test if our visit page flow works)
- Imagine you are an international tourist. People have recommended you visit Kensington market during your time in Toronto, but you have no idea what is there. You want to find out more about the market and plan an itinerary before you visit. (goal: test if our trip planner flow works)
- Imagine you are a Toronto resident. Kensington market is special to you, and you want to buy merchandise from the site to support the community. Buy a Kensington black medium T-shirt with your credit card; your shipping address is the same as your billing address. Use the site to make your purchase. (goal: test if our e-commerce purchase flow works)
Issues we found
- The copy does not indicate that we are trying to preserve the market.
- Not having a copy in the mid-fi affects the usability test, since some messages we are trying to deliver can only be conveyed through the text. (Also some action words on the buttons do not match with the buttons’ functions.
- Some pages don’t have a title/ header that caused users trouble in indicating where they are.
- “Less is more” is not always right. We try to reduce the number of clicks for users to finish a task that turns into a double-sided knife.
We try to merge the map and the directory section in one page to decrease the page number that turns out into a big mistake. The placement is odd, the hierarchy is off, and it is clear that both features do not belong together. Another example is creating onboarding pages, even though it might increase the number of clicks or makes the process longer, the user will obtain more information beforehand, thus, way clearer and there will be less error.
5. Missing feature: users want to be able to save locations they are interested in.
The final product
After many testing and design iterations, we finally completed the project!🙌🏻
Want to try the experience? Explore our prototype
Thank you for reading! 🌞
