NYCgo App

UX/UI Case Study

Overview

As part of my bootcamp, I was assigned to work in a team of 3 with our client NYC & Company to design the first ever native mobile app for NYCgo’s itinerary building platform with a 4-week deadline. NYCgo is the official liaison for those wanting to experience the city that never sleeps.


The NYCgo website was transformed into a mobile app allowing users to explore NYC with a mini tour guide in the palm of their hands, enabling them to customize and curate their trips, share, and collaborate with others.

Client: NYC & Company

Role: UX Designer

UX Methods: Surveys, User Interviews, Data Analysis, Affinity Mapping, Stakeholder Interview, User Flow, Sitemap, Sketches, Wireframes, Low fidelity, Style Guide, High fidelity Prototyping, Usability Testing

Deliverable: High-fidelity Interactive Prototype


Challenge

The challenge faced by trip planners is the lack of a seamless transition from desktop to mobile when planning trips around NYC, causing difficulties in filtering, building, and customizing itineraries, as well as collaborating with others based on preferences.


The Process

We conducted surveys and interviews with various traveler groups, including locals,
and domestic and international travelers, as well as meeting with the client to better understand the goal of the business. The research findings were analyzed and used to create affinity maps, sitemap, and user flow to adapt the NYCgo website into a mobile app, providing insight into how travelers plan their trips to NYC and shaping the vision of the NYCgo mobile app, which aimed to ensure its success as a tool for travelers planning trips to NYC


After creating the user flows and sitemaps, we were able to develop UI solutions through wireframes on top of developing a style guide and performing a usability test on a high fidelity created.

Constraint

We faced time constraints with only 4 weeks to complete the project and difficulties in scheduling meetings due to team members having conflicting schedules.

Goal

To create an app that aims to inspire, educate and promote the city by encouraging tourism to all five boroughs with a focus on lesser known attractions and neighborhoods.


UX Design Process


Phase 1: Discover

Research Goals

  • Understand the business and user needs for the NYCgo App Success

  • Have a better insight into how users plan their trips

  • What would encourage repeat users to use the app beyond the trip-planning abilities

Interview Questions

  • How familiar are you with all 5 boroughs of NYC?

  • What tools do you use to help plan your day in NYC?

  • Where do you get travel advice from?

  • Do you plan your trips based on categories?

  • What device do you use to plan trips?

Insights

With insights gathered from user research, we see that most people begin planning their trips on desktop devices but experience a disconnect in continuity once they are out because they did not have all the information in one concise location.

I like using a desktop more when looking at information and planning because it’s easier to see more vs scrolling around. At the time of the event, I would switch to a smartphone for reference.

The NYCgo app includes the depth of the original site while incorporating quick access to current events and featured content. It allows guests to curate their trips based on preferences. They can also share and collaborate with others during their time exploring NYC.

I would consider it if it's something highly rated and recommended by many people. But the collaborative feature is very important. If I'm traveling by myself, sure, I'll use an app.

Most respondents shared that they prefer word-of-mouth suggestions from family and friends but they are also open to curated guides from internet platforms and other travelers. The insights gathered from the interview respondents indicate a desire for frequent updates and a social media aspect to encourage repeat use of the NYCgo mobile app.

It depends I will use the internet for research like social media and such but social media is tricky since people on social media usually share their thoughts for view and to promote themselves as a traveler influencer so the places they mention can be lacking at the time, but from locals, you know the hidden gems and I trust them more if they are people I know personally

Phase 2: Define

Target User

Note on User Personas: Since I did not have significant data on current NYCgo users, I did not create user personas. Stacking assumptions without the backing of analytics would have provided little value. Instead, I followed the Design Sprint approach of choosing a one target user

Target User: Locals and tourists looking to explore NYC

Affinity Map

The Affinity Mapping helped us frame the session of rapid ideation, and then collectively voted on which ideas are the high-impact to explore while keeping in mind the insights from the research phase

Sitemap of Website

We created a sitemap while reviewing the desktop version of NYCgo to incorporate existing tabs and options into the mobile version, ensuring continuity and fluidity in the layout of information.

User Flow

We built a user/task flow for a beginner using the NYCgo app, keeping the target user in mind and reviewing the desktop itinerary creation process to maintain continuity and fluidity from the desktop to the mobile app.

Jobs to be Done

We synthesized all the feedback in the research phase, we decided that an effective travel-centered app should allow explorers to:

Phase 3: Design

Sketches

Sketching on paper helped us plan and review potential obstacles before starting the wireframing phase.

Style Guide

There was no official style system/guide, due to this, we reviewed the website for the color systems, buttons, icons, and text box while researching about what typography is in place.

Wireframes

After reviewing the sitemap from the website we tried to create a realistic layout.After reviewing the sitemap from the website we tried to create a realistic layout.

Wireframes before prototype

Wireframes after prototype

Phase 4: Test

Prototype

Browse events

Users can browse for a different event, as well as bookmark it and save it to their itinerary.

Plan the next trip with friends

Users can create itineraries and collaborate with others for any future plans

Explore other neighborhoods

Users can plan out their trips with more than just Manhattan, and start exploring other neighborhoods, exploring more than just the city

Usability Testing Tasks

We chose these tasks for usability tests as they test key functions and user scenarios of an event-planning and travel app. It covers common actions like browsing events, saving to the itinerary, editing the itinerary, exploring dining options, and searching for more specific options, giving insights into user efficiency and effectiveness in accomplishing these goals.

  • Enter the app to browse events on the homepage

  • Bookmark and save an event to the itinerary

  • Edit and create a new itinerary to send to a friend

  • Navigate to explore dining options in Brooklyn

  • Search for pet-friendly experiences

Results

Even though most users found the navigation intuitive, but 33.3% error rate was found during usability testing, based on errors and attempts during assigned tasks., however, we received the following feedback:

  • onboarding guide for new users with the option to skip as well

  • confirmation that shows their action was done correctly

  • a clearer distinction between saving to the itinerary and adding to bookmarksa more intricate filter

  • an option to more than just highlights for a certain category

Phase 5: Takeaways & Next Steps

Takeaways

We were very content with the outcome of our design. Our team was able to design the first-ever native app, alleviate the pain points that users have about trip planning to NYC, and add features to encourage the user to use the NYCgo app for more than just itinerary planning.

Next Steps

If there was more time available we would:

  • Add features for successful task confirmation, and the "plan" tab is not shown in the high-fidelity prototypes due to time constraints.

  • Collaborate more closely with the client because it provides a deeper understanding of the client's goals, and requirements, and creates a solution that truly meets the needs of the client and their users.