Revolutionizing Fitness Studio Support Technology

Revolutionizing Fitness Studio Support Technology

A mobile app to enhance personal connection between small businesses and their customers. A vision to scale.

arrow up icon

Vessel

Mobile App
01

Context & Discovery

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Heading 2

Heading 3

Heading 5
Heading 6

Heading 4

This is Heading 1

This is heading 2

This is Heading 3

This is Heading 4

This is heading 5
This is heading 6

bullet point

  • adfasdhfkja
  • akjdsfkja
  • asdfjkasdk;fjhasf

bullet point

  1. akdfal;jadf
  2. asdfjkha;skdf
  3. asdkfja;skldfjas;
  4. akdfjas;dklfjlsa

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Bold text

Header

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

I worked with AOYO-a technology startup, and Vessel pilates studio, to create a personal studio application that enables connection through an on-demand video class library, live virtual and in-person class scheduling, in-app shopping and much more. This product was designed to be scalable and leveraged by AOYO for other verticals outside of fitness such as political campaigning, communities of artists, influencer followings and beyond.

Vision 

COVID-19 created a massive shift reliance on technology and social media as a form of connection between small businesses and clients. AOYO noticed an opportunity and set out to create a platform to enable small businesses to customize a no-code mobile application to serve their unique followers with more control and value-provided than supported by existing social media platforms.

I worked as Lead Product Designer & Strategist with the AOYO team to make their vision come to life. In order to craft an end-to-end working experience for users, there were two main platforms I designed 2 platforms.

  • an admin panel where users are able to create custom mobile applications for their business needs
  • a flexible mobile application with features to fit the needs of many different verticals
Scope

During the process of establishing the vision for the entire AOYO (An App of Your Own) technology universe, AOYO began a partnership with Vessel, a woman-owned pilates studio in Texas as our beta user. We then spent 4 months testing assumptions and tailoring our existing designs to fit Vessel's unique business needs. For the purpose of this case study, I'm reducing scope to simply discuss my process of working with the AOYO and Vessel teams to design a scalable, custom mobile application that enables connection with studio customers.

Question

How might Vessel Pilate's studio connect with their customers with the help of technology in a meaningful and value-driven way?

Proposed Solution

A personal digital environment that enables connection between Vessel and their customers through an on-demand video class library, live virtual and in-person class scheduling, virtual boutique shopping and a community board with blog posts and studio notifications.

Challenges
  • Create a mobile application that has a great UX for clients and is simple to manage by our Studio owner
  • Don't recreate systems that already work for Vessel. Vessel uses MindBody for class sign up management & Shopify for their digital boutique so I needed to understand both APIs to be able to design the front end as a technical reality
  • Create a user experience that encourages users to adopt another mobile app with similar functionality as others.
  • Represent the Vessel brand authentically and create a space for meaningful connection between Vessel and their clients.
  • Keep all these Vessel specific challenges in mind while also designing in a modular manner for scalability and re-use within other business verticals.


No items found.
02

Process

Approach

I began this engagement with strategy & alignment sessions with all involved stakeholders to better understand the goals and desires and create a sense of shared clarity around the project. As lead product designer and strategist I got to dream with my clients and help establish the overall product vision

Because I had already gathered requirements and business needs from the AOYO team surrounding the larger project, I focused on understanding Vessel's business needs and their clients. After kicking off the engagement, I met consistently with Jessica, the owner of Vessel, to interview her about her clients and their behaviors to inform a user-centered design process.

A few of our many Miro boards used during our our Strategy & Alignment week of workshops.

Team

I collaborated consistently with key stakeholders & the director of engineering at AOYO, third-party marketing strategists, and owner of Vessel to align on our strategic vision and ensure the product would meet all business goals and end user needs. We met every weekly or bi-weekly depending on the phase to gather feedback, discuss requirements and technical limitations and ensure alignment with product vision and design.

Visualization of the iterative process

Prototyping & Validation

Once the Strategy & Alignment sessions were completed, I converted the ideas, inspiration, and objectives discovered in the strategic alignment phase into a lo-fidelity clickable prototype to use for further testing and validation.

After the initial designs were validated by stakeholders, I began the work of iteratively designing each necessary feature. I worked closely with the director of engineering to ensure technical feasibility and continued to gather feedback and iterate. Eventually the Vessel brand and needs were translated into high fidelity, robust designs ready to support the development process. I documented the Figma file with every detail and worked with AOYO to write robust user stories in Jira, in order to support an overseas development team.


No items found.
03

Outcomes

Solution

Ultimately, I designed an application that supports Vessel's business needs, provides a user-centered UX and supports future iteration with the technology.

The core Vessel features include:

  • Book virtual and studio classes in a seamless manner.
  • live virtual and studio class calendar.
  • Take classes from an on-demand digital library. Classes are categorized by skill, proficiency level etc.
  • Shop for items directly from live or on-demand digital classes or from the in-app boutique. If an instructor is wearing a top you like, product link is easily found and the user is redirected to the in-app boutique or external shop to purchase the item.
  • View the instructor team & learn more about your favorite instructors by viewing their favorite products in the shop, their articles they've written and the classes they teach both live and on-demand.
  • Vessel updates and blog posts are shared in the feed for users to stay up to date with all Vessel news

AOYO Admin Portal

In order to support the vision of a no-code mobile application builder, I designed an admin dashboard where users are able to customize their application for their business needs. Users are also able to intuitively track their application analytics and support their product with a basic cms.


Release & Ongoing Support

After months of design and development work, we have our Vessel mobile application built! The app is released in TestFlight and is being tested by a group of beta users at Vessel.

Beyond Vessel, I've worked with the AOYO team to retrofit the modular designs to test out different vertical possibilities and further explore the vision of what's possible with this technology.



No items found.
04

Artifacts

No items found.