top of page
pgcounty_edited.jpg

Prince George’s County Parks & Rec Department App Design

Project Overview

My Role
UX Designer
  • Conducted background/ competitor research, and user interviews to understand pain points.

  • Created Persona, User Journeys Map, and Product Structure to streamline ideas.

  • Created wireframes and prototypes to convey ideas ensuring design principles, and practice changes.

  • Conducted user testing to validate designs.

Facilitator
  • Facilitated the sprint meetings.

  • Gathered and prioritized client requirements.

  • Led ideation workshop.

  • Led the design team & research team to plan, track, and execute requirements.

Tools we used

Miro, Figma

Timeline

August 2021 - Dec 2021

Problem Statement

Prince George's Country, Department of Parks and Recreation has been implementing its Senior ID Access Card program for quite a while. The program was meant to help seniors stay engaged in the community. The ID cards are used for seniors to access various facilities in recreation centers and register for classes. However, many of the county’s seniors were not registered for the program. Also, current cardholders did not use the benefits regularly.

 

The Department of Parks and Recreation needed assistance in developing an understanding of why this happens and how they might be able to increase the engagement.

Outcome

The team was able to find out reasons for low engagement through user research and proposed a brand new app design idea to better server the target users.

Who is the client
Their services

The Maryland-National Capital Park and Planning Commission (M-NCPPC) is a bi-county agency serving Prince George's and Montgomery counties in Maryland with parks, recreation, and planning. 

The Department provides quality recreation programs, facilities, and services for residents and visitors. They also operate and maintain more than 27,000 acres of parkland throughout the county, including land developed to provide parks, picnic areas, athletic fields, historic sites, community centers, and recreation facilities. 

Their amenities & programs
  • Art and nature programs

  • Fitness and sports programs

  • Live performances

  • More than 90 miles of hiker/biker/equestrian trails

  • Outdoor festivals

  • Self-improvement classes

  • Summer camps

  • Teen and senior activities

  • Trips

Design Process

Frame 321.png

Discover & Define the Problem

The team interviewed several current cardholders and asked them about their experience with the current program. Each interview took around 1 hour. The team then utilized the affinity diagram method to sort and organize feedback. The identity model, the Relationship model, and a User Journey Map were then used to capture further detailed insights. 

Affinity Diagram
Affinity diagram image
Identity model
Relationship Model
Relationship model image
User Journey Map
User journey map image
Key findings

From the Identity model:

  • Users attached great importance to their social experience while paying extra attention to the safety issue regarding the Covid. 

  • The flexibity of course and intime notification on changes are appreciated.

From the Relationship model:

  • Close friends and club friends most strongly influence users' initial interest and continued engagement.

  • The assistance of staff and instructors influences the user experience and will ultimately affect users' willingness to engage.

  • The help and discussion with families (children) and coworkers can sometimes improve their user experience.

From the User journey map:

  • Simplify log-in/registration process.

  • Provide enough instruction on how to navigate the current system.

  • Ensure the efficiency of event/facility searching.

  • Provide in-time notification on event changes.

Design the product

The team decided to combine the current physical card with a mobile app in order l to provide users with an efficient and intuitive way to explore and track activities. The team first used a user flow map to map out a TO-BE version of the user journey and how they should interact with the product. Then, the team consolidated the flow into a product structure diagram to set clear goals for later design.

User flow
Design System Reference.png
Product structure
content.png
Wireframe

Based on the research result collected previously, the team created wireframes on some key pages. For this project, our goal is to purpose a very high-level design idea for our client, so we didn't focus on very detailed flows on each page.

Group 345.png
Prototype

After having wireframes to help us set the direction of the design, we then prototyped this app out using Figma.

Onboarding

  • Allow users to log in with their physical card

  • Provide previews for available activities

  • Enable a smooth and easy log-in process with intuitive language choices

Main page

  • Allow users to see the latest news/notification/announcement

  • Enable users to search efficiently

  • Calendar on the main page to help users track their activities easily

Facility & Activity page

  • Efficient filter system to allow users to have an intuitive searching experience

  • Save function allows users to bookmark activities they are interested

  • Tags to label clearly the category/requirement/restriction of each activity

Circle page & tag and share flow

  • Allow users to create a network within the app.

  • Use the network to encourage the participation in different events

  • Activities attended can be tagged in the photo.

  • Allow users to share a post or an individual course with their friends

mock_pg_content.png
mock_pg_social.png
mock_pg_content_label.png
mock_pg_content_share.png
mock_pg_content_share2.png

Account page

  • Option to replace physical cards with digital cards

  • Rewards system to encourage app usage

  • Sectioned toolbox to create clear information hierarchy

mock_pg_profile.png

Getting feedback

After we built up the prototypes, we send them to our client for review.  Here are some feedback we received from our client:

  • They really liked the lightweight design

  • They liked the filter/search system

  • Some colors may be too light we might consider accessibility issues

  • Considering the population within Prince George County and the current number of members they have, they wondered if there is any necessity of having a community feature built within the app. 

  • Would like to see the concept design of the event sign-up page

Reflection

In this project, we utilized the design thinking process, conducted in-depth user interviews, consolidated user feedback, and transformed those data into design ideas. During these processes, we were grateful to have plenty of chances to practice and polish our skills in research planning, testing conduction, data consolidation, and design. At the same time, we also got ourselves fluent in Figma. 

Besides what we achieved, we also learned something that we need to pay attention to in our future work :

  • Sample size

    • The sample size we had for this project is very small. Plus, the 4 interviewees that we were able to talk to are all current card holders, so there might be some implicit biases.  In order to create a more efficient design, it's better to talk to different user groups and collect different insights.

  • Scenario

    • When doing design, besides thinking of user feedback, we also need to consider scenarios. For example, how many users do they have, how frequently do they use the product, etc.

  • Design testing

    • Due to the time limitation of this project,  even though we discussed with our client about the design and received a lot of feedback from them, the prototypes were not being tested by end-users. In order to create a product to serve a better user experience, it's essential to conduct user testing after prototypes are completed.

bottom of page