Bringing more people to the St.Lawrence Market on and offline — a UX case study
It’s all about the experience.
Currently a UX student at RED Academy, this is a case study for my second project, a redesign of the St.Lawrence Market website.
The Goal
With an increase in the trend of buying local and buying online, we look at a local market to see what we can do to guide it towards the trend. The St.Lawrence market is already a great destination to shop local in Toronto but not the same could be said about their online shops or lack thereof. My group and I were tasked with exploring an opportunity for an E-Commerce solution within the market.
Visiting the Market
Our task started with visiting St.Lawrence Market and gathering data in the form of customer surveys and vendor interviews. We also stopped by to eat and shop and take in what it actually was to be at the market, to experience what makes St.Lawrence what it is!
The People
The thing about the market is that no two stores are alike, and no two shoppers are alike either! We had a hefty task trying to figure out exactly who our users were, but we managed to condense them into 3 user personas
The Vendor was one such persona. Usually someone older who had been at the market for some time, most were opposed to the idea of E-Commerce within the market but more specifically having their shops available online. They already have long
The Long-Time Regular, was also part of an older crowd. Having attended the market regularly for a long time, they value their existing connections with the vendors. As an aging crowd transportation was also a concern as physically heavy options like walking or biking became less viable, they wanted to find out new ways to get to the market.
The Millennial Foodie was our younger persona. Usually young professionals, they still came to the market because of the personal connections with the vendors and the idea and quality of shopping local. Being rather new to the market, it can be overwhelming and in a very busy Toronto, getting there was not always the easiest, so transportation also became a concern with them.
Where We Hit a Snag
Implementing E-commerce as a way to bring more customers sounds great in theory, but we surprisingly received a lot of opposition to the idea. Vendors had no expertise in the matter, or were disenchanted with the fact it would take more time and resources to manage anything to do with e-commerce. Consumers on the other hand, liked the idea or being able to shop online, however, most of them mentioned that they would still prefer to come to the market in person, because…
It’s all about the experience!
Coming to the market is an experience in and of itself, and we actually enjoyed our time spent there outside of research as well. We knew that our project had taken a turn when now, we were designing to make sure this experience remained.
Reprioritizing
With the idea that many of both the customers and vendors were opposed to e-commerce, instead we decided to redesign the St.Lawrence Market site to instead focus on other elements. From the personas we chose the user stories:
For the vendor:
- I want to sell face to face to customers so I can maintain a relationship/friendship with them.
- I want to have my store info online so customers can get important announcements.
For the consumer:
3. I want to find ways to save money so I can spend it on buying other things that I like.
4. I want easier transportation methods so I can visit the market more frequently.
We wanted create the site to maintain the in person experience, while at the same time, providing valuable information on the market, how to get there, and ways customers could save money.
Keeping in mind we still wanted to implement some sort of “E-Commerce” we decided to go with the promotion of the Vicinity Rewards card. A card that awards the customer with points and subsequents discounts that could be used within a local area, in this case, St. Lawrence Market.
Planning Which Pages We Wanted
With these stories in place it was time to construct a sitemap. We were able to assign a page of the new website with the intention to fulfill each of these stories.
- Homepage: Have important market info available upfront, and push the idea of Vicinity Rewards.
- Shops: Better sort and have information on each vendor available. Maintain a sense of connection to the vendors on their individual pages.
- Events: More on the info side, during research we found that not many visitors were aware of all the events going on in the market and would like an easy way to find that info.
- Getting Here: Provide info on various transportation methods to make it easier to figure out a way to the market.
- Vicinity: Not so much a page, but a visible promotion of the Vicinity Rewards card as a means to save money (our “E-Commerce” solution.)
Our Design
Below are both the first and second versions of each page we designed. For those have stuck around thus far, I’ll be highlighting the changes we made from one version to the next based on our usability testing. However if you interested in just browsing the final prototype just skip past the following images and you will find a link to it there!
Homepage
We were told our navigation bar did not stand out, so we made it bigger and also moved the ‘Contact Us’ section to the footer, which we added to all pages. Some context was added for the hero image as well. Surprisingly to us, we had not made our rewards program signup clear enough! Seeing as this was a main focus for us, being in the user stories and all, we added a pop-up banner that links to the Vicinity site and can easily be closed (resulting in the 3rd image below). The actual rewards card signup on the page was also made more obvious with a Call to Action button.
About Page Turned History Page
Our about page initially hid too much of the information we wanted to communicate on the site. Again we blocked one of our main focuses, the prioritization of providing information on the market to site visitors. To remedy that, we removed our initial click through beehive that revealed the info on each. Instead we made all the readable info available on the page and instead implemented clickable text that simply brings you down to that section of the text, and then a ‘Back to Top’ which, well, brings you back to the top of the page.
Events Pages
We added context to the hero image and removed the gallery on the event list because it had no clear purpose and moved the tabs below the calendar. On the individual page we made it so that the information was available without scrolling, and removed the hero image, opting for a smaller image gallery.
Shops Pages
We removed the hero image on both pages, focused on making the category navigation clearer in terms of explaining where you were, including breadcrumbs and a highlight. On the individual page, we made it so more information was available without needing to scroll, and added a possibility for a video to offer a greater sense of connection to the vendors.
Getting Here Page and Contact Us
We had no need for a hero image on either page so we removed it altogether. We made the map the focus of its own page and made the category navigation consistent with the shops page. The Contact Us page had its elements made bigger and was tidied up a bit.
The Prototype
Our final prototype can be found HERE.
What Would Be Different
As always, it’s important to learn from your mistakes to improve your next project. I think next time it will be important to keep our user stories front and centre! That way we are not making simple design choices that go against them and later have to fix in later iterations. For lack of time we were not able to test our second iteration, but it would have been fun to present it for testing to some actual people in the market or even friends who frequent the market to get their take on it!
Until Next Time!
