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
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.
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.
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.
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.
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.