Project | Problem | Opportunity | Process

LEARNING BY DOING

The following is a case study written by yours truly. The view point shared is that of a very “green” UX designer, eager to learn anything he can.

The Project

For the second project of the Red Academy UX Designer Professional Program, I was tasked with a redesign of the Shopmain.ca website.

The project required a mid fidelity prototype of the website, supplemented by research, planning, design, and testing deliverables.

The Problem

Shopmain.ca, with a focus on shopping local, contains information about stores and events along Main Street. While the popularity of shopping local is increasing, local shops are projected to lose in retail sales to online stores. Independent retailers generally have a poor online presence, making them a prime target for online retailers. The concern is Canadians will lose interest in shopping local as they are drawn towards online alternatives.

Independent Stores + Poor Online Presence = Big Problems

Opportunity

There is a silver lining to this all. The fact is, shopping is going online. You may ask yourself, “Well, good. But how does that help?” Simple. Bring the Main Street shopping experience online. Allow for customers to shop local from the comfort of their home.

The Job? 
Create an e-commerce site integrating all Main Street stores.

The Goal? 
Up sales, and increase social media presence.

“The fact is, shopping is going online.”

Below is my process broken down into 4 key steps.

Process of the project broken into 4 key stages
Existing Website Research | User Research | Domain Research

Shopmain.ca

Existing Website

A quick glance at the existing website and I had already formulated some ideas for the site’s new direction. The primary navigation was confusing and disorganized, and the overall feel of the website screamed “BLOG”.

User Research

My research began with understanding the User. To understand the User, I had to ask some key questions.

  • What do they like or dislike about in store shopping?
  • What is Main Street to you?
  • What is the biggest determining factor for your shopping?
  • Is shopping local important to you?

Supplemented by other questions, key information was unearthed.

  • People enjoy buying things (of course)
  • People prefer convenience (distance, transit, and time all being factors)
  • Shopping local is important, but convenience ranks higher
  • Cost (a factor, but does not dictate decisions)
“Shopping local is important, but convenience ranks higher”

Direct

Domain Research

To gather some context, I looked at organizations with similar websites. As a direct competitor, I focused on Mount Pleasant Business Improvement Area.

http://mountpleasantbia.com/

Mount Pleasant BIA had a built in search engine to assist in finding information. However, the primary navigation was also confusing and disorganized.

Indirect

Domain Research

With a focus on e-commerce, indirect competitor research was collected. Who better than large online merchants to draw inspiration from?

To list a few:

  • eBay
  • Amazon
  • Etsy

These companies deal with massive quantities of varying product every day. Even though they lacked the “local” aspect in their e-commerce, there was valuable insight to be drawn from their respective business’.

Obstacles | Organizing | Sitemap | Userflow

Obstacles

Main Street has a very broad & eclectic range of stores. People visiting Main Street also do so for varying reasons. This posed a problem. How do you group them into categories?

Organizing

It came down to the following.

Main Street consists of…

  • Stores & Services
  • Restaurants, Cafes, and Pubs/Bars

People visit Main Street to…

  • Shop
  • Eat & Drink
  • Socialize

From there it was clear. Mainstreet.ca’s primary navigation was set.

  • Shop
  • Food & Drink
  • Promotions & Events
“From there it was clear. Mainstreet.ca’s primary navigation was set.”

Site Map — User Flow

Enter the foundation of Shopmain.ca.

Green indicating User’s ideal flow through the website Site Map

The primary navigation was stripped of all confusion and replaced with four key choices. Through the new site map, Users could browse and purchase items in a little as three clicks leading into checkout.

UI Paper Sketches | Paper Testing | Digital Mid Fidelity Prototype | Digital Testing

UI Paper Sketches

Paper sketches are a great way of getting ideas onto paper. They require minimal time investment, and allow for multiple versions to be communicated.

Below are a few mid-high fidelity UI sketches for the Shopmain website.

Mid-high fidelity Paper UI for Shopmain.ca Homepage
Mid-high fidelity Paper UI for Shopmain.ca Product Page

Paper Testing

I cannot stress the importance of testing throughout the design phase enough. The ability to find and fix problems in the design early on is invaluable. You save time, effort, and a ton of headaches in doing so.

During my paper prototype testing I came across some User dilemmas.

Store tiles had two buttons. VISIT & SHOP.

The confusion here was in the language. User’s found it confusing defining “VISIT” as a link to store information, and “Shop” as a link to store products.

Deals & Events grouped on Homepage

The problem with Deals & Events grouped together was that they did not relate to one another. This did little to confuse the user in their journey, however it created an option that distracted from the ideal User flow.

Mid Fidelity Prototype — Digital Testing

The Problems

Users had concerns over the placement of filters (for sorting products & stores). There was also confusion over types of filters available. The biggest problem Users came across, was differentiating the Store Pages from the Product Pages.

Summary

After designing these prototypes, the final product was a far more streamline experience for the User. Now Users would be able to support local business through the convenience of online shopping. As a company, Shopmain.ca remains relevant by drawing from an expanding market.