LANDINGPAGE.png

Overview

Helping busy Millennials make smarter purchases so they can feel confident while saving time 

TOOLS USED.png

Stage 1

PROJECT DETAILS

 

Problem Statement

Many customers find shopping apps are too time-consuming and useless.

Online shopping has become the new norm for retailers and shoppers during COVID-19. From curbside pickup to ordering online, the retail industry has moved away from traditional methods to stay afloat. 
 

Once I started digging into the problem, I found 50% of app purchases were lost because of poor shopping experiences. Whether customers couldn’t find useful product information or had issues during the checkout process; many products were left in shopping carts and abandoned. 

I knew online shopping and e-commerce were the future of retail, so I decided to explore this problem and design a customer-centric solution.

HIGH LEVEL TIMELINE

Create an MVP within 10 weeks

KEY GOAL

Create a MVP solution that helps Millennial shoppers purchase products quickly and easily

Target Audience

Millennial shoppers spend a lot of time researching and comparing products before completing their purchase.

I decided to look into Millennial shoppers and their experience with mobile shopping apps. They seemed like the perfect demographic to focus on since researchers found nearly 63% of Millennial shoppers complete their purchases through their smartphones.

What makes this target user unique is their financial status and daily use of technology. Many Millennials are in the early stages of life where they face large decisions related to education, career, family and housing. As they start working in junior roles to gain work experience, most salaries are in the low to mid-range. This causes Millennials to be more frugal with their money and to spend more time researching and deciding which products to purchase online.

TARGET AUDIENCE

  • Millennials who’ve had good and/or bad mobile shopping experiences

  • Millennials who shop through mobile apps

  • Millennials with existing shopping apps on their smartphones

  • Current smartphone users

Role and Responsibilities

The Shoppe App was an academic project that allowed me to become a Product Designer.

As a Product Designer, it's my goal to create a user-centric solution that is data-driven and feasible based on project requirements and constraints. To do this, I'll need to dig deeper into the problem space, understand my users' pain points and needs, then synthesize all my research into artifacts that are easy to understand.

Once the research phase is completed, I'll start designing user flows, exploring solutions through low-fidelity wireframes, and conducting multiple rounds of user testing on mid-fidelity iterations before moving to the final prototype.

RESPONSIBILITIES

  • Collecting Research

  • Interviewing Target Users

  • UI Design

  • A/B Testing

  • Prototyping

Scope and Constraints

Before starting the process,  I created a list of project contrainsts that need to be taken into consideration during the process.

After conducting some secondary research, I created a list of project constraints to keep in mind throughout the design process. This included technical, business, and target user constraints. The specific constraints were as follows:

Technical Constraints

  • Apps taking too much space on mobile devices

  • App loading slowly and ruining the experience

  • Information security (address, name, previously viewed products)

  • Should it be for iOS only or android? Both??

  • Cloud service to host all user-profiles and information

Business Constraints

  • Budget

  • Project timelines

  • Resources

  • Having a developer for the backend

  • Competition? Amazon is a leader in e-commerce apps

Target User Constraints

  • Users won’t consistently use the app the way we planned

  • Users need to have a mobile device and past experience operating one

  • Security concerns (Banking info)

  • Privacy

Assumptions

Consider project assumptions, how risky it is to assume each is true, and whether they can be validated.

Next I took some time to consider some of the assumptions I was making about my project. Then I'll need to see which ones I'll need to validate or disprove through primary research.

For example, I believed my users have a need to easily and quickly buy products through e-commerce apps without difficulty or hesitation. I also thought about who my primary competition were - Amazon, Walmart, Alibaba and Ebay. This lead me to conduct a competitor analysis to see how I could differentiate my product strategy from other e-commerce giants.

The Process

Week 1-3

Week 4-6

Week 7

undraw_researching_22gp (1).png

COLLECT

RESEARCH 

undraw_personal_info_0okl.png

SYNTHESIZE

RESEARCH

undraw_User_flow_re_bvfx.png

USERFLOWS

Week 8-10

undraw_mobile_prototyping_grmd.png

DESIGN

+ PROTOTYPE

  • Look at primary and secondary research

  • Conduct interviews with target users

  • Competitor Analysis

  • Create personas

  • Create experience map

  • Interview Insights

  • User Stories

  • Create storyboard

  • Sketch out low-fi wireframes

  • Explore layouts

  • Mid and Hi-Fi Prototype

  • Conduct 3 Rounds of Usability Testing

  • Create Branding

  • Create UI Library 

Stage 2

RESEARCH

 

Market Competitor Analysis

Since I established most Millennials use e-commerce apps to make purchases, I did a quick analysis of popular apps that are widely used.

Competitor Analysis.png

Research Plan

To understand the problem space and users, I analyzed primary and secondary research, conducted surveys and interviewed 3 target users.

For my primary research method, I focused on conducting one-on-one interviews (via Zoom) with 3 target users. This method was great for understanding how Millennials interact with e-commerce apps on a daily basis.

During each interview, I talked directly to Canadian Millennials to understand whether or not they found e-commerce apps valuable and if they found them easy to use. I also wanted to understand which apps they preferred most and which digital shopping methods they enjoyed during Covid-19.

Before conducting my interviews, I created an interview schedule, participant recruitment criteria, and an interview guide with general and specific questions. All that was left to do was conduct interviews. 

Secondary Research Findings

Concerned About Security

31% of consumers have security concerns around shopping apps (source)

Product Information

3 in 10 users said comparing products was frustrating on a mobile device. (source)

User Interfaces Were Cluttered

product information isn’t large enough on mobile apps (source)

App Were Too Complicated

29% of consumers said mobile shopping apps are "too complicated to bother with (source)

Too Time Consuming

10% of consumers said the app they tried either didn’t work or was difficult to use (source)

Interview Insights

After conducting my interviews, I summarized my findings into motivations, pain points and behaviours.

While analyzing my interview findings, I decided to group common answers into motivations, pain points and behaviours. This will allow me to see which themes were common among my target users compared to the secondary research I gathered.

Motivation: TIME

Interview participants said they used popular e-commerce apps because they were easy to use and offered a fast shopping experience

Pain Points: EXPERIENCE

Lack of customer service, slow checkout processes, apps were unresponsive at times, apps took too much space on mobile devices, difficulty navigating through apps, mobile screens were cluttered

Pain Points: SECURITY

Interview participants were concerned about their personal information being sold to corporate companies

Pain Points: INFORMATION

need more useful information on products, customer reviews, shipping, product alternatives, product comparisons, and deals

Behaviour: TECH-SAVVY

Interivew participants lived busy lifestyles and preferred saving payment and shipping information in apps to speed up the checkout process

SYNTHESIZE RESEARCH:

Proto-Personas

I created 2 proto-personas to help me stay focused on my users needs while avoiding adding features I would personally want.

Each persona had their own tasks and feelings during each tasks. This allowed me to empathize with users and to think of features that could cater to their needs.

Artboard2_edited.jpg

Customer Journey Map

I created a customer journey map that would allow me to analyze a shopper's experience at each stage of the task. By doing this, I'll be able to identify key moments and issues that need to be focused on to improve the experience.

A customer journey map is a visualization of the process that a user goes through in order to accomplish a task while using a product. It’s an excellent tool used to understand and address customer needs and pain points throughout the journey.

After conducting usability testing with the 3 target users I interviewed, they experienced issues with the checkout process and parcel tracking.

User Stories

Before creating a task flow, I created 20-30 user stories that highlighted needs and features that could improve the experience. Then I sorted the user stories into themes and found the app experience and information themes contained the most.

After understanding the problem space and research, I'll need to start thinking of a task flow and developing a how might we question. To do this, I created 20-30 user stories that outlined common needs and features that would improve the mobile shopping experience for my target users. Since each user story will be slightly different, we'll need to categorize them into themes/epics to visualize which issue was more apparent.

After organizing my user stories into themes, both the App Experience and Information themes had 6 user stories each. To avoid choosing a theme based on my personal preference, I decided to compare both themes with the personas I created. Based on the comparison, the Information theme aligned my personas the most.

User Stories THEMES.png

Information Theme Expanded

To design an effective MVP, I needed to identify as many potential features that could improve the mobile shopping experience. To do this, I created 8 additional user stories cented around the information theme.

6 user stories aren't enough to identify opportunities, so I created 8 additonal user stories that could help us identify potential features to improve the user experience. Not all features or opportunities are feasible based on the project constraints, but it's good to have many ideas that can be narrowed down later on.

How Might We Question

My how might we question needed to address the problem centred around information during the shopping experience. I needed to think of a strategy to integrate information into the experience without cluttering and overwhelming the user.

In order to create an in-depth How Might We Question, I'll need to understand my research and artifacts I've created. Based on my research insights, Millennials are experiencing problems related to information.

 

It took me a while to create a How Might We Question because information can impact an app in many different ways. I looked at creating an innovative experience vs. an informative experience. When thinking about information, it's important to focus on how information can improve the shopping experience rather than hindering it.

FINAL HOW MIGHT WE QUESTION

How might we create an informative digital retail experience in order to help Millennials see the value in online shopping?

Stage 3

IDEATION

 

Task Flow

My task flow needed to be centred around integrating information into the shopping experience. I considered including features such as personality quizzes, saving personal information then combining them to create a personalized shopping experience.

After choosing a theme and creating a How Might We Question, my task flow needed to be centred around integrating information into the shopping app experience. Once I started thinking about sketching possible ideas and solutions, I realized my first task flow lacked information integration.

 

I decided to take a step back and pivot my understanding of what information meant to my users and how it could improve the experience. I thought about including personality quizzes, entering and saving personal information, and combining them to create a personalized shopping experience.

task flow.png

Low-Fi Wireframe Sketches

I'll be exploring layouts and features with low-fi sketches. This will allow me to explore ideas and conduct user testing at each stage to make sure my designs are effective.

Moving into the design phase, I needed to empathize with my users and create potential solutions for the problem space. I explored many ideas, big or small, through low-fidelity wireframe sketches before moving into the mid-fi design phase. This will save me time and effort in the long run.  

CONCEPT #1

Focuses on filtering down items manually and viewing products in categories

CONCEPT #2

Personalized experience with a good balance between information, text, and imagery

CONCEPT #3

Exploring information architecture and how to format pages in a personality quiz

Chosen Low-Fi Concept

I analyzed each concept looking for a combination of layout, features, and personalization. I decided to combine Concepts 2 and 3 because they both had strong features.

After comparing my 3 low-fidelity concepts, concepts 2 and 3 had the most potential to move into the prototyping phase. Both concepts had strong features such as carousels, personalized homepages, and integrated user profiles.

15%20-%20PROTOTYPE%20SCREENS%20Copy_edit

Stage 4

DESIGN + PROTOTYPE

 

Mid Fidelity Screens: V1 to V2

Now I'll create 2 Mid-Fi versions of my low-fi sketch then conduct 3 rounds of usability testing on each version. My usability testing will focus on behaviours, navigation, pain points and task completion.

I started creating my first mid-fidelity version based on my chosen low-fidelity wireframe sketch. Once my first prototype was complete, I’ll conduct 3 rounds of usability testing and gather feedback before iterating my design. During usability testing, the session will focus on user behaviours, navigation, pain points, and task completion. Once all testing sessions are completed, I’ll synthesize the feedback and look at which changes are most feasible and impactful to implement into the next prototype version based on timeline and resources.

25 - PROTOTYPE SCREENS 4
25 - PROTOTYPE SCREENS 4

press to zoom
26 - PROTOTYPE SCREENS 4 Copy
26 - PROTOTYPE SCREENS 4 Copy

press to zoom
23 - USER TESTING SCRIPT Copy
23 - USER TESTING SCRIPT Copy

press to zoom
25 - PROTOTYPE SCREENS 4
25 - PROTOTYPE SCREENS 4

press to zoom
1/8

Mid Fidelity Screens: V2 to V3

35 - V3 PROTOTYPE SCREENS
35 - V3 PROTOTYPE SCREENS

press to zoom
36 - V3 PROTOTYPE SCREENS
36 - V3 PROTOTYPE SCREENS

press to zoom
41 - V3 PROTOTYPE SCREENS
41 - V3 PROTOTYPE SCREENS

press to zoom
35 - V3 PROTOTYPE SCREENS
35 - V3 PROTOTYPE SCREENS

press to zoom
1/7

Visual Identity

To create a consistent look for my high-fi screens, I created a visual identity that includes a moodboard, a list of potential app names, UI inspiration, colours and typography. 

Before creating the final UI and injecting colours into my high-fi version, I decided to create a visual identity. By taking the time to gather inspiration and to create a brand at this stage, we save time creating this while designing the final screens. My visual identity will include an overall moodboard, a list of potential app names, UI inspiration, and brand colours.

 

Final Prototype

After injecting colours, icons and UI elements into my high-fi prototype, I conducted 1 round of usability testing to ensure my design choices didn't hinder the app experience. In the end, my users found the app informative, easy to use, and efficient.

My high-fi screens now include the brand colours, app icons, font families, and UI inspiration I included in the visual identity. I did conduct another round of usability testing on the high-fi version to make sure the design choices I made had improved the experience instead of overwhelming users. Based on the results from my user testing, users found the app informative, easy to use, and was an efficient way to shop.

With the use of this solution, users are able to checkout 70% faster, find products that relate to their interests and needs, and have the freedom to customize their shopping experience based on their product selection.

Shoppe App: UI Library

If this app were to be developed, I've compiled all the UI elements and branding into a working UI library for product and development teams to use.

In conclusion, if this prototype were to be developed, I've compiled all my design assets into a working UI library for product and development teams to use. All components have been organized into Atoms, Molecules, Organisms, Grids, and Templates.

KEY LEARNINGS

 

STAYING AGILE

Throughout the design process, I had to pivot more than once in response to my users’ needs and to ensure that I was creating a user-centric product. I learned it’s important to be an advocate for users during the process and not get too attached to an idea or personal preference.

USABILITY TESTING IS KEY

With my background in graphic design, I thought I knew what would look good on a mobile screen and what users would like. But after conducting my usability testing, there were a lot of small details I overlooked. 

A lot of my UI elements lacked accessibility, some screens were too cluttered, and I used words that didn't appeal to the masses. With the help of usability testing and the use of a priority matrix to prioritize user feedback, I was able to improve my product without integrating new features.

Like what you see? Let's chat!