Discover Parks
Mobile App UX and UI Design
Company Mission
At Discover Parks, our goal is for users to utilize our service to locate nearby parks and trails tailored to their preferences effortlessly.
Filter options will be available to help users discover outdoor spots that suit their specific interests, such as parks, natural trails, tracks, boardwalks and everything in between.
My Roles & Responsibilities
User research: surveyed and screened for interview participants, conducted interviews, synthesized research using affinity maps, empathy maps, and personas
Ideation: brainstormed ideas and solutions to the problem
UX/UI design: sketched screens, developed wireframes, created high-fidelity mockups, built a prototype
User flows: created user flows for the most critical user actions
Usability testing: conducted multiple rounds of usability testing for the prototype
PROTOTYPE
PROBLEM STATEMENTS
How might we help people who exercise discover parks?
How might we help runners find parks to train in?
How might we help people discover parks based on how they use them?
The Process
User Research
My process began by creating screener surveys to send out to potential interview participants. The selected participants were then interviewed by me. I synthesized these interviews using affinity mapping, empathy mapping and user personas.
AFFINITY MAPPING
Synthesizing my research
I began synthesizing my research by using affinity mapping. First, I used sticky notes to jot down each interviewees' answers.
Grouping my data
I then grouped the sticky notes into similar categories as follows: Frequency, Discovery, Last Visit, Why Parks Over Gyms, Dislikes and Amenities/Desires.
Insights and trends
I grouped the sticky notes by insights gained and trends observed into my final affinity map. It was a ton of data, but the information learned was extremely valuable to me.
EMPATHY MAPPING
Empathizing with users
An empathy map provided valuable insights into users' perspectives by detailing their statements, thoughts, actions and emotions. It effectively highlighted their challenges, needs and desired outcomes related to the product.
PERSONA
Identifying user traits
Based on the observations made during interviews, the persona for the product was crafted by combining various traits and characteristics identified in the target user.
Ideation
Ideation was focused on brainstorming and generating solutions for the problem at hand. User flows were created to outline the key routes users needed to navigate within the app. These user flows defined the minimum viable product. Additionally, sketches were developed to visually represent the concepts mapped out in the user flows. These rough ideas aimed to breathe life into the outlined user journeys.
USER FLOWS
Understanding the user journey
A user flow is the journey a user takes from start to finish to accomplish a certain task. Creating a user flow helped me keep the user at the forefront of all design decisions during product development.
SKETCHES
It all begins on paper
As the rough part of the process began, ways to visualize the user flow were quickly jotted down, always with the user experience in mind.
WIREFRAMING
Bringing my sketches to life
Wireframing was the next step in the process. Wireframes are quick, low-fidelity mockups of sketches, created digitally. The wireframes were created with wireframing UI kits in Figma for quick and fast iteration.
My opinion: Wireframing was not needed. With how advanced Figma and other design software is, it is easier to create high fidelity mockups than to bother with UI kits and low fidelity gray box mockups.
Testing
Usability Testing Observations
Users wanted to be able to tap multiple selections, not just the ones asked of them.
Users had issues with finding “show suggestions button”
Some of the icons were not clearly labeled, causing confusion. “Is that a calendar button?”
The difficulty indicator, which was static and not interactive, was tapped on by many users.
Users also tried clicking on tags, but this was not a recurring issue.
Usability Testing Solutions
Added the option to selection multiple exercise types, and added an overlay to better show the “pressed” state.
Made the suggestions button fixed at the bottom of the screen, just above the bottom navigation bar.
Re-organized the icons, making them clearer, putting them in a circle button and adding a label under each of them.
Created a modal that showed the different difficulty levels when the current difficult level is tapped.
Since this only happened to one user, The tags were not changed. During the second round of testing, no user tried to tap on the tags.
IN CLOSING
About the design
The app design was inspired by fresh, clean and simple aesthetics. There are no gimmicks or bloat, just simply an app designed for park discovery. Our users want to be able to use the app quickly and sparingly. If they find a park or trail they like, they can save it and view it later or save a list of trails they enjoy–or trails they do not enjoy.
The color palette was pulled from nature–green. Simple green with accents of black and white create a cohesive design, where the color green indicates interactivity and helps lead the user’s eye throughout the app, guiding their experience.
The components consist of pill shaped buttons, material inspired text inputs and it makes use of EVA icons. The images are meant to compliment the components and are beautifully composed and work well within the brand style guide. The logotype was create by me. It is based on the Objectivity typeface, and customized for the product. It is inspired by athletic brands and fast-paced movement.