The Hive App

A mobile app redesign with a motion focus

Project overview

🗓️ 6 weeks, finished Nov 2024

🛠️Figma, FigJam

👤 Solo project

🧰 User-testing, motion

This school project was a part of my Emily Carr UI / UX certificate. It consisted of a brand overview, brief user study, wire-frames, and a high fidelity click-through prototype.

This project emphasized motion and its effect on the user experience

Two Main Problems

The Hive's mobile app is dated and does not match the fidelity of the brand
The date confirmation screen was also unclear, leading to some confusion over which day and time was booked

Highlights

Created a consistent high-fidelity prototype
Translated an existing design onto a new platform

(The Hive website into an app)

Significantly increased my understanding of app motion graphics

Lowlights

Re-working the typefaces was time consuming
Limited initial user testing led to lots of late-state changes
Bumped into the limits of Figma as an animation tool

Redesigning the App

The assignment was to redesign the mobile app into something that fit with the existing brand of the gym. For context, The Hive is a Canadian indoor climbing gym with multiple locations in and around Vancouver.

Assignment goals included:

Main task: Book a session
Align existing visual branding with app
Include a community page (non-functional prototype)

Existing Website & Brand

Their existing website made extensive use of colour, photos, and dynamic type. Clearly a lot of time and love went into this, something I wanted to keep in any redesign.

A Functional, but Ugly, App

The Existing app favors function over form, almost to an extreme. It was clear my challenge was going to be finding a way to unify these two existing styles without losing functionality. My challenge would be to improve the user experience while also making things prettier.

Re-creating the Brand

I re-created common app elements within the existing brand styling, slightly expanding the colour pallette at the same time.

Talking to Climbers

I conducted two interviews with existing climbers from the Hive who regularily used the app and website to book.

Overall there were a few things they wished would be more clear:

more clarity on the final booking screen, especially the booked date and time
better sizing on buttons and text
prettier app!

Sketching out Wireframes

To get a basic idea of the core flow, I sketched out what an alternative version of the existing app could look like. I then tested it with a couple users to get some feedback, then moved to high-fidelity designs.

Adding Motion

Inspired by skeletal animation systems, I made a rudimentary character system in Figma to differentiate between the Heights (rope climbing) and Bouldering (free climbing) sections.

I also added a simple geometric loading spinner that evokes the colours and chapes of the Hive logo and to capture a bit of that feeling of flow that you get while climbing.

Re Testing

After the initial hi-fidelity prototype I received some feedback on the typefaces not working properly to communicate heirarchy. I ended up re-doing and refining the cadence of type to give a more consistent flow to each page.

Bringing the UI together

Through a focused, simple user flow. Here's a portion of the final UI in the app.

Project Takeaways

I was pleased at how seamlessly the app fits in with the existing website. The in-app motion also worked pretty well to show capture a bit of the joy of climbing.

More user testing early on would have helped with some of the hiccups I had later on in the project, especially with some of the font hierarchy.

Interactable High Fidelity Prototype

Give the current prototype a try yourself with the embedded version on the side, or the link below.

Interactive Prototype

Fallback video link on the left.

Check out another project?

My Projects

Page updated

Google Sites

Report abuse