AVA Fitness
AVA Fitness
👤 Solo project
🕒 4 months (Jan-Apr 2023)
🛠️ Figma, FigJam, Adobe Illustrator
Check out the interactive prototype here! 📱
A Real Solution for a Real Problem
AVA Fitness is a Vancouver-based pole dance and aerial fitness studio that aims to provide an inclusive, body-positive, and empowering experience for students of all levels. Founded in 2010, the studio has 500+ clients as of 2023.
Our mission is to provide a safe, judgment-free space where everyone can be free to be themselves and discover what they are truly capable of.
- Jessica Lyn (Miss J), Founder
As an avid pole athlete and a regular at AVA Fitness since 2021, I had long since identified a problem with their UX — their mobile app experience clashed with the experience of taking lessons in person. The studio is a vibrant and supportive community, but the third-party app is clunky, outdated, and inaccessible, missing the mark at addressing AVA’s value proposition to its target audience.
After chatting with my fellow students and instructors, I decided to redesign the AVA Fitness app. I brought the idea forward to Miss J, the founder, who agreed the app needed an overhaul and was more than happy to see my solution.
Setting a Timeline
Being the sole UX Designer and UX Researcher on this project, I had to identify my own design process workflow and framework.
I took an iterative, or agile, approach between steps, creating the MVP as soon as possible so I could test my prototype and iterate based on user feedback.
The User
AVA Fitness serves users of all genders, backgrounds, and abilities. I interviewed current students as well as instructors and staff to represent the diverse user base as accurately as possible. From the interview results, I created a persona for Claire, a current AVA Fitness student.
I chose to target current rather than prospective students because of my assumption that those who download and use the app already know of AVA Fitness and are looking to re-book a class. This assumption was confirmed during my user interviews. Thus, I decided to focus on improving retention of an existing customer base.
Product Goals: Combining User and Business Needs
I interviewed 4 users—3 current AVA students and 1 instructor—and had a chat with Miss J. My findings were summarized as follows:
Users expressed the need for a calendar view to allow them to pick the dates of the classes they wanted to book.
Pages and information were hard to find, leading to unmet expectations of what classes at AVA were about.
Gender options were limited to male/female, leading to trans and gender diverse students being unsure if they were welcome to book classes at AVA.
On the business side, Miss J outlined the following requirements:
More brand customization that adheres to AVA’s mission statement.
The ability for clients to use gift cards at checkout, leading to a streamlined checkout process.
Reward points being accessible from the client’s home screen.
After affinity mapping my interview findings with Miss J’s requests, I found that both the user and business concerns fell under 3 categories:
Ease of use: Users wanted to accomplish their tasks (i.e. booking, purchasing) more efficiently.
Information Architecture: Users had trouble locating what they were looking for.
Inclusivity: Users did not feel that the app reflected AVA’s inclusive and welcoming brand.
Finally, I turned these findings into actionable product goals:
The new AVA Fitness app must be easy to use, have an intuitive information architecture, and feel inclusive of all users.
Defining Key Features
When first undertaking this passion project, I made the mistake of wanting to solve every problem mentioned by every user, and adding all the new features suggested by my interviewees. I ended up creating too many complex task flows beyond the scope of a solo project, and quickly learned I had to prioritize by solving only the key UX problems.
Thus, I created 3 task flows for the most common tasks of the interviewed users:
Booking a class or event
Making a purchase
Personal development (setting goals and customizing profile)
Here is one of the task flows I created. This one focuses on booking a class.
In creating this flow, I focused on streamlining the task. The old app required the user to scroll through every class, all the way down to the bottom, making it needlessly tedious to book a March class on February 1st. With this new flow, the idea was that the newly added Date Picker modal would allow users to choose their desired dates,
Class details and successful booking confirmations were a separate screen on the old app, but were also changed to modals, making it easier for the user to accomplish tasks without exiting the page.
The First Iteration
With the 3 main product goals and the 3 main flows in mind, I created wireframes for the app.
Revamped Home Page
Upcoming classes
Checking their schedule is the #1 task that users said they use the app for.
By placing it directly on the home page, the amount of time taken to complete the task is minimized.
Customizable goals
Empowering users of all athletic abilities and exercise habits.
What’s new
Keeps users in the loop for events happening at AVA; highlights community involvement, a key part of the AVA brand.
Bookings
Purchasing
Easily navigable tabs for packages, memberships, events
Can go directly to store from class and event bookings page without disrupting the initial task flow
Usability Testing
I tested the lo-fi prototype with 5 users (2 current students, 1 past student and 2 new students). 3 tests took place in person, and 2 took place virtually using Figma and Zoom.
What users liked ❤️
Friendly language and imagery/emojis.
Home page contained all the important information that users sought from the app.
Clear layout of Booking page.
Flow and navigation throughout app is intuitive, with the ability to go from Bookings right to Events
What could be improved 💡
Adding ‘Back’ buttons to each flow.
Adding emojis to denote types of classes (New, Popular, etc).
Adding animations to make experience interactive and lively.
Flesh out the rewards system.
Users were confused as to whether Events should be included under Bookings or Store.
Overall, users had very good impressions of the app. Those familiar with the existing AVA app stated that they would prefer this version over the original, which was a sign that I was headed in the right direction.
The suggestion of including Events under only Bookings or Store pages gave me a bit of trouble. After consulting a mentor with experience in app prototyping, I decided to allow users to purchase event tickets under both Bookings and Store. This type of information architecture would allow users to quickly accomplish their desired task without having to search through various pages.
Design System: Where Branding meets UX
As someone with a background in graphic design and marketing, I have always had a passion for creating branding elements that allow brand personality to shine through while keeping user experience at the forefront of its goals. Creating AVA’s new design system was one of my favourite things to work on during this project.
Since AVA did not have any existing brand guidelines, I had the creative freedom to start from the ground up, using atomic design principles to create colours, typography, styles, and components from scratch that targeted AVA’s user and business needs.
Brand Refresh
Original logo
New logo
I first started by refreshing the AVA Fitness logo to something more modern, easily legible, and inclusive. The AVA Fitness studio in New Westminster has pride flags hung right on its doors and windows, signalling to people of all identities that they are welcome at the studio—however, this welcoming atmosphere isn’t shown as part of the app branding. I kept the butterfly wings of the original logo, made them more minimalistic, and added the colours of the pride flags to each of the two wings.
Atoms
The primary colour, magenta, represents positivity and femininity.
The secondary colour, purple, is both sensual and uplifting.
The font, Modern Era, is utilized due to its circular letterforms and curvy tails that lend a friendly and stylish appearance.
It is also sans-serif for easy legibility, which is important for mobile users who are on the go.
Molecules
I combined the primary and secondary colours along with the selected typeface to create reusable components that are customizable with variants.
Since accessibility is important to AVA’s mission statement, all colour contrasts meet WCAG AA accessibility standards.
Organisms
These larger components made up of smaller molecules contain real imagery of AVA students, staff, and instructors—something the original app was missing.
Animations
To make the user experience more engaging, I created a new loading animation for the app. Previously, as the user loaded in, they would only see a photograph of Miss J. This new animation makes the waiting process a lot more fun—and tells students exactly what they’re getting into, which is pole dance!
I used moving waves on this animation, as well as throughout the app, to suggest a sense of movement, flow, and depth fitting for a dance studio.
Hi-Fi Prototype
In creating the hi-fi prototype, I took into consideration the Product Goals I defined in the initial stages. I made sure that each screen and interaction reflected these goals.
Ease of Use
With the date picker modal, viewing and booking classes for desired dates is much easier — no need to scroll all the way to the bottom.
The user can quickly navigate between the Bookings and Store pages.
Information Architecture
The first thing students check when opening the app is their schedule. Thus, it has been moved to the top of the home page.
Rewards are now accessible from the nav bar. Previously, most students did not know how to access rewards, or that they could earn rewards in the first place.
Inclusivity
Pride imagery is present on the new AVA logo.
Accessible buttons and colour contrasts make the app much more easy on the eyes.
The profile page now includes diverse gender options while respecting student privacy. Students can customize gender and pronouns while choosing what instructors can and cannot see.
Next Steps
Further Usability Testing — Despite testing with a variety of users at the lo-fi stage, I have not yet tested the hi-fi prototype with real users. I aim to test with at least 5 more users and compile their insights for further areas of improvement on the app.
Pitching to the Client — This was my first time working on a real client project, and Miss J’s insights were invaluable. I learned a lot about balancing what the user wanted with what the business was trying to accomplish, and how to make a great product that meets the needs of both. To continue perfecting the AVA Fitness app, I will present my research, rationale, and final app design to Miss J and incorporate her feedback.
Collaborating with Developers — Given that this was a solo project on a short timeline, I was unable to work directly with developers. While this has granted me a lot of creative freedom and an incredible learning experience, I realize that real app development has constraints like budget, timeline, and scope that I have not yet considered. I aim to communicate with real app developers in order to determine which key features are feasible, before launching the AVA Fitness app and bringing it to market.
