UX Case Study №2: St. Lawrence Market

4 min readFeb 5, 2018

Teammate: Mandy Poon

In this project, a mid-fidelity website was designed for the St.Lawrence Market located in Downtown Toronto.

About St. Lawrence Market

St.Lawrence Market is a food market with a ton of variety. The market has historical significance and is rich in customer experience. The market attracts locals and tourists from all over the world. It is recognized as one of the best food markets in the world.

DESIGN PROCESS

1.0 RESEARCH

To understand the market and its customers in depth, interviews of shop keepers, local customers and tourists were conducted.

1.1 Example Interview Questions

Describe yourself.
[shop keeper] What type of business do you run?
[shop keeper] Describe your products.
[shop keeper] Are there any goals for the business?
[shop keeper] Please walk us through your day.
[shop keeper] If you use any digital tools, what are they and why do you use them?
[customer] How familiar are you with the St.Lawrence Market?
[customer] What brings you here today?
[customer] How did you learn about the St. Lawrence Market?
[customer] Do you have any suggestions for the Market? If yes, what are they?

Research Insight

Perception of diverse and high quality products, but expensive
Strong word-of-mouth marketing, but product details are unclear
Market branding and promotion is supported by the City of Toronto. There’s a strong on-site community and friendly atmosphere but the market’s website isn’t a common reference for customers

1.2 Persona

After gaining sufficient research data, two personas were created. The primary user persona of a general customer and a secondary user persona of a general shop keeper.

Primary Persona

Secondary Persona

2.0 PROBLEM DEFINITION

2.1 Primary User Story

As a regular customer, Marry, wants to easily find out about specials and events so that she could feel like she’s a part of the community at the market.

2.2 Secondary User Story

As a specialty store owner, Bob, wants to effectively communicate information about his specialty items so that he could increase product exposure and reduce the time he spends answering customer inquiries.

2.3 Proposed Idea

A website that gives a clear sense of the community at St. Lawrence Market by making accessible events and store information (i.e. vendor story and product details).

3.0 PLAN

3.1 CC Analysis

St. Lawrence Market was compared to local grocery stores like Superstore as well as, newer options like Urban Farming. Compared to these competitors, it was determined that St.Lawrence Market focuses more on the community aspect, it’s primary marketing is from word-of-mouth and online recommendations.

3.2 Site Map

Based on the research it was determined that the main pages on the site would include: a Home page, an About page, a Food Specials page, and Events page and a Store Directory.

4.0 DESIGN, PROTOTYPE & USER TESTING

Following the research and planning stages, a mid-fi sketch of the website was designed and created into a prototype using InVision.

4.1 User Testing

The first prototype was tested on 3 users. The users were asked to complete the following tasks:

Find a specials on items you are interested in.
Check out the menu for a restaurant you want to go to for lunch.
Find out where the Market is located.
Find out about upcoming events.

4.2 Home Page

Home page V1 includes a carousel of images and videos from the market. It also includes a section on featured food and events. There is also an Instagram section where featured images from the market are posted. After conducting user-testing t was determined that instead of featured events it made more sense to post “upcoming events” with corresponding dates.

4.3 About Page

About page V1 includes an interactive video highlighting the historical significance of the market. There’s a section on the location of the market and also directions to the market. In V2, “Directions” was changed to “Public Transportation” and a section on parking at the market was added.

4.4 Events Page

Events page V1, highlights upcoming events and also lists events in sequential order per month. Users are able to filter events by type and dates. They are also able to search key words to find relevant events. In V2, the hero image is made smaller so that users don’t need to scroll too much to find information. Redundant headers were also removed. The price of the event was also added as it was an important detail for users.

4.5 Specials Page

In the Specials page V1, Weekday specials are listed for different categories. The cards include: food item, time, store and price. In V2, a default state is added. Time is also a selection criteria as some specials vary by time. The cards also include the price before the special for reference.

4.6 Our Stores Page

The Our Stores page includes stores listed by categories. In V2, a default state is included as “All Categories”. More categories like “Restaurants” is included. Arrows are added to indicate horizontal scrolling.

4.7 Vendor Modal

The Vendor Modal includes an area specifying contact information, a section on the vendors story, featured recipes, store specials, store location within the market, and featured suggestions to explore other vendors. In V2, the vendors name is made prominent at the top of the modal with contact info right beneath to take up less space. The story section is made smaller and the location section is also made smaller to take up less space. A “back to our stores” option is also placed at the top left of the modal.

4.8 Restaurant Modal

The Restaurant Modal includes an area specifying contact information, a section on the restaurants story, their menu, location within the market, and featured suggestions to explore other restaurants. In V2, the name is made prominent at the top of the modal with contact info right beneath to take up less space. The story section is made smaller and the location section is also made smaller to take up less space. A “back to our stores” option is also placed at the top left of the modal. Menu items are listed with images and item price right beside them.

5.0 CONCLUSION

St.Lawrence Market is an amazing place and it’s website needs to reflect it’s culture, food variety and historical significance. It also needs to clearly indicate important information such as food prices, upcoming events, location, hours, and product information.

The design above address these aspects by having featured foods and events on the Home page. The About page, highlights the markets historical significance while also providing important information on location and hours. There’s an Events page and a Specials page for customers to browse upcoming events and food specials which interest them. The Vendor and Restaurant Modals allow vendors to showcase their business and advertise their large variety of products.