The creeping shadow of e-commerce in the digital age — Case study (P2).

David Marks
Jul 24, 2017 · 6 min read

Reviewing the design process of building a mid-fi web application prototype to motivate sales within Toronto’s BIA’s. — RED Academy UX Professional Program.

Time Frame: Two weeks| Team: David Marks & Vivian Chung

Opportunity

The way consumers shop and spend their money is changing. Fast. Canadian online shopping is forecasted to have increased 50% by 2019.

Although reports state the popularity of shopping local seems to have steady growth, small local businesses are still predicted to lose over $1.6bn in retail sales to online retailers and big box American companies due to poor online presence.

The growing concerns of independent retailers that Canadians are slowly being drawn away from their storefronts presents the opportunity to create a solution for these businesses as they prepare to adjust to these new forms of customer interactions.

Our goal was to create a mid-fidelity clickable prototype of a web application for one of three main BIA markets in the Toronto area. Specifically to encourage interest in purchasing from local businesses while increasing community engagement. We were chosen to focus on the historic Distillery District.

Our concept for design consisted of the following process:

1. Research

Our research phase was a 4 step journey.

We collected data through various means including surveys and interviews conducted directly within the Distillery District, as well as from randomly selected respondents.

Survey results suggested a direct relation between Distillery District visitation and the lack of information concerning products and events.
Our survey responses gave us a foundation to begin the next step in our research.

Collecting a viable amount of responses, we began assembling affinity diagrams to reflect the major co-relations present throughout our most pressing research questions.

Our affinity diagrams began with only the image on the left and gradually iterated to the much larger one on the right.

With the most crucial benefits and pain points both grouped together realizing what areas needed the most attention became clear.

Respondents clearly had an interest in the Distillery District but lacked a motivation to visit because they either had little to no information about the ongoing services, sales and specials provided and/or the events organized there.

To conclude our research phase we conducted a brief comparative analysis on two popular e-commerce solutions used by small businesses as well as an analysis of what other BIA websites are, or could be doing to entice visitors.

Comparative analysis of Etsy and Groupon and the BIA website of the DVA (Downtown Vernon Association) showcasing their distinctions.

The consolidated results of all our research data allowed us to continue to the next step in our design process

2. Planning/Ideation

Based off of the identifiable targets encountered through our data collection we created user personas to aid in visualizing the motivations and frustrations of our real life users. This allowed us to make an informed decision about what we wanted to create for our user and how it would benefit them.

Our 3 key personas were:

a) The online shopper

This user is incentivized by the savings and convenience purchasing through online retailers offers but is frustrated by delivery speeds and unexpected fees.

b) The non-local shopper

This user focusses on having fast access to the quality products that uniquely define his own busy lifestyle and enjoys being notified about current cultural events he can expose his family to.

c) The small business owner

This user is focussed on consistently translating the image his customers have come to expect of his brand in-store online without having to constantly manage his web presence directly himself.

These personas led to the creation of user scenarios, user stories, and use cases. One leading into the other giving us a knowledgeable foundation to focus our attempts at improvement.

We decided a web application that could incentivize potential Distillery District shoppers by awarding exclusive discounts through continuous use, while offering an online tour booking feature as well as an online store directory to view inventory and current sales/specials manageable by merchants would be an effective solution for all users.

This allowed us to then reach a solid consensus upon what features were of highest priority for our web app:

  1. Contextual Tagging
  • Ability for business owners to funnel customer searches on the website

2. Online Tour Booking

  • Ability for Distillery District visitors to purchase a tour online ahead of time

3. Distillery “Passport”

  • Ability for Distillery District visitors to purchase a Distillery “passport” offering savings the more stamps/scans received in Distillery shops and restaurants

After coming to a finalized decision about what exactly we were going to build we moved onto the third phase of our process.

3. Design & Build

Consolidation of our most pertinent findings from the research and planning phases influenced us to make our initial design choices based off of them.

While designing what would eventually become our clickable prototype we committed to incorporating the following features in all iterations:

  1. Incentives to visit the Distillery District
  2. Direct information on events and how to book tours to potential visitors
  3. Store directory detailing sales/specials with view of inside/outside of respective storefront
First sketches of our paper wireframes

Our rough sketches on paper gave us a good reference point for our further iterations, enabling us to make assured decisions about what was and wasn’t necessary.

Second iteration of our paper wireframes.

Our iterated paper wireframes gave us a loose visual interpretation of what would become digitized, offering us further insights into what structure and layout might be most effective and natural to a user’s navigation, once we finalized our decisions we moved onto digitizing them in Sketch.

First version of our digital wireframes created in Sketch.

Our initial digital wireframes brought our designs to life on screen but also revealed critical design flaws, identifying what needed to be clarified and what led to a break in the user’s flow at various stages of completing tasks.

Some of the most critical were:

  • Closing a pop up from the site
  • Finding Available Tour Dates
  • Purchase Confirmation

Once we iterated to accomodate for these flaws/changes we channelled directly into the building and testing of our Invision prototype.

4. Prototyping & Testing

Once we had iterated our digital wireframes to a point we felt they were prepared for testing we imported them into Invision, linked all of the screens together in a logical sequence then immediately followed by conducting a number of usability tests on a group of potential users in a lab environment, verifying if they could complete the given tasks using our prototype or not.

We found that all of our users were able to complete the tasks we had given them however many had experienced a misunderstanding of how the passport would be used and how to gain access to it once purchased.

There seemed to be a lack of context surrounding the exact use of the passport that in retrospect we could have re-considered adding had we realized the majority of users reached a break in their flow of task completion at that point.

This was our final iteration before presenting what we had developed.

To try our clickable prototype yourself, click here: https://invis.io/MCCNVKU6P

David Marks

Written by

Full-stack UX/UI designer. Lifelong scholar. Futurist.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade