Sarthak UpretiSenior Product Designer
CASE STUDY · NOISE · 2021–2024

Handed a white-labelled app. Gave back a product.

NoiseFit wasn't Noise's own product when I got it. It was a vendor's white-label build, split into separate apps per device family: the watch you bought decided which app you got. Over three years I rebuilt it into one product, then kept adding the pieces that made it an ecosystem.

CLIENTNoise
ROLEAssistant Manager, Design
YEARS2021–2024
SCOPEFull rebuild → ecosystem
The revamped NoiseFit app: a spread of the new screens
PL.01NOISEFIT · THE REVAMPED APP
01 · THE TRANSFORMATION

Not a redesign. A change of character.

The NoiseFit revamp transformed how its users experience health and fitness. Not a fresh coat of paint: a researched, strategic correction of an application that was quietly failing, and the promotion of a supporting app into the main character of Noise's ecosystem.

We measured before we designed, and we measured after we shipped. Four numbers tell the whole story:

IMPACT · MEASURED BEFORE AND AFTER THE REVAMP
TIME SPENT2–2.5 minfrom 1–1.5 minAverage time spent in the app, daily
DAILY GOALS45%from 15%Users completing their daily goals
STICKINESS12%from 5%Users returning daily over a month
RETENTION50%from 30%Users still active month on month

Time in the app nearly doubled. Goal completion tripled. The rest of this page is the work those four numbers are pointing at.

02 · WHAT I INHERITED

A vendor's app, wearing Noise's name.

The app shipping under the NoiseFit name was a white-labelled vendor build, and there wasn't even one of it: separate builds per device family, so which app you got depended on which watch you bought. Noise didn't control its own product surface, and users could feel it even if they couldn't name it.

THE REAL BRIEF

A fitness app people opened for ninety seconds, finished their goals one day in seven, and left within a month. That was the real brief, whatever the PRD said.

03 · HOW I FOUND THE PROBLEMS

Not a redesign brief. A question about what the thing should be.

User interviews, the existing usage data, and where the business needed the product to go. The point wasn't to list what looked dated. It was to work out what NoiseFit had to become for Noise to own its relationship with the people wearing its hardware.

PROJECT GOAL

Enhance usability, increase user engagement, and make the app feel smooth and efficient to use.

Four objectives, agreed before a single screen moved:

  1. 01Understand the problems in the current UI, from evidence rather than taste.
  2. 02Turn that into a comprehensive list for the revamp.
  3. 03Split the revamp into phases by importance and urgency.
  4. 04Restructure the architecture so the app runs fast.

Then we went through the old app screen by screen and marked everything that broke flow, hierarchy or trust. Eight of those audit boards, with what each one found:

Audit board 1: Too many options on the first screen slow onboarding down, and skipping sign-up entirely leaves NoiseFit with no user details to build on.
FINDING 01 · LANDINGToo many options on the first screen slow onboarding down, and skipping sign-up entirely leaves NoiseFit with no user details to build on.
Audit board 2: A long, form-like flow that even asks you to create a password, when an OTP on mobile or email would be enough.
FINDING 02 · SIGN-UPA long, form-like flow that even asks you to create a password, when an OTP on mobile or email would be enough.
Audit board 3: A searching animation and nothing else: no list of found devices, no way to know your watch's status, no help link if you're stuck.
FINDING 03 · DEVICE SEARCHA searching animation and nothing else: no list of found devices, no way to know your watch's status, no help link if you're stuck.
Audit board 4: Found devices live on a separate page. If yours isn't there, you go back and start over, with no quick support path.
FINDING 04 · DEVICE LISTFound devices live on a separate page. If yours isn't there, you go back and start over, with no quick support path.
Audit board 5: The main health goals hide their data until you tap in. The cards below repeat information, and the icon styles don't agree with each other.
FINDING 05 · HOMEThe main health goals hide their data until you tap in. The cards below repeat information, and the icon styles don't agree with each other.
Audit board 6: Weak tabs and day selector, no real page layout, text sizes that vary wildly, and graphs that convey almost nothing.
FINDING 06 · SLEEP DETAILWeak tabs and day selector, no real page layout, text sizes that vary wildly, and graphs that convey almost nothing.
Audit board 7: The same colours reused for different data points make the numbers hard to scan, and heart-rate zones go unexplained for a lay user.
FINDING 07 · WORKOUT DETAILThe same colours reused for different data points make the numbers hard to scan, and heart-rate zones go unexplained for a lay user.
Audit board 8: The engagement features are hidden away, and the nudge is just a notification, a social mechanic used as a doorbell.
FINDING 08 · BUDDIESThe engagement features are hidden away, and the nudge is just a notification, a social mechanic used as a doorbell.
PL.02THE AUDIT BOARDS · OLD APP, PROBLEMS MARKED

The last input was the market. Before ideating we tabled what the other fitness apps did well, and where each one fell short:

APPLE FITNESSStrong across the board: smooth device pairing, engaging micro animations, challenges, seamless health metrics.
NIKE RUN CLUBStrong on workout detail and social, but no device pairing and little health-metrics focus.
STRAVAExcels at social. Thinner on engagement loops and health metrics.
FITBITWell rounded, with strong health metrics and pairing, but no micro animations to keep it engaging.
GARMIN CONNECTExcellent health and workout depth. Weaker on animation and interaction.
04 · THE REBUILD

One app, across devices.

A full application revamp: the separate per-device builds became one product with its own design language, its own information architecture, and its own reason to exist beyond pairing a watch.

The revamp ran in five phases, ordered by what unblocked what:

  1. P1A UI guideline, so every screen after it lands consistent.
  2. P2The onboarding flow, where first impressions and abandonment live.
  3. P3The home page, with navigation built for faster browsing.
  4. P4The health metric pages, rebuilt around data visualisation.
  5. P5The engagement features: Challenges and Buddies.
WHY THE GUIDELINE CAME FIRST

The guideline came first because it multiplies.

Colour, type, buttons, iconography and selectors decided once, then reused by every phase after it. That is what let one design language hold across an app this wide.

NoiseFit UI guideline: colour systemNoiseFit UI guideline: text stylesNoiseFit UI guideline: buttonsNoiseFit UI guideline: iconographyNoiseFit UI guideline: selectors
PL.03UI GUIDELINE · COLOUR / TYPE / BUTTONS / ICONS / SELECTORS
05 · THE ONBOARDING FLOW

The old flow read like a long form. The new one walks you in.

The rebuilt journey in one picture: in through legal and a walkthrough, one OTP to sign in, pairing that retries on the spot instead of throwing you back, then a profile built one question at a time.

IF NOT SUCCESSFUL, TRIES AGAINStartT&C, Privacy policyWalkthroughLoginOTP verificationSearching devicePairingSuccessfulNameAgeGenderWeightHeightYour interestsHome
PL.04THE REVAMPED ONBOARDING FLOW
PL.05KEY IMPROVEMENT 01

From one long form to guided steps

The previous flow put too many fields on screen at once and felt like paperwork. The revamp breaks it into small, manageable steps: a guided, step-by-step approach that is lighter to read and harder to abandon.

PL.06KEY IMPROVEMENT 02

Scanning and finding a device, on one screen

Before, you scanned for devices on one screen and saw the list on another. If your watch didn't show up, you started over, with no help offered. Now scanning and the device list share one screen, with a help link for unlisted devices and a Scan QR Code path for a faster connection.

PL.07KEY IMPROVEMENT 03

Pairing you can watch happening

A new micro-animated screen shows the data transfer before the dashboard opens. It reassures people that their data is actually moving, and it makes the app feel finished.

LIVE PROTOTYPE · FIGMAPlay the onboarding prototype↗
06 · HOME + HEALTH METRICS

The landing screen decides whether the whole app feels navigable.

The home page is where an app earns its first impression of usability. The revamp gave it a hierarchy that surfaces what people actually open, and navigation built for easier, faster browsing.

The revamped NoiseFit home page
PL.08THE REVAMPED HOME PAGE

The health metric pages are the ones people come back for.

  • 01Proper data visualisation for every important health metric, with a clear visual hierarchy.
  • 02Interactive graphs, so any kind of user can read their health data at any point in time.
  • 03Informative pages and detailed slide-ups that teach what each metric actually means.
Health metric screen: data visualisation overviewHealth metric screen: interactive graph, state oneHealth metric screen: interactive graph, state twoHealth metric screen: informative detail pageHealth metric screen: educational slide-up
PL.09HEALTH METRIC SCREENS · VISUALISATION / GRAPHS / EDUCATION
07 · USER ENGAGEMENT

Features that give the app a reason to be opened without a notification.

NoiseFit already had engagement features on paper. The experience around them was the problem, so both were rebuilt, and a third was added.

BUDDIES: Add your friends easily and track health data together.
BUDDIESAdd your friends easily and track health data together.
ADD BUDDIES: Finding and adding a friend takes seconds, not a support article.
ADD BUDDIESFinding and adding a friend takes seconds, not a support article.
CREATE A CHALLENGE: Set your own challenge and compete with your friends.
CREATE A CHALLENGESet your own challenge and compete with your friends.
GLOBAL CHALLENGES: Clear, easy-to-read global challenges, open to every user.
GLOBAL CHALLENGESClear, easy-to-read global challenges, open to every user.
PL.10BUDDIES + CHALLENGES · THE REBUILT ENGAGEMENT LOOP
08 · THEN THE ECOSYSTEM

Each piece only works because of the others.

This is the part that proves the thesis. None of these is a feature bolted on; each one feeds the next, and shipping any one of them alone would have killed it.

NOISEFIT COMMUNITYFeed, posts, stories, comments, follows. Motivation from people, not push notifications.
CHALLENGES + ACTIVITIESCreate a challenge, invite from the community, pool coins on the outcome.
NOISECOINSThe earned currency, redeemable against discounts. What ties the activity loop to the shop.
SHOPTurned from a device-support list into a real section, with a currency that made it worth opening.
NOISE PREMIER LEAGUEGamified predictions during the IPL, two consecutive years, run with brand partners and a prize pool.
AND THE RESTYear Decode, rewards, watch faces. The pieces that keep an ecosystem feeling inhabited.
09 · HOW I WORKED

Leading design, not just producing it.

Whiteboarding and brainstorm sessions with PMs to get the problem right before the solution. Persona work with user categories tackled separately. Handoff to engineering, and then staying alongside the build instead of disappearing at the redline.

  • ·Went beyond executing PRDs: worked on the PRDs themselves, identifying problems and ideating the solutions.
  • ·Sat with the development team to understand the app's architecture first-hand.
  • ·Helped frame that architecture into a solid framework for smoother, more efficient development.
10 · WHERE IT LANDED

India's number one health and fitness app, at the time.

Period-bound on purpose: claims on this site stay tied to when they were true. The numbers at the top of this page are what the ranking looked like from the inside.

WHAT I TAKE FROM IT

What I take from it is not the ranking. A white-label shell became a product an ecosystem could grow on, and the ecosystem is what made it matter.