Duolingo invited me to tackle a unique design challenge – crafting a seamless fitness experience called "Sweatness" that integrates into their existing app ecosystem, including Duolingo Music and Duolingo Math. This meant staying true to their established design DNA while adding my own creative spin to the user experience. 💚
This challenge included 3 distinct design deliverables:
Design a compelling, high fidelity, finished layout for the Sweatness profile header
Design a “follow” button and where to display Duo’s “followers/following” counts in the
final profile. Include designs for all states, flows, and/or actions that show how a user might follow (and unfollow) Duo
Design one a Daily Activity concept for how you might visually display at-a-glance daily activity in the profile of a fitness app.
Instead of building an entirely separate app, I envisioned "Sweatness" as a natural extension of the Duolingo universe. This is typically how Duolingo approaches new features, seeing Duolingo as the MVP and examples like Math, Music and Sweatness/Fitness as post-MVP features within the app itself.
Here's how I approached the design:
Blending in with the Family: Leveraging the existing design system – familiar components, fonts, and layouts – ensured immediate brand recognition. This created a cohesive feel, making users feel instantly at home in the new fitness environment.
My Personal Touch: While respecting the established look and feel, I injected my own design flair through subtle tweaks. This could involve introducing playful animations, gradients, unique iconography, or micro-interactions that enhance the user's sense of movement and progress.
Learning Through Fitness: Drawing inspiration from Duolingo's core language-learning experience, I integrated gamified elements into the workouts. Earning points, unlocking achievements, and competing with friends could motivate users to keep coming back for more.
Sketches and Design Considerations
A challenge I faced
While designing the fitness flow for Duolingo, I encountered a pivotal challenge: crafting a header layout that effectively presented key user information (username, location, bio, profile avatar) while seamlessly aligning with Duolingo's visual identity. This involved meticulously constructing a design system from the ground up, including importing hex codes and defining font sizes.
Foundation Building: I began by meticulously constructing a design system within Figma, ensuring consistency and visual harmony throughout the fitness experience, based off of the colors/fonts Duolingo gave me to work with.
Header Hierarchy: Designing for Optimal Organization: I conducted a thorough exploration of header layout options, considering various arrangements and visual hierarchies to present user information clearly and intuitively.
Social Media Inspiration: Learning from the Best: Recognizing the social aspect of the fitness app, I turned to leading social platforms like Instagram, Facebook, and Twitter for inspiration. I analyzed their header design strategies to glean best practices and potential solutions.
Duolingo DNA Preservation: Throughout the exploration process, I remained vigilant in upholding Duolingo's established design language. This involved careful analysis of their existing design system (from the language learning section) and style guidelines to ensure seamless integration of the header within the broader Duolingo ecosystem.
Infusing Personal Flair: While adhering to Duolingo's brand identity, I sought opportunities to inject my own creative perspective into the header design. This resulted in a unique visual solution that respects Duolingo's core aesthetic while showcasing my design ideas.
My design solutions
Daily Activity at-a-glance
My design proposal not only addressed the challenge of creating a cohesive fitness experience within the Duolingo family but also injected playful innovation and gamification to keep users engaged. I went above the challenge scope and included an interactive Splash screen and an onboarding flow idea.
What did I learn?
This project allowed me to demonstrate my ability to work with established design systems while adding my own creative vision – a valuable skill for any product designer.
This challenge helped me show that I can:
Navigate design system complexities
Conduct effective competitor analysis
Integrate insights from diverse sources
Deliver innovative solutions within established brand guidelines
I am very grateful that I was given the opportunity to design this concept for the Design team @ Duolingo!