One App, One Language — Napoz

Problem

A rapidly evolving app that had outgrown its original structure.

Role

Sole product designer — redesign + system

Timeline

2024–present · phased rollout

Platform

Mobile · React Native

Outcome

Shipped · phased rollout

Key Contribution

Rebuilt from tokens up; re-languaged the product; redesign of all core flows

03Screens

Screen 01

Home

Friends / For You — challenges finally read as challenges

Screen 02

Create

Posting reframed as proof: pick a challenge, add evidence

Screen 03

Explore

Editorial discovery with social proof and a one-tap Join

Screen 04

Challenges

One consistent object — category, time left, participants, rank

Screen 05

Profile

Per-challenge standings — your rank lives with each challenge

04The Story

The app could do everything and explain none of it.

Napoz let anyone start a challenge — a 30-day writing streak, a neighborhood step competition, a sourdough showdown — all living in one community.

The product had evolved feature by feature, challenge by challenge.

It worked.

But it could do everything and explain none of it.

Every screen had improvised its own dialect — different colors, different buttons, different words for the same thing. New users couldn't tell a post from a challenge. The product lacked a shared language.

The evidence was sitting in the support queue:

"I don't know what I'm looking at."

This wasn't a visual-polish problem. It was a comprehension problem.

So I didn't start with screens.

I started with the smallest unit: design tokens, then components, then patterns, then the words themselves.

The obvious fix was to reskin the loudest screens and ship. I refused it. A reskin would have painted over the inconsistency, not removed it. Six button styles would still be six button styles under one coat of color.

Instead, I established one visual language, one component system, and one vocabulary for the product.

The redesign people see is the surface.

The system underneath is the actual work.

Now a first-time user opens Napoz and immediately understands what they're looking at.

05The system

The audit

A system, not a coat of paint

Before any screen changed, I rebuilt the foundation from tokens up. Two years of improvising had scattered the basics — cool blues with no clear brand, system fonts, a pale button doing every job. The fix wasn't fewer styles; it was color that carries meaning, type with roles, and one inventory.

01 · Color

Before

Light Blue

#C3E7F5

Dark Blue

#9AD6EE

Accent

#16A9E4

Gold

#F1C34B

Three cool blues and a gold. Which one is the brand? No color owned a job.

After

Coral

#FF4760

Brand

Cobalt

#2F4BFF

Earned

Ink

#0A0A0A

Text

Sand

#F2F0EA

Surface

Coral = brand & category. Cobalt = figures you earn. Each color, one job.

02 · Type

Before

Explore

Xavier, Amir and 4 others are doing this.

Helvetica Neue · Plus Jakarta Sans

Generic faces, flat hierarchy.

After

Explore

Xavier, Amir and 4 others are doing this.

Heading 1 · Work Sans Medium

Gabarito display · Geist body

Gabarito + Geist — a named ramp with set weights and tracking.

03 · Buttons

Before

One pale light-blue button doing every job.

After

A real hierarchy — primary, secondary, ghost, text, and the create FAB.

04 · Inventory

Before

ColorsTypeButtonsChipsFormsAlertsIconsSpacing

8 starter groups — foundations only.

After

Running

PostsStats

#2

12d

✦ AI

Creative

50+ elements across 8 domains — rank, streak, leaderboard, and the cobalt AI badge.

Deep dive · Component

The card system

Four card modules. The Challenge Card renders one challenge in three formats; the other three each own one job — so two cards never compete for the same moment, yet shared radii, type, and color-roles keep them one family.

Coral — category & brand Cobalt — earned figure Ink — the one dark surface

MODULE 01

Challenge Card

napoz/Challenge Card · napoz/StatusRow

Discovery + relationship

"Should I join this?" → "How am I doing?"

One object, three formats
Hero + tile — discovery
Status row — relationship

Hero & tile — raised

♟ Creative☆3 Friends Joined

Golden Hour

"every shadow deserves a witness."

2.4k in

Streak

Pasta Week

1.1k in · 5d left

Status row — by state

Golden Hour

Creative · 4d left

#405

1.3k in

⌄

Saturday Bike ClubYou Host

Performance · 12d left

First Coffee

Ended 2w ago ★ Winner

#1

1.3k in

30 Day Pull-upsDraft

Not published

Resume →

MODULE 02

Post Card

napoz/PostCard

Feed · flat

"What's happening?"

The central feed unit
One frame, every post
Ranking chip toggles on/off

Golden Hour4 days left

Ranked #3

@mira.lens2h♡ 1.3k

Reservoir bridge, 7:42pm. Wind was wild today.

Golden Hour4 days left

@mira.lens2h♡ 1.3k

Reservoir bridge, 7:42pm. Wind was wild today.

MODULE 03

Inspiration Card

napoz/InspirationCard

Prompt · ink

"What could I start?"

A prompt to create

✦

The Idea Of The Day

Same shot, 7 days.

Pick a spot you walk past every day. Photograph it at the same hour. The week tells a story you didn't plan.

1.2k like this

MODULE 04

Standing

napoz/Standing

Relationship · flat

"Where do I rank?"

For leaderboard in profile screen

6 AM Club›

#2of 814

↑1 this week

6 AM Club›

#2of 814

↓1 this week

06In context

The same challenge object, rendered across the surfaces people actually use — discover it, track it, and live with it in the feed. Before on the left, after on the right.

Home — the feed

A feed that knows what it's showing

The old home stacked friends' posts and live challenges into one ambiguous list under a heavy wordmark. The redesign splits Friends from For You and gives challenges their own card — countdown, rank, category — so a commitment never reads like a casual post.

Before

Before. One stream, one card style. A Seattle selfie and a challenge are indistinguishable; the bold wordmark dominates the screen.

After

New Napoz home — Friends / For You tabs and distinct challenge cards

After. Friends / For You tabs, challenge cards with time-left and rank, a refined wordmark, and a centered create button.

Explore — discovery

Discovery, not a directory

Explore was a dense list filtered by Active and Expired. The redesign leads with a featured challenge and social proof, sorts by Trending / New / Ending soon, and puts Join one tap away.

Before

Old explore — a flat list of image rows with an Expired tab

Before. A flat list of image rows; the "Expired" tab is the terminology problem out in the wild.

After

New explore — featured hero, social proof, and Ending soon sorting

After. A featured hero with "friends joined," a scannable card grid, and Ending soon — never Expired.

Challenges — your commitments

Every challenge, one object

The Challenges tab buried one giant card per challenge. Now each is a compact row carrying the same metadata everywhere — category, time left, participants, your rank — so seven active challenges fit on one scannable screen.

Before

Old challenges tab — one bloated card filling the screen

Before. One bloated card fills the screen; comparing challenges means scrolling past walls of text.

After

New challenges tab — Active / Past counts and consistent scannable rows

After. Active 7 / Past 4 with counts, filter chips, and consistent rows you can actually scan.

Napoz AI

New

The hardest part of creating, in one line

Defining a challenge — its title, prompt, and how it's scored — was the steepest part of starting one. So I folded an AI drafter into the create flow: describe it in a sentence and get an editable title, prompt, and cover, with a manual path right beside it.

And AI got its own color. The drafter speaks cobalt — deliberately separate from the coral brand — so an AI action never masquerades as an ordinary one, and you always know when the machine is writing.

Before

Old Napoz AI sheet — placeholder text and a disabled Confirm button

Before. A bare "Napoz AI" sheet with placeholder copy and a disabled Confirm — no examples, and no sense of what a good challenge looks like.

After

New create flow — Draft it with AI with a one-line prompt and example chips

After. "Draft it with AI" lives inside Create — one line in, example prompts to start from, and AI drafts the title, prompt, and cover. Or fill it in yourself.

07Outcome

[30%]

lift in monthly retention after rollout

[~40%]

faster design-to-ship time across the team

50+

support tickets resolved at the source

Next project

Hidden in Plain Sight — Microsoft AR

→