UI + UX Design | 2 Months | Responsive Design
REDESIGN AN ADMIN PANEL
Vint builds gym and fitness software that helps businesses deliver a personalized service. Staff and gym owners use the SaaS platform to keep track of their clients and organize their schedules. Customers wanted additional functionalities in the admin panel to facilitate gym management. Our goal was to enhance:
- Member profiling and registration
- Class and Event creation
We had to keep the current visual style to keep the branding consistent. We also had to work within the existing dashboard and navigation structure.
I worked in a team with 2 designers and 1 project manager. I was responsible for creating the UX and UI, iterating and prototyping the membership experience (mobile & web).
Our design recommendations resulted in a 80% increase in staff member's ability to complete check in quickly without getting lost.
“Vint was pretty easy. The pictures seem easy. I’ve used Mindbody here and at Equinox, too. It’s [Mindbody] not as pretty looking. I like the prettiness [of Vint]. It makes me feel positive.” - Yoga Instructor at Orange Theory
We conducted comprehensive user interviews with gym staff and owners in San Francisco along with competitor research to understand the user, the pain points of the current solutions on the market and the fitness industry.
We created an affinity cluster map to group the feedback by themes. The top 3 needs focused on:
- Visual comprehension
- Event creation
COMPETITORS: UNDERCOVER OPERATION
In love and design all is fair game. We compared and tested the current systems in the market (and even impersonated a gym owner when calling for a demo). Using the tools helped us understand the short-comings and to be able to connect and discuss with interviewees (gym staff) these tools with more in-depth.
PERSONA: GYM STAFF
As a UI designer all visual decisions are still dependent on understanding well who will be using the admin panel.
Now that we had a better grasp on the user, Janet, and key pain points, we used Alan Klement's job stories framework to define features and the context for how they will solve Janet's needs. Each job story helped us create data models and task flows and also planned for edge cases.
When a client wants to know which classes are available, Janet wants to access a gym-wide calendar so she can tell the gym schedule.
I solicited ideas from the entire team via a design sprint. The team prototyped various solutions, voted silently before each of us presented our prototypes. The design sprint helped the team see both the macro/micro level of membership registration and see how it integrates into other areas of the admin panel (classes and calendar).
WIREFRAMES: MOBILE FIRST
We started from mobile and evolved the design to desktop. Along the evolution, I encountered several challenges.
After a round of feedback with the entire team and a one-on-one feedback session with the co-founder, I discovered it was challenging to show more than one registration option for different types of members/guests.
THE CONTROVERSIAL CHECK IN BUTTON
Even in high fidelity wireframes, we kept debating on placement and functionality of the check-in button. Interviewees highlighted this as the crucial feature that can make their work better than the current solutions in the market right now.
We worked from an existing style guide and aimed keep our designs consistent with the Vint brand. In this final prototype, a staff member like Janet is able to check-in people from multiple locations like profiles (existing members) or calendar (both members and drop-in guests).
MEMBERSHIP ACROSS THE ADMIN PANEL
We interviewed 10 gym staff/owners in San Francisco to get feedback on the final prototype. The final interview guide consisted of 10 comprehension questions and 6 tasks.
From the insights gathered, I learned "Drop-In" and "Quick Prospective" still needs refinement. One solution to eliminate the confusion is to go back to the original design where Staff can enter in the basic information for the guest and continue the registration process later.
REFLECTION: BREAKING THE SILOS
Though I only focused on membership in the design, I worked together with my other teammates especially after the design critique to test our assumptions. After presenting our designs to both the UI and UX team, we met up and tackled questions right away instead of putting away the feedback cards. This approach really helped me stay accountable and gave me a deadline to understand what we had resolve during design critique and what still was pending.