Nyc.gov/Events: Reimagining browsing and discovery

Redesign • Info Architecture

The goal of this project was to redesign the Event section of the NYC.gov website, prioritizing functionality, responsive design and user engagement. This project is not officially affiliated with NYC.gov.

Process

Understanding the User

How and why do users engage with their community?
Each teammate interviewed a participant with questions related to attending events and social gatherings, and observed a different participant go through the digital mediums they normally use to find events. We found that users:

• Rely on riends, word of mouth, social media and familiar websites to find events
• Prefer quick and easy digital interactions
• Give significance to familiar venues and subjects
• Need a push to attend events
• Relate “community” to neighborhood

Comparative Analysis

We picked 6 websites and apps to study how they tackle the challenges we faced with this project: I analyzed Eventbrite, Ohmyrockness and Meetup, while Raunak took AirBnb, Bumble and Spotify. Here are our findings:

• A simple interface will satisfy a broader range of users
• Friendly encouragement and reminders will engage users more
• Tags are an efficient way to refine search results
• Events curated for the user will help them find things quickly and easily
• External calendars will help users commit to events
• A review or verification system will allow users to build trust

Prototype Evaluation

I designed a langing page and Raunak designed the specific Event page for our low-fidelity interactive prototype. We used this to carry out moderated user tests to observe the user journey through the features we had planned and improve the structure.

Each teammate moderated the test with 3 users. We observed 6 total users carry out these tasks:
The user was sent a page for a specific event and they are interested. How would they proceed?
The user is not interested in the event sent to them. How do they find something else instead?
The user has to find something to do for 28th March, in Queens, related to food, what do they do?

What needed to be done:

• Remove Home Button: Users mental model of the logo acting as a home button makes the home button redundant.
• Simplify Categories and use Tags: They have an easier time choosing when options are limited. They use tags to refine their choices further.
• Add a "Similar Events" feature: Users tended to use the “Explore More” section to go back to the homepage and look for similar events to compare them.
• Add a "Previously Viewed" feature: Users tended to go back to events they had previously looked at after exploring more options.

Structuring Content

After editing our basic structure based on the prototype evaluation, I created a sitemap. We used this to design a tree test to further improve our structure.

Tree Testing

Each teammate observed 2 participants during their tree tests, with a total of 4. Data was collected from 17 total participants, where all other participants were unobserved. Participants were assigned 3 navigational tasks where they had to find specific events and information. Here's what we found:

• All tasks were completed in an average of 2 minutes, validating our use of simplified categories. They took the longest to make decisions in the Event section as there were more categories.
• Unlike our expection, users did not rely on the “Contact Host” and “For You” sections. A separate page is not needed for this info. “For You” should be replaced with two easier to comprehend sections, “Your Previous Visits” and “Recommended For You”.
• Majority of users relied on “Search by” and they preferred to select Categories most, Locations second. This helped determine the display order of these optons: Category, Location, Date.

Based on this, I revised the sitemap:

Design

Task-based Wireframes for Desktop and Mobile

Each teammate focused on a certain feature of the redesign and created wireframes based on the user flow for each feature. My focus was browsing and navigation on the homepage. Interactions and are highlighted in green.

How might users browse all upcoming events?

How might users browse events recommended for them?

How might users search for specific events?

Designing the mobile wireframes was challenging as it was hard to find a balance between the importance and size of certain features like filters, action buttons and sticky elements. With so many features I ended making some decisions that made the design adaptive rather than responsive.

Hi Fidelity Mobile Mockup

Sticking with the branding and current main navigation of the NYC.gov mobile screen, I created one screen to show what the end product would look like.

What's Next?

Revisiting our research and looking at the feedback we received after each step to help make better design decisions. For example, exploring ways to steer away from hidden drop-down menus to a fully visible menu. The wireframes below explore two such options, and further user testing could help find out what works the best.