swarm

making booking slots at an local indoor bouldering gym efficient and fun
Timeline: 4 weeks, 80+ hours
Role: UX/UI Designer, Researcher
Tools: Pen & Paper, Figma, Maze, Adobe Illustrator
Type: Speculative
Note: The work represented in this case study is purely conceptual!
INTRODUCTION

Improving the experience of booking sessions at a local bouldering gym

My local bouldering gyms are managed by The Hive Climbing, with 4 locations in my region. Throughout the pandemic, constantly changing health guidelines has lead to confusion between the business and patrons. Booking is a hassle and often leads to accidentally selecting the wrong gym location or accidental cancellations.

Despite COVID-19, bouldering continues to grow and thrive, with climbers wanting to spend less time booking their sessions and more time on the wall. I set out to learn more about this frustration by interviewing boulderers of The Hive.
RESEARCH
Virtual interviews were conducted with 5 boulderers who currently climb at The Hive to better understand their bouldering habits and opinions. I sought out users who currently climb at least once a week with ages ranging from 21-25. My initial assumption was that collaborative booking was a desired feature in a potential application - from my own experience, setting a time with friends through a third-party messaging app and booking a timeslot individually was a hassle.

Key Findings

Firstly, the user interviews helped to clear up my personal assumptions. Namely, a group booking feature did not emerge as a potential desire from users; rather, most of the interviewees were frustrated at the confusing or redundant screens and lengthy steps needed to book currently.

As a result, I decided to listen to the end-users, scrap my initial hypothesis, and revisit the initial problem for this application with the four key insights revealed from the interviews:
• Desire for more enjoying UI
• Ability to create saveable profiles that auto-fill
• Capacity counters at all locations
• Clear and intuitive way to check and adjust recent
• Why do I have to choose a gym location before I am ready to book?
• Long gym updates that are relevant but get ignored
DEFINITION

Confusing and inefficient interfaces

With more understanding of the user’s overall goal, I narrowed the scope of the problem to the tricky and unintuitive booking system currently in place - collaborative bookings were not a feature tackled in this application. I created a How Might We question statement to frame my following definition and ideation steps.

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.

Lo-fi Sketches

IDEATION
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.
VISUAL IDENTITY

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.
PROTOTYPING
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.
USABILITY TESTING
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.
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!

REFLECTIONS AND TAKEAWAYS
One of the biggest lessons I learned through this project is to pivot focus when research prompts it. I began my user interviews with a personal hypothesis and left with it challenged and ultimately invalidated. This process delighted me and showed me what what UX is all about: creating a product informed by and made for users. I used Figma for this project and quickly learned how powerful it can be if used correctly and to its full potential. I created a design system *before* designing for the first time with swarm - this sped up my workflow and helped with making edits down the road.
← fairchange
home
Grovve →