KINA
Making the “fitness journey” doable for normal people.
ROLE — UX & UI Designer
DURATION — July to August 2025
TOOLS — Figma
I grew up finding mandatory gym class to be a waste of time and a frankly embarrassing ordeal, but as fate would have it…I married a man who believes that exercise is “fun” and “good for you.”
This man recently bought a rowing machine for us, and I immediately had a problem.
Well, many problems:
I did not know what a “rep” or a “set” was;
I did not know how to use the machine; and
due to problems 1 & 2, I couldn’t motivate myself to row.
I understand all too well that getting into fitness can be intimidating, so I jumped at the opportunity to work on a fitness app geared towards people who are just starting out.
The Story Behind Kina
⚡️ The Challenge: How can I design an interface that helps beginners get started and stick with exercise?
By the time I took on this project, much of the UX research was already done. I pulled the data together into a user persona to get a clear picture of who I’m designing for:
Meeting Our Users and Their Needs
Based on Rachel’s goals and needs, I sketched out a set of user stories and flows that would shape my app's key features.
Armed with Rachel’s story and a rough sketch of the app’s navigation system, I began to design some solutions. My journey to Kina’s final design was a fun one, filled with many iterations and exploration. Here’s a peek at how it all went down.
Of Sketches and Screens
✏️ Paper Wireframes
I started by sketching ideas on my tablet, playing with how the features should fit together. As I went, I asked myself questions such as:
How should the navigation work on a web app instead of a mobile app?
Should this piece of information be displayed as a pop-up or as its own separate page?
How can I fit the core features into as few pages as possible, without each page looking messy?
🚀 Wireframing in Figma
The next step was moving my ideas to Figma so I could start shaping the app digitally. This stage introduced some new questions, like:
How can I use grids and spacing to keep things organized intuitively? How much breathing room should I give each element?
What kinds of interactions and UI patterns would feel familiar to users?
Which features would someone like Rachel (a tech-savvy, beginner exerciser) want to see on each page?
🎨 Mood Board
Once I had a few key screens laid out in Figma, I shifted my thinking from structure to style. Since I’ve been building a user experience with guided session plans, friend invites, and a focus on accessibility and encouragement, I wanted Kina to feel both light and energizing.
Guided by the keywords fresh start, positivity, and growth, I created a simple mood board to anchor the colors and overall design direction.
🌈 Adding Color & Style
I was so excited to finally have a clear direction for Kina’s look and feel. The next step was applying those colors and design cues to my wireframes. This shift from grayscale to high fidelity allowed Kina’s personality to begin to shine... (!!!)
At this point, I was ready to make my mobile web app responsive. But before diving in, I created a detailed style guide to keep the design consistent (and to make future hand-offs easy).
This guide goes over the core visual language (e.g., colors, typography, iconography) and sets the foundation for how Kina should look and feel on any screen.
Take a look! :)
Solidifying the Brand
With the style guide in place, I could start thinking beyond the mobile screen. What if Rachel wanted to watch a tutorial on the iPad? Or use her laptop to schedule her workouts more easily?
In an effort to meet those needs, I began adapting the design for tablet and desktop screens.
Adaptations for the Big Screen(s)
Sign-Up Page
On tablet and desktop, the sign-up flow adds space for learning more about the app.
Dashboard
Navigation and layout changes a little depending on the device. Naturally, the desktop version surfaces more information per page.
Workout Library
Mostly consistent across devices, with desktop offering a wider search experience.
As I wrapped up the design, I fleshed out the screens and refined the user interface. From there, I layered in interactions and animations to bring Kina to life.
Here’s a look at the finished product — along with a quick example of one of the animations in action!
A Vision Realized
If you know of an app like Kina that already exists, please let me know because I need it in my life!
This project has been a grand opportunity to stretch my UI skills and dive deep into the details. Over the past two months, I learned about branding, obsessed over colors, squinted to count pixels, and iterated again and again across twenty-something screens.
It hasn’t been long, but I saw myself grow alongside Kina. She taught me the power of simplicity and challenged my perfectionism until I learned to let it go. Along the way, I discovered how much I value feedback! It pushes me as both a designer and a person, reminding me to take myself a little less seriously and others a little more.
I’ll definitely miss working on Kina, but I’m excited for all the learning and designing that lies ahead.
Until next time. 💕