VINT

UI + UX Design | 2 Months | Responsive Design

PROJECT OVERVIEW

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 

CONSTRAINTS

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. 

ROLE

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).

OUTCOMES

AFTER

BEFORE

RESULTS

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

DESIGN PROCESS

UNDERSTAND

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. 

INTERVIEW SYNTHESIS

We created an affinity cluster map to group the feedback by themes. The top 3 needs focused on:

  • Visual comprehension
  • Event creation
  • Agility

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. 

JOB STORIES

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.

EXPERIMENTATION

IDEATION

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).

vint GV design spring.png

WIREFRAMES: MOBILE FIRST

We started from mobile and evolved the design to desktop. Along the evolution, I encountered several challenges. 

EARLY ITERATION

MID ITERATION

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. 

PROTOTYPE

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

VALIDATION

USABILITY TESTING

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. 

EVALUATE

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.