Meet Alannah, the busy boulderer
I created a persona and empathy map based on my user interviews and secondary research on bouldering gyms in the pandemic - affectionately, this persona is named after the first female boulderer to represent Canada at the 2021 Olympics! Alannah, a young, technologically savvy climber, helped me to prioritize simplicity with swarm's design and use familiar mobile touchscreen interactions.
I explored how booking could be made more efficient by putting all major steps on one screen, with a booking review at the end. This was based on an ideal task flow I developed for a boulderer: check gym updates -> sign waiver -> book a climb -> review booking -> check calendar with active bookings -> cancel or reschedule booking if needed.
Navigation between different key screens was designed with one user's comment that the current app looks like a desktop website squished into a mobile platform in mind. To take advantage of touchscreen functionality, I played with the idea of pop-up cards. This was particularly relevant with participant waivers. If a user attempts to book a climb without signing a waiver first, a pop-up prompts the user to return to the home screen first.
Designing a logical and intuitive flow
One of the repeated frustrations from users was that the current booking system requires multiple touchpoints to view or make bookings. Additionally, new COVID-19 updates from the gym were not attention-grabbing and were often in the form of long walls of text. This helped to inform the information architecture of swarm, and I created a site map that focused on easy booking and updates.
inspired by real-life bouldering gyms
Inspired by colours commonly found in indoor bouldering gyms and rocks themselves, swarm's branding and UI took shape. The Hive's existing logo consists of 6 hexagons, so I explored the possibilities of combining honeycomb hexagons with a pleasing colour palette consisting of blues, greys, and yellow. Bright colours on white and grey backgrounds parallels how colourful holds look on indoor bouldering walls. I also added a subtle grain overlay to mirror the gritty texture on climbing walls and holds.
My typography choices were based on the need for legibility on a mobile screen, especially for long text found in the gym updates or waivers. The selected typeface Poppins was further inspired by the fun and playfulness of bouldering.
As an avid illustrator, I decided to add a chalk bag animation to the final page in the booking process that ideally excites and notifies the user of their successful booking.
With sketches and a clear vision for the structure of the key screens that would address user goals, I build mid- and high-fidelity wireframes for swarm. There were several key design features I executed with my solution.
1. Easy-to-view bookings
Bookings are given high visibility with upcoming timeslots on the homepage. The user can also click into their schedule in the navigation bar to see each date and booking in more detail.
2. Fill out information with ease
After clicking the booking buttons on the homepage or navigation bar, a user is redirected to a "Booking Details" screen. Their favourite gyms can be starred (or unstarred) to keep them at the forefront. Capacity counters for each gym are displayed at the beginning of the booking process to help users decide between gyms right away. In the next section, information is auto-filled for efficiency.
3. Feel safe at the gym
With COVID-19 numbers and health landscapes changing everyday, a top priority is public and personal health. In addition to gym capacity counters, waivers and gym updates are immediately visible on the front page. For contactless check in/out of the gym, A personalized QR code scanner is accessible on the homepage.
I conducted usability tests with five users through Maze - these users walked through their actions with me in virtual one-on-one calls. From these tests, the results helped clarify which
parts of the prototype were easy to use and which needed improvement. I made edits to the design based on my user insights.
• Users enjoyed the illustrations and overall UI, and 100% of users agreed that this process was easier then the current application
• Confusion with copy, specifically "Schedule" in the navigation bar and "Edit Booking"
• Not initially clear that grey and yellow dots on the user calendar indicate past & active bookings
• One user accidentally skipped portions of the booking process, mentioning that this happens to them with the existing application all the time
check out the final prototype here!