Most of us want to lead a healthy lifestyle, but many of us don’t always have the time to make the necessary adjustments in our lives. According to the Independent, most people find it hard to go to the gym four or five times a week, which is the ideal frequency to see results, because of time and scheduling issues. That’s why digital fitness apps are so popular, and it’s something designer Cody Brown has thought about a lot. His Tractiv UI Kit for Adobe XD will help UX designers create a better kind of fitness app. The goal is to inspire and motivate users to make exercise a more regular part of their lives. He gets the whole “I don’t have time” dynamic.
“The original idea I had for Tractiv was actually derived from a problem that I struggle with in my life when it comes to fitness. Often, I will procrastinate and not carve out time for my fitness activities, and that’s a real issue. So I decided to suffocate my excuses and come up with a solution to hold myself accountable,” Cody said.
Getting the most out of Tractiv
Tractiv has many social and gamification aspects that are key to users getting the most benefit out of a fitness app. When you have a reward system that incentivizes you to achieve, such as dragging chips onto the interactive calendar, and a system that encourages you to share your progress with friends and family, you create more motivations for users to delve into fitness.
The Tractiv fitness UI kit for Adobe XD.We asked Cody about his inspiration for the UI kit and how designers can best use it. First, here’s how to get started with Tractiv:
- Step 1: Get the latest software. Make certain you have the latest version of Adobe XD.
- Step 2: Download the Tractiv UI Kit for Adobe XD.
- Step 3: Explore the prototype. After opening the kit inside XD, click the play button at the top-right of the screen. This opens the desktop preview. Now, you’ll be able to explore the app’s onboarding flow, as well as navigating other pages included in the kit. This will let you see how Tractiv will work on a real device using XD’s powerful prototyping options.
- Step 4: Customize colors and symbols. Start building your own fitness app with Tractiv. Select buttons and icons to create a user-friendly experience. Choose a warm color palette and easy-to-read type to encourage physical activity. Choose from various screen designs for a modern UI and specific use cases. Quicken your workflows with Repeat Grid, and apply different overlays to simulate real user interactions.
How modern UX can help the modern person’s fitness goals
Cody’s philosophy for creating Tractiv was to establish an emotional connection with users based on normal human interactions, together with a non-tech solution he initially devised to keep him on track with his fitness goals.
“The concept was simple. Design a physical punch card that fit within my wallet to stay on top of my goals for the week. The card consisted of all the days of the week and minimally designed activity icons that I could check off with a marker as I completed them,” said Cody. “When Adobe approached me to make this UI kit, I took this idea and expanded upon it within the Tractiv app. I evolved the activity icons into digital chips that you could drag onto an interactive calendar when you completed a task. The feeling of dragging a physical chip onto your calendar is satisfying, just like filling in the icon with the marker on your card.”
Some of the social and functional features of the Tractiv fitness UI kit for Adobe XD.Designers like Cody have a real opportunity to test out new approaches to motivate people to become fitter. Specific design choices in an app’s UI can make all the difference in the world to creating an app experience encourages, supports, and makes people feel positive about using an app to increase their weekly fitness levels.
“With Tractiv, I utilized what I consider an appealing and bold color palette that’s easy on the eyes, along with an approachable typeface that can communicate optimism and a sense of encouragement to users. The humanistic and geometric typeface Europa seems to have that friendly flair that I wanted to convey in this app. I also introduced a set of custom-designed icons with subtle rounded caps and cards, with rounded corners to compliment the typeface and help push that approachable feeling,” he said.
Understanding the fitness community’s UX preferences
Cody has been a professional designer for the last seven years, and credits his childhood fascination with creating something out of nothing as the driving force behind his creativity: “From filming and editing silly home movies with my cousins to illustrating and animating my own cartoon characters, I explored every creative outlet I could get my hands on in order to identify what would make me happy long term. This constant exploration, paired with my desire to learn new creative disciplines, equipped me with a diverse skill set to become the multifaceted creator I am today.”
This love of experimenting with creativity eventually led to Cody’s current position as spin studio Pure Indoor Cycling’s lead designer for its app and consumer-facing website. His responsibilities include designing and iterating features to optimize the studio’s performance and bring in more clients.
Tractiv UI Kit creator Cody Brown.It is his time as a designer in the fitness industry that led him to notice certain UX design patterns that resonate with users in this industry.
“I’ve found that spending more time defining a clear hierarchy of information and data is extremely important to certain metrics you display on screen. I strive to create experiences that are attractive, intuitive, fun, and provide accurate and readable information right away,” he said.