Redesigning an E-Commerce Website for Kensington Market
Continuing my studies at RED Academy under the UX Design program, my Project #02 marks the first occasion of my working on a group project. The scale of this project is comparatively larger than the one I previously engaged in, and the nature of it’s needs demanded a more proactive role amongst all its participants. What follows is documentation on our work from start to finish as we attempted to aid Toronto’s Kensington Market take advantage of a dormant business opportunity.
The Opportunity
On this project, I collaborated with classmates Jessica Zannona, Marianne Sotto, and Jeff Wasson. We had been tasked with formulating a potential e-commerce solution for the popular Toronto neighbourhood, known as Kensington Market, that would explore several goals for the area. With a focus on “boutique shops”, specifically groceries, we looked into whether or not we could:
- Increase the volume of business conducted in the area.
- Promote greater social media engagement.
- Increase online engagement with Kengsington Market’s online offering.
- Create a customized experience based on a shoppers’ unique interests.
Research
As with the initial phase of my first project, work on the research phase commenced first. As a focus of our assignment was to design a website further down the line in our work, we began with domain research on a community-organized website of Kensington Market that had already been set up some time ago. (NOTE: There is an official BIA website as well, but that had been assigned to an alternate group within my class also tasked with a solution for Kensington Market).
As a group, we visited the site with the intention of casually evaluating its strengths and weaknesses, and were quickly dismayed at how poorly, from a design point of view, the website had been arranged. Navigation links on the left contained ambiguous and confusing labeling, multiple ads above the fold of the website and an inconsistent colour scheme were all immediately evident to us. After much exploration of the website and discussion between our group, together we settled on a few priorities that we felt comfortable focusing on. Together, we aimed to:
- Make more consistent the information being provided.
- Overhaul completely the aesthetics of the website.
- Design a more informative collection of content, so enabling users with a better level of knowledge of the market’s offerings that they can use to better plan trips with.
At this point, we had all agreed that information from user research was going to be absolutely necessary for our planning purposes, as their needs and states-of-mind would be informing which direction we moved in in our development process.
Initially, we had come up with only three questionnaires. One general one for online shoppers, one for shoppers of Kensington Market, and finally one for shoppers of Kensington Market that was conducted in person.
The in-person questionnaire was conducted during a research trip we had made to the neighborhood, and was conducted as Marianne and I interviewed several vendors. All these questions were brainstormed together before I used Typeform to construct/design and finalize our various questionnaires for the group. You will notice in the above diagram that a fourth questionnaire was created. This had been decided upon further along in our process, past a significant decision process in our work, as we had decided we required data that would help inform a shift in directed we had taken (further explanation to come later in this case study).
Results of the questionnaire were informative, and somewhat consistent with presumptions we had made based on our own personal experiences with the neighborhood in the past. Insights included:
- they WOULD NOT prefer to shop the market online.
- 83% said they DISCOVER new online stores through friendly recommendations.
- 86% said they consult online reviews prior to shopping
- Shoppers have and use social media.
Word-of-mouth forms of discovery proved to be a consistent element in our discussion with the vendors of the area, as with some of the shoppers.
In addition, a comparative/competitive analysis was conducted between Walmart and Etsy in order to grasp a firmer understanding of how online shopping experiences had been arranged for others, and what user experiences of them might be.
Our-post research experience proved to be more drawn-out than we had initially anticipated it would be (eventually leading us to make a course-correction in the kind of product we would ultimately deliver).
Multiple affinity diagrams had been drawn up, as was a concept map. After processing these materials Jessica and Marianne spearheaded the creations of three user personas, “Franklin”, “Dakota”, and “Lenni”.
The first two personas, those of our shoppers, were born of data that strongly suggested we were dealing with a group of shopper that preferred to have as much advanced knowledge as possible before engaging in the act of shopping and subsequently sharing their experience with others. Lenni, our shop-owner persona was typical of the vendors we spoke with in Kensington Market. People operating family-owned business that had been around for years, decades even. People like Lenni pride themselves on strong customer service, ties with regular local customers, and the ability to maintain a high quality of product. Their business has been primarily word of mouth, but they’re open to an online option through which they might generate extra business. Common hurdles included concerns of not being tech-savy enough, nor having the time and/or resources to produce this work on their own.
Planning
Earlier on this study makes reference to how our group decided on a change in direction of our work. We hadn’t changed subjects, but had decided to pivot away from the original idea for our Kensington Market website. Having understood that we had a much broader concept of e-commerce to work with than we previous thought, we opted to go for a route less traditional than the “online grocery store” we were originally considering. Without this constraint, the idea of a fun and colourful interactive map of the neighbourhood became a core feature that we now were focusing our attention on. The idea was to transfer in spirit some essence of the colourful personality that Kensington Market is famous for. In addition, we had begun to consider the idea of a “treasure hunt” option to incentivize interaction with the map in the neighbourhood, for instance, shoppers might explore the actual neighbourhood for target items or criteria, and track them via the map, social media, and hashtags. They would then subsequently be rewarded with some level of discount at a vendor of their choice from the neighbourhood. Or some variation of all this.
We had looked at various other websites with colourful interactive map features, but were heavily favouring the following two sites as inspiration…
…before we quickly moved on to sketching out a design for how we envision our own site would appear with similar features:
Surprisingly to my group at the time, we weren’t making much headway with map idea as a be-all-end-all core concept for our website. And it was diplomatically suggested to us through a colleague that a map concept, while in itself something with a lot of useful potential to it, was not enough to support our project on its own. My group and I took this comment and its subsequent discussion to heart and reevaluated our options yet again. We opted ultimately in the end for a website that prominently featured information of vendors while incorporating traditional social media features such photo sharing and communication of user reviews and experiences.
At this juncture, Jeff conducted another comparative / competitive analysis to look at websites that specialized in communicating user reviews, photos, and experiences of restaurants and shops. In this case, Yelp and Phind. Both were very strong candidates, and we were particularly enamored by how Phind was pulling in third-party data from sites such as Yelp and even Foursquare. This multi-pronged source of content was something Jeff and the rest of us admired as we sought to adopt it’s approach into our work.
It was here that we began making more developed concrete steps towards more fully realizing what was now our decided-upon vision for our website. Jeff prepared a site map, and immediately followed through with an organized set of point-form notes envisioning more specific content for each page.
At this juncture, our group had begun to split up in order to focus on completion of work on self-assigned tasks that would be concurrently worked upon. Jeff moved on to creating a User Flow diagram informed by the content he had generated (shown in the two figures above), showcasing the user sign-up process as well as the vendor information search function (which you will soon see was to be a core feature of our site’s landing page), and the various interactions users can engage with on any given vendor page.
Design
While Jeff was engaging in this I had opted to help visualize all the features and content our group was fervently discussing in this stage through the design and construction of low-fidelty sketches. My rationale was that it would help communication of our individual ideas and visions for our sites makeup, in addition to directly influencing the design of the mid-fidelity mockup that Marianne had opted to construct. My design had incorporated the concepts from Jeff’s page content diagram and our feature prioritization document.
From here my group could more easily visualize the prominent search bar on the landing page. As well as the vendor info page which included photos, reviews, specials and other pertinent restaurant details typical to online listings arranged via a use of navigation tabs and sidebar display.
Also featured on the site and visible in the above mockup is a user profile page, designed to highlight photos of theirs, reviews they’ve written, vendors they’ve visited, bookmarked favourites. As these were completed, Marriane would begin to translate this content and ideas from our ongoing verbal input into mid-fidelity mockups composed in Sketch.
Marianne moved rather swiftly in the production of this content creating a clean and handsome appearance, grid-aligned, and ready for transformation into a high-fidelity state. Significant additions contributed by Marianne include a refined navbar header, and ever-present and utilitarian footer at the bottom of all pages.
Prototype
Ultimately, our group had actually managed to construct prototypes for each of the two levels of fidelities we worked with. Taking the liberty with my low-fidelity sketches, I constructed my own prototype using Invision, and programmed into it a very basic level of functionality. With it, users can conduct basic navigation around the site and produce some very minimal interaction with some features, but nothing too huge. Preview at this link below.
Marianne produced a prototype for her mid-fidelity sketches. It’s functionality was significantly higher, as it could simulate users logging into their account, targeted searches /results pages, and featured in great detail what a Vendor Details page may appear like to users of the website. Preview it below.
Jeff was able to take this mid-fidelity prototype and conduct an in-person usability test. The test went smoothly, and produced some informative results.
- User understood purpose and functionality of the site.
- User had no issues with navigation or finding things.
- The logo for our website could have been more prominently and conveniently displayed, with it’s linking functionality perhaps being made a bit more explicit.
- The randomized search feature we envisioned on the landing page “Take Me On An Adventure” was confusing and unclear.
- There may have been an unnecessary amount of scrolling on the subject’s part.
However, overall, the user communicated that they had had a very positive and successful time on our site with very little getting in the way of his goals.
Summary
In the course of this project, there was a great deal to be learned, both personally, and academically. The scale and focus of the work was different from our first project. The social aspect may have enabled us to handle the scale of the work, but it also meant there were certain experiences that some of us naturally had to miss out on in order to get the project completed on time. Teamwork, sharing of opinions, and the interplay of opinions and ideas between us four made for a fascinating two week learning experience on all levels.
In the process of developing our website we had moved from the prospect of developing an online grocery store, to an online interactive “treasure hunt” map, to a search-based web-site featuring user-generated content and powered by various social media. We came up with a design capable of enabling users to make shopping decisions based on a more multi-faceted collection of content and user-types, rather than a single kind. Both shoppers and vendors can come out on top with this scenario of ours.
