Work 01
Pivoting the app's design for fast-changing business needs
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
7 mins
Timeline
Apr-Aug 2025
App
Fusn By Netrin
Want to see this story for yourself?
Highlights
The Problem
The business team pivoted the app’s direction multiple times based on market response, and we had to adapt quickly.
Painpoints
Each pivot forced rework, parts of the app updated at different times, and design consistency had to be maintained.
Constraints
Design depth was limited; speed and shipping were the highest priorities for a six-member team.
The Solution
We chose flexible foundations, reused Material components, and kept a minimal visual language to move fast.
Design Process
It was a simple as doing the research, wirerframe the UX flow to confirm with business and build a neat UI
Development
50–60% of frontend handled by me, with phased migrations and flutter component building.
Reflection
Learnings from working in a high-velocity agile enviroment - keep it simple, move fast and stability is key
The Problem
The business team pivoted the app’s direction multiple times based on market response, and we had to adapt quickly.
Painpoints
Each pivot forced rework, parts of the app updated at different times, and design consistency had to be maintained.
Constraints
Design depth was limited; speed and shipping were the highest priorities for a six-member team.
The Solution
We chose flexible foundations, reused Material components, and kept a minimal visual language to move fast.
Design Process
It was a simple as doing the research, wirerframe the UX flow to confirm with business and build a neat UI
Development
50–60% of frontend handled by me, with phased migrations and flutter component building.
Reflection
Learnings from working in a high-velocity agile enviroment - keep it simple, move fast and stability is key
The Problem
The business team pivoted the app’s direction multiple times based on market response, and we had to adapt quickly.
Painpoints
Each pivot forced rework, parts of the app updated at different times, and design consistency had to be maintained.
Constraints
Design depth was limited; speed and shipping were the highest priorities for a six-member team.
The Solution
We chose flexible foundations, reused Material components, and kept a minimal visual language to move fast.
Design Process
It was a simple as doing the research, wirerframe the UX flow to confirm with business and build a neat UI
Development
50–60% of frontend handled by me, with phased migrations and flutter component building.
Reflection
Learnings from working in a high-velocity agile enviroment - keep it simple, move fast and stability is key
The Story
“We switched tracks three times in one journey, without passengers feeling the shift and derailing the train”
The Problem
“The tracks ahead kept changing, but the train had to keep moving without unsettling passengers.”
Context
PainPoints
Constraints
Pivot #0 and Pivot #1
The app began with training plans and integrations, then pivoted to native cardio tracking while dropping integrations.
Pivot #2
The app shifted to workout challenges with the cardio tracker and expanded into a mini e-commerce catalog.
Mutiple Pivots
The business team pivoted the app’s direction multiple times based on market reaction, and we had to adapt quickly.
Context
PainPoints
Constraints
Pivot #0 and Pivot #1
The app began with training plans and integrations, then pivoted to native cardio tracking while dropping integrations.
Pivot #2
The app shifted to workout challenges with the cardio tracker and expanded into a mini e-commerce catalog.
Mutiple Pivots
The business team pivoted the app’s direction multiple times based on market reaction, and we had to adapt quickly.
Context
PainPoints
Constraints
Pivot #0 and Pivot #1
The app began with training plans and integrations, then pivoted to native cardio tracking while dropping integrations.
Pivot #2
The app shifted to workout challenges with the cardio tracker and expanded into a mini e-commerce catalog.
Mutiple Pivots
The business team pivoted the app’s direction multiple times based on market reaction, and we had to adapt quickly.
The Solution
“We guided the train onto new tracks smoothly, so the ride stayed steady.So we had a system of how to lay new tracks”
Flexible Foundations
Design system stayed lightweight, with TODOs in code to scale as pivots come
Flexible Foundations
Design system stayed lightweight, with TODOs in code to scale as pivots come
Flexible Foundations
Design system stayed lightweight, with TODOs in code to scale as pivots come
Accelerated UI Build
Leveraged existing Material UI components to cut dev time.
Accelerated UI Build
Leveraged existing Material UI components to cut dev time.
Accelerated UI Build
Leveraged existing Material UI components to cut dev time.
Consistent Visual Language
Paper-like UI, single accent color, no gradients/animations kept pivots aligned.
Consistent Visual Language
Paper-like UI, single accent color, no gradients/animations kept pivots aligned.
Consistent Visual Language
Paper-like UI, single accent color, no gradients/animations kept pivots aligned.
Design Process
“New tracks were laid quickly, but the train’s rhythm had to feel the same to passengers while switching to the new tracks”
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.
Pivot #0
Pivot #0
Health-App Integrations and Training Plans
Health-App Integrations and Training Plans
1
We researched references on Mobbin and shaped the first versions of the summary and home screens.
Reasoning
Set design direction
2
We iterated layouts for training plans, integrations, summaries, and home screens to refine the overall product flow.
Reasoning
Explore multiple options
3
We finalized designs with PM reviews, aligning on requirements and ensuring smooth development feasibility.
Reasoning
Align with requirements
1
We researched references on Mobbin and shaped the first versions of the summary and home screens.
Reasoning
Set design direction
2
We iterated layouts for training plans, integrations, summaries, and home screens to refine the overall product flow.
Reasoning
Explore multiple options
3
We finalized designs with PM reviews, aligning on requirements and ensuring smooth development feasibility.
Reasoning
Align with requirements
1
We researched references on Mobbin and shaped the first versions of the summary and home screens.
Reasoning
Set design direction
2
We iterated layouts for training plans, integrations, summaries, and home screens to refine the overall product flow.
Reasoning
Explore multiple options
3
We finalized designs with PM reviews, aligning on requirements and ensuring smooth development feasibility.
Reasoning
Align with requirements
Pivot #1
Pivot #1
Removal of Integrations & Training Plans, Addition of Cardio Tracker and Challenges
Removal of Integrations & Training Plans, Addition of Cardio Tracker and Challenges
1
We researched cardio trackers and challenge flows on Mobbin, studying how other apps structured tracking and rewards.
Reasoning
Understand industry patterns
2
We iterated tracker designs, noting downfalls in others and shaping a native version optimized for our needs.
Reasoning
Improve existing patterns
3
We explored ways to represent challenges, testing options and shaping them into a coupon-style card for home.
Reasoning
Visualize challenges clearly
4
We finalized designs with the completed coupon card on the home screen and the native cardio tracker.
Reasoning
Deliver final designs
1
We researched cardio trackers and challenge flows on Mobbin, studying how other apps structured tracking and rewards.
Reasoning
Understand industry patterns
2
We iterated tracker designs, noting downfalls in others and shaping a native version optimized for our needs.
Reasoning
Improve existing patterns
3
We explored ways to represent challenges, testing options and shaping them into a coupon-style card for home.
Reasoning
Visualize challenges clearly
4
We finalized designs with the completed coupon card on the home screen and the native cardio tracker.
Reasoning
Deliver final designs
1
We researched cardio trackers and challenge flows on Mobbin, studying how other apps structured tracking and rewards.
Reasoning
Understand industry patterns
2
We iterated tracker designs, noting downfalls in others and shaping a native version optimized for our needs.
Reasoning
Improve existing patterns
3
We explored ways to represent challenges, testing options and shaping them into a coupon-style card for home.
Reasoning
Visualize challenges clearly
4
We finalized designs with the completed coupon card on the home screen and the native cardio tracker.
Reasoning
Deliver final designs
Pivot #2
Pivot #2
Doubling down on challenges with reward catalog within the app
Doubling down on challenges with reward catalog within the app
1
We researched e-commerce apps like Swiggy, Nike, Amazon, plus sharing and referral patterns.
Reasoning
Study e-commerce patterns
2
We designed the catalog to fit our needs while aligning with industry standards.
Reasoning
Build tailored catalog
3
We replaced generic icons with ChatGPT-generated stickers, giving each category a unique and recognizable identity.
Reasoning
Create unique look and speed
4
We iterated referral flows and chose a customizable stamp users could share.
Reasoning
Shareable referral design
5
After PM reviews, we finalized the rewards list, detail screen, stamp sharing, and catalog.
Reasoning
Finalize full rewards flow
1
We researched e-commerce apps like Swiggy, Nike, Amazon, plus sharing and referral patterns.
Reasoning
Study e-commerce patterns
2
We designed the catalog to fit our needs while aligning with industry standards.
Reasoning
Build tailored catalog
3
We replaced generic icons with ChatGPT-generated stickers, giving each category a unique and recognizable identity.
Reasoning
Create unique look and speed
4
We iterated referral flows and chose a customizable stamp users could share.
Reasoning
Shareable referral design
5
After PM reviews, we finalized the rewards list, detail screen, stamp sharing, and catalog.
Reasoning
Finalize full rewards flow
1
We researched e-commerce apps like Swiggy, Nike, Amazon, plus sharing and referral patterns.
Reasoning
Study e-commerce patterns
2
We designed the catalog to fit our needs while aligning with industry standards.
Reasoning
Build tailored catalog
3
We replaced generic icons with ChatGPT-generated stickers, giving each category a unique and recognizable identity.
Reasoning
Create unique look and speed
4
We iterated referral flows and chose a customizable stamp users could share.
Reasoning
Shareable referral design
5
After PM reviews, we finalized the rewards list, detail screen, stamp sharing, and catalog.
Reasoning
Finalize full rewards flow
All the designs you just saw?
I developed them in code as well.
Development
“We replaced sections of the rails while the train kept running, without jolting those onboard.”
Agile Design System
We built the system on Material 3 foundations but kept it flexible with simpler names and patterns. This allowed us to easily update colors, fonts, and styles as the app evolved.
Agile Design System
We built the system on Material 3 foundations but kept it flexible with simpler names and patterns. This allowed us to easily update colors, fonts, and styles as the app evolved.
Agile Design System
We built the system on Material 3 foundations but kept it flexible with simpler names and patterns. This allowed us to easily update colors, fonts, and styles as the app evolved.
Component Creation
Every component was designed for reuse with consistent naming, like Fusion App Bar or Fusion Button. None were one-offs, and each could be adapted or extended for new use cases.
Component Creation
Every component was designed for reuse with consistent naming, like Fusion App Bar or Fusion Button. None were one-offs, and each could be adapted or extended for new use cases.
Component Creation
Every component was designed for reuse with consistent naming, like Fusion App Bar or Fusion Button. None were one-offs, and each could be adapted or extended for new use cases.
Testing and Stabiltity
We thoroughly tested UI components to handle errors gracefully. Even if data failed to load, users saw error states instead of broken screens or layout overflows.
Testing and Stabiltity
We thoroughly tested UI components to handle errors gracefully. Even if data failed to load, users saw error states instead of broken screens or layout overflows.
Testing and Stabiltity
We thoroughly tested UI components to handle errors gracefully. Even if data failed to load, users saw error states instead of broken screens or layout overflows.
Reflection
“The train reached the station, and we learned countless ways to switch tracks without disturbing the ride.”
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.
Reward Effect
Users tend to like the app more when the process is rewarding, although we learnt this only after the final stamp design.
Reward Effect
Users tend to like the app more when the process is rewarding, although we learnt this only after the final stamp design.
Reward Effect
Users tend to like the app more when the process is rewarding, although we learnt this only after the final stamp design.
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
