UX/UI Design • Product Design
ParkPal: Chicago
Chicago's parks provide endless opportunities for recreation, enrichment, and entertainment. We created a centralized hub for people to explore enticing park experiences and never miss an exciting opportunity.
Project: Product/Mobile app design
Timeline: 10 weeks
Team: Ishan Dutta, Andrew Marutano, Thailer McLeod
My Role: UX Research, UI Design, Brand Lead
Problem
One of Chicago's defining characteristics is its many public parks and outdoor spaces. However, there is no convenient source of information about the parks - including the amenities they provide, activities they offer, and events they host.
As a result, residents and visitors could miss out on interesting opportunities happening in their neighborhood or around the city.
We set out to design a mobile application that transforms how people discover, explore, and engage with the city's remarkable park system.
Solution
My team validated our use case via academic research and competitive analysis, uncovered user needs and traits through interviews and surveys, and validated our designs through multiple rounds of usability evaluation.
We produced a high-fidelity interactive prototype, along with a presentation and report detailing our process.
Introducing ParkPal: Chicago
My responsibilities & tools
Interviews
Surveys
Wireframes
Prototyping
Design system
User testing
Product Design
We used mixed-method exploratory research to learn about Chicago residents' experiences with city parks
Interviews
First, we spoke with Chicago residents (age 18+) who have been to a park within the prior year
Key data
Participants: 9 city residents (I spoke to 4)
Duration: ~30 minutes
Consent: Verbal
Surveys
We designed a survey to validate our assumptions and to collect quantitative insights
Key data
Respondents: 28 city residents
Platform: Qualtrics
Analysis: Affinity map
I synthesized my research and made notes of the important findings.
I organized these notecards into patterns and themes. We grouped our findings together, noting commonalities, outlier behavior, and stats.
Our research indicated that 80% of the respondents' park visits happened spontaneously, and that…
56% of respondents would travel across the city for a compelling experience if they knew about it beforehand
Respondents want real-time information about experiences happening around them to help decision-making
88% of respondents find push notifications helpful, but want to control frequency
Given that most park visits are spontaneous and people rely on real-time information to make decisions, a mobile-first approach was essential to help people…
Access real-time information
Gain awareness of current and upcoming events and experiences
Make plans and schedule accordingly
Navigate to parks/events
How ParkPal fits into daily life
Meet Impulsive Ivan
Makes decisions spontaneously
Free-spirit
Enjoys socializing and meeting new people
Values quick, accessible information
Meet Patty the Planner
Forward-thinker
Likes to plan in advance
Enjoys spending time with family, friends, and pets
Prefers comprehensive information
The design process—bringing ideas from brain to paper
We expressed our ideas on paper, starting with low-fidelity wireframes
15-minute design charrette
Quick Figma mockups
Exploration of the core layout and patterns focused on cards, filters, and swipeable interaction patterns
We translated our initial concepts into a mid-fidelity wireframe and interactive prototype
Here is a look at the core pages — before testing
User-testing—gaining insights into user behavior
Unmoderated user-testing
We tested the mid-fidelity prototype with 3 people. Each person shared their screen through Zoom and recorded themselves performing 5 tasks as they thought aloud through the process.
Key data
Participants: 3 student peers
Duration: ~30 minutes
Subject: Figma mid-fi clickable prototype
Tools: Consent form, Script, Zoom
Moderated user-testing
Next, we created a high-fidelity prototype and conducted moderated usability testing using the high-fidelity prototype with 5 users. I remotely met with 2 people who shared their screens as they performed a series of 5 tasks.
Key data
Participants: 8 Chicago residents
Duration: ~30 minutes
Subject: Figma hi-fi clickable prototype
Tools: Consent form, Script, Zoom
Problems and solutions—3 takeaways from user-testing
#1) Testers said all pages in the onboarding process felt the same—users craved variety as they completed the process
🔴 User pain point:
All pages looked the same
The process was too long
Option to "skip"
🟢 Solution:
Added a progress indicator to indicate where users are in the process
Added small icons to each category
Added option to skip
#2) The initial navigation feature flopped. We revisited this by tapping into a device's native navigation system and revised the intent of the map to be for visual exploration
🔴 User pain points:
The map interface felt cluttered
Couldn't read the icons
Users would prefer to use Google Maps (or other native navigation)
🟢 Solution:
We reimagined the map as a category-based exploration tool
The new version filters by category and allows users to explore on a map
The new version allows users to open items in their native navigation tool
#3) The process to add an item to favorites had unnecessary steps. Users also didn't feel that the heart icon was the best icon to favorite an item
🔴 Finding:
Participants did not like the "heart" icon to favorite an item
They felt the modal pop-up was unnecessary
🟢 Solution:
We changed the icon from a heart to a Chicago star, which matches the branding
We removed the modals
Logo combining the Chicago skyline with natural elements
Color palette reflecting Chicago's urban parks
Typography hierarchy for readability and engagement
Component library for consistent UI patterns
Component library—variants of several UI states
Navigation
Various buttons
Various Filters
Swipable Tiles
Hi-fidelity screens & user flows
Homepage
Key Features
Personalized home screen tailored with popular and nearby events
Event, amenity, and activity category browsing
Event discovery and saving functionality
Preference-based filtering and customization
Favorites collection for planning return visits
Exploratory map by category
Flow—login
Flow—Onboarding and personalization setup
Flow—Explore Map: Parks, Amenities, Events
Outcomes & Learnings
"The other day I was on my bicycle looking for a skate park. This app would have been the perfect tool to help me find the nearest skate park!"
— Joseph Wanka, DePaul University HCI 594 Capstone Instructor
Key Takeaways
Mobile-first testing is essential
Testing prototypes on actual mobile devices provides the most accurate user feedback
Leverage native functionality
Integrating with device capabilities creates a more intuitive experience
User feedback trumps assumptions
Our initial design concepts evolved significantly based on testing insights
Future Vision
