Image by cetteup
screens.png

Found

Timeline

Role

Platform

Tools

8 weeks

UX/UI Designer

iOS + Android

Figma

Found was discovered over the course of the pandemic when local Canadian retailers were forced to close in massive city shutdowns.

 

Continuous lockdowns caused a loss of business to local neighbourhood shops and a wave of anxiety covered the city. Foot traffic diminished as people weren't as willing to leave their homes for non-essentials. With the competition from mega online companies, small businesses struggled for a place on the map.

Found offers a space for local businesses to shine again. It is an online database that serves to showcase all the local stores a city has to offer. Local retailers not only become accessible to the public through this platform but also competitive, rivalling Amazon's one-day delivery.

DESIGN METHOD

Double Diamond Design Thinking

Using the double diamond design thinking methodology, I was able to empathize and understand my users while determining user-centric solutions after re-defining any assumptions and challenges I faced. The prototype and testing stages helped me create a functional and helpful solution for my user's needs. 

doublediamond.png

EMPATHIZE

The first step in the design process

Toronto Canada is full of vibrant bustling local shops and retailers. As the city was taken over by the COVID-19 pandemic it became clear that life would change as we knew it. People weren't leaving their homes and the once flooded shops along the neighbourhood streets were empty. Stores remained open for a short period of time but indoor shopping was banned.

cards.png

Diving into my secondary research I discovered what was happening with retail businesses in Canada, specifically in the sub-sector of sporting goods, hobby, book and music stores, furniture and home furnishings stores, clothing and clothing accessories stores. Interestingly enough, food and beverage retailers spiked drastically in both in-store sales as well as e-commerce. People are able to have instant delivery on almost anything they desire.

 

This convenience didn’t carry through to local retail shops where home decor, local artistry, gifts, etc were reduced to curbside pick up only. Sales declined in this sub-sector as foot traffic was non-existent.

The impact of COVID-19 is best highlighted using April data.

circlegraph.png

Retail sales

plummeted to $33.9 billion in April

E-commerce

Monthly increase in April. In-store sales dropped 25.3% 

Food and Beverage

+3.3% in-store sales and +107 % increase online.

I found that most Canadians were shopping online either on Google or Amazon.

bargraph.png
circlechart.png

What do Canadians look for when choosing a business to shop from and what are their behaviours associated with their shopping habits?

To understand postal service shipping times I researched how long the average person waits for delivery in Ontario Canada. I found the average wait time is around 9 days for local, regional, and national shipping. 

Wait times can be even longer with covid and demand and supply issues. 

postgraph.png

This chart shows how e-commerce platforms quickly became essential to serve their customer base.

Although the e-commerce sales increased, Canadians were primarily engaging in cross-border shopping from foreign companies. $1.6 Billion to be exact.

Canadian shoppers continue to buy more frequently from Canada’s retailers. And 40% of them plan to shop with a Canadian online retailer during the coming year. Being Canadian-made is also a strong influencer, with 55% of online shoppers preferring to purchase Canadian-made goods whenever possible.

 

 

Interestingly enough, I also found that the preference for Canadian sites is substantially higher than the actual purchase patterns. Although 40% of Canadian shoppers are likely to purchase from a Canadian site in 2020, a full 61% would prefer to do so if the option were available. This indicates that the demand for products from Canadian-based retailers is currently outweighing the supply.

 

 

Image by Lucrezia Carnelos

Design Challenge

HOW MIGHT WE...

Create an online database that connects shoppers to their local retailers, providing ease and accessibility for all?

Hypothesis 

After conducting secondary research

After researching and gathering my quantitative data I arrived at two assumptions that would be verified or dismissed after conducting and collecting my qualitative data.

My secondary research led me to assume that people liked the ease of e-commerce for example, but weren't shopping online locally. I assumed this could be because they were unsure of where to find local shops online. 

bcards.png

Whom I wanted to interview

Conducting primary research

After gaining a thorough understanding of the data in the secondary research, I wanted to try to understand the needs of my user and see their motives for shopping online vs. in-store. I conducted interviews using a combination of Zoom and Google Meet, transcribing my notes with Tactiq and otter.io

The decision of what criteria was required for participants to partake in my interview was based on information that I had gathered from my secondary research. Carefully selecting my participants would help to support me in designing a quality product for my users. The requirements for the interview were as follows:

  • Urban Dwellers. Geographically shoppers tend to live in urban or suburban areas.

  • Steady Income / Disposable income= more shopping.

  • Baby Boomers. Research shows they want convenience above all else.

  • WFH. Strong link between shopping online and working from home.

I created an interview guide with open-ended questions surrounding online shopping experiences, for example how much they knew about their local retailers, and their values and behaviours when it came to shopping

Here's some of the things they had to say:

insight.png

Key Insight

What information had unanimously surfaced time and time again?

After conducting my user interviews I gathered key universal insights from the participants which proved my assumption and hypothesis to be true. 

card1.png

DEFINE

Creating a user persona and a journey map.

Derived from primary and secondary research I created a persona named Teagan. Teagan best represents the users I had interviewed, sharing similar insights and beliefs. Teagan becomes a reference for my design process, leading ideas to a solution designed specifically for my end-user. 

persona.png

After developing my persona I went on to create an experience map for her journey of shopping online. This allowed me to think of areas for opportunity. 

experiencemap.png

IDEATE

Compiling user stories and creating a task flow.

I wrote a multitude of user stories that all were derived from research, pain points, motivations, my user persona, and opportunities for intervention. From those user stories, I sorted and categorized each one into distinct epics. After reviewing all the epics I decided upon one core epic: Accessibility. This core epic best reflected my user pain points to create a solution that would be useful and impactful. 

Core Epic: Accessibility

epics.png

Writing a variety of user stories and deciding upon an epic that addresses multiple stories allows us to clearly lay out a task flow that will best suit the user's needs, motivation, and pain points. We can incorporate as many of these user stories that live under the core epic “Accessibility” as feasible into a task flow that will target and improve the lives of the user. It also gives us a better understanding of what the next steps for laying out our wireframes will look like.

taskflow.png

PROTOTYPE

Design wireframes based on the task flow.

DESIGNER'S NOTE

Please read before scrolling.

I started this project back in 2021 and designed these wireframes for an Android phone using Google's Material Design Guidelines. Since then I have re-designed the app for iOS using Apple's Human Interface Guidelines. Using the framework I had laid out for my Android wireframes, I simply changed the design to be compatible with iOS, along with adding more features and cleaning up the user interface.

Because of this, you will see a combination of Android and iOS screens in Section 5: "TEST" where I show iterations of my designs based upon user testing feedback.

If you would like to see my growth as a designer please visit my old prototype for comparison at the end of this case study. Simply click on the button labelled "See My Progress" and enjoy the journey. 

Thank you for taking the time to pause and read this backstory.

Please enjoy the rest of this case study!

Wireframes + Sketching

From ideation to designs coming alive on paper.

I started this process of designing a digital solution by sketching a variety of screens, each their own iterations. The goal was to create a progression of screens that felt familiar and met the needs of my end-user. 

paper.png

I then designed digital wireframes to show the flow, user interface, and features. 

The initial wireframes were based on a returning user to the app. The flow would lead them through the task of finding and purchasing an item and then having it delivered to their home address. 

Found Home Page.png

WIREFRAMES
LO-FI TO MID-FI

TEST

Conduct user testing and make changes based on reoccurring feedback.

Receiving Feedback

What iterations would need to be done to make the flow as smooth as possible?

After completing multiple rounds of user testing I received some reoccurring feedback. Hearing the same feedback (good or bad) generally means that something is working well, or isn't. Based upon a prioritization matrix I addressed issues that were interfering with making this the best possible product for my end-user. Some of these main issues were:

beforeafter.png

STYLE BOARD

Brand identity, name, and more. 

Mood Board + Aesthetic 

The overall feel of the app. 

Deciphering a coherent brand identity is very important to build consumer recognition. I wanted a colour palette that felt very clean and chic. I used the colour palette of organic materials such as terra cotta, wood, and stone. Since the app is all about supporting small and local businesses I wanted the feel to be natural and earthy, bringing people back to their roots.

Group 39.png

Name + Wordmark

There is more to a name than what meets the eye.

The name was a really important factor for me to consider. I had pondered over multiple names, ruling all but one out.  Found is a simple word that is defined in the oxford dictionary as having been discovered by chance or unexpectedly. This definition spoke volumes to me about what local shopping is all about.

From personal experience of shopping at small retailers in my own neighbourhood, I always went home with some great stuff that I never would have thought to buy intentionally but was always really excited about finding something unique. 

wordmark.png

Colours + UI Components

User interface brand colours and a collage of components.

I incorporated 3 main colours for the primary brand colours, and 2 secondary colours seen throughout the nav and tab bars of the app. 

colour.png
ProductCard.png
load.png
saleb.png
button.png
FoundLoading.png
Ellipse%208_edited.png
Ellipse%205_edited.png
Search Icon.png
List.png
Shopping Bag.png
ArrowLeft.png
Heart.png
Home Icon.png
pin.png
cil_door.png
bikeicon.png
deliver.png
ProductPicture.png
Button.png
Button1.png
Checkbox.png
Half Moon D.Pink Icon.png
Slocally.png

/found/

delivery.png
Supportbar.png
SortBy.png
ActiveDrop.png
PopulatedDrop.png
wf.png
pc.png
review.png
review.png
review.png

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

 

The Final Look 

After all the finessing and looking for more inspiration through delivery and retail apps, I came up with a design for found that was familiar and easy to use.

 

THINKING AHEAD

Cross-platform and marketing.

Creating a marketing landing page for my app would increase the likelihood of businesses listing themselves on the app as well as receiving more downloads. Creating a cross-platform application expands the customer reach as well. 

Group 94.png

Key Takeaways

It is imperative to good design to follow what works well for the majority as opposed to what you think looks good. 

You know the design is working right when users can flow easily through the task and you hear reoccurring feedback.

Psst! Remember how I said you could access my old prototype at the end of this case study? As promised, click the button below to see how far I've come.

Next Project