play at parks

Overview of the project

Summary

Looking to find specific amenities at your local park? This is the app for you!
Play at parks helps users to find public parks with specific and accurate information. Users can set search options when they find parks, and they can see what they want to visit with the possibilities. In addition, there is specific information about each park, including accessibilities, facilities, and activities. For example, when a user searches for a park, they will check that the park has four restrooms, three tennis courts, a playground, a short paved biking trail, and a soccer field. Moreover, they can use maps to get to the public parks.

Role and Responsibilities

Research: Competitive analysis, User Survey, Empathy map, etc.
Information architecture
Wireframe
Usability test

Duration

4 weeks

Problem

A client wants to develop an app for finding public parks with specific information. In addition, the client would like to have an app that helps users provide detailed park information such as facilities or playgrounds.

Audience

Anyone who visits public parks regularly in the USA.
I targeted the audience by using "How Might We" methods.

Solution: Play at park app helps users can..

Find public parks with diverse search options.
Have accurate and specific park information.
Use a map to get a direction to parks.

User pain points from the survey

60% of participants who are using public parks do not have any apps for “searching parks.”
70% of participants need park information when they exercise, such as biking or hiking.
It is also essential to have information for the playgrounds and the facilities for sports games (20%)

2) Empahty map

This persona's pains are that she doesn't like to have inaccurate information about parks, and she doesn't want to use an app with a complicated layout and design because it is hard to use. Instead, Susan wants to have accurate park information by searching with specific search options. Moreover, she wants to see photos and reviews from other people to see public parks before she visits.

image, Empathy map for the product, play at parks

1-3. Personas

The result of the survey showed that users have diverse needs and goals, which can be synthesized into four user types.

image, one of the personas for play at parks

1-4. User Journey Map

Based on the persona, I developed this user journey map to understand users' flow to achieve a goal in a specific scenario.

image, user journey map for play at parks

2. Information Architecture

2-1. Storyboard

This persona wants to find a good place where has playgrounds for his daughter. After he uses and finds parks near his house, he will choose one of the recommendations from the app. He would get a direction from the app and arrive at the park. If he is satisfied with the park, he is writing a review about his experience at the park.

image, User story for the product, play at parks

2-2. User Flows

Once a user opens the app, he would need to allow his location. After that, he would log in or skip the allowance and login page. He can search for playgrounds and compare the parks he searched. He can choose one of the recommendations and get a direction to the park. He can go to the park, and after arriving, he ends the service. Moreover, he can use search history options, favorite menus, and recommended parks.

image, User flow for the product, play at parks

3. Wireframe

3-1. Wireframe sketches

I drew these sketches for landing pages, a search page, a favorite menu page, map pages, and a page for using a search filter. For the landing pages, users would need to log in, sign up or skip. After searching for parks, they would see the results for parks with photos. Users also can see maps to see where the parks are after they search for parks. When they search for parks, they also can use filter menus to find more exact parks.

image, wireframe sketch for the product, play at parks

3-2. Digital Wireframes.

Check this wireframe →

3-3. Key wireframe images are below

4. Usability Test

4-1. Purpose of the usability test

To have valuable insights and ideas from the users on how they think and how they use the park app
To evaluate the product with potential users
To find unexpected problems that users might encounter when they use the park app

4-2. What I changed after the usability test.

1. Made the “go back” button.
>> Even though users might go back by "swiping a page" when they want to see the previous page, I believe it would be better to have the button to give more convenient options for users.

2. Fixed the titles of each card when users scroll the card horizontally.
>> The titles were moving when users scrolled cards horizontally. It was too busy because everything is moving when scrolling cards.

3. I changed the size of each card.

4. Made an “X” button to close cards.
>>Four participants said it was inconvenient because there was no button to close the filter overlay. I also agree with their inconvenience, so I made the button to close the overlay.

image, what I changed for high fidelity mockups for play at park

5. Branding

5-1. Brand characteristics

Use nature-friendly colors such as green from trees, orange from the sun.
Since the app provides information about playgrounds and family-friendly parks, it would be good to have photos or pictures of kids or family-friendly ones.

5-2. Mood board

I made two mood boards with photos of trees in parks, nature, gardens, people in parks, and playgrounds. I wanted to use greenish, light blue, and orange colors for the app.

image, a moodboard for play at parks app

5-3. Typography

Open Sans and Abril Fat Face
‍
I chose these two fonts because I believe both fonts look clean and straightforward to provide information about parks.

5-4. Colors

I decided to use the colors below. I chose light-green, yellow-green, dark-green, very dark-green, and this yellow color. I wanted to express trees with green hues and sunlight with yellow color.

COLOR PALETTE: e7f0b6, b1d132, 355111, 09230a, e8a716

image, color palette for play at parks app

5-5. A/B TEST: Two types of design

I made two types of landing pages. I used a photo of a kid playing on a swing in a playground for the first one. I chose the picture because it looks peaceful but attractive to people who want to find parks for their kids or themselves. And overall, the color of the photo is greenish so that people can think of trees or parks when they see the picture. For the second one, I drew an illustration of a playground. Again, I used dark and light green colors for the illustration because I wanted to express parks in nature for the app.

DESIGN A

image, A/B test for the first page of play at parks app

DESIGN B

I conducted this A/B test with 10 participants, and 8 of them answered the Design A was better than Design B, so I decided to choose the first design.

Final Thoughts

It is vital to have essential buttons when users use an app, even though the simplicity of design is also crucial.
We need to fix the title of each card to provide information to users.
It was great to meet potential users and created proto-personas based on the research.
I learned how to respect people's feedback when I met participants for the user testing.
I learned that, sometimes, I need to take a break to keep my fresh eye. I worked when I was tired, and I could see several problems I did not notice when I worked.