NYC.gov

NYC.gov has an events section all across the five boroughs. The events section aims to allow residents to pursue cultural enrichment and ways to engage with the community.

The goal was to expand NYC.gov's functionality to allow the user to interact with events. They would also want constituents to be able to browse events relevant to them more engagingly.

Project Details

Team

Amiya Dewan,
Raunak Jangid

My role

Research,
Wireframing,
Design

Tools used

Adobe XD,
InVision,
Optimal Workshop

Timeline

January, 2020 to May, 2020

Desktop screen displaying the events section of NYC.gov

User Research

We conducted a 1:1 interview with our users, which consisted of questions about their typical week and lifestyle. Along with the personal interview, there was also a Contextual inquiry where our user had to complete a given task/prompt.

Objective of User Research -
To gain insight into how and why users engage with their community and what mediums lead them to it.

Insights from User Research

  • A common finding was that users often rely on their friends to invite them to social or cultural events.
  • Users give significance to events hosted at a venue they are familiar with or involve a subject of their interest.
  • Users are already busy with their lifestyle, and they hardly get time to look for community events over the web.
Portrait shot a man wearing a hat

Robert Hills (34)

Robert is a Digital Director from Austria currently residing in New York City. He loves to spend quality time with his wife and always looks forward to multi-cultural events in the city.

Needs and requirements

  • Plan outings
  • Meet new people
  • Handy information

Comparative Analysis

We had to determine what problems the users could face and what opportunities we might have for them within the website. Some of the possible options we thought of from this exercise are listed below -

  • A more friendly approach by the website for users.
  • A way to make the events look more authentic and trustworthy.
  • Considering a personal approach rather than a general approach.

What we learned

  • Verifying the event or organizer can help build trust for users.
  • Having the ability to add an event to calendars will help users commit to events.
  • Friendly reminders and notifications are also an excellent way to keep the user engaged with the website.
Girl pointing towards the sticky notes on the wall

Prototype Evaluation

Animated GIF of the user flow for NYC.gov

We created a low-fidelity prototype to be tested by our users. We gave tasks to each user to find out their thoughts and tested this low-fidelity prototype, which resulted in a variety of findings.

What we learned

  • This test concluded that most of the users rely on the explore more button.
  • Users are more dependent on filtered out events.
  • Users tended to explore their options and then go back to one of the events they previously viewed.

Tree Testing

Each one of us observed 2 participants during the tree test. We collected data from 17 total participants, and we gave three tasks to the user to understand their thought process and how they navigated through the website.

Tasks included -

  • You went to an art festival last month, and you want to find something similar to go to this weekend, where do you find it?
  • You want to find an event that’s happening soon, and you want to make sure it is wheelchair accessible. How do you do that?
  • You want to go to a tax workshop this weekend in Brooklyn. How do you find one?

What we learned

  • Initial choices were easy for participants, but they took longer to explore the whole website.
  • Users expect extra information to be available either through filters or on the event page itself.
  • The Majority of users preferred to search by Category, then location, and later date.
Multiple sticky notes on the wall

Structuring Content

Diagram of the content structure for the website

Tree test led to many new insights about the users and how their flow is through the website. From the findings of the tree test, we analyzed them and worked on structuring the content for the website.

Analysis from tree test

  • Users can process information faster when there are more straightforward and fewer options.
  • We placed the homepage with these two sections - “Your Previous Visits” and “Recommended For You”, which feel more personalized.
  • The majority of participants clicked on Category and least clicked on Date. This insight suggested that we should arrange the filter option in order of Category, Location, Date.

Wireframes

I decided to work on the event page, as it was a perfect opportunity for me to rework this page and provide more meaningful information.

To accomplish the goals, I selected a few design principles. These design principles made sure that the whole website revolves around that theme. These design principles were Clean, Fast, and Smooth.

The aim with this was to -

  • Providing only necessary information.
  • To make the users trust the website and events/organizers.
  • To make the website responsive for desktop and mobile.
Wireframe of the homepage for NYC.gov
Wireframe of the homepage for NYC.gov
Mobile wireframe of the homepage for NYC.gov
Mobile wireframe of the homepage for NYC.gov

Similar events

There is only one way a user could navigate to other events pages. With this, the users are not overwhelmed with too many options. One of the ways was to look for similar events just below the main event.

This feature gives the user to search for similar events without navigating through the search bar. It is only one click away to look for events within the same category.

Wireframe of similar events for NYC.gov
Mobile wireframe of similar events for NYC.gov

Adding the event to calendar

Users often forget about the events once they leave the website. This feature allows users to add any event to their calendar.

This feature will remind the user about the event just a day before the actual date. This way, the users can stay committed to the events of their interest.

Wireframe of adding an event for NYC.gov
Wireframe of adding an event for NYC.gov
Mobile wireframe of adding an event for NYC.gov
Mobile wireframe of adding an event for NYC.gov

Sharing the event

We learned that users' friends mostly invited them to an event. It was a need to create a shareable link for an event on social media platforms.

This feature makes it one click away to share any event on any social media platform the users prefer.

Wireframe of adding an event for NYC.gov
Wireframe of sharing an event for the NYC.gov
Mobile wireframe of adding an event for NYC.gov
Mobile wireframe of sharing an event for the NYC.gov

Final Design

After finalizing the content and structure, it was essential to make the website aesthetically pleasing. It was also crucial to reflect all our findings, design goals, and design principles.

I decided final design for the event page that was aesthetically good and presented all the information rightly.

Final design of the website NYC.gov

Color and design

Blue is the dominating color for the whole website as it evokes a sense of honesty and trust in the user’s mind. The primary buttons are blue so that they could stand out from the secondary buttons.

Throughout the website, there is a presence of rounded rectangles as they feel more human. Round rectangles forms also give a friendly trait to the whole website.

Final design of the navigation for NYC.gov

Visual language

Large images are an excellent way to catch any user’s attention. Using images also generate a sense of trust among the users, as an event with images looks more trustworthy than an event with no images.

There is also a verification mark for the organizers who nyc.gov has verified. Users can often get confused between what is false and what is right on a website, and thus I added these features to the final screen.

Final design of similar events for NYC.gov

Take-Aways and Next Steps

It was challenging to follow the process, as many times, we make assumptions about our users. This misjudgment can lead to many inappropriate and wrong decisions. I believe that one should never underestimate the importance of research in any project. In this project, it was good to see how each step of the process was valuable and helpful for the other one. We later used findings and insights from the research to redesign the event section for NYC.gov.

The possible next steps for this project would be to accommodate the final design onto the mobile screens. We can also think of ways through which NYC.gov can become the primary source for all users to search for events. Expanding the project's scope can make the whole website more seamless by keeping a consistent design and visual language.

Desktop and laptop screen displaying the website of NYC.gov

You May Also Like

Laptop screen displaying the homepage for Yieldspace

Forming a visual style and user interface design for one of the leading real estate investment digital platforms called Yieldspace.

Desktop screen displaying the homepage for Monterey Bay Aquarium

Designing a welcome back user flow to help customers feel safe returning to the aquarium and improving their purchasing tickets experience.