New York City itself is a city intentionally designed to immerse its inhabitants and visitors alike in a rich melting pot of cultures, creativity, and unique experiences. Out of the many ways to experience the city of New York, in the end many are left amazed, excited, and impatiently waiting to do it all over again. These are the feelings that the RITA XYZ team wanted users of our clients product, NYC Borough Pass, to feel each time accessing the website from their computers, tablets, and phones.
NYC Borough Pass, an initiative to bring unique and cultural experiences at discounted prices to both locals and visitors of New York, had a site that was not optimally designed for responsiveness or for a more interactive and seamless user experience.
The objective of this site re-design was to create an enhanced user-experience for NYC Borough Pass to increase sales and create a better user experience for potential customers.
By the end of this project, our team had a fully re-designed and responsive website for NYC Borough Pass's product re-launch with both satisfied client and user feedback.
NYC Borough Pass is a minority and NYC Native owned business that connects travelers to authentic New York City experiences by elevating the stories of the people and places of NYC. NYCBP aims to help both visitors and locals connect to the stories of an authentic New York City. Between NYCBP's impactful mission and their commitment to giving a portion of their profit back to the city through scholarship and partnership with the vendors of the experiences they include in their product, our team had a truly special story to help tell with this product.
This project was made possible by the hard work and dedication from our RITA XYZ design, engineering, and product teams. During the duration of this project, each team worked closely together to ensure the creation of a beautiful, scalable, and seamless website experience.
.png)
For this project, our team followed an Agile Methodology approach. Each of our sprints lasted 2 weeks, and our product, design, and development teams worked in tandem to complete our team's necessary tasks while staying in sync to ensure the best delivery of the product to our client. We kept a Gantt chart to track our progress over the weeks.
Working with the product team, every step of the way we made sure to emphasize the need to fully understand business goals and also understand our audience.
NYC Borough Pass is a mobile pass that provides users with access to dozens of uniquely New York tours, attractions and live performances. Users can select a duration of 1, 3, 7, or 90 days, and have complete access to all of their partner experiences for the duration of the pass days.
Our next step in exploring the product was to evaluate the current website design for NYC Borough Pass.
We approached each page carefully, documenting both the good and non-ideal design practices, features, and layout of information. We were able to identify parts of the design that made for a not-so-great experience for potential users of the NYC Borough Pass. Each part of the site had it’s own findings and we continuously crosschecked those with the product team as they also approached evaluating the current site from a product standpoint.
.png)
From our evaluation, we divided up our findings by UI, functionality, and content clarity. We took that segmentation further and created an affinity map to highlight what we found:
After understanding where the current product and it’s site design stood, it was important for us to also analyze the offerings of NYC Borough Pass’s direct competitors.
We analyzed the most popular direct competitors such as New York Pass, CityPASS, Sightseeing Pass and GoCity. We compared several aspects of each product and their sites then listed the strengths and weaknesses of each. These were later considered for our selection of desired improvements and what we observed brought about a lot of room for opportunity for NYCBP’s product.
Based on our comparison of the similarities, differences, strengths and weaknesses of each competitor against the original NYC Borough Pass Product, we quickly identified some opportunities for NYC Borough Pass to stand out ad shine among its competitors.
Based on what we found, we knew that NYCBP's product would stand out amongst competitors if we highlighted the uniqueness of the pass's experiences throughout the new site and emphasized the company's deep involvement with the NYC community.
Understanding our competitors strengths and weaknesses not only allowed us to find opportunity for NYC Borough Pass to stand out amongst competitors, but it also allowed for us to pinpoint aspects of each product and their websites that we found would be a great benefit to users. We took inspiration from features like the ones highlighted in the images below.
Taking inspiration from competitor features that were working well for their audience as well as from the room for opportunity seen in in the current NYCBP site’s design, we proceeded to list site features that could be great adds or improvements to the user experience of the site.
Each feature was added to a table, where we further listed the user value, what it would add or improve in the user experience of he product, and how feasible implementation would be.
We approached this step of our process with a large product focus, knowing that our ideas and prioritization of potential features for the product, would be reviewed and in conjunction with the product team's list of features, would be added to our final Product Requirements Document (PRD).
Based on the time we had, we knew that not everything on this list could be implemented in the final design. So, we collaborated with the product and development team to prioritize 10 of these recommended features list to add to the PRD.
Once we had our recommended features prioritized in the PRD, before jumping into the visual design, it was important for us to understand the current user flows and where they could be optimized with these new features. For this, we created two main user stories with two different end goals which helped us refine the steps each user had to take to achieve these goals.
The focus for optimizing this user flow was to focus on the ultimate goal in the use story of purchasing a pass with confidence. In the initial flow, the user would have to navigate to multiple pages to get a sense of the terms of the pass, what experiences could be redeemed with the pass, how it works, and the differences in types of passes. Ultimately the gathering of the information across multiple pages would lead the user to actually checking out.
In our newly proposed use flow, our goal was to completely streamline and condense the places the user needed to navigate to to fully understand what all the pass entails and offers. We did this by including a 'Pass page' that would encompass several different pieces of information previously scattered across pages. In the end, our proposed flow would provide the user with a more to-the-point process.
The main focus for this user flow was to enhance the discoverability of the types of experiences covered by the pass. In doing so, the general page click path stays similar, however now there are multiple filters located on the attraction page. Incorporating more than just the NYC borough filters would allow for users to more easily find the experiences that resonate the most with their interests and needs.
Our next big stage was Information Architecture refinement and ideation. We started this ideation process by restructuring and refining the website's information architecture to improve discoverability and comprehension of information.
Some examples of the changes we made include putting the about us page on the top navigation, creating a page focused on pass information, and creating a contact us page to introduce to navigation as well.
This restructuring allowed us to really showcase the product's uniqueness and benefits while reducing clutter an giving users clear call to actions to navigate through the site's information spread among these different pages.
.png)
.png)
Then, we brainstormed multiple alternatives for the incorporation of the previously decided features and new pages. We did rapid paper wire-framing using the Crazy 8s method, and from there we decided on our favorite parts of our design ideas from those paper wireframes.
From the Crazy 8s exercise, the design team made lists of the features, functionalities, and design aspects of each page we ideated on that coincided with what PRD highlighted that users need and would greatly benefit from, our ideas of product differentiation and inspiration from competitors, and the flow defined in our user flows. Choosing those features allowed us to create our low-fidelity wireframes for each page.
Because it remained our priority to involve the engineering team every step of the way, we made sure to collaborate with them specifically on our wireframes to ensure that there would be no major issues translating pages and features from our design to code. Once we got their feedback as well as feedback from the larger team, we decided on final wireframes for each of the screens before proceeding to our final high-fidelity mockups.
%20copy.png)
It was imperative that the idea of art-direction was introduced to our mockups that would determine the look and feel of the site. Thankfully, the client provided us with their brand guidelines, defining the colors, typography, tone of voice, and imagery they have defined for their product. That inspired us to further create a moodboard to fully define the visual direction of the mockups.
This was definitely one of my favorite parts of the design process. Here, the design team got to let our creative juices flow and really think outside of the box to determine the look and feel we wanted the site redesign to take on. From talking with the client and getting their understanding of the 'REAL' New York City, we looked for the imagery, colors, people, and culture that defined the real New York. We were inspired by everything from street vendors, yellow cabs, the subway system, and even the shapes of the NYC Boroughs.
There were a few challenges that the designed team faced when incorporating our ideas into our high-fidelity mockups. Some of the challenges we faced were the following:
For the checkout process, the client used a 3rd party integration called ‘Bandwango’. There were initial worries of the limitations on what the checkout card could look like since the UI of it was controlled by the Bandwango team.
We decided to approach this problem by designing multiple options for the Bandwango checkout card and having our customer take the designs to their Bandwango team to help us understand which of the designs would be feasible for development.
Another challenge we faced was ensuring consistent and smooth transition between screen size breakpoints to make this experience as responsive as possible across devices.
We needed to approach the design of each series of sizes in a way that maintained consistent spacing, had accessible and well designed text sizes and spacing, modify image sizes and layout, and even make sure components such as cards were kept consistent as they were being re-sized.
To maintain consistent spacing, we defined spacing between sections, cards, image, and text elements, as well as sizing of each element across multiple screen sizes. These spacing and sizing definitions were added to our design system for reference as we created each page. As we designed, we also made sure to view our designs on the types of screens we were designing for.
In the end, we were able to design responsive screens for each site page that spanned from 290px in width (mobile phone) to 1920 px in width (large desktop monitor).
Accessibility was a huge priority for this product. As a product catering to all kinds of people wanting to experience NYC, we had to do numerous accessibility checks with content, spacing, text sizes, colors, and more to make sure they were up to WCAG Standards.
We used multiple tools to ensure accessibility including Figma plugin, Contrast. Which showed us that some of our brand colors were not accessible in the way the client wanted them used (for a main CTA for example). We approached this challenge by modifying as needed and getting approval from the client.
The project moved quickly, and the design team needed to produce these mockups in a timely manner so that our development could begin coding for each page. Because of time constraints and the need or development to be able to produce these designs in a timely manner as well, some ideas we had for features on certain pages may not have been something super feasible for the allotted time the entire team had.
For pages where we initially designed more complex and nice-to-have features, we provided MVPs to the development team so that they would be able to complete development within the timeframe we had. Our nice-to-have features were saved to be revisited at the end of the project if time permitted.
The goal of this usability study was to understand how users would interact the new site design.
We chose participants for this study based on the demographics of the most common visitors to the NYCBP Site as told the by Google analytics that the product team was able to share with us early on.
We focused the tasks asked for users to complete in our study to be mainly around the user stories and main user flows that we defined earlier in the user-research process. We split te participants between both desktop and mobile experiences.
Through the study, we were able to understand the general sentiment of NYC Borough Pass and it's site among users. We were also able to identify and tackle a couple issues that were repeated among the users. These were mostly related to information restructuring and key navigational elements.
After our final designs were complete, we set up time with the client to gather their feedback on each of the pages. Through their feedback we were able to uncover some key parts of the design to update.
It was important that we remained closely aligned with the engineers and supported their building of our designs. We did this by:
.png)
Finally! We made it to our final mockups. Many pages were redesigned from the initial client site, and many were also newly created. After close collaboration with product and engineering, and taking feedback and insights from both client and potential customers, we finalized the designs. The following images highlight those additional features and improvements from the initial NYC Borough Pass site across select pages.
Dynamic checkout process that allows users to choose pass type from a dropdown rather than static individual cards, improving scalability for when NYCBP begins to offer additional pass types.
The newly designed attraction page focused on supplying easily discoverable important attraction information from operational hours, exact location, and how to present their tickets to users interested in a certain experience.
The page also allows users to easily jump to additional nearby attractions to easily understand what else they can redeem with their passes while in the same borough.
Another newly added feature that sets this product apart is the ability for users to receive a customized itinerary created by an NYC native - the CEO and founder of NYCBP himself. This page faces a form that allows users to answer information about their interests and pass type and submit it to then receive an itinerary in the following 48 hours.
Users know through this page that they'll be able to take full advantage of the pass and its included experiences in an authentic way.
