Qi

Inspiration

We got our inspiration from Traditional Chinese Medicine (TCM). TCM is based around qi, life-force energy. Qi effects your moods, your mental health, physical health, healing, and etc. What makes qi an invisible sense is that you can only see the after-effects of qi imbalance; through pimps, extended warmth, anxiousness, etc.

What it does

This application is a wearable-supported mobile application that tracks the user's qi energy. It tracks the user's qi, and gives users' recommendations to balance out their qi, based on their current qi energy; through different teas, recipes, stretches, and breathing exercises. Key features include:

• Status page — A live yin–yang tracker visualized as a rising and falling water circle. More water = more yin (cold); less water = more yang (hot), with captions containing simple language like "running warm" and immediate suggestions.
• Elements page — An interactive wheel across the Five Elements: wood, fire, earth, metal, and water, each linking to curated articles, teas, recipes, and stretches.
• Summary page — A qi flow chart showing your energy fluctuation across day, week, month, or year.
• Profile & Settings — Editable personal info, accessibility options, background appearance, and privacy controls.

How we built it

We built Qi in 3 stages.

• Firstly, we discussed the various possibilities of tracking a "new sense." After thousands of FigJam post-it notes and scribbled paper wireframes, we ultimately decided to tackle the question many people ruminate on understanding no matter their background: "how to find balance?" Qi allows us to formulate a solution to that question and help people prioritize their body's cues.

• Next, we grounded the concept in Traditional Chinese Medicine research, yin–yang states, and the five elemental theory. We then developed paper prototypes, iterative sketching, user flow charts, and created detailed user personas representing the struggles of everyday people.

• Finally, we created style guides, prompt handling iterations, and multi-model FigmaMake generations to create Qi. We had to plan out each screen's purpose and navigation flow, and established the visual language that defines Qi's brand identity.

Prior to the Make-a-thon, our team attended workshops and watched videos on how to effectively maximize FigmaMake as a design tool. From these preparations, we learned to write a detailed structured outline for the application specifying intentions, core features, page structure, and visual design direction. We then synthesized that outline into a prompt format that FigmaMake could better digest, feeding it through ChatGPT first to structure our writing before pasting it into FigmaMake. After the initial generation, we regrouped as a team to revise the information flow and work through edits screen by screen, discussing feature implementation, structure, and information hierarchy until the product felt cohesive and intentional.

Challenges we ran into

• Translating traditional Chinese medicine into data was the hardest problem.

Concepts like "excess Fire" or "Wood" are qualitative and deeply contextual in traditional practice, therefore condensing them into measurable thresholds presents a challenge in defining Qi as a “new sense”. To overcome this challenge, our team decided on create an interface that is more universally understandable through percentages and visual illustrations of the Status’s pages Ying-Yang water flow that increases and decreases depending on level of Qi or the elements pages that provides reasons towards a person’s Qi levels through a measurable representation of percentages.

• Avoiding wellness-app clichés & privacy concerns was subtler but just as real.

As designers it’s pivotal to understand how our products interact with the real-world, so inquiries of privacy boundaries and ethical tracker emerged naturally during the brainstorming phase. We kept returning to one question: does this feature help the user feel more connected to themselves, or more surveilled by their phone? Ultimately, we decided that Qi is an interface that represents the person as an individual, not a data point to be optimized. Your qi is yours alone, so only qi is measured by the application and not external, unnecessary data collection.

• Designing with AI was our most expected challenge.

Building an entire app through FigmaMake meant taking away a level of creative control we as designers are accustomed to. We overcame this by front-loading as much of our creativity as possible into the earliest stages of the process. Through physical paper wireframes, in-person brainstorming sessions, and deeply human user personas, we ensured that by the time our vision touched an AI tool, it was already distinctly ours. As a result, Figma Make accelerated our design rather than overtake it.

Accomplishments that we're proud of

We are proud of learning how to optimize AI technology to bring our creation into a reality. Within a short time span we were able to hash out a whole application concept, ideate user personas, combine our design processes, and create an experience that feels truly connected to a person’s sense of balance. We are especially proud of our decision to utilize Qi as our application's theme, as deciding amongst the wide range of human senses, we believe we address a crucial sense that empowers people’s wellness through giving the knowledge and ability to understand what they consume on a daily basis.

What we learned

We learned that making the invisible visible is genuinely hard design work. Representing qi as a fluid water level, or mapping five elements to a dynamic wheel, required thinking about metaphor and motion, not just the visual aspects. We also learned that traditional Chinese medicine is a richer, more internally consistent system than we initially expected. It's not a set of superstitions; it's a patterned framework built over time built to provide people with longevity and nourishment, and engaging with Qi’s history truly made our product better.

What's next for Qi

The next step is incorporating Feng Shui into the next iteration, extending Chi's holistic framework beyond the body and into the spaces people experience every day. Just as qi flows through a person, it flows through environments too, and we want Chi to eventually reflect that connection.

Beyond that, we want to introduce an user feedback layer, where try to accurate our information to the culture. We want to be empathic and to the culture we are designing our app around. We are also exploring a practitioner mode, where a TCM practitioner could view a patient's qi history to complement an in-person consultation. Long term, Chi could become a longitudinal health companion, one that doesn't just track how you feel today, but helps you understand the slow patterns shaping how you feel over years.

Built With

• chatgpt
• cluade.ai
• figmamake