Embody — Nghi Le

AI-powered workouts meet immersive 3D avatars for a personalized and engaging fitness journey.

Role

Product Designer
Brand Designer

Time

3 months
(Sep - Dec 2023)

Tools

Figma, Photoshop, Illustrator, Blender, Spline

Overview

Embody is a workout application that offers a highly personalized and engaging fitness experience, centered around customizable workout plans and creative self-expression through 3D avatars.

The challenge

Workout apps, while popular and convenient, face several challenges that can impact their effectiveness and user experience. Many apps struggle to offer personalized workout plans that adapt to individual user's fitness levels, goals, and preferences. Generic workouts may not be suitable or effective for everyone. They also face the challenge of keeping users engaged and motivated. If the experience is not fun and engaging, many users may lose interest or struggle to stay committed to their fitness goals.

The solution

Show me the app ↓

Brand Identity

Embody is not just a mobile workout app; it's a fitness companion designed to transform the way people experience fitness. Our brand identity reflects our commitment to helping users achieve their fitness goals while embracing their unique identities.

Core Values

The brand Embody is built around three core values:

We represent the embodiment of health, wellness, and individuality. Our app inspires users to embody their ideal selves through personalized fitness journeys.

We celebrate diversity, inclusivity, and the unique self-expression of each user. Proudly embrace your journey, your identity, and your goals with Embody.

We empower users with the tools, knowledge, and mindset to take control of their fitness journey. We believe that through empowerment, anyone can achieve their aspirations.

Personality

Our every decision on tone, design, feature, and strategy consistently reflects how we want the world to see us:

Innovative:
At the heart of Embody is a spirit of innovation, leveraging AI and cutting-edge technology to reimagine the fitness experience. The design elements are futuristic and sleek, mirroring the pioneering nature of the app.

Inclusive:
Embody values self-expression and creativity, so we ensure that our platform is welcoming and accessible to a diverse range of users. We strive to be ungendered, friendly, and respectful in our language and design choices. We are always open to different perspectives and constantly develop our features and visuals to cater to various fitness levels, body types, abilities, and identities.

Empowering:
We believe in empowering our users to reach their fitness goals. Embody delivers informative, clear, and concise workout guidance, tailored to each user's unique journey. Our app offers flexible and customizable options, allowing users to take control of their fitness path. You'll also find our optimistic and enthusiastic tone designed to motivate you to get strong, get confident, and push yourself beyond limits.

Fun:
Fitness is a marathon, not a sprint, and we get that lasting results take time. To keep users motivated, even when progress feels slow, Embody offers a vibrant and attractive UI, a humourous tone, quirky animations, and gamified elements to make your fitness journey not just rewarding, but also fun and engaging every step of the way.

Logo

The Embody logomark is a playful blend of the letter “e” and a winking face, featuring the app's core ethos of fitness and fun. The logotype, utilizing the Baloo font, complements the overall friendly and approachable feel of the brand. The vibrant gradient inspires inclusivity and self-expression on our platform.

The full-color, rendered logo is our primary logo and should be used in its original form without alterations on white, very light, or very dark backgrounds. In cases where a flat logo is needed, use only white, ideally accompanied by the brand’s gradient.

Colors

Bustling Blue and Versatile Violet are bold, vibrant colors that add splashes of delight to our brand identity and UI. Their shades and tints are used together as lively, dynamic gradient fills.

Midnight Rain and Snow are used interchangeably as our primary typography colors. Neutral shades of grey are also reserved for typography.

Typography

Quicksand is our main typeface with a clean, elegant appearance. It is simple and legible, while the stylish roundness sets a friendly and playful tone. Paired with the bold and bubbly Baloo as our logo typeface, this combination brings a modern, youthful vibe and reflects Embody’s creative and engaging nature.

Design Process

After brainstorming the brand’s values and main features, I conducted research on competing workout apps and character-creation tools to understand industry standards and user expectations. I then laid out the main user flows and developed them into sketches for the lo-fi prototype. A large amount of time was dedicated to crafting visual elements for the interface, such as the 3D models and animations, the avatar library, and in-app merchandise.

Competitive Analysis and Inspirations

I studied two leading workout apps with a large user base: Nike Training Club and Apple Fitness+.

Nike Training Club stands out with a solid information architecture, intuitive flow, and high-quality, diverse workouts and fitness programs. It offers tracking and achievement systems to keep users engaged. The visual design is sharp and clean, prioritizing functionality.

On the downside, the minimal design faces the risk of being uninspiring and impersonal. The app offers personalized suggestions, but the workouts and programs themselves are not customizable, limiting its appeal to varying fitness needs and preferences.

Apple Fitness+ has an attractive and user-friendly UI, featuring neon colors to energize and inspire movement. When paired with a wearable like the Apple Watch, it offers a state-of-the-art fitness tracking tool, enabling a holistic health and wellness experience.

While offering an extensive amount of workouts and fitness programs that would cater to a wider variety of users, the options may be overwhelming for beginners. Like other fitness apps, Apple Fitness+ also relies on pre-recorded workout videos so the level of customization is still limited.

I also examined various character creation platforms, from The Sims' game-based system to standalone apps like Bitmoji and Apple's Memoji, focusing on their design layouts and how they embrace diverse identities through customization options.

I was particularly impressed by the progressive gender customization in recent versions of The Sims, which allow for a mix-and-match approach to clothing, hairstyles, and physique regardless of the character's gender. A recent update of The Sims 4 introduced medical wearables like hearing aids and glucose monitors, along with top surgery scars and garments like binders, enhancing the representation of transgender characters.

Similarly, Apple's Memoji impressed with its array of gender-neutral options and features that represent cultural diversity and include disability representations like cochlear implants and oxygen tubes. Bitmoji, one of the most popular full-body personalized avatar tools, stands out for its intuitive user flow while catering to a broad spectrum of body shapes and personal styles.

Even though my current design of Embody is not fully developed to include all the inclusive options, these references were invaluable guidelines during my design process to ensure that Embody and its future enhancements are built on a foundation of diversity and inclusivity.

Planning and Sketching

In this phase, I mapped user flows on FigJam and sketched low-fidelity screens in Procreate. I introduced gamification, rewarding users with in-game currency for exercise time, which can be spent on avatar customizations, backgrounds, and visual effects. Streak-keeping and progress tracking were also incorporated to boost engagement.

Click on images to view in full-screen.

Developing Visual Style and Elements

I combined gradient and glassmorphism to create a modern, futuristic UI that feels both dynamic and inviting. Gradients symbolize inclusivity and energy, shifting subtly to inspire movement while remaining mostly static to avoid overstimulation. Glassmorphism adds depth, moving away from flat design while ensuring usability and readability.

For 3D models, I modified human base meshes in Blender and sculpted variations in Nomad Sculpt. The character rig, optimized for Mixamo animation, balances a stylized yet detailed look, drawing inspiration from Apple’s Memoji and Bitmoji to enhance user appeal. All models and animations were rendered in Spline for seamless integration into the prototype.

My 2D visual elements were brought to life using Illustrator and Photoshop, supported by Figma and Procreate. The hairstyles used in the avatar creation tool were adapted from the game The Sims Mobile, except for one (first one from the right) that I crafted to match the character rig’s hairstyle. Some elements such as the character’s selfie and fashion items were generated by Dall-E and manipulated in Photoshop to serve the prototype.

Early exploration of logo and visual style:

High-Fidelity Prototype

The high-fidelity prototype consists of two user flows: the onboarding process for new users and the workout flow for returning users.

Onboarding Process

1. Splash screen and welcome screen: Users are prompted to sign in or create an account.

2. Create an avatar: Not “your” avatar, just an avatar, meaning users are free to create anything they like. The app strives to be ungendered by using “Body Type 1” and “Body Type 2” and presents the options equally without assigning labels or sizes. Users also have the option to customize the avatar measurements.

3. Create an avatar (cont.): Users are prompted to take a selfie and customize to their heart's content.

4. Onboarding survey: Users are asked about their age group, goals, experience, equipment, and preferences so Embody’s AI can generate workout plans tailored for them. After that, they’re set to go!

Workout

1. Home screen: Embody suggests a new workout every time users open the app based on their goals, levels, and preferences. If users are in the middle of a challenge (a pre-designed series of workouts) they are prompted to continue. Users can generate a new workout if they don’t like the suggestions. A status bar at the top informs users of their streak and in-app fund. The navigation bar is located at the bottom.

2. Create new workout: Embody offers a mix-and-match system to give users full control over their workouts, using 3D avatars instead of pre-recorded videos for flexibility and customization.

My initial design (shown on the left) prioritized speed and efficiency, allowing quick workout creation. However, expert feedback highlighted a cramped layout and the need for more visual guidance. In response, I redesigned the screen to improve clarity and aesthetics (shown on the right). While it requires some scrolling, the new layout enhances usability, making the experience more engaging and intuitive.

3. Start workout: On the preview screen, users can have an overview of the whole session and watch demos if needed. They can also save, schedule, and share the workout. The audio setting options allow users to control the music, workout instructions, and sound effects. The countdown screen gives users a few seconds to get ready and then the workout begins.

4. Workout: Embody’s 3D avatars provide an immersive workout experience. A gradient-filled dashboard at the top displays a timer, workout details, and controls, visually cueing move completion.

At the bottom, users can modify or amplify moves to match their progress. This feature can be hidden for a more streamlined view.

I also designed the workout screen layout for both horizontal mobile and iPad interfaces. Taking advantage of the larger iPad screen, I incorporated audio control buttons for enhanced user experience.

5. User feedback: After each workout, the avatar celebrates with a quirky dance, adding a fun touch. Users earn tokens, save workouts, share experiences, and rate sessions. Embody also analyzes feedback and interactions to personalize future workouts based on user progress and preferences.

6. Update avatar: Users can spend earned tokens to customize their avatar in the Avatar section. The Closet tab stores purchased and free items, while the Store tab offers new premium clothing, shoes, accessories, and workout backgrounds. Items refresh every 14 days, encouraging consistent exercise to repurchase favorites.

Figma Prototype

Reflection

Embody was my first experience building a brand from scratch, and it was both challenging and exhilarating. Working with 3D characters opened up so many creative possibilities, and learning tools like Blender and Spline, while intimidating at first, really expanded my design skills. This project pushed me out of my comfort zone, moving me from minimalism to a bolder, more expressive style. Through countless iterations, I learned to embrace versatility and adaptability—traits that are essential for any designer.

Looking ahead, there’s a lot of potential to dive deeper into market and user research, refine testing, and explore how Embody could evolve into a VR/AR experience. My vision goes beyond just the look—it’s about creating an immersive fitness journey that truly enhances users' lives.