Three smartphones display the NatureNavi app with a map of Toronto highlighting various parks and locations, including High Park with details about its amenities and natural features.

Nature Navi

Designing a one-stop Toronto park-finding mobile app allowing users to effortlessly locate local parks

The Project at a Glance

  • Target with a dart hitting the bullseye

    Objective

    Discovering ways to improve the parks and greenspace finding experience for Toronto residents 

  • Laptop displaying a bar chart and a pie chart on the screen

    Research Methods

    Secondary research and user study with one-on-one interviews and surveys to uncover user pain points

  • Light bulb with a brain inside, symbolizing an idea or innovation

    Design Process

    Design ideation, wireframing, creating user flows, and conducting guerilla style usability testing

  • A computer monitor displaying an upward trending line graph with an arrow pointing up.

    Outcome

    User feedback showed NatureNavi significantly improved and eased user parkfinding experiences

Exploratory Research

To understand the market space that we were designing for, my team of UX Designers conducted exploratory research to better understand user needs and opportunities for design solutions within the parks navigation problem-space.

1 | Secondary Research

Publicly available municipal government reports, blog posts, and news articles revealed that Toronto residents struggle with easily finding parks that are accessible via transit, are adequately maintained, and have their desired park amenities.

2 | User Studies

My team conducted an online survey with 42 respondents and held semi-structured one-on-one interviews with 10 representative users in order to better understand the key factors and pain points in their parkfinding experiences. After visualizing the user data in an affinity diagram, we synthesized the following primary considerations for Toronto parkgoers:

A detailed infographic with color-coded sticky notes discussing various concerns and preferences for park planning, including categories such as driving and parking, greenery, food and dining, walking proximity, seating, group activities, pathways, washrooms, off-leash dog areas, recreation facilities, distance trips, app usage, and feedback. Each category contains notes with specific suggestions or issues, with some notes highlighted in different colors.
  • A colorful illustration of a map with a red location pin on it.

    Proximity to Home

    36 survey respondents and 10 interviewees stated that proximity to home was a key factor in their park selection process

  • A digitally illustrated green pine tree and a brown park bench against a black background.

    Knowledge of Amenities

    More than half of the participants responded that knowledge of amenity availability was essential, with desire to know about washrooms and seating areas

  • Green speech bubble with thumbs-up icon next to red speech bubble with thumbs-down icon.

    Access to Reviews

    Survey takers revealed that they valued park reviews from others, with word-of-mouth and online reviews noted as two primary methods

Design Ideation

To understand the market space that we were designing for, my team of UX Designers conducted exploratory research to understand user needs and opportunities for design solutions. After creating affinity diagrams and empathy maps to analyze our research findings, we developed a user persona, envisioned the user journey, and ideated on ways to improve the situation.

1 | User Persona: Paul Parkson

In order to bring the research findings to life, our team developed our user persona, Paul Parkson. Paul is a Toronto-residing graduate student interested in exploring new parks in the city. His primary obstacles include limited amenity information availability, finding outdated information, and needing to rely on word-of-mouth reviews.

Profile of Paul Parkson, a 23-year-old graduate student at the University of Toronto, living in downtown Toronto. He enjoys exploring parks, going for walks with his dog Biscuit, and prefers to use public transit. The profile includes his goals to discover new parks and escape urban life, his needs for accessible parks with amenities, and the obstacles like outdated park information and difficulty planning spontaneous meetups.

2 | As-Is Scenario

After creating the user persona, my team created an As-Is Scenario to depict the key moments that were causing issues in Paul's parkfinding journey. Linking user issues discovered in the research stages to distinct and specific moments in the parkfinding experience allowed for my team to understand Paul's primary needs in this domain.

A detailed planning chart with three main columns labeled 'Planning,' 'Deciding,' and 'Visiting,' and rows of aspects: 'Doing,' 'Thinking,' and 'Feelings.' It contains color-coded sticky notes with tasks, questions, and observations related to park visits, including social media reviews, directions, park facilities, and emotions surrounding park experiences.

After unveiling Paul's primary needs, my team began to ideate on solutions that could solve the problems, mapping them onto a prioritization grid with the axes of impact and feasibility. This allowed us to see which solutions would be low-effort to implement, while additionally having high impact on solving user issues.

3  |  Prioritization Grid of Design Solutions

A grid featuring various tools and features for park management, divided into sections titled 'Big Bets,' 'Home Runs,' and 'Quick Wins.' It includes sketches of maps, maps, checklists, and icons representing different park and community features.

4 | Ideal Situation Visualization

Using the most impactful and feasible design ideas, my team then laid out the ideal scenario for Paul in his parkfinding journey, demonstrating specific instances where our chosen design solutions would significantly improve his situation.

A chart with green header and columns labeled Planning, Deciding, and Visiting, with rows for Doing, Thinking, and Feelings. Contains post-it notes in various colors detailing steps, aspects, and emotional responses related to visiting parks.

Low Fidelity Designs

Flowchart of a mobile app interface design, illustrating onboarding, search, filter, interest, review, and event screens, with annotations and user interactions.

To start bringing our design solutions to life, our team created a low-fidelity storyboard consisting of the four primary flows in which our solutions would occur: the onboarding flow, the filtered search flow, the events flow, and the reviews flow.

Within each flow, our team identified key elements that users would need to interact with within each screen in order to accomplish their primary goal, as can be observed in the reviews flow shown below.

Diagram displaying review process flow on a mobile app, including screens for park info, leaving a review, review submission, and review display, with numbered descriptions of features and actions.

Design Refinement

Following the creation of the low-fidelity storyboard, we conducted 3 sessions of guerrilla usability testing in order to refine our designs. By having representative users try out the features, we uncovered three key findings that allowed us to improve the app design in our mid-fi prototype.

Users expressed that that they were sometimes confused with the labeling conventions that we had used. An example of this can be seen in the onboarding task where there was an option for users to “skip” signing in when accessing the app without an account. Due to this feedback, we changed this label to “Enter as a Guest.”

Clarify language used for labels

Comparison of two mobile app login screens, one handwritten style and one digital style, with options to log in, sign up, or enter as a guest.

A second place where this problem was noticed was in the tab bar. Originally, our third tab was labelled “My Parks,” meant to include parks that the user had saved. However in testing, participants questioned whether a user’s saved events would be located there as well, which made us realize that we needed to expand the label to “Favourites” in order to better encompass the range of content that could be stored under this section.

Side-by-side comparison of two smartphone screens featuring park location mapping apps. The left screen displays a simple hand-drawn map with three parks labeled 'Park A,' 'Park B,' and 'Park C,' with a navigation bar at the bottom showing options for explore, events, my parks, and profile. The right screen displays a detailed digital map with three parks marked with location pins, labeled 'Park Name A,' 'Park Name B,' and 'Park Name C,' with a navigation bar at the bottom showing options for explore, events, favorites, and profile.

Enhance visibility of key features

The second issue expressed by users was having issues with locating feature buttons, leading to them clicking on the wrong components while completing tasks. When users were asked to complete a filtered search, often would click on the search bar rather than the filter icon. In order to resolve this issue, we created a more distinct filter button to draw user attention to the app features.

Comparison of two mobile app interfaces for parks. The left screen shows a sketch with three parks marked as black dots labeled Park A, Park B, and Park C, with a menu icon at the top right corner. The right screen displays a detailed map view with markers for Park Name A, Park Name B, and a location in Crescent Town, with a settings icon at the top right corner.

The final feedback point that our team received was in regard to the text-image ratio on listings pages. This can be observed with the music events listings screens on the right. The low fidelity screens initially had a text-based events listing system. However, due to user feedback, we chose to add images to the events listings, in order to provide parkgoers with a clearer idea of what sort of events would be happening.

Improve the image-to-text ratio

Comparison of two smartphone screens displaying a parks and events app. The left screen is a hand-drawn sketch showing a list of park events with details for three events, and the bottom navigation bar with icons for explore, events, my parks, and profile. The right screen is a digital version with a clean, styled interface showing a list of five events sorted by distance, with icons for date, time, and location, and a bottom navigation bar with icons for explore, events, favorites, and profile.

Final High Fidelity Prototype

Following the end of the project, I designed a high-fidelity clickable prototype of NatureNavi based on the feedback from my team's low-fidelity and medium-fidelity designs, shown in the video on the right.

Addressing key user pain points of amenity/feature searching, easy-to-find park reviews, and event displays, NatureNavi provides users with the freedom to explore Toronto parks and greenspaces in the ways that matter most.