12 Min Read

City Of TO Mobile App

Project Type
Mobile App Design
Role
UX Researcher
UX & UI Designer
Project Duration
September - October 2020 (4 weeks)
Tools Used
Adobe Illustrator
Adobe Photoshop
Figma
Adobe XD
POP Prototyping

Prototype
View final prototype here

Project Overview

The MyHumber mobile application is a tool designed to encourage better organization and time management skills for Humber Students. As the sole UX designer for this project, I designed this mobile application from inception to final design through research, ideation, and UX design principles.

According to surveys 100% of Humber Students do not use the MyHumber App after the beginning of each semester

Context

During my time as a Humber Student, myself and many of my colleagues found that almost none of us were using the MyHumber app. Many of us found ourselves to only use the app during the first week of our semesters to check our schedule times and class locations. It was a running joke as even our design professors know that the current app could use a big upgrade. The fact that a whole community recognized this problem, made me wonder what the actual reason is.

My Process

Research

The current MyHumber App provides Humber College students with basic information on courses, assignments, grades, schedules, and the campus. To fully understand the user and their pain points, I conducted an audit of the current app to determine the overall functionality and design.

No intuitive Use of the app
The home page of the app offers almost no indication on what this app does. The wasted space could be used much more efficiently as users have to tap around to discover the features of the app. At first glance, there is a hamburger menu, “Notifications” and “Student Profile”. I found it odd to only display these options while the menu offers a ton of options.
Too Many Options
When users click the hamburger menu, they are bombarded with a whole list of options which can be overwhelming for the user. According to Hick’s law, when users are presented too many choices, they may become overwhelmed and confused.

Overall, the current MyHumber App acts as a jack of all trades. It has a lot of resources to offer but is not necessarily strong in a particular area. The design flaws, along with the overwhelming experience can have a frustrating effect on users.

The Users

As Humber Students are the main users of the app, I conducted a series of qualitative and quantitative research through surveys and interviews to determine some user pain points.

Constraints*
Due to the global Covid Pandemic, my resources were limited to video call interviews and online surveys.

Despite this, I was able to conduct a series of in depth interviews with 5 Humber students regarding their learning methods, organization skills, and experience with the app.

Key Insights

Time management skills are an issue with a majority of students.

Students have difficulty organizing their schedules and to-do lists.

Layout of the app is hard to navigate. Courses are also inconsistently organized.

Throughout the entirety of my research, I noticed these common themes and pain points Humber students.

User Personas

To gain a better understanding of these users, 3 user personas were created to maintain a user-centric focus for the entire duration of the project. I constantly revisited these personas to remind myself of the needs and frustrations of the users.

Josh, 23, Full time student
  • Part-time job
  • Has a lot to jungle between school, work, and social life
  • Usually schedules everything in their head
  • Has a bad habit of procrastination

Amy, 20, Full-time Student

  • School Committee Member
  • Likes to keep a written agenda to plan their schedule
  • Spends a lot of time organizing
  • Wants more free time to spend on their hobbies

Mark, 24, Full-time Student

  • Part-time job
  • Varsity Athlete
  • Usually tired after basketball practice
  • Struggles to complete assignments on time

It Starts With Empathy

After creating user personas, I implemented empathy maps to further understand my users. This technique allowed me to access the thoughts, feelings, and actions of users to fully unveil their frustrations. The empathy maps really dig deep into their emotions to show their true frustrations.

Overall, it seems that although these three students have different pains and frustrations due to their situations and obligations, they can all benefit from a tool that helps organize their school life.

The Problem Discovered

After analyzing the data gained from user surveys and interviews, in addition to the audit of the current app, I discovered a common theme with time management and organization. Students are underlying struggling with organization and time management skills. In addition, the current MyHumber App is only adding to these difficulties. In fact, Humber’s app seems to be making school more “tedious” and “frustrating”. A tool that is supposed to help students is deemed as almost useless. Students are tasked to balance time with school, social life, and family. This can become overwhelming and stressful to manage. With pressure internally and externally, falling behind in school may be inevitable to some.

Main Goal

Design a mobile app that focuses on helping students build better time management and organization skills.

This could ultimately impact Humber Students positively by becoming a useful tool that builds better learning habits. In addition it will also positively affect the reputation of Humber as a whole. If more students are graduating at higher success rates, Humber’s reputation as an educational institute will increase.

Initial Ideas:
- Organized to-do list that automatically pulls data from Blackboard’s database (Blackboard is Humber’s platform for online learning). This includes assignments, exercises, activities, tasks, meetings etc.

- Do Not Disturb (DND) feature which blocks all push notifications

- An app that helps build better learning habits

User Flows

After constantly referring back to my personas and empathy maps, I created a task analysis and user flow to give me a clear overview of the steps users must take in order to get to their final goal. Now again, the main goal is for students to gain better time management and organization skills. Now, with a clear idea of my user and their needs, I identified three core features that I wanted to focus on for the product.

1) Organized to do list
2) DND feature using Pomodoro technique
3) Clean and minimal

With this, I was able to lay out the necessary steps a user must take in order to achieve these goals.

Task: User logs into app for the first time, goes through tutorial and log in process

Task: User checks to-do list for the day, analyzes what task they must complete, and starts an assignment

Information Architecture

With an idea of how users would interact with the app, I was now able to create an information architecture to gain a clear overview on the structure.

Ideation Process

I wanted to keep a minimal and simplistic mindset when creating these sketches. Since one of the issues user’s have with the current app is the disarrayed with too many options, my initial thought was to keep it simple and clean to ensure users are not overwhelmed. I started with pencil and paper wireframes that followed my initial user flow.

Rough sketches the interface of each main screen

Before moving on to a mid fidelity prototype, I conducted rapid user testing on the paper prototype to save time and resources, using the POP app. Once I felt users could easily navigate through my paper prototypes without any issues, I moved on to my wireframes.

Wireframes

Again, before moving on, I got feedback from my colleagues by running user testing. I gave them a specific task to complete and analyzed what went wrong and what went right. Ultimately, I noticed some flaws and confusions with the overall structure of the app. Users were confused with how to access an overall view of all their tasks. This problem caused me to rethink the structure of the app and forced me to reiterate ideas about the navigation bar. I found this step important to the overall process. It saved me time and effort before moving on to a high fidelity prototype.

Adapting to my users before prototyping

Before starting a high-fidelity prototype, I went back and adjusted the Information Architecture. I discovered that users felt tasks should be accessible on the navigation bar so they can easily view a cumulative view of current and upcoming tasks. After making the proper adjusts to the information architecture, I finally began to create my high-fidelity prototype.

Hi-Fi Prototype

View the final prototype here

Consistent interface to view each course’s assessments
Users can easily access each course’s tasks, assignments, exercises, test and exam information. This makes it easier for students to create their to-do lists.

Simple and efficient way to view daily, weekly, monthly tasks
Easily add, move, or delete, specific tasks to certain days to help students organize their daily, weekly, and monthly obligations

Build better time management and work habits
The Pomodoro technique is scientifically proven to increase productivity. By implementing a timer and blocking push notifications, students are encouraged to focus entirely on their work.

Add, move, or delete tasks
Easily add, move, or delete, specific tasks to certain days to help students organize their daily, weekly, and monthly obligations. Students are also able to add events.

Testing & Iterating

Testing and iterating is a technique I’ve been using throughout my whole process designing this app and has been one of the most important steps. Being able to constantly reflect and define pain points in design is crucial. Thus, again, I began to conduct a series of usability tests with students. This time, I utilized a usability test plan dashboard to determine the key areas of focus that I am testing. This helped me with creating my task lists and creating a concrete usability test plan to roll out.

I gave users a series of scenario-based tasks that would test the main concepts and noted any instances where users felt stuck, confused, or frustrated by their body language, facial expressions, and time spent on tasks. These tasks are based on the original user flow task, which consisted of assigning specific assignments/tasks to certain days. I used this opportunity to test if users could also successfully move, add, and delete tasks. Lastly, I asked users to start and complete an assignment to test the do not disturb feature. To end the usability test, I asked a series of follow up questions to grasp an idea on their experiences and thoughts on the app.

What I learned from rounds of usability testing


Copywriting
Some users were confused with word choices. For example, when adding a new event. I originally had this option as “New” & “Task”. This confusion led me to revise the wording from “New” to “Event”


Colour Choice
Bad contrast with the yellow of the white background made some words ineligible. I opted to choosing a darker shade of yellow which resembles the yellow used in the Humber logo to look easier on the eyes.

Reflecting on my process, project outcome, and my growth as a product designer

Through working on this project, I realized the importance of having a structured design process. Originally, I found myself following specific steps in researching, empathizing, ideating, and testing; however, throughout this project I discovered this is a continuous cycle. To be a good designer means to constantly go back and understand the user.

I found myself constantly tracing back to my users before I moved on in the prototyping stage. This allowed me to grasp a better understanding of certain design flaws that were present before moving on, which ultimately saved me the hassle of dealing with the problem in the future. Overall, as I realized my design process has grown to become more open minded and empathetic towards my users, I found myself enjoying digging deep into their frustrations.

What went well ....


Gaining insightful research despite having limited resources due to restrictions

Despite being limited to video call interviews and online surveys, I was still able to gain insightful information on user pain points. I feel, as a researcher I prefer in person interviews because I am able to gain a better connection with the user through body language and dialogue.


Adapting my design process

By allowing myself to constantly adapt my design process, I was able to better understand my users. Instead of sticking to such a concrete plan, I allowed myself to adapt and stay open minded by constantly tracing back to my user’s frustrations.

What I'd do differently ....


Conduct more usability testing

Due to time constraints, I was only able to conduct 3 usability tests. In the future, I plan on organizing a better schedule to fit more testing in. I found this to be such an important step before moving forward in in part of my design process.


Find ways to prove my ideation concepts

My ideation concepts for the app are mainly my assumptions on how users could benefit from the new app. I made these assumptions based of their pain points however, I currently don’t have a way to prove this will actually help students.

Moving Forward

As mentioned above, I would love to conduct more usability tests, preferably in person too. I was limited to some video call usability tests due to the Covid Pandemic. With more usability testing, I would be able to gain a better sense on if this solution would benefit students. Overall, I would love to have a metric to measure on if and how this app has improved Humber students time management and organization skills in correlation to higher success with grades.

Project Type
Mobile App Design
Role
UX Researcher
UX & UI Designer
Project Duration
November - December 2020 (4 weeks)
Tools Used
Adobe Illustrator
Adobe Photoshop
Adobe XD
Figma
POP Prototyping

Prototype
View final prototype here

Project Overview

The Home is Toronto mobile application is a tool designed to engage the City of Toronto’s youth into city planning processes. It’s Toronto’s goal to become the most engaged city on planning issues in all of North America and they discovered our youth is an important demographic to reach. Throughout this process, I discover different ways to engage Toronto’s youth. As the sole UX designer for this project, I designed this mobile application from inception to final design through research, ideation, and UX design principles.

"We want to make Toronto the most engaged city on planning issues in all of North America. That’s the goal of Growing Conversations, a project to improve engagement across the City Planning Division. We know that achieving that goal means doing a better job of reaching youth, newcomers and renters— groups that are often underrepresented in conversations with City Planning."

Context

Toronto has already implemented a plan to engage youth in the last 10 years - Growing Conversations + The Youth Engagement Strategy.

What is the Growing Conversations Plan?
Toronto’s Engagement 101: Growing Conversations plan addresses questions on why and when do we engage? This is a planning and development outreach and engagement plan to influence Torontonians to become more engaged and educated on city planning processes.

The plan outlines strategies to build participation, inform planning processes, and facilitate city building.

What is the Youth Engagement Strategy?
Toronto’s Youth Engagement Strategy outlines when and how to engage with youth. The strategy was a plan developed for youth by youth. The Toronto Youth Research Team (YRT) developed a plan to mobilize a generation to take ownership of planning issues. Toronto’s youth is the fastest-growing demographic whose voices are often missing in these processes. Through extensive research, the city discovered issues youth care about, barriers to youth engagement, guiding principles, and areas to focus on.

Issues Youth Care About
I found this research interesting as it really dove deep into how the youth are thinking and feeling. Toronto discovered 5 major issues youth care about.

1) Intensity & Character Development
2) Supporting The Arts
3) Urban Design & Public Realm
4) The Environment
5) Sense Of Community & Neighbourhoods

My Process

Research

The beginning of my research started with analyzing the data Toronto collected to propel me in the right direction. Therefore, after synthesizing through their data, I thought it would be valuable to gain a first hand experience on their personal insights of the current state of city planning processes as a whole. I conducted a series of 20-30 minute interviews, with individuals aged 18 - 30 which focussed on personal interests and knowledge on city planning processes.
My main goal for these interviews were to to determine:
- What matters to them?
- What issues do they care about?
- What do they know about city planning?
- Do they want to be involved?

Why? To determine what areas in their lives the city should focus on in order to maximize effectiveness.

Constraints*
Due to the global Covid Pandemic, my resources were limited to video call interviews.

Synthesis Process

I broke my interview data into 3 categories to help better understand and define my insights.

In addition, I categorized my data into 3 categories:
1) Pain Points
2) Motivations
3) Behaviours

Common Patterns
Some important recurring points I discovered:
1) 100% have limited knowledge on city planning processes
2) 100% believe youth have a detrimental impact on the future
3) 80% want to become involved in city planning processes

Key Insights

Lack of education on city planning processes

Youth are too busy

City planning is not a priority to most

Lack of Education on City Planning Processes
Many of my interview participants stated they are unaware of the pros and cons of each development and how it would directly affect their daily lives. In addition, 80% admit they want to have more of an input but don’t know where to start. It seems there is a barrier in the educational aspect because the resources are available, however, users don’t know where to begin. So where is the disconnection between wanting and taking action?

Youth Are Too Busy
In a world where the competitiveness, stresses, and pressure that school and our careers bring, our youth have too much to worry about. They are too busy stressing about getting good grades, getting a job or promotion, paying their bills, and spending time with loved ones to spend their free time learning about city developments - that is unless it directly affects their lives.

City Planning Is Not A Priority To Most
I asked the question “What inspires you to get out of bed everyday?”. There was a few resonating themes that most of our youth related to.

1) School 🏫- getting good grades and getting their dream jobs
2) Family 👨👩👧 - spending time with family and friends
3) Career 👩💻 - provide for themselves and their families with their jobs
4) Finances 💰 - working to save up for their future and pay for expenses

User Personas

To gain a better understanding, 2 user personas were created to maintain a user-centric focus for the entire duration of the project. I constantly revisited these personas to remind myself of the needs and frustrations of the users.

Zach, 27, The Adventurist
  • Has a full-time job and works long hours
  • Lives in a condo downtown
  • Interests include: visiting new restaurants/bars, travelling, sports, Toronto nightlife
  • Hates sitting in traffic before and after work
  • Hates construction waking him up in the morning
  • Sad to hear one of his favourite bar is closing down

Liz, 23, The Busy Student

  • Very busy with school work, when Liz has free time she works a part-time job in hopes to save up for her own place
  • Uses public transportation daily and gets frustrated when the street car is late
  • Interests include: music concerts, arts, outdoor spaces, and hanging with friends
  • Wants to move out downtown but is worried by unaffordable housing

Final Important Insights

After analyzing and understanding my demographic in more depth, I referred back to my interviews and discovered some final important insights. The user personas and empathy maps allowed me to discover:

1) The youth are uneducated on city planning processes 📚⁉️
2) Too busy with personal lives to care unless directly affected 💆🚗 🚧
3) Youth care about nature, green spaces and historic landmarks 🌳🏛️
4) Youth would become more involved if they knew pros & cons 📊

The Problem Discovered

After analyzing research completed by Toronto’s Youth Reach Team in addition to mine, it seems there is an underlying issue with a lack of education and a low priority on city planning processes. Simply put, our youth are too consumed with their priorities and responsibilities to care about city planning processes. The disconnection between wanting to take action and actually doing is caring.

Main Goal

Design a creative and fun way for youth to become educated and engaged with city planning processes.

First, it is important to refer back to both business goals and user goals to ensure our ideation process benefits both parties. Therefore, to keep myself level headed on the main goals, I looked back at this statement: Increase youth’s engagement with city planning processes by getting them to participate with voting, community meetings, and proposals.

Now, based on research conducted by the City of Toronto, along with my own, I’ve outlined final focus areas to tackle, that I believe would benefit both user and business.

» Planning Literacy: break the barrier to allow youth to become more knowledgeable about city planning processes and how to get involved.
» Access To Information: with the use of technology, make information more accessible through mobile devices instead of the traditional community meetings.
» Inclusivity: make our youth feel included.
» Development Review Process: inform youth on how the development review process works and show how their input is important.
» Community: build a sense of community by asking for youth’s opinion.
» Intensity & Character Development: identify the pros and cons of each development and show the community how it may affect them.

What is the current state of this situation?

Before moving on to the ideation stage, I wanted to get a sense of the current state on where youth can learn about Toronto’s development applications. Toronto provides an open data portal that contains every development in the city. Accessible through an interactive map found at http://app.toronto.ca/AIC/index.do - information on development timeline, contact, and status are detailed.

In order to further understand my user, I conducted usability testing on the open data portal. I received pain points and frustrations stating things like:
» “Confusing and hard to use”
» “There was too much irrelevant information”
» “I want to know how this development will affect me today and in the future”
» “How would I give feedback? Do I email this person directly?”

I created a customer journey map to outline what the user may be thinking and feeling throughout their experience. I created a scenario where the user hears news about a new condo going up that will replace a bar that Zach and his friends attend often. Now Zach wants to know what other developments could potentially affect him in the future. The stars represent major pain points the user experiences throughout this process. The customer journey map allowed me to identify specific areas where users feel frustrated and helped propel me into the right direction during the ideation process.

Ideation Process

My ideation process started with a general brainstorm to determine a minimum viable product. I started by jotted down ideas using sticky notes, while also looking to other mobile apps for inspiration. Some ideas include: gamification, augmented reality (AR) capabilities, social media ambassadors, Youtube - like video reviews on developments, and a social meetup app.

The Solution

It’s time to make educating and involvement on cityplanning - fun

Overall, I found that because the target demographic is aged 18-30, the most viable product proposal is to gamify and educate. Our youth will be educating themselves on city developments and getting involved at the same time. Sparking the conversation is the first step to get them involved by displaying the right information that matters to them. To keep them engaged, reward them with small prizes that are valuable to their daily lives.

How can we gamify this solution?
Users receive points by getting involved in city planning processes. This will overall, level up their ranks to level up from bronze, silver, to gold.

How do they become involved?
» Scanning a QR code to view new developments
» Commenting, liking, and sharing development proposals
» Attending community meetings via live stream or in person
» Voting on development proposals

What type of prizes can they claim?
I found the most effective way to keep these users engaged in this process is to allow them to claim prizes they care about.
» Transportation passes
» Gift Cards
» Entertainment Tickets
» Parking Passes
» Money

User Flows

To move forward with my ideation process, I created a user flow with a specific scenario based tasks to help gain a sense on the structure of the app. The task given is meant for a new user and is as followed:
» Create a new account
» Go through tutorial
» Explore new developments around you
» Choose one specific development
» After reading about the development information, view it using the AR function, and provide feedback
» Claim your points
» Check out the rewards section to see what prizes you can claim

Task: User logs into app for the first time, goes through tutorial and log in process

What would this new experience be like for users?

With this user flow in mind, I created a new customer journey map to understand and empathize how the user would feel throughout the process. Based on how this user had less frustrations and pain points, I then had a better sense of the product moving forward. This saved me time before moving on to wireframes and a prototype. By constantly treading back to the user personas and customer journey maps, I was able to fully understand my user to move forward into building the information architecture of the product.

Information Architecture

With an idea of how users would interact with the app, I was now able to create an information architecture to gain a clear overview on the structure.

Initial Sketches

With a concrete structure, along with user flows, I began to create my initial rough sketches of the interface for the main screens. I constantly referred back to my user demographic while brainstorming and sketching by keeping in mind that I want this app to be a fun way to educate.

Rough sketches the interface of each main screen

Before moving on to a mid fidelity prototype, I conducted rapid user testing with paper prototypes to save time and resources, using the POP app. Once I felt users could easily navigate through my paper prototypes without any issues, I moved on to my wireframes.

Wireframes

Again, before moving on, I got feedback from my colleagues by running user testing. I gave them a specific task to complete and analyzed what went wrong and what went right. I didn't run into any issues with the structure and flow of the app so I began to create my hi-fidelity prototype.

Hi-Fi Prototype

View the final prototype here

Personalized Content Feed
Your home feed will display and recommend development news related your preferences such as location, hobbies, interests, and needs.

Explore what’s going on in Toronto
Interactively search and filter development proposals. The search feature lets you discover any type of development that is in progress or in the proposal phase.

Getting involved and informed is easy
View development proposal information and get involved. This simple layout lets people find the information they need.

Earn points by getting involved
Getting involved with the community liking, sharing, voting, attending community meetings, and scanning QR codes to gain redeemable points.

Claim Rewards
The reward section has plenty of redeemable prizes on things like food, clothing, gift cards, and many more.

Testing & Iterating

Testing and iterating has been a consistent step I’ve gone through during the process of every project I’ve worked on. It has helped me discover potential issues sooner rather than later and was a constant reminder to always keep the user in mind. To test the functionality of this app, I conducted a 3 usability tests.

I gave users a series of scenario-based tasks that would test the main concepts and noted any instances where users felt stuck, confused, or frustrated by their body language, facial expressions, and time spent. In addition, I timed every task to gain insight on situations where the user may not know what to do. Mainly, I wanted to determine if people understood the main purposes of the app - to discover developments around Toronto and how getting involved would be beneficial. To conclude I conducted a post - test interview which helped gain insight on their thoughts of the concept and their overall experience.

What I learned from rounds of usability testing


Navigation
Some users were a bit confused when searching for the profile section.


Learning Curve
Emphasize how to use the app during the tutorial process

Reflecting on my process, project outcome, and my growth as a product designer

During the entirety of this project, I was surprised to find myself spending so much time on the research phase. This project was quite different compared to others in a sense that I was tasked to review an abundance of research completed by the client. However, I found this phase of the project to be the most fulfilling. I knew that reading through the research given would not be enough which lead me to conducting my own. I gained a sense of fulfillment during this process as I found myself enjoying defining the problem and discovering a solution that could potentially help the City of Toronto. This project allowed me to gain a higher level of understanding on how to really empathize with people and ideate solutions that could benefit them.

What went well ....


Sorting through extensive research

The research given was quite time consuming given the short time line I had to complete this project. However, under this time constraint, I was able to effectively discover the most useful insights to support the major pain points.


Organizing my research to support the problem

Organization and presentation is one of the most important factors when pitching a solution to a client. With planning and preparation, I was able to position my supporting arguments to effectively present the problem and solution.

What I'd do differently ....


Outline the next steps for how I’d validate these ideas

Since this project is a design pitch to the City of Toronto, I would have loved to outline specific metrics to use to determine the potential success of this solution in a presentation.


Explore more ideation concepts

Given the condensed timeframe, I was only able to fully explore the idea I went forward with. If I had more time, I would have liked to explore more concepts and test them with my colleagues to determine which one to move forward with.

Moving Forward

This concept was created as an assignment and is awaiting feedback from the City of Toronto's team. Moving forward, I would love to conduct more usability testing to determine how impactful this solution could be.

Project Type
Mobile App Design
Role
UX Researcher
UX & UI Designer
Project Duration
October - November 2020 (4 weeks)
Tools Used
Adobe Illustrator
Adobe Photoshop
Adobe XD
Figma
Prototype
View final prototype here

Project Overview

Due to a global pandemic, online shopping has drastically increased due to store closures and restrictions. How can we persuade people to shop in-stores post pandemic?

According to Statistics Canada, clothing retail in store sales have dropped from 89.4% to 76.4%, while e-commerce sales have raised from 10.6% to 23.6% from 2019 - 2020.

Context

In this growing age of technology, many businesses are implementing some sort of online presence to keep up with competitors and increase engagement with their customers. For this project, I was tasked to create a second screen experience for any industry. Many businesses utilize this technique to constantly keep their customers engaged. For example, the sports industry uses the ability to see player statistics with live updates as a second screen to add to their experience while watching a live game. This made me wonder, "How can we increase engagement while shopping in-stores?".

My Process

Research

Due to the Covid-19 Pandemic, many retail stores were forced to close down, shorten store hours, and enforce social distancing protocols. In addition, in the event that these stores were open, customer limits added more frustration with longer wait times. This led me to wonder what it would take to get shoppers to come back into stores. To discover this, I wanted to uncover what main problems customers deal with when shopping.

The Users

I conducted a series of qualitative and quantitative research through surveys and interviews to determine user pain points with their experiences while shopping. My targeted demographic were people aged 18 - 30.

Constraints*
Due to the global Covid Pandemic, my resources were limited to video call interviews and online surveys.

Despite this, I was able to conduct a series of in depth interviews with 5 young adults regarding their experiences shopping in stores.

Key Insights

Customers usually need to try clothing on

Customers can't find what they are looking for

Some customers feel shy and anxious to ask for help

User Personas

To gain a better understanding of these users, 3 user personas were created to maintain a user-centric focus for the entire duration of the project. I constantly revisited these personas to remind myself of the needs and frustrations of the users.

Kris, 23
  • Feels shy to ask for help while shopping
  • Usually asks friends to come along for fashion advice and which stores to shop at
  • Can never find what they want, which is why they don't go shopping too often
  • Wants to have a better sense of fashion
  • Gets inspiration from social media influencers on instagram
  • Gets frustrated when buying clothes because sometimes they don't fit the way he expected
  • Doesn't trust online shopping because they never fit they way he expects

Amy, 20

  • Can sometimes spend hours shopping
  • Feels the need to try on every item to make sure it fits properly
  • Frustrated when items are sold out
  • Can sometimes get advice on fit, material, and shrinkage information from sales associates
  • Amy is shorter than average and finds that most clothes at her favourite store are made for taller people
  • Hates when she cannot find a certain item
  • Has recently tried shopping for clothes online

The Problem Discovered

After analyzing the data gained from user surveys and interviews, I discovered a few common themes within the problem. Firstly, customers usually need to try on clothing because of many factors. Some pieces of clothing can differ in how they fit due to branding, sizing, and material. This can be frustrating when buying clothing that doesn't fit. The customer would have to then return the item which can be even more time consuming. I found that many people complained about how sizing can differ from brand to brand. A size large can be completely different than another size large from another brand. The physical aspect of in-store shopping is what online shopping lacks.

Secondly, customers feel frustrated when they cannot find what they are looking for. Whether the item is sold out or they simply cannot find items that catch their eye, it can be frustrating and time consuming to deal with.

Lastly, my research showed that some customers may feel shy and anxious when asking for help from sales associate. This causes people to outsource advice from friends, family, or social media. One important insight I found is that many people use social media for inspiration. Whether it's their favourite celebrity, fashion influencers, or models, the power and influence social media has on customers is a key factor on their buying decisions.

So what happens when a customer is too shy or anxious to ask for help while shopping alone?

Main Goal

Design a mobile app that provides a tailored shopping experience

Before I began ideating solutions, I took into account that the main objective of the business would be to increase sales and engagement within their stores. After this, I circled back to my users. I found that a tailored shopping assistant would greatly enhance their shopping experience and encourage them to come in store.

User Flows

After referring back to my personas and key insights, I created a task analysis to help me with the ideation process. To reiterate, the main goal for the user to to eliminate frustration. With a clear idea of my user's needs, I identified core features that I want the product to focus on.

1) A tailored shopping experiences that offers the ability to filter items based on the user’s given body measurements/type and preferences in style and fit
2) Display advice from style advisors on each product (Ex. how the product fits, if you need to size up or down, etc.)
3) Recommendations on similar items and items that would pair nicely
4) Eliminate the need to talk to sales associates by displaying exact product location and availability

With this, I was able to lay out the necessary steps a user must take in order to achieve these goals.

Task: User enters store looking for a cozy sweatshirt

Information Architecture

With an idea of how users would interact with the app, I was now able to create an information architecture to gain a clear overview on the structure.

Ideation Process

While creating rough sketches, I referred back to a user pain point being that shopping can be too time consuming. Thus, I wanted to create a solution that is simple and easy and quick to use.

Rough sketches the interface of each main screen

Due to time constraints, I was not able to test out my paper prototypes to gain feedback and had to go straight to hi-fi prototyping. However, before moving on, to fully ensure these features would benefit both the business and the user, I outlined some benefits and opportunities.

How would this solution benefit the business?

For starters, this solution could reach a demographic of shoppers that don't feel comfortable shopping and welcome them into a more enjoyable experience. By creating a more welcoming and helpful experience, this solution has the opportunity to increase sales and marketing through second screen experience engagement. Lastly, there is a ton of opportunity with creating an online presence through social media. Whether it is through fashion influencers or blogs, there is opportunity for growth and exposure of the business.

How would this solution benefit the user?

This mobile solution would allow users personalize their shopping experience with an algorithm that recommends products that suit their preferences. In addition, the ability to gain fashion advice visually through relatable photos allows users to find what they want without ever feeling anxious, shy, or intimidated to ask for help.

Hi-Fi Prototype

View the final prototype here

Recommended Products
Users are shown products that directly suit their preferences once they set up their profile

Enter your profile details to gain a personalized experience
By completing your profile, users will receive information on products they like.

Product Availability
Users are able to easily check if an item is in stock.

AR Product Location
With the use of technology like Google Beacons, sensors will be situated across the store for users to be able find items using AR assistance. By assessing the user's location in proximity to the product, they can be directed through their mobile devices.

Testing & Iterating

Usability testing and iterating is one of the most important steps of my process as it is used throughout the entirety of my design process. I conducted a series of usability tests with people aged 18-30. Before creating a usability test, I asked myself, "What would this experience be like in store?".

- "Hmm, I can never find jeans that fit me properly... "
- "I feel like I'm too short for those jeans"
- "I guess I can get them tailored..."
- "I'm too shy to ask..."
- "I don't know if I'll look good in that .. the line for the change rooms is too long"

Through analyzing these thoughts and feelings connected to the in-store experience, I created a series of scenario-based tasks test the main concepts of the app and noted any instances where users felt stuck, confused or frustrated by reading their body language and time spent. However, due to time constraints on the project, I was unable to follow through with these tests.

Reflecting & Moving Forward

To move forward with this project, I would love to conduct usability testing to be able to reflect back on my process and make the necessary changes. I am a firm believer that as a designer, there are always areas to improve, learn, and reiterate. This project gave me an insightful look on how the future of technology might look. I took this opportunity to think outside the box to reshape how people shop in the future. Overall, it was insightful journey that allowed me to use creativity to design and prototype a mobile experience that we might see in the near future.

Ready for more?

Thanks for stopping by!

Let's work together!
I am currently seeking full-time opportunities
and would love to connect.

Let’s have a chat!