ParksTO app

Parks TO app

image

Project Brief

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.

Duration

November - December 2020

Tools

Adobe Illustrator, Adobe XD, Notion and Zoom

Roles

Mobile App Design, Research to Conception, UX Writer, Visual Design, User Testing

Client Objectives

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 2

💡

Concept Break-down, Inspiration, Sketches

📝 Step 1 | Research

Stakeholder Interviews

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

Journey Maps

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.

As-Is Journey Map for College Student, Fernanda
As-Is Journey Map for College Student, Fernanda
To-Be Journey Map for College Student, Fernanda
To-Be Journey Map for College Student, Fernanda

View more Journey Maps for other user personas, High School Student and Young Professional (Click to reveal more)
As-Is Journey Map for High School Student, Oscar
As-Is Journey Map for High School Student, Oscar
To-Be Journey Map for High School Student, Oscar
To-Be Journey Map for High School Student, Oscar
As-Is Journey Map for Young Professional, Oscar
As-Is Journey Map for Young Professional, Oscar
To-Be Journey Map for Young Professional, Oscar
To-Be Journey Map for Young Professional, Oscar

💡

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.

User Surveys

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.

Google Form Survey Excepts
Google Form Survey Excepts

City Planning Section

Part of the survey results from the City Planning section
Part of the survey results from the 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
    • Transit
    • Housing
    • Community Safety
    • Employment
    • Arts & Culture

📌 Takeaways

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

Part of the survey results from the Forum/Discussion Based Apps Section
Part of the survey results from the 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

📌 Takeaways

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.

Site Visits

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.

Sample of Tom Riley Park site images
Sample of Tom Riley Park site images

View more site visit images (Click to reveal more)
Sample of Centennial Park Site images
Sample of Centennial Park Site images

Sample of Eringate Park site images
Sample of Eringate Park site images

Sample of Elmbrook Park site images
Sample of Elmbrook Park site images

💡 Step 2 | Concept

Break-down

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

Sketches

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.

Concept Sketch for the Interactive Posting System
Concept Sketch for the Interactive Posting System

View more sketches (Click to reveal more)
Concept Sketch for the Profile and Search function
Concept Sketch for the Profile and Search function
Concept Sketch for the Specific Post and Home
Concept Sketch for the Specific Post and Home
Concept Sketch for Posts
Concept Sketch for Posts

🎨 Step 3 | Design

Wireframes

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

image
image
image

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.

Task Checklists

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

Main Copy

name of app suggestions
instruction blurbs
categories for AR drop
Posting for interactive

Feed Content

Popular (3)
Recent (3)
For You (3)

Profile Content

profile info
badges info

Extra

blurb for settings
Example notifications
Stages info
Detailed post

Feed

change to personalized

Progress Bar copy translated to the final UI
Progress Bar copy translated to the final UI

View more examples of how the copy I wrote was translated to the final UI (Click to reveal more)
Achievement badges copy translated to the final UI
Achievement badges copy translated to the final UI

Feed content copy translated to the final UI
Feed content copy translated to the final UI

Part of the Onboarding and Categories copy translated to the final UI
Part of the Onboarding and Categories copy translated to the final UI

Notion Checklist of all the Illustrations I had to create

Objects

bench
bike rack
garden
merry go round
garbage and recycling
workout equipment
fitness equipment
public art
shade buildingings
picnic bench

Drawings

dog off leash
community garden?
add more seating
public art
add more seating areas
circle fence
circle bench

Category Icons I created in Adobe Illustrator for
Category Icons I created in Adobe Illustrator for AR Object Drop page

Isometric Park Objects I created in Adobe Illustrator for all the users' posts
Isometric Park Objects I created in Adobe Illustrator for all the users' posts

Mock-ups

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)
image
image
image
image
image
image
View 2nd Mock-up (Click to reveal more)
image
image
image
image
image
image
image
image
image
image
image
image

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

Prototype

image
image

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.

AR Drop

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.

Explore

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:

icon

Welcome, Instructions & Consent Explained about ParksTO, shared instructions for the usability test and received consent to record sessions.

icon

Screening Questionnaire 5 Questions we asked to ensure participants were part of the target audience of young adults.

icon

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.

Notion record & notes for Test Tasks (Stage 3)
Notion record & notes for Test Tasks (Stage 3)
icon

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.

Notion record of the Evaluation Questionnaire of Tasks (Stage 3) from Google Forms
Notion record of the Evaluation Questionnaire of Tasks (Stage 3) from Google Forms
icon

Follow Up Interview 6 detailed questions were asked in order to gain more detailed feedback of the participants’ experience when interacting with ParksTO.

Notion notes for the Follow Up Interview (Stage 5)
Notion notes for the Follow Up Interview (Stage 5)
icon

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.

Test tasks the users had to complete and the Task Evaluation Google form  they had to fill out
Test tasks the users had to complete and the Task Evaluation Google form they had to fill out

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.

A screenshot that shows how the Evaluation Questionnaire was designed for the user to fill out after completing all tasks
A screenshot that shows how the Evaluation Questionnaire was designed for the user to fill out after completing all tasks

Follow Up Interview Format

Before we end this session, I want to ask you some questions about your experience with "ParksTO".

  1. How easy or difficult was it to navigate through "ParksTO"?
  2. What are your thoughts on the design and layout?
  3. Which parts of the app did you like the most? Why?
  4. Which parts of the app did you like the least? Why? (If you didn't dislike anything, what was difficult about the app?)
  5. What is one thing you are most excited with "ParksTO"? Why?
  6. 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:

Summary charts for the following: Tasks Success Rate, Task Time Completion, Task Evaluation (SEQ) and App Usability (SUS)
Summary charts for the following: Tasks Success Rate, Task Time Completion, Task Evaluation (SEQ) and App Usability (SUS)

Conclusions

⭐ Learnings

  • 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

image

A redesign of the Ellucian Go mobile app to better suit the needs of Humber College students.

image

A responsive website design for the non-profit organization Harsukh.

Caroline Lee © 2021 — Created with Notion and powered by Super