Work 02
Series of UX-first designs made people want to workout
Role
Designer & Developer
Role
Designer & Developer
Read time
10 mins read
Read time
10 mins read
Timeline
Feb-March 2025
Timeline
Feb-March 2025
App
Netrin enhance
App
Netrin enhance
Role
Designer & Developer
Read time
12 mins
Timeline
March-June 2025
App
Netrin enhance
Want to see this story for yourself?
Highlights
The Problem
From user interviews, we found people are confused about the app’s overall flow.
Painpoints
Users said they lacked sense of accomplishment and couldn’t clearly track their progress.
Constraints
No major backend changes allowed, improvements had to use existing data.
The Solution
Revamped screens highlighted key metrics, clarified flow, and showed progress meaningfully.
Design Process
Revamped and built 40+ screens to improve UX while elevating UI.
Development
Migrated to newer screens with modular components and updated test coverage.
Reflection
User feedback shaped improvements, asking why guided better product decisions.
The Problem
From user interviews, we found people are confused about the app’s overall flow.
Painpoints
Users said they lacked sense of accomplishment and couldn’t clearly track their progress.
Constraints
No major backend changes allowed, improvements had to use existing data.
The Solution
Revamped screens highlighted key metrics, clarified flow, and showed progress meaningfully.
Design Process
Revamped and built 40+ screens to improve UX while elevating UI.
Development
Migrated to newer screens with modular components and updated test coverage.
Reflection
User feedback shaped improvements, asking why guided better product decisions.
The Problem
From user interviews, we found people are confused about the app’s overall flow.
Painpoints
Users said they lacked sense of accomplishment and couldn’t clearly track their progress.
Constraints
No major backend changes allowed, improvements had to use existing data.
The Solution
Revamped screens highlighted key metrics, clarified flow, and showed progress meaningfully.
Design Process
Revamped and built 40+ screens to improve UX while elevating UI.
Development
Migrated to newer screens with modular components and updated test coverage.
Reflection
User feedback shaped improvements, asking why guided better product decisions.
The Story
We rewrote the movie so that scattered scenes turned into a story the audience could follow.
The Problem
The Problem
The movie already had strong actors and great scenes — sessions, readiness, checkpoints — but without a screenplay, the story made no sense. The audience left the theatre confused.
The movie already had strong actors and great scenes — sessions, readiness, checkpoints — but without a screenplay, the story made no sense. The audience left the theatre confused.
User Interviews
User Interviews
We conducted interviews for our paid and free users to figure out what was lacking. Here are some quotes from those interviews.
We conducted interviews for our paid and free users to figure out what was lacking. Here are some quotes from those interviews.
The Solution
The Solution
We gave the film a structure — readiness as the opening, sessions as the action, checkpoint as the climax, and summary page as the ending.
We gave the film a structure — readiness as the opening, sessions as the action, checkpoint as the climax, and summary page as the ending.
Design Process
We improved the cinematography — clearer shots, better colors, and visuals that kept the audience engaged.
Industry Research
We didn’t need to reinvent the wheel, so we used Mobbin to study similar features and avoided sources like Dribbble or Pinterest.
Industry Research
We didn’t need to reinvent the wheel, so we used Mobbin to study similar features and avoided sources like Dribbble or Pinterest.
Industry Research
We didn’t need to reinvent the wheel, so we used Mobbin to study similar features and avoided sources like Dribbble or Pinterest.
Wireframing
We used Excalidraw to create quick hand-drawn mockups, confirming the full UX flow with business before diving deeper.
Wireframing
We used Excalidraw to create quick hand-drawn mockups, confirming the full UX flow with business before diving deeper.
Wireframing
We used Excalidraw to create quick hand-drawn mockups, confirming the full UX flow with business before diving deeper.
Design Iterations
With a paper-like UI, single accent color, and no gradients or animations, the focus shifted to refining UX through multiple team reviews.
Design Iterations
With a paper-like UI, single accent color, and no gradients or animations, the focus shifted to refining UX through multiple team reviews.
Design Iterations
With a paper-like UI, single accent color, and no gradients or animations, the focus shifted to refining UX through multiple team reviews.
Sessions Page
Sessions Page
This page holds all the other summaries, but this was designed and built last.
This page holds all the other summaries, but this was designed and built last.
1
Sessions page that we shipped, latest tab shows the weekly summary & latest sessions
Reasoning
Swipe through carousel to see
2
A feature list that we shipped with this update so that users are aware of the new ones.
Reasoning
Feature awareness
3
Last week's summary, date divisions, trends-graphs , personolized icons and more
Reasoning
Data properly utilized
4
Most apps had trends, graphs, weekly and monthly summaries, latest sessions
Reasoning
Industry standard
5
We decided to go with graphs for each tab and segregated sessions with "Recents" having 7 days
Reasoning
Quicker glance
6
All the tiles had the same styling as its respective summary page down to the colors & metrics
Reasoning
Maintain Consistency
7
This was introduced so that users see their progress for the week - calories and time
Reasoning
Long-Requested Feature
8
Encompassed everything and the user wanted in a very neat and premium format
Reasoning
Perfect Culmination
1
Sessions page that we shipped, latest tab shows the weekly summary & latest sessions
Reasoning
Swipe through carousel to see
2
A feature list that we shipped with this update so that users are aware of the new ones.
Reasoning
Feature awareness
3
Last week's summary, date divisions, trends-graphs , personolized icons and more
Reasoning
Data properly utilized
4
Most apps had trends, graphs, weekly and monthly summaries, latest sessions
Reasoning
Industry standard
5
We decided to go with graphs for each tab and segregated sessions with "Recents" having 7 days
Reasoning
Quicker glance
6
All the tiles had the same styling as its respective summary page down to the colors & metrics
Reasoning
Maintain Consistency
7
This was introduced so that users see their progress for the week - calories and time
Reasoning
Long-Requested Feature
8
Encompassed everything and the user wanted in a very neat and premium format
Reasoning
Perfect Culmination
1
Sessions page that we shipped, latest tab shows the weekly summary & latest sessions
Reasoning
Swipe through carousel to see
2
A feature list that we shipped with this update so that users are aware of the new ones.
Reasoning
Feature awareness
3
Last week's summary, date divisions, trends-graphs , personolized icons and more
Reasoning
Data properly utilized
4
Most apps had trends, graphs, weekly and monthly summaries, latest sessions
Reasoning
Industry standard
5
We decided to go with graphs for each tab and segregated sessions with "Recents" having 7 days
Reasoning
Quicker glance
6
All the tiles had the same styling as its respective summary page down to the colors & metrics
Reasoning
Maintain Consistency
7
This was introduced so that users see their progress for the week - calories and time
Reasoning
Long-Requested Feature
8
Encompassed everything and the user wanted in a very neat and premium format
Reasoning
Perfect Culmination
Readiness Summary
Readiness Summary
This screen shows how recovered a user is before they begin their workout
This screen shows how recovered a user is before they begin their workout
1
The Design that we shipped for the Readiness revamp
Reasoning
Swipe through carousel to see
2
Visually you can understand that we played with colors here
Reasoning
Easy identification
3
We went through fitness apps on Mobbin to understand how other deal with this feature
Reasoning
Industry standard
4
Through iterations, we figured that we tone down the details in the metrics
Reasoning
Reduce noise
5
So each screen color would represent heart readiness also accompanied with helper text
Reasoning
Instant understanding
1
The Design that we shipped for the Readiness revamp
Reasoning
Swipe through carousel to see
2
Visually you can understand that we played with colors here
Reasoning
Easy identification
3
We went through fitness apps on Mobbin to understand how other deal with this feature
Reasoning
Industry standard
4
Through iterations, we figured that we tone down the details in the metrics
Reasoning
Reduce noise
5
So each screen color would represent heart readiness also accompanied with helper text
Reasoning
Instant understanding
1
The Design that we shipped for the Readiness revamp
Reasoning
Swipe through carousel to see
2
Visually you can understand that we played with colors here
Reasoning
Easy identification
3
We went through fitness apps on Mobbin to understand how other deal with this feature
Reasoning
Industry standard
4
Through iterations, we figured that we tone down the details in the metrics
Reasoning
Reduce noise
5
So each screen color would represent heart readiness also accompanied with helper text
Reasoning
Instant understanding
Training Summary
Training Summary
This screen comes up right after a user completes their workout
This screen comes up right after a user completes their workout
1
The Design that we shipped for the Training summary revamp
Reasoning
Swipe through carousel to see
2
Older design didn't have screen for cardio seperately and showed all the metrics like a report
Reasoning
App not a document
3
We looked at how apps like Apple Fitness, Strava, Nike, etc handle a summary
Reasoning
UndersIndustry Standard
4
We were keen on having the type of workout & hero metric to be highlighted
Reasoning
Workouts feel personal
5
We switched to Gen-AI assets with a consistent JSON prompt that kept the brand identity
Reasoning
Speed with details
6
We accomodated all the summary screens - cardio, strength, alternate and free-trial
Reasoning
Uniform summaries
1
The Design that we shipped for the Training summary revamp
Reasoning
Swipe through carousel to see
2
Older design didn't have screen for cardio seperately and showed all the metrics like a report
Reasoning
App not a document
3
We looked at how apps like Apple Fitness, Strava, Nike, etc handle a summary
Reasoning
UndersIndustry Standard
4
We were keen on having the type of workout & hero metric to be highlighted
Reasoning
Workouts feel personal
5
We switched to Gen-AI assets with a consistent JSON prompt that kept the brand identity
Reasoning
Speed with details
6
We accomodated all the summary screens - cardio, strength, alternate and free-trial
Reasoning
Uniform summaries
1
The Design that we shipped for the Training summary revamp
Reasoning
Swipe through carousel to see
2
Older design didn't have screen for cardio seperately and showed all the metrics like a report
Reasoning
App not a document
3
We looked at how apps like Apple Fitness, Strava, Nike, etc handle a summary
Reasoning
UndersIndustry Standard
4
We were keen on having the type of workout & hero metric to be highlighted
Reasoning
Workouts feel personal
5
We switched to Gen-AI assets with a consistent JSON prompt that kept the brand identity
Reasoning
Speed with details
6
We accomodated all the summary screens - cardio, strength, alternate and free-trial
Reasoning
Uniform summaries
Introduction of Calories
Introduction of Calories
Calories screen was made simpler by showing it's food equivalent
Calories screen was made simpler by showing it's food equivalent
1
The Design that we shipped for the calories for training sessions
Reasoning
Swipe through carousel to see
2
We looked at how apps handled calories and similar pages in mobbin.com
Reasoning
Industry research
3
Several iterations and we went for a gradient background as calories are important
Reasoning
Instant gratification
4
We went with Gen-AI assets with a consistent JSON prompt that gave consistent food images of any cuisine
Reasoning
Easy calorie relation
5
Final designs had the Gen-AI assets upto 2000+kcal burnt and told weight lost
Reasoning
Workout validation
1
The Design that we shipped for the calories for training sessions
Reasoning
Swipe through carousel to see
2
We looked at how apps handled calories and similar pages in mobbin.com
Reasoning
Industry research
3
Several iterations and we went for a gradient background as calories are important
Reasoning
Instant gratification
4
We went with Gen-AI assets with a consistent JSON prompt that gave consistent food images of any cuisine
Reasoning
Easy calorie relation
5
Final designs had the Gen-AI assets upto 2000+kcal burnt and told weight lost
Reasoning
Workout validation
1
The Design that we shipped for the calories for training sessions
Reasoning
Swipe through carousel to see
2
We looked at how apps handled calories and similar pages in mobbin.com
Reasoning
Industry research
3
Several iterations and we went for a gradient background as calories are important
Reasoning
Instant gratification
4
We went with Gen-AI assets with a consistent JSON prompt that gave consistent food images of any cuisine
Reasoning
Easy calorie relation
5
Final designs had the Gen-AI assets upto 2000+kcal burnt and told weight lost
Reasoning
Workout validation
Checkpoint Summary
Checkpoint Summary
A bi-weekly test users take to understand their heart's conditioning
A bi-weekly test users take to understand their heart's conditioning
1
The Design that we shipped for Checkpoint Summary
Reasoning
Swipe through carousel to see
2
Addition of color being the major difference is taken from the graph ion the report
Reasoning
Sharebility and Utility
3
Since this screen involved share-ability,we expanded research to Dribble and Pinterest
Reasoning
Unique UI
4
The longest iterations to perfect the depth effect we wanted to achieve with clinical touch
Reasoning
Look and Feel
5
Added the category the user was in with metrics being presented in a verbose format
Reasoning
Current Level & Category
1
The Design that we shipped for Checkpoint Summary
Reasoning
Swipe through carousel to see
2
Addition of color being the major difference is taken from the graph ion the report
Reasoning
Sharebility and Utility
3
Since this screen involved share-ability,we expanded research to Dribble and Pinterest
Reasoning
Unique UI
4
The longest iterations to perfect the depth effect we wanted to achieve with clinical touch
Reasoning
Look and Feel
5
Added the category the user was in with metrics being presented in a verbose format
Reasoning
Current Level & Category
1
The Design that we shipped for Checkpoint Summary
Reasoning
Swipe through carousel to see
2
Addition of color being the major difference is taken from the graph ion the report
Reasoning
Sharebility and Utility
3
Since this screen involved share-ability,we expanded research to Dribble and Pinterest
Reasoning
Unique UI
4
The longest iterations to perfect the depth effect we wanted to achieve with clinical touch
Reasoning
Look and Feel
5
Added the category the user was in with metrics being presented in a verbose format
Reasoning
Current Level & Category
All the designs you just saw?
I developed them in code as well.
Development
While the movie kept playing, we fixed scenes, edited cuts, and polished fragments so the story made sense without stopping the show.
Component Creation
We created new components for each screen and these components were structured as good as a package such that it could be used across the app.
Component Creation
We created new components for each screen and these components were structured as good as a package such that it could be used across the app.
Component Creation
We created new components for each screen and these components were structured as good as a package such that it could be used across the app.
Screen Migration
We replaced the older screens with newer screens with surgical precision with 0 bugs and UI issues reported for it. Literally was a plug and play.
Screen Migration
We replaced the older screens with newer screens with surgical precision with 0 bugs and UI issues reported for it. Literally was a plug and play.
Screen Migration
We replaced the older screens with newer screens with surgical precision with 0 bugs and UI issues reported for it. Literally was a plug and play.
Testing and Stabiltity
No bugs were found thanks to intensive unit tests written for both UI components and screens. Moreover older tests were rewritten to be more robust. The app only became more stable after the revamp.
Testing and Stabiltity
No bugs were found thanks to intensive unit tests written for both UI components and screens. Moreover older tests were rewritten to be more robust. The app only became more stable after the revamp.
Testing and Stabiltity
No bugs were found thanks to intensive unit tests written for both UI components and screens. Moreover older tests were rewritten to be more robust. The app only became more stable after the revamp.
“Even the parts you can’t see should look good.”
“Even the parts you can’t see should look good.”
I followed that principle in code. For every token and component, I built dedicated previews.
I followed that principle in code. For every token and component, I built dedicated previews.
Previews were made for all basic components, to verify UI across different screen sizes
Previews were made for screens as well to tweak before migration.
This allowed developers to verify the UI with mock data without going live.
Reflection
The film finally worked — the story was clear, the audience felt the payoff, and they wanted to watch again - workout everyday.
Gen-AI for Image
Making images and assets via figma and other sources were cumbersome as opposed to speed at which tools like ChatGPT and NanoBanana can generate images.
Gen-AI for Image
Making images and assets via figma and other sources were cumbersome as opposed to speed at which tools like ChatGPT and NanoBanana can generate images.
Gen-AI for Image
Making images and assets via figma and other sources were cumbersome as opposed to speed at which tools like ChatGPT and NanoBanana can generate images.
Why - Important Question
I learnt that UX is basically the answer to why. If we can answer that then everything else falls into place
Why - Important Question
I learnt that UX is basically the answer to why. If we can answer that then everything else falls into place
Why - Important Question
I learnt that UX is basically the answer to why. If we can answer that then everything else falls into place
Simple is Bettter
The simpler it is, the better users understand. The learnings from this made me write storylines even in my portfolio
Simple is Bettter
The simpler it is, the better users understand. The learnings from this made me write storylines even in my portfolio
Simple is Bettter
The simpler it is, the better users understand. The learnings from this made me write storylines even in my portfolio
