Kensington Market: A UX Case Study
The UX behind Toronto’s Most Diverse and Vibrant Marketplace
The purpose of P2 was to propose a website for Kensington Market as the Kensington Market’s website does not provide the vibrancy and sense of discovery that majority of visitors go there for. This opens up an opportunity to better capture the cultural, social, and event-based aspects of the market online. The solution was identified with a group of 3 students from Red Academy through the design process to successfully establish a mid-fidelity prototype of the mobile website.
The Design Process
The design process is broken into five phases: research, planning, design, testing, building.
Research
For the research, we generated the following to gain different perspectives of how they perceived the market, gain some insight on how the website should be and to understand the industry it’s competing with:
- Interview questions for the BIA
- Interview questions for the Shop owner
- Survey questions for the visitors of Kensington Market
- An affinity digram
- 2 Personas — shop owner and visitors
- Competitive/comparative analysis for the Kensington Market website
Interview and Survey Results: Within a 2 hour span, we received 14 responses from the visitors and 5 in depth responses from the shop owners. The BIA was not reachable at the time of the sprint so they were not interviewed. From the visitors, we wanted to get an understanding of their online shopping patterns along with their knowledge of the Kensington market and its website. From the shop owners, we were trying to engage how they perceived the Kensington Market and the website as well.
Affinity Diagram
The results from the interviews and surveys were written on sticky notes and grouped together to be organized into groups of common themes/relationships. This allowed us to understand what should be considered when developing wireframes and prototypes.
Persona
Below are the two personas generated based of the answers received from the research: for the shop owner and the visitor.
Competitive/Comparative Analysis
Below is the competitive/comparative analysis of the Kensington Market’s website against leading competitors such as the Walmart, St.Lawrence Market, Grocery Gateway and Etsy.
Kensington Market’s website does not provide the vibrancy and sense of discovery that majority of visitors go there for. This opens up an opportunity to better capture the cultural, social, and event-based aspects of the market online.
The website must exhibit the cultural, social and event-based aspect experienced at Kensington Market in a minimalistic fashion.
Planning
User Flow Diagram
Design
At this stage, different flows of the website were split amongst the team and sketched in low-fidelity as seen below.
The team then took the sketches to design and redesign the screens on Sketch based on the software capabilities. Version 1 (V1) are the mid-fidelity screens from Sketch which was then imported onto InVision to be tested.
Click here to view the V1 of the prototype.
Test
V1 was tested on InVision to ensure that the website was seamless for a first time user in order to be able to find spots in Kensington Market, as per the hypothesis.
Usability Test Instructions:
Imagine if you’re going to Kensington Market. Go through the website and check out the following: deals from stores within that market, stores, blogs, and history.
Findings from testing:
Most users expressed similar issues at first but was able to navigate through the website once the pain points were discovered which were the following:
Issue#1: Finding stores wasn’t explicit as ‘experience’ could mean anything for a first time user
Solution#1: Removed ‘experience’ group and displayed pages within the group on the home page and menu for easy access by replacing boxes designated for social media, grid expanded for more space
Issue#2: No navigation path to go back to the previous page, unaware of location within website
Solution#2: Inputted breadcrumbs on applicable pages to click to go back to the previous page and awareness of location
Design Solution
After testing the prototype and making necessary modifications, the link to Version 2 (V2) of the prototype is here.
Summary
This project allowed me to explore mid-fidelity screens and new software to create them in. It was interesting to use specific symbols and images to represent items such as images on the screen. This project brought insight to how different it is to sketch first on paper and then to bring it to sketch for a mid-fidelity prototype. We decided to create a mobile website that exhibits the cultural, social and event-based aspect experienced at Kensington Market in a minimalistic fashion. Most users search for places generally on their phone and aren’t motivated to download an app for a visit or two.