Hidden Gemz Ticket Booking System

Creating an in-app ticket booking flow for users to purchase an experience that encompasses multiple stops ranging from food options, activities, and more.

Hidden Gemz | UX/UI Designer | Team Lead

Background

Hidden Gemz facilitates year-round events, helping users meet new people and explore the city in fun and innovative ways. They provide a gamified experience to get local businesses found in a fun & interactive way - increasing their foot traffic and sales.

It’s kind of like Pokémon Go for local businesses, with the unique Pokémons scattered across the city for people to find. In September, of 2024, they will begin our mobile app development.

I worked within a team of 4 UX/UI designers. As the team lead, I typically led the internal meetings and client presentations as well as the design phases (i.e. wireframes / high-fidelity screens). As all of us were onboarded simultaneously to work on a brand new flow, we prioritized efficient delegation of tasks on top of ongoing communication.

The Team

Project Goal

Until our team’s introduction, the company had been using Eventbrite for ticket sales. This had been disrupting the flow of the user experience, prompting them to seek direct booking solutions on our own site.

Hidden Gemz sought to improve the user experience of booking city exploration adventures through our mobile platform by creating a more user-friendly and intuitive design. The goal was to optimize the screen flows for selecting dates, number of people, budget, mood, and dietary restrictions, leading to a streamlined checkout process. Success will be measured by increased ticket sales, enhanced user engagement, and seamless integration with their existing mobile platform.

Main Objectives:

We looked at four different market examples, including Eventbrite, which was the platform that Hidden Gemz had been utilizing for booking. In general, the main weakness across all the competitors was information overload and lack of clarity.

Competitive Analysis

Evenbrite

    • Clean, professional, and minimalist design with clear typography

    • Uses a lot of white space to keep the interface uncluttered

    • Highlights call-to-action buttons in bright colors.

    • Seamless and intuitive multi-step process

    • Secure and diverse payment options.
      Immediate confirmation and ticket delivery

Go City

    • Use of Go City's colors, fonts, and logo throughout the app

    • High-quality images of attractions and cities to enhance the user experience

    • Rounded corner buttons and links for easy navigation and interaction

    • Important information (like prices and pass benefits) is prominent and easy to find

    • Potentially overwhelming amount of information and options / confusing what’s included in passes

Taste the City

    • Vibrant colors and imagery

    • Likely built with a web builder, leaving room for error

    • Visual storytelling through images and icons.

    • Essential information is clearly presented on the booking page

    • Low barrier to entry as it’s web based

    • Integration of food and cultural experiences in the booking flow

Alberta Food Tours

    • Warm and inviting with high-quality food imagery

    • Consistent use of local and culinary themes.
      Clear and easy-to-read typography.

    • Personalized and curated tour options with clear descriptions

    • Small group sizes highlighted for a personalized experience.

The most important groundwork was to translate the user flow in the simplest, most digestible way for the users. Our discussions with the client would always bring up inventive and creative ways to develop the app in the future, but our short-term goal was to create the MVP and make sure the user receives all the information they initially need in order to book a ticket.

User Flow

During the meetings with the client, there were numerous discussions about the hypothetical personality that would take on the app. Our research phase, therefore, saw fit to create a user persona that would ground us in our design rationales. Think young, adventurous, and sociable.

User Persona

The MVP was drafted to be a sequence of 5 screens with careful attention to information architecture in decision making. We focused on providing details concisely while giving the user maximum autonomy.

Wireframes

Because the company did not have a set design guide at this time, our team took on the task of establishing the first draft of the visual voice of the app. We opted for brighter, more saturated colors (that do not disrupt readability) to imply the fun, active, and whimsical nature of the project. Because the event details will be laid out with photo references, we decided to keep the canvas white to minimize distractions.

User Interface Design

As we were working on the high-fidelity screens, we incorporated the feedback from the usability testings in real time. Surrounding discussions emphasized the need for further clarity and reflection of options on the Event Details page. The participants all expressed that they would want to know the extent of freedom that they have before they make the decision to book the experience - even if they won’t necessarily be making the calls on the specific locations until the day of the experience. [Prototype Link]

High-Fidelity Final

Potential

The biggest win stands to be that the product is now able to detach itself from the use of Eventbrite. This alone can massively reduce the drop-off rate and positively impact the user retention rate.

The company is still very much within its early stages. Having its own ticket booking system would be the first step in curating a cohesive experience for the users. With its primary strength being that the user does not have to worry about purchasing separate tickets or fees for each of the stops they go to, the company could expand on this idea and connect with more businesses around the cities. More locations on hand would mean more variety for the users, and consequently a more catered experience. This would conveniently introduce the feature where the users can filter by preferences such as activity level, dietary restrictions, transportation, etc.

Furthermore, there is a definite need for a unified visual identity on top of the main objective of providing an experience. Since the company chose to lean towards the active & fun feeling, the following UI design could continue to center around vibrant colors as well.

How to flourish