UXD Case Study: Designing an e-commerce solution for Kensington Market
This case study examines the process my team and I used to develop an e-commerce solution for Kensington Market for our second project at RED Academy.
The Opportunity
Kensington Market is a multiculturally diverse neighbourhood located in Downtown Toronto. It is home to an assortment of independent shops, services, restaurants, bars, and cafes. This eclectic neighbourhood has been around for decades, and continues to garner much of its success from the rising popularity of shopping locally. With the convenience of shopping online however, there is a growing concern that Canadians will lose interest in shopping local.
Our goal as a team of four was to build an e-commerce solution that would increase both the interest in shopping local and community engagement online. Our target device was a desktop website.
Research
We began our research by visiting Kensington’s current site and discovered the following:
- Inconsistencies with the type of information provided or a lack thereof
- Lack of visual interest
- A lot of unrelated ads
- No social media mentions or links
As most our group had either been to Kensington prior, or frequented it often, we drew up an initial hypothesis:
Kensington and its customers wouldn’t be interested in an e-commerce site to sell products online because its uniqueness and oddities are best experienced first hand.
Although we didn’t think many vendors would be interested in a site to sell their products online, we decided to focus our sights on grocery vendors. We figured they would be most receptive to the idea of a pick-up/delivery solution since it’s concept that is currently being adapted by many groceries. Plus, it would be easier to order food online than a unique article of clothing or furniture you haven’t seen in person. From there we formulated three questionnaires and a set of interview questions:
- An in-person questionnaire for shoppers at Kensington
- A questionnaire to be sent via social media for those who have shopped at Kensington before
- A questionnaire for those who shop online, which was to be sent via social media
- An in-person interview with vendors
At Kensington, we had one researcher conduct the in-person questionnaires from shoppers found at the grocers we interviewed, while I interviewed the shop owners as my partner took notes. The other two questionnaires were sent online via social media. We then compiled all our findings into an affinity diagram, and mapped out any trends. From there, we created our user personas. Together we had 2 shoppers, and 1 vendor.
Dakota is the persona we created who represents the “thrifty shopper”. At a lower income, Dakota has to be more mindful of where and how she spends her money. Living a bit further away from the Market, she typically finds herself there only a few times a month when she finds the urge to go exploring. She typically doesn’t seek anything in particular, but is happy when she stumbles upon that unique item.
Jonas is the “specific seeker” who typically enjoys shopping at Kensington for its harder to find ingredients, as he is a chef. He makes a modest income, and works hard for his money, so before making purchases he wants to be assured of its quality.
Lenni is a hardworking and friendly local shop owner at Kensington. He knows most of his customers by name, and is always happy to help anyone out. He knows there are benefits to his store being present and active on online outlets, but admits he isn’t very technologically savvy. As most of his days are spent tending to the store, he doesn’t think he has the time to make updates online.
Based on the interviews from our vendors, we discovered they all had an interest in adapting some form of e-commerce site, but most expressed concerns about actually creating and maintaining one. Most were too busy running their shop, and/or didn’t have the technological capabilities to make it possible. Similarly, most of the shoppers at Kensington were generally opposed to the idea, so we decided an online shop would not be the right solution for Kensington.
Through our interviews and surveys, we validated our hypothesis. Our shopper data confirmed that Kensington and its unique and specialized shops are places to be experienced, and our vendor information echoed that they were cautious of developing an online shop.
“Other spice stores normally specialize in a certain type of spice. We have it all. We have 59 dealers in 72 countries, and have 88 different kinds of seasonings — 29 of which are blends made by my boss”. — Carlo’s House of Spice
So how could we provide an e-commerce solution to a neighbourhood that didn’t want to buy or sell goods online? One solution we initially explored was creating an online interactive map of Kensington. Both vendors and visitors expressed a desire for Kensington to be experienced in person, so we wanted to try and emulate the physical aspect of of being at Kensington while online. As the user clicked through the map, they could discover fun facts, view photos, and learn a bit about what makes each shop unique. In making this information easily accessible — something which the current site lacks, and done in fun/quirky Kensington-esque way, we hoped it could get new visits to the market.
The map was a solution solution we had, but we decided to explore other possible avenues to determine whether it was the best solution. We referred back to our findings on our affinity diagram, and rearranged it a couple more times until we realized there was a much more common trend that kept popping up from both the vendors and customer sides.
Of the vendors we interviewed, we discovered they used little to no advertising, yet somehow they had the capacity to keep their stores afloat (some for several decades!). So how were people finding out about their stores? One answer that continually came up was the idea of word-of-mouth. Vendors kept expressing that customers “just knew” about their stores, and people would continually find out about them through word-of-mouth. So we created a fifth questionnaire. With this new questionnaire, we were hoping we could get a better notion as to what people looked for when reading reviews online, and what motivated them to read/write them.
Based on our collective data — new and old, we decided to shift our focus away from creating an interactive map, to creating an online platform for Kensington Market that shared reviews. We wanted to translate that word-of-mouth aspect that Kensington thrives upon into an online experience. By sharing other peoples experiences, discoveries, and stories online, we could cast Kensington’s proverbial net further and much faster than the traditional word-of-mouth method, and towards a larger population. In turn this could potentially bring in new foot traffic to the area, and result in an increased number of sales at the shops.
Now that we had the idea, our next step was to look into comparing and contrasting competitor sites that already did the same: Yelp, Foodspotting, Phind, Zomato and Google My Business. We discussed some development capabilities with our mentors, and decided our site could potentially pull data (images, tags, reviews, captions) using an API from the aforementioned review sites. This would mean that maintenance after the site was launched would be relatively low, and require minimal initial effort on the vendor’s part.
Planning
Our next step was to create use cases and user scenarios. This helped us predict what steps our personas might take, and where things might go wrong. The use case also helped us to prioritize what functions were necessary for our users. We divided them into two groups: Need-to-haves and Nice-to-haves. We then had one of our team members create the user flow diagram below to help us visualize how everything would work.
Design
One of our team members sketched out the initial wireframes based on our user flow diagram. From there, I converted his paper wireframes into a mid-fidelity wireframe, using sketch, and then into a clickable prototype on Invision.
Key elements/functionalities:
Fixed Top Nav Bar
- Includes key elements we wanted available for the user no matter what page they are on on the site
- This includes: search bar and 2 types of search buttons, social media icons, logo, and log in/out and account settings button
- Exaggerated search bar and category tab: We wanted this to be large, and placed prominently at the top of the page as to encourage people to search.
- 2 search buttons: “Take me on an adventure” was created with our persona Dakota in mind and works similarly to how Google’s “I’m feeling lucky button”. Essentially if someone (like Dakota) felt like exploring a new store, she could use this function. The second search bar would work as a regular search bar.
- Social icons: The current Kensington site has no mention to social media, and social media is mass media. Of people people surveyed at Kensington, 100% of them had some form of social media, so we want to encourage them and others to follow and also share their reviews.
Results page
- Ordered from highest to lowest rating: Since looking at the recommendation of other shoppers is what most people found most important when making an informed decision, I created the order of the results page from the highest rating to lowest, and emphasized the size of the rating.
- Shop synopsis, photos, reviews, hours, directions, phone, and website: By providing people with all the necessary information they need prior to even going to Kensington, we already are giving them a better user experience, and hopefully will encourage them to write positive reviews.
Account Settings
- See recommendations, save/favourite shops, view reviews you’ve written: Under your account, you can easily refer back to places you’ve been/favourite, making it easy to recommend it to others.
Prototype
Based on some more recent feedback from user testing, I want to eventually create a high-fidelity prototype, but for now you can view the mid-fidelity prototype here.
Usability Testing
Like any good user-centered app, it’s necessary for actual users to test it. On my end, I was able to conduct one in-person usability test and one remote test, but realize I would definitely need to conduct some further tests in order to get a better report.
For the in-person test, I gave my user various tasks to perform, and observed any positive/negative reactions he had, places where he stalled, and whether he was able to successfully complete tasks without prompts. Since I didn’t have much time after testing to create another version of the mid-fi prototype, I identified and logged what usability issues were present , and plan to update it in a later iteration. The biggest concerns are listed below:
- 2X screen size: I exported the Sketch files as 2x files (I swear I heard the instructor say to export it this way!) and they were far too big for any desktop screen. Since I was aware of this issue, for my in-person testing purposes, I scaled the page down before starting. For the remote-testing, he also was shocked at the size and had to minimize the screen size before moving forward, but continually had to scroll up and down to navigate around the pages.
- Home button: Both my in-person and remote users were eventually able to identify that clicking the logo would take them home, but noted that it took them both a while to find it. My in-person user noted he preferred if it were a separate button.
- “Take me on an adventure” button: Need to do more user tests to determine if people truly understand the function. Remote user was confused (but was also just overall confused. He was wondering why there were only grey boxes and no pictures). My in-person user understood it to be similar to Googles “I’m feeling lucky button”.
- Number Rating: Feedback from one of the UI instructors was to explore using other rating systems other than numbers or stars. that’s more representative of Kensington (i.e. the way Rotten Tomatoes uses tomatoes)
Summary
Although this project was an extensive amount of work, it was also quite rewarding in the end. We were able to go through a variety of possible solutions, but by researching and evaluating the needs of our users, were able to find the most viable solution for our users.
Final Key Insight
If the vendors at Kensington Market had a general interest in an e-commerce solution, it would be interesting to see how other markets, independent vendors, or individuals (online or otherwise) could also benefit and receive the idea.
