NYC Parks
Design
Equipped with all the research and confident in our user flows, it was time for making something!
Sketching
Design Step One - make doodles.
Each of us took section of the site to work out ideas with and voted on what we think worked best:
-
Home Page
-
Event Page
-
Registration/Sign Up
-
User Account
-
Notifications
Lo-fi Testing
It was important not to jump right in to wireframing without knowing if people understood the basic layout and intentions.
​
I ran a quick usability test of paper prototypes.
Kinds of things we asked them:
-
What do you think you're looking at?​​
​
-
How would you go about finding an event in a park near you?
​
-
Was there anything you didn't understand or would have expected to see?
"I can scroll to see the categories or swipe to see more I guess. That makes sense." - Rafael
"I wouldn't think to search by zip code, I'd just scroll until I find something near me." - Kurt
"I'm not sure I totally get the filtering like this. Maybe it can show me all the types at once?" - Camaal
Mid-Fi Design
Taking our sketches and what we learned from testing, we moved in to mid-fi wireframing. We each took sections of the product to design while simultaneously building shared components and a design system.
Since I did a lot of work on filtering in earlier stages, I also took that upon myself to design something that was all-encompassing, yet still familiar and easy to use. I leaned on the card sorting and other behavioral and competitive research to influence the functionality and design.
Using chevrons, toggles and buttons for selections was a much needed upgrade from the lengthy and not-at-all mobile friendly checkbox system that was currently in use.
We met weekly to review and vote on designs, give feedback and decide on next steps.
Mid-Fi Usability Testing
Once our design felt ready and prototyped, we needed to align on a usability testing protocol. What did we want to learn from users? What were our and their expectations? Did it work?
Our hypothesis:
-
Users will be able to navigate the site and understand its purpose
-
They will be able to search and filter for events that interest them
-
They will feel that details about a specific event provides enough information to make a decision
-
Users will be able to save or register for an event with ease
-
Users will be able to quickly find all of their saved/registered events to gain details about them
Kinds of things we asked them:
-
What are you first inclined to do?
​
-
How would you find an event happening near you?
​
-
It's the day of your event and you want to see the details. How would you find that information?
We conducted remote and in-person usability tests on our mid-fi design with 8 people. We used our personas to source the ideal demographic - parents of younger children, seniors and millenials. Half of our users were also ESL speakers.
"I like the photos-they're self explanatory. I don't even need to read, I already know what the event is." - Parikshet
"I like this accessible toggle but who defines that? I think about my dad who is disabled -is it really accessible or only sort of?" - Shana
"Oh, I didn't even see these pins at first. I guess that's where the event is?" - Kurt
"I expected a dropdown labeled filter. I didn't even see a way to do that." - Rafael
Affinity Mapping
The feedback from our mid-fi testing was excellent. Some things like the event tiles and the event details page worked really well. Some other features, not so much. Users had a lot of trouble finding the filters (but usability was straightforward if they did) and they didn't know how to register for an event. Some things were surprising and challenged our biases - some icons were not familiar to everyone, no one wanted to make an account to attend an event and our senior user base did not know what a push notification was.
We mapped the testing feedback to find the common pain points.
The following problems came up repeatedly so we prioritized them for iterating on our next round of designs.
-
Icons unclear
-
Can't find filters
-
Alternate views confusing
-
Unable to find registration
-
Notifications overwhelming
Primary Default
Primary Pressed
Primary Inactive
Secondary Default
Secondary Pressed
Secondary Inactive
Design System
Throughout designing, we worked on building a shared library with accessible colors, states, text and components.
We remained true to the parks' brand with our choices while adhering to iOS and Android standards.
Primary
#88C659
Secondary
#22215B
Accent
#F2F4EF
Inter Bold
Titles + Subtitles
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwzxyz
123456890!@#$%^&*()_
Roboto
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwzxyz
Body
123456890!@#$%^&*()_
Hi-Fi Design
Using what we learned from the mid-fi usability testing successes and failures, we worked on updating our design to meet our users expectations.
I revamped the search and filtering system to make it very clear what the user could do and find. Adding placeholder text let them know that searching was advanced and variable. I completed additional competitive research for complex filtering systems on sites such as e-comm, event ticketing and more to get more ideas for an improved experience.
Since the homepage didn't suffer usability issues, the UX remained the same but we updated the UI to be a bit more sophisticated. The map view was labeled more clearly with new iconography. The event listings were given additional details around accessible features and a clear CTA to register.
Hi-Fi Usability Testing
We took this updated design to some of the same and some new users to get insight on our changes. We conducted the test with the same hypothesis and questions from the earlier round to ensure our data was consistent and measurable.
"Filtering was easy to get through. it gave me enough options to narrow down and were where I expected them." - Jeff
"Overall it's very user friendly. I'd want to share an event-social or text, email." - May
"It has everything nice and clearly written, directions and maps, and I like the accessibility measures." - Kurt
"Oh, the push bell! I get it now!!! It's that thing that pops up on your phone." - Judy
The feedback was overall very positive. We solved many of the original issues and all of the users were able to successfully navigate the site.
100%
completed all tasks!
Reflections
This project was very rewarding and educational to partake in. While challenging to continuously motivate myself over a long year, having the accountability and partnership of Lynn and Saranya was priceless. We challenged each other with healthy debates over design decisions and best practices which led to a higher quality and more useful experience.
I personally intend to make a few minor updates to the final design to help overcome any further UX challenges.
​
The final round of testing gave us pride in what we created, knowing people were excited to see how far we'd come and several wanted to know when the product goes live. We intend to reach out to our contacts at the NYC Parks Dept to pitch this as a springboard to updating their site to be more user friendly to all New Yorkers.
