Rightous Gemz

A collection of Hidden Gemz sample screens from our project.

Hidden Gemz Booking Function

Hidden Gemz is a startup based out of Calgary, CA that curates activity packages offering Groupon-style tours of local classic locations. As the existing product uses Eventbrite to book tickets, our design team was tasked with designing and prototyping a booking function for the Hidden Gemz app.
https://hiddengemz.ca/

Timeline
July 2024 - Aug. 2024
Role
UX & UI Designer
Skills
User Research
Wireframes
Prototyping
Tools
Figma

Problem Statement:

How do we provide a quick and seamless booking experience to replace the existing third party service that Hidden Gemz currently uses for it's event business?

Secondary Research

Eventbrite


The first app researched was Eventbrite as it was what Hidden Gemz currently used to book experiences. Eventbrite is available as both a mobile app and a web app, featuring a clean and intuitive interface.

  • clean, modern color palette with white backgrounds and vibrant accent colors to highlight key elements
  • Streamlined Flow: The purchasing process is quick and efficient with minimal screens

Alberta Food Tours

Desktop and mobile website built for food tours of select cities in Canada. Home screen focuses on booking tours and learning about different available tours.

  • See at a glance tour details: location, starting price, event dates, type of tour (guided/self-guided)
  • Personalized and curated tour options with clear descriptions
  • Information overload tends to provide user with too much at a time.

Taste the City

Taste the City is a web-based service where users purchase semi all-inclusive tours of several local fine dining restaurants in in Toronto, Victoria, Calgary, Winnipeg, Waterloo and Edmonton.

  • User starts on an “introduction site” to read about the service, then books their experience through the store site
  • User selects from a city and chooses from a list of curated restaurant stops
  • Easy travel due to preset stops

Go City

Go City is a company that provides sightseeing passes for travelers. These passes offer access to multiple attractions, tours, and experiences in major cities (30+) around the world at a discounted rate.

  • Prompts the user to start exploring their offerings by city.
  • Focus on ease of use and intuitive navigation.
  • Detailed Information

Based on the user research the team decided that our booking flow would start with the city selection first, as that would determine the events available to the viewer and form a natural jumping off point like the competitor apps had. The second page would be the event selection, to excite the viewer and show them upfront the experience they are buying.

Sketches

Round One Sketches

Getting to work with some Micron pens and a business card to trace, I sketched out a few preliminary screens. The idea was a simple portrait, progress tracker, and action button to give a "window shopping" experience of the user browsing through their desired event and little else if possible.

The action here is designed to be horizontally oriented with users swiping through options on a carousel rather than scrolling down a list.

Round Two Sketches

This was a secondary set of final draft sketches based on the feedback from the team. The consensus was that the progress tracker, at the bottom of the first set of sketches, would be associated with the horizontal movement of the option carousels. So the progress tracker was moved to the top of the screen, and the action was oriented to be vertical, scrolling down lists of options. The option images also had title and detail overlay as the first sketches were noticeably light on details and information.

The team chose a mix of the first and second round sketches for the Low Resolution Wireframes.

Low Res Wireframes

First Set of Low Res Frames

The first set of low res wireframes was built in Figma, and mainly focused on the "option carousel" style of layout with the exception of the city selection list screen.
The user selects the exciting parts of their experience upfront like the location and style of event (date night, city exploration, etc..) and then finalizes with the date. The final screen is the checkout offering different levels of prepaid value at the various stops on the event. Also on this checkout screen is a few add-ons the user can buy, like polaroid photos taken at the event, offered at the end of checkout in a "supermarket candy" situation.

Second Set of Low Res Frames

The second set of low res wireframes was made concurrently with our prototype, iterated on as we received feedback from our test users.

Added to the Event Details screen was a vertical rearrangement function, allowing the user to change the order of various stop types, for instance changing the movie/activity slot of the event be before or after dinner. Also added were information cards that would overlay when one of the event locations was tapped on the screen, and a purchase summary pop-up appearing when the user finalizes their check out.

Usability Testing with Low Res Prototype

This was the low res Figma prototype that our users tested with. As we only had a month to create our final deliverable, the team constantly updated this low-resolution prototype when pain points or strong recommendations arose.

We had a total of 5 participants test the prototype in 4 days, with most of them having "some" to "frequent" experience with mobile booking apps and travelling.

Overall, most users were happy with the flow after coaching through pain points, and mainly gave feedback based on page instructions or the information available on pages with multiple user interactions. Through testing we were able to learn the amount of information each user needed per decision, what could be visually simplified, and what steps would require additional instruction.

Hi Res Protoype Deliverable

Conclusion

The goal of Hidden Gemz is to expand to more cities throughout Canada and beyond as the product grows. Delivering this booking module for the start-up enabled them to implement a seamless and self reliant booking experience to support this growth.

When my team was brought on to design this portion of the product we were able to establish a User Interface language for further elements of the app to develop around. As the app is relatively new , they can help refine the products visual identity around this core function of the experience.