Toronto City Planning App
Overview:
The City of Toronto currently has a sector on their website for City Planning, but they are finding that the youth are either not engaging in it, don’t know about it, or aren’t interested. I came up with an app that includes social media and AR which caters to the youth in order for them to become interested in planning the city's future. (Keep in mind, this is an industry project with a real client but it was a learning process)
Tools Used:
Adobe Aero
Adobe Experience Design
Adobe Illustrator
Adobe Photoshop
Role:
User Experience Designer
User Interface Designer
User Researcher
Design Process:
I go through an extensive design process in order for me to create the best possible solution.
Research:
I identified the problems and their potential solutions.
Reasoning and Problems:
The problem is that the youth in Toronto are not engaged enough in city planning, below you will see the reasons why. I did research in order to figure out which problems need to be mostly solved for potential users as well.
Reason 1: They do not feel like their voice is heard.
Reason 2: They need to make sure that what they are saying is meaningful.
Reason 3: They need to make sure they are understood.
Problem 1: The use of jargon on The City Of Toronto’s Website.
Problem 2: The City Of Toronto’s City Planning Directory is more catered towards the middle-aged and elderly.
Problem 3: There aren’t very many opportunities for youth to know about city planning.
Trello Board - Youth Engagement Plan:
I took all the research that I gathered from the City Of Toronto’s website and the cities Youth Engagement Strategy and organized it on a Trello Board. This helped me stay anchored on the goals and focuses that the web app should embody.
Potential Solutions:
I looked at potential solutions to solve these problems.
Gamification: Design a game where people see how many sites you visit so people can get more involved in city planning.
AR App: An app to use AR to browse out and see their 3D model, and get a visual view of angles of buildings.
Social Media App: Create an app that allows people to give feedback through social media catered for the youth, where they can get engaged with the process.
Interview With the City:
In order to tackle the issue at hand, the class conducted an interview with our questions that we had for the City of Toronto’s Planners. Here are some responses I thought were important to know for the app.
Question 1: Why should youth care about city planning?
• Because youth live in the city and they have a voice and the city considers designing cities with their needs in mind
• The youth is the future and the buildings being built will be for the future
Question 2: What types of data are more helpful or used during the development of ideas or projects?
• Short specific answers
• With a mobile app the city can be more creative about getting that data
• Counselors have not used multiple-choice, recording, or photos, but they want to use it
Question 3: What are the typical steps or stages for a City of Toronto project to be approved and implemented?
Stage 1: The developer initiates a project.
Stage 2: Information made to the public.
Stage 3: Put a sign on where they are doing the project.
Stage 4: Mandatory meeting for the community.
Stage 5: Counselors gather all that information and consider it when they are reviewing applications.
Stage 6: The planner will do a final report to the council.
Stage 7: Local counsellor takes the final report to the community counsellor, and asks them to make a decision based on the report that was submitted.
Stage 8: There is a second opportunity to provide comments on that community council.
Stage 9: Counselors listen to the report and explain the circumstances to their fellow counsellors and they vote whether to adopt, refer, or amend it.
Stage 10: The project goes to the city council in general.
Stage 11: The developer will start the process.
Youth Survey:
I asked the youth to take a survey in relation to city planning. Here are the most significant answers I found.
Question 1: What are some hobbies categories you have when being in Toronto?
Urban:
Arts:
Findings Overview:
You'll find that a vast majority of the user testers are really into the urban and arts for their hobbies. These were the main two bringing business, employment, transit, community, infrastructure, culture, and economics out of play.
Question 2: have you ever taken part in city planning?
Findings Overview:
Seeing that 100% of the youth I surveyed have never dived into city planning, it goes to show that they either don't have an interest in it, or they haven't been informed enough. This is backed up by the research I did.
Question 3: Before it was explained I knew what city planning was..
Findings Overview:
Getting the results for whether the youth knew about city planning was astonishing. It really goes to show how the current city planning tactics arent being marketed to where the youth would find interest in it.
Question 4: In which ways do you think you would benefit from city planning?
Interactive Rating System:
Discussions of Potential Plans:
Visual Representation:
Findings Overview:
Through the results, you can see that a lot of the youth I surveyed are mostly interested in a more visual web app more than anything. They don't want it to be too formal of an app. They feel they would be more interested if there was a way to tie in city planning feedback in a visual way.
Question 5: If there was an engaging app for the youth for city planning, would you use it?
Findings Overview:
The vast majority show that if there was a web app for city planning, they'd indulge in some awesome city planning feedback on new developments to come!
User Personas:
The persona was used to help me stay connected to the users and avoid letting our desires for features trump user needs.
Final Solution:
I know a large majority of youth are familiar with social media and AR, so I thought by combining both, it would cater to them more.
Reason 1: Youth will feel comfortable, and their doubts will become less about participating in city planning.
Reason 2: The city’s website and planning tactics already capture the middle-aged and elderly.
Reason 3: This app would solve the problem of the lack of youth involving themselves in city planning.
Storyboarding:
Storyboarding helped me identify key moments of the youth going through discovering the city planning app. It makes it a lot easier for a user to pull out their phone and view the building in AR mode which results in giving feedback, whereas if they had to actually go to a city planning meeting, it would be less favourable.
Customer Journey Mapping:
The customer journey map helped me visualize the process that the users could go through in order to accomplish a goal before and after the app is created. Essentially, I got deep into the minds of potential users and dissected valuable information about what they do, think, and feel.
Here you see how the journey is with the current cities website (As Is), and how the future journey will be with the app (To Be).
Findings Overview:
In these 4 customer journey maps, you will find that the pain points which are the red circle, are a lot less prominent when the web app becomes implemented. I did this to make sure that during the process of designing the app and experience, I knock out the pain points most relevant in order to give the users the best possible experience.
Design System:
The design system helped me figure out the design elements to use within the web application which helped me keep on brand.
Wireframes, Mockups, and Explanations:
Step by step I made sure to follow my process by starting with wireframes, then creating mockups and prototypes, and lastly making sure there is the reasoning for why I made design decisions.
Sketched Wireframes:
In this step of the design process, I was just trying to get some inspiration and I decided on this initial concept in return. This is just a brief sketch that will be taken into Adobe XD for digital wireframes.
Digital Wireframes:
While it looks pretty similar to the sketches there were very minimal changes done to the digital wireframes such as the structure and adding small elements here and there that helped tie in the experience more.
High Fidelity Mockups:
These mockups are my 5th and last iteration of trying to get the app to not only look professional, but also cater towards the youth.
Explaining Design Decisions:
Explaining design decisions helps show that I am adding value-adding design elements to the app, and not just throwing features in that are useless to the user's experience.
User Testing and Results:
The user tests interface and functions of the app, are tested by real users who perform specific tasks in realistic conditions. Here are some of the main tasks I asked the testers to do.
Task 1: Can you find the map on the home feed?
Task 2: Can you find the upper navigation and go through the activity page?
Task 3: Can you Navigate to add friends, your friends, and requests page?
The first round of usability tests really honed in on a few flaws testers had.
The second round of usability tests for the same app iteration had the same results as the first, so I made all of those changes. There was an issue with the upper navigation that said "manage profile", and it was being mistaken as just a one-click function to the manage profile page. Instead, it went to side navigation first where they were prompted with various buttons, and this threw all of my user test subjects off guard so I made sure to tweak it to open up directly to the manage profile page.
Final Thoughts:
Reflecting on the work I have done helped me learn from what I had done and develop more as a designer.
What did you learn?: Planning and doing extensive research is very important. And also having primary and secondary research helps me see all angles when researching, and I will do that more often now.
How did you apply it to other work?: Making sure to never skip steps, and always be diligent and consistent.
What would you do differently next time?: Next time I would focus more on the AR aspect. I used a new program in order to do this so I had to familiarize myself pretty fast.
