The Architecture of Engagement
As the lead designer of My Codi, I approached the desktop dashboard like shaping a purposeful space by organizing training data in a way that feels intuitive and engaging. The design brings clarity, motivation, and precision to athletes of all levels.
Led end to end the design for Community Homepage, User Profile, Conversations, and AI-powered Search.
Collaborated closely with PMs, engineers, researchers, over six months.
Integrate AI-powered insights to boost user engagement.
Applied consistent visual design principles to create a cohesive interface.
Codi app is designed to help maximize the power of Codi device. The app will provide a detailed analysis of the activity by comparing users performed motion with the correct recorded movement. Users can visualize and compare their performance data to have a better understanding of their skill imrpovements.
The Codi logo is a visual fusion of the letter C and the dynamic form of body movement, representing the core purpose of the app. By combining the curve of the letter C with the posture of an active human figure, the logo captures the energy and motion at the heart of sports training. The result is a modern, fluid symbol that reflects both technology and physical activity, making it instantly recognizable and aligned with Codi’s mission to bring fun and precision to every workout.
I brought researchers into the process early and initiated daily standups with them and the PMs to deeply understand use cases across different brands and personas. Like studying how people move through a physical space, I focused on observing real user behaviors to identify friction points and unmet needs. This foundation helped me design with intention, ensuring every element served a clear purpose within the overall structure.
Training in sports is all about repeating the same moves until you get them right. To improve, you need precise body movements. But for beginners, it can feel frustrating to practice without progress, especially if they don’t know the correct way to move.
I set out to understand the challenges faced by both beginner and professional athletes in sports training, with the goal of creating a product that simplifies the process and makes it enjoyable, encouraging them to stay motivated for the next session.
I conducted a competitive analysis on Apple Fitness and Nike HomeCourt to understand how leading fitness apps approach user engagement, training guidance, and performance tracking. This research helped identify gaps and opportunities that informed My Codi’s unique focus on real-time motion feedback, precision, and motivation for athletes at all levels.
Table tennis is a sport that demands high precision in body movements, making it an ideal example to demonstrate the value of the Codi device and app. For this reason, I chose table tennis as the focus for conducting three user interviews with individuals at different skill levels, each using the Codi system. My research goals were:
How do you learn to play table tennis?
Talking to people playing ping pong with Codi device gave me a good understanding of their needs & goals. I gathered useful insights and started to narrow down the scope of the project.
I applied the Hyperspace Atomic Design System (Sprinklr Design System) to bring structure and clarity to the Community platform. Inspired by architectural systems, I approached the interface like a modular framework with repeatable design elements that scale seamlessly across brands. I used zoning to organize reusable patterns, applied visual rhythm for consistent interactions, and introduced hierarchy to make content more scannable and easier to find. The result is a modern, cohesive experience that feels intuitive and engaging.
Objective: As a person with not much experience playing ping pong while using Codi device, I want to review my moves after on my desktop to see what I have done right or wrong.
Talking to potential users at different ping pong clubs, it became clear that some folks prefer to use their personal smart phone when reviewing their fitness/sport performance such as Apple Fitness App. Reflecting on this need, my fellow designer have started working on a Mobile version simultaneously. I adopted a Desktop approach when considering key features to be designed in the first MVP of Codi. I composed a plan of what the desktop version will include in terms of features and functionality & how they will build up on the mobile version.
Before starting to work on initial sketches of each feature, I visualized the Information Architecture of the app into a sitemap, based on the user flows. The first version of the sitemap was tested through an Open Card Sort. Some useful insights from how people grouped the content led me to important adjustments of the Sitemap:
Codi is about precision, energy, motion and positivity. In order to express the feeling of Codi, I have discussed with the project manager, developers and CEO about the color themes by providing visual inspirations. Body motions, UI elements and typography are the primary focus of the dashboard. Therefore, we come up the idea of dark theme paired with neon contrast colors where it could speak a more powerful language to the users. We have switched the original neon orange of Codi to a neon green because we believe it is a more energetic approach. I used the Visual Inspirations, Moodboard and Style Tiles library as a starting point and developed a more detailed Design Language document such as Logo Redevelopment, UI elements. It’s purpose is to ensure consistency and communicate the language of Codi to our stakeholders.
Explore these projects for more insights and inspiration.
