Parks TO app
Design an app that will resonate with youth, newcomers, and/or renters aged 19-30 years of age in Toronto with city planning. The proposed app solution, Parks TO, was created to serve as a platform where the target audience could creatively improve Toronto Parks through an Interactive Posting system and support others’ suggestions through a Forum system.
November - December 2020
Adobe Illustrator, Adobe XD, Notion and Zoom
Mobile App Design, Research to Conception, UX Writer, Visual Design, User Testing
Our clients were city planners from the City of Toronto where they shared the following statement with us to guide the project.
"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."
The Design Process
For this project, we followed a 5 step process to design the application, ParksTO. My partner and I worked collaboratively for Steps 1-2 but for Step 3-5, roles were divided to increase work efficiency and to ensure all required tasks were completed.
📝 Step 1 | Research
We prepared a list of questions (7 in total) to ask the City of Toronto planners during one of their live Q and A sessions. The interview revealed these following insights as extra goals to consider in the design.
A way to make the current city planning application process more creative or visual
Potential to engage with all parts of Toronto, not just the Downtown area
Encourages the target audience to explore their own streets within Toronto in order to better understand urban planning
My partner and I completed 6 Journey Maps for 3 user personas (College Student, High School Student and Young Professional) that were provided by the City of Toronto. These journey maps helped us to visualize how intended users would normally participate in city planning activities and then how might they participate through our app idea. Hence, 2 Journey Maps were created for each user persona and we used the template created by Taras Bakusevych.
View more Journey Maps for other user personas, High School Student and Young Professional (Click to reveal more)
Insights (From the As-In Journey Maps) We found that with the College Student and High School Student personas, their only connections to get involved with City Planning would have been if they were active members of the Toronto Youth Council. For the Young Professional, their exposure to city planning would be if they attend city meetings.
Takeaways (From the To-Be Journey Maps) With our app design, we wanted to mainly increase touchpoints and tools so that the target audience can learn about city planning from the comfort of their digital phones. This was to ensure that users could easily engage with the topic of city planning without necessarily having to participate through solely different councils or attendance of city meetings.
Next, we conducted a survey that had 3 sections: Personal information, City Planning, and Forums/Discussion Based Sites/Apps. In total, we had 46 responses and the survey indicated how familiar the target audience was with the idea of city planning and their experiences with viewing or giving feedback on discussion-based apps.
City Planning Section
💡 Here were some of the most important insights:
- Most respondents have a general awareness of what city planning is and what it entails
- Most respondents were neutral in having an interest in city planning and almost all respondents never attended any public planning meetings for their city
- Most respondents were of neutral/slightly negative opinion that their city does a great job of involving/informing the public regarding what is happening within the city
- Participants were interested in these top 5 parts of the city planning
- Community Safety
- Arts & Culture
Our target audience was overall unfamiliar with the topic of city planning and barely attended any public city planning meetings. Thus, we had to consider how our app would effectively encourage users to participate and also share their input into developing their city. As such, knowledge of the top 5 aspects of the city planning process that appealed to our target audience was important for us to incorporate into the app design.
Forum/Discussion Based Apps Section
💡 Here were some of the most important insights:
- Majority of respondents use discussion based sites or apps
- Less than half of the respondents use the sites or apps daily but more regularly within a month
- Most respondents find the diverse topics, posts and comments from different perspective helpful
- A popular feature of using these platforms users mentioned was being able to encounter a variety of perspectives or ideas
- A negative aspect of using these platforms users stated was negative feedback or "trolls" who do not contribute to the topic at hand
This section provided helpful feedback that a discussion format may be an ideal medium to encourage the target audience to participate and receive feedback. While some participants noted that they do not post on these discussion forums, a large percentage admitted that they frequent these sites regularly. In particular, the open-ended questions gave us a better idea of how to design an ideal forum based on the participants’ stated likes or dislikes about these apps sites.
The last part of the research we conducted was site visits to several parks of different sizes according to the Park Maps site. The purpose of our site visits was to collect resource material for the UI of our app and possible locations to input example suggestions for drawings or AR objects for our design. Additionally, we also referenced a secondary survey to inform us on general park improvements. The following pages below are examples from our Research and Concept slide deck.
View more site visit images (Click to reveal more)
💡 Step 2 | Concept
Our app concept was to offer a platform where users can propose their suggestions on how to improve Toronto parks or support others' suggestions similar to in a forum. As a result, users can engage with city planning comfortably as they can make suggestions based on their location and view suggestions that matter to them.
This app is designed to increase participation from the target audience through crowdsourcing to validate a suggestion or idea. The current process was described as too traditional and lackluster by the client and the app uses creative imagery by users as a solution to this problem. Also, the presence of an easily accessible platform to propose suggestions or view other individuals’ suggestions eliminated the need for relying on a set time or date to discuss city planning ideas with the community.
Main Features of ParksTO
Interactive Posting System • AR — Users can place 3D Objects • Draw — Users can draw suggestions • Explore — Users can see existing suggestions in the area
Forum System • Users can check the status and progress of the user’s suggestion • Users can check the details and progress of suggestions made by others • Users can upvote other suggestions
Below are some of the concept sketches that my partner drew after combining our preliminary sketches and ideas together. The sketches depict two main systems and the most essential pages that will act as the initial infrastructure of the app.
View more sketches (Click to reveal more)
🎨 Step 3 | Design
For our wireframes, we created two in black and white to translate our sketches digitally in Adobe XD. Between each wireframe, we conducted design reviews to gain feedback about our app concept and initial layouts. The difference between our 1st and 2nd wireframe is the addition of more pages to flesh out the options for the Interactive Posting System and layout changes for some of the pages.
View 1st Wireframe (Click to reveal more)
View 2nd Wireframe, Major Changes from the 1st One (Click to reveal more)
The largest layout changes occurred for our Feed and Notification page as feedback about our 1st wireframe showed that there was redundancy on the Feed page and a confusing layout of the Notification page. Our Home, Onboarding, and the AR Drop pages changed minimally between the 2 wireframes.
Division of Roles
For the mock-up version, my partner and I divided our roles to ensure that all required tasks were completed. My partner concentrated on creating the main icons and UI elements for our pages while I focused my efforts on creating all the copy (written components) for the app and the illustrative elements.
I created 2 lists on Notion to also keep me accountable for all the tasks I was responsible for. Notion was easy to use to ask my partner for consistent feedback of the copy between revisions.
Notion Checklist for all the copy that had to be created & written
View more examples of how the copy I wrote was translated to the final UI (Click to reveal more)
Notion Checklist of all the Illustrations I had to create
For our 1st mock-up, my partner and I spent this time working collaboratively to combine our assets. I spent most of this time inputting the appropriate text and imagery into the placeholders set up by my partner and my partner focused on finalizing the app UI. Thus, our 1 mock-up contains signs of our work merging. Our 2nd mock-up was our final one where all the visuals were refined and completed.
View 1st Mock-up (Click to reveal more)
View 2nd Mock-up (Click to reveal more)
📱 Step 4 | XD Prototype & AR Videos
Division of Roles
We created a working prototype from our 2nd mock-up and divided our roles again. My partner focused on creating the AR experiences of our app while I prepared and conducted most of the usability tests.
Take a look to browse through the mobile prototype.
AR Concept Videos
While I completed the Usability Tests, my partner created 2 concept videos to demonstrate some of the AR experiences for our Interactive Posting System within ParksTO. My contribution for these videos was giving feedback and writing the concept video description.
The video showcases how a user can creatively suggest by dropping a 3D object into the park environment. After they are satisfied with the size and where it is positioned, they can then post the suggestion with details. For our concept video, the 3D object was a bench that was resized and placed accordingly to how the user would like it to be within the park before creating a post.
This video showcases how a user can explore existing posts within the park environment. Existing posts will look like post-its in the area where the user can click on them to learn more about that specific suggestion. In the concept video, it shows multiple existing suggestions in that area and the user selects “Add a picnic bench” to find out more details.
👥 Step 5 | Usability Tests
We conducted usability tests to discover which parts of the app required clarification, where improvements to the UI design were needed and to evaluate the effectiveness of the 2 systems (Interactive Posting and Forum). Without the usability test, it would be difficult to determine how to simplify or clarify the design for the enjoyment of our users. Another risk of not completing the usability test was missing the opportunity to determine whether our app, ParksTO, could effectively draw the target audience in to participate in the process of city planning for parks.
Therefore, our main goals or questions we wanted the usability test to reach or answer were:
Can the target audience understand how the 2 systems (Interactive Posting & Forum) operate?
Is the onboarding experience (before creating an account & for the prompts on the Interactive Posting system) effective?
Is ParksTO a valid solution (does it target the pain points of the target audience)?
Methodology of the Usability Test
For the Usability tests, I focused on testing 3 usability metrics: effectiveness, efficiency, and satisfaction. As a result, I had to prepare SEQ (Single Ease Question) and SUS (System Usability Scale) tests that could be completed by the participant. Out of the 4 participants we had, I conducted 3 usability tests and we recorded the results via Notion to easily keep track of and update data.
The Usability test was organized into 6 main stages as shown below:
Welcome, Instructions & Consent Explained about ParksTO, shared instructions for the usability test and received consent to record sessions.
Screening Questionnaire 5 Questions we asked to ensure participants were part of the target audience of young adults.
Test Tasks & Evaluation of Tasks We got participants to complete 8 tasks that accurately reflected ParksTO’s features and participants had to fill out a Google Form (SEQ format) after each task.
App Evaluation Questionnaire After all tasks were completed, we got participants to fill a follow up GoogleForm (SUS Format) to evaluate overall usability of ParksTO.
Follow Up Interview 6 detailed questions were asked in order to gain more detailed feedback of the participants’ experience when interacting with ParksTO.
Debrief & Thanks We had our closing remarks and thanked participants for their time.
Stage 3 | Test Tasks and Evaluation of Tasks
After each task was completed in Phase 3, we administered a SEQ (Single Ease Question) Google form, which measured the user’s difficulty or ease of a specific task with reason. We decided to use a Google form rather than asking this question to ensure a written record. On this scale, 1 depicted the task as very difficult while 7 represented that the task was very easy to complete.
Stage 4 & 5 | App Evaluation Questionnaire & Follow Up Interview
After the testing of all tasks, we gave each participant 10 questions based on the SUS (System Usability Scale) format to answer through Google forms. In Phase 5, we conducted a follow-up interview to receive more detailed feedback.
Follow Up Interview Format
Before we end this session, I want to ask you some questions about your experience with "ParksTO".
- How easy or difficult was it to navigate through "ParksTO"?
- What are your thoughts on the design and layout?
- Which parts of the app did you like the most? Why?
- Which parts of the app did you like the least? Why? (If you didn't dislike anything, what was difficult about the app?)
- What is one thing you are most excited with "ParksTO"? Why?
- What did you think of the onboarding and on-page instructions?
Summary of the Usability Test Report
Overall, the results of the usability test session proved that ParksTO ranked high in terms of task effectiveness, task efficiency, and user satisfaction between 4 participants. Based on these high ratings, participants overall perceived features of ParksTO as easy and friendly to use. Participant observations by moderators and responses from participants show a pattern of satisfaction, excitement, and interest in the app’s features. This helps to validate that ParksTO is a great potential solution for the City of Toronto’s goal to engage with the target audience of young adults.
Highlighted quotes from participant's feedback to the question, "What is one thing you are most excited with ParksTO?"
"The app's ability for people to collaborate by using the upvote to help support people's ideas. It allows people to speak their voice and actualize their ideas." - Participant #1
"By creating this app, it encourages the citizens to give their input and makes them feel like part of the community. It's a great platform for reporting deficiencies or making things better in a specific area." - Participant #2
"I think it will be really appealing to youth and encourage them to speak out. Being able to interact with other users in the app is also good." - Participant #3
"I can see where this app can encourage a healthy community discussion regarding upgrades that affect the whole community and allow streamlining of important projects that should be highlighted." - Participant #4
Below are some summary charts from the Usability Test Report I created that validates the results:
- How to effectively collaborate and divide responsibilities to achieved goals for each stage (I utilized my strong skills in user experience while my partner demonstrated her expertise in UI-related work)
- Step 1 and Step 2 of the design process was labour intensive but played an instrumental role to validate concept and design choices for both users and stakeholders
- First time creating isometric illustrations and improved skills to create engaging copy (all written content of the app)
🛠️ Improvements to be made
- Adding more clarity of icons within the Interactive Posting System (by adding prompts to them) to prompt an easier navigation and onboarding experience
- Rethink the placement of the Settings icon so this page can be found more easily
- Not everyone was familiar with the term "AR" so adding clarity to the meaning for the general public would be ideal
Other Case Studies
A redesign of the Ellucian Go mobile app to better suit the needs of Humber College students.
A responsive website design for the non-profit organization Harsukh.