Fitmate
01
Research
02
Strategy
03
Graphic Design
04
UI Design
05
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.
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.
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.
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.
HIIT
#2E9EF9
Power Green
#48E085
Energetic Blue
#0439E1
Motion
#3CC3E0
White
#FFFFFF
Black
#2C2C2C
Exo
Bold
Exo
Light
Exo
Regular
Exo
Medium
Typography
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.
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.
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.