MCT Hub
Spring 2026
Role: UX Designer & Researcher
Back to the core version here.
The details
I, of course, wanted to make a platform that did what was required of it, but I also wanted to make something that myself, my teammates, and all of those that come after us would enjoy using — and not see it as clunky, outdated, or a chore to use.
That's where the details came into play. I believe that the care and polish you put into the small things eventually accumulates into the experience that the user is left with. So let’s take a look at some of the places where that polish stands out.
Here’s a look at a handful of the different top 'tab' button/slider styles I considered.
Some of them look exactly the same, I know, but they didn’t feel the same, and that was important to me. I eventually narrowed it down to custom toggle with tactile visual feedback to clearly communicate system status during navigation.
I explored different lower highlight options, but eventually chose to fully round the edges to feel like a hockey puck sliding across the surface.
Additionally, this highlight is not a static element; it dynamically scales its width to match the character count of the active tab. This creates a responsive experience for an interaction that team members may frequent many times a day. Transitions feel intentional and fluid.
I also opted for a greyed out 'false' state to make it feel like my 'hockey puck highlight' was bringing life back into the text as it slid over to greet it. This provides clear system status to the user and makes navigation intuitive.
Small details like these make a big difference when you really hone in on them. Take a look at these two examples and see if you can spot the difference.
These subtle transitions provide immediate confirmation of a user's action, creating a more tactile, responsive environment. This focus on the feel of the interface ensures that every interaction is intuitive and reinforces the user's sense of control over the product.
Now let's look at the team attendance filtering.
By animating the cards as they shift positions, users can visually track the reorganization, making the system's logic transparent and reducing the cognitive effort required to re-scan the list.
For buttons, pressing scales the button down so the user can feel the action they are taking. This provides immediate system status confirmation, and contributes to a tactile experience.
When a user signs up for a training session or carpool, they see real-time updates to reflect their participation. This immediate confirmation validates the user's intent and provides an instant 'success' state, which is crucial for maintaining a sense of system reliability.
Even the smallest navigational elements, such as the arrows on the roster page, were designed with precision. I implemented rotational transitions on these icons to accurately reflect the directionality of the dropdown menus.
I also had a ton of fun making different splash screen options for the MCT Hub.
In the early exploration of the loading sequence, I experimented with playful animations featuring rock icons to lean into the team's personality. However, through the lens of usability, a repetitive, time-intensive animation could quickly become a point of frustration for frequent users.
In an effort to ensure the splash screen didn't feel like an unskippable ad, I pivoted to a quicker splash screen that still held some dynamism.
This decision reflects my commitment to an interface that respects the user's time and focuses on getting them to their desired content as efficiently as possible.
Although I do find it fun to create micro-interactions or design 10 slightly different button options, that's not why I obsess over the small details.
My ultimate goal with all of these details is to create an experience that is effortlessly clear and intuitive. I am not designing to wow the user with ornamentation or demand their attention; rather, I am focused on providing a level of polish that the product would feel empty without.
A note on community
With so much of rock climbing and team dynamics being based on community, I also wanted me to intertwine it wherever I could.
Within the team group chat, I added a team roster that allows any team member to see who is on the team, learn a little bit about them, and give them an easy way to connect.
The design fosters a sense of belonging and camaraderie.
All of this information can also easily be edited via the profile page.
On the training page, I brought in a hint of community with a feature to see who signed up for posted sessions.
This visibility acts as an engagement loop, encouraging participation through team chemistry and shared goals.
A note on colors
When defining the visual identity for MCT Hub, I faced a strategic choice: strictly adhere to the University of Michigan’s signature Maize and Blue, or develop a distinct palette tailored to the team’s specific culture.
To many of us on the team, climbing was an outlet. It was an escape from academics and responsibilities, but also a way to exercise, socialize, and ultimately have a good time.
I didn’t want the MCT Hub to feel like a direct extension of the University because it was what many of us used to distance ourselves from our lives on campus. I wanted to pay respect to the team history and spirit, but breathe energy and a certain freedom from the university through color.
Ultimately, I chose to transform the signature blue color scheme that so many administrative apps share.
I moved directly from the navy of the University of Michigan to a brighter blue.
The refreshed colors represent the unique experience the MCT provides its members, away from university sanctions.
Next Project (Fray)
↓