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/
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?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.