Person hand holding loading screen design for a fitness AI app.

Project Disciplines

Graphic Design
UI Design
Web Design and Development

Personal Trainer Meets AI Technology

Ready to reshape technology in fitness, Fitmate collaborated with ArtVersion for sleek a visual design system.

Fitmate is shifting the way people work out by providing their users with a personal trainer at the click of a button. Fitmate’s technology utilizes AI chatbot functionality to personalize and tailor workout routines on an individual level. When Fitmate came to ArtVersion, the team was entrusted with developing a front-facing website and designing a UI kit for their app interface. ArtVersion took on the initiative to create an overarching design story that matched the innovation and high energy of the athletic industry.

A homepage UX/UI web design for a fitness company.
A "My Workout Plan" web UI design with slider functionality.
A "Fitness Tracker" web UI design for a fitness AI company.
An "Exercise Library" web UI screen design and a loading screen on a lower resolution device.

Seamless Scalability

To align with Fitmate's advanced technology, ArtVersion designed a scalable visual model.

Fitmate’s AI technology is an expansive system, as it caters to each user’s inputs with personalized outputs, alongside workout recommendations based on mood tracking, schedules, and intensity. ArtVersion implemented Fitmate’s website on a scalable CMS, WordPress, to withstand a variety of media playlists, workout courses, as well as the chatbot functionality itself, within the UI/UX integration. The website also included access points for users to sign up and make an account to register their metrics and information that could track their workouts, progress, and more. The collective user experience was designed with seamless pathways integration for an intuitive user flow, which was further carried over to responsive environments as well.

A chat mobile UI design for an AI fitness company.
A "Workout History" UX/UI design.
A mobile web design screen UI showing "My Workout Plan" section.

Form, Function, and Responsive Design

Form and function were further built upon each other, with the development of a UI kit for their mobile app.

ArtVersion designed the UI on the front end of the app, and Fitmate’s technology could later be implemented on the backend, both critical layers to the app’s foundation. Accessibility was a key focus, ensuring users could seamlessly transfer their workouts from home to the gym, with fitness metrics tracked and logged for effective progress monitoring. Therefore, ArtVersion’s design team and Fitmate’s development team scheduled collaborative sessions to ensure all nuances and flows were optimized effectively. The final result was enhanced app usability which set a new standard in personalized fitness technology.

The client's logo on gradient background.
Three weight plates on a dumbbell.
A drawn version of the client's logo in a sketch book.
Custom icons in black on green tiles.

Color Selections

The overall color story of the website and interface leaned into bright blue and green hues to evoke a level of vibrancy and energy. Vibrant colors also helped create a UI system that was visually intriguing for the graphic elements to pop out. The addition of black provided a necessary contrast, grounding the vibrant colors and ensuring the design didn't become overwhelming. All colors were tested to ensure ADA compliance and meet accessibility standards for all interfaces.

Power Green
Energetic Blue
Exo typography selection in a bold weight.
Exo typography selection in a light weight.
Exo typography selection in a regular weight.
Exo typography selection in a medium weight.


For the typeface selection, Exo matched the design language the best. The Google font communicates energy and innovation with its modern style and versatility. The slightly futuristic feel of the typeface aligned well with the fitness industry along with clean, sharp lines for high readability across various mediums. Additionally, Exo comes in a wide range of weights, providing versatility in marketing and branding materials, which was crucial for creating a strong, adaptable visual identity for Fitmate.

A Exercise Library UX/UI tablet resolution design screen featuring floating tiles.
A "Progress Tracker" UX/UI screen featring custom iconography and custom results.

Intuitive Design 

To provide Fitmate with a complete visual story, ArtVersion designed graphic elements for all aspects of the interface.

In refining the UI design, ArtVersion developed a complete design system specifically for Fitmate's chatbot functionality. This central feature of the platform utilized a visually appealing chatbot model, designed to enhance user interaction by personalizing workout recommendations. Users could input their daily mood, which informed the AI's suggestions for suitable exercises and regimens. Given its significant role as the primary interface for user engagement, ArtVersion prioritized creating a UI that was future-forward and user-friendly. Additionally, the design elements were built to be highly responsive and intuitive for dynamic interactions.  The design incorporated elements of the web design to tie in a complete visual story.

A person looks at tablet in gym juxtaposed to a "Active Zone Minutes" tablet screen.

The Outcome

The collaboration between ArtVersion and Fitmate culminated in a transformative digital fitness experience that positioned Fitmate at the forefront of personalized fitness. ArtVersion’s strategy for designing the web and app interfaces resulted in a cohesive, intuitive user experience that integrated advanced AI functionalities with a user-centric design. Fitmate now attained the resources to launch their technology into the world and set a new benchmark in the industry with a highly personalized workout approach for those on their fitness journeys.