Step 01
Onboarding
Connect Gmail, Outlook, or IMAP from a single focused card.
Case Study
Nextstep — a job application tracker that finds opportunities in your inbox.
A complete design system, eight product screens, and a marketing landing page for a tool that auto-detects applications from email so job seekers never lose track of a role again.
01 · Project Overview
A tracker that does the data entry for you.
Nextstep is a job application tracking platform built to eliminate manual data entry. It connects to Gmail, Outlook, or IMAP, parses incoming recruitment emails, and creates application records with status tracking — all without the user opening a spreadsheet.
The Problem
Job seekers track applications in scattered spreadsheets and lose follow-up opportunities.
The Solution
Auto-detect applications from email and surface them in a clean, confidence-building UI.
The Outcome
A scalable design system with Figma Variables that the product team can extend in seconds.
02 · Challenge
Messy tracking and broken workflows
Most job seekers rely on manual spreadsheets, which create bottlenecks and miss follow-up windows. The product needed an interface that:
- Clearly and reliably displays auto-detected data from emails.
- Scales from onboarding to active use without overwhelming the user.
- Maintains a professional but approachable feel.
- Lets the product team update tokens, copy, and components efficiently.
03 · Design Approach
Foundations first, screens second.
I built the system before I built the screens. A tight palette, a typographic scale, and a token layer meant every screen I shipped after that was a recombination — not a one-off.
3.1 Design System Foundation
The system is inspired by Notion's clean aesthetic, paired with a warm coral accent. Neutral whites, soft grays, and a dark ink color carry the weight; coral does the signaling.
Hero / 72Stop losing track.
Section / 56Every role, in one place.
Card / 20Applied · Interview · Offer
Body / 17Inter at 17 pixels with a 1.5 line height keeps long reads comfortable without feeling chatty.
3.2 Figma Variables for easy scaling
I built a Variables collection with semantically named tokens so the team can change the brand color globally with a single update instead of editing more than a hundred instances.
Color Variables
color/accent/primary#FF7849
color/bg/default#FFFFFF
color/text/primary#37352F
Number Variables
space/section/lg96px
radius/card16px
String Variables
font/family/primaryInter
font/family/monoJetBrains Mono
25 color tokens · 9 spacing tokens · 6 radius tokens. Naming is semantic, not literal — so swapping coral for any future brand color is a one-line change.
3.3 Screen by screen
I designed eight screens — four desktop, four mobile — each owning one moment in the user journey.
Step 02
Email Sync
Review auto-detected applications with Ignore and Add actions.
Step 03
Dashboard
Stats, filter tabs, and a live table of every active application.
Step 04
Job Detail
Timeline, emails, notes, and tasks — one source of truth per role.
04 · Key Design Decisions
Four principles that shaped every screen.
One primary action per screen
Every view has a single focal point. The dashboard centers on the table; onboarding centers on connecting an inbox. This removes decision fatigue and keeps users moving forward.
Coral as the brand signal
Coral is reserved for CTAs, accent headlines, status indicators, and focus states. Restraint is what makes it readable as a brand.
Professional but warm typography
Inter with generous tracking and no all-caps headlines keeps the product premium without feeling cold or corporate.
Trust through transparency
The Email Sync screen shows exactly what the system detected — logo, role, status, email preview. Users approve what gets tracked, which builds confidence in automation.
05 · Marketing Landing Page
A page that earns the click.
The marketing site leads with the pain point, walks through three plain-English steps, and lands on a coral-saturated CTA. Every section was rebuilt at least once after a structured critique pass.
06 · Design Iterations
What changed between v1 and v2.
The first landing page draft was functional but noisy. A second pass tightened the hierarchy, the copy, and the color story.
Before- Headlines split awkwardly mid-phrase.
- Stats used four different colors.
- Feature cards all white — no rhythm.
- Copy was generic and undifferentiated.
- Section spacing felt arbitrary.
After- Headlines break by meaning, with coral accents.
- All stats unified in coral for brand consistency.
- Alternating white and coral-tint cards create rhythm.
- Copy refined: "Everything you need to own your job search."
- Consistent 96 px gaps between sections throughout.
07 · Tools & Process
Designed in Figma, built alongside code.
I treat design and engineering as one continuous workflow. Figma owns the source of truth for the visual system; Claude Code and GitHub are how I prototype, version, and hand off without losing context.
Design
Figma
Source of truth for every screen, component, and variable. I lean on Figma's Variables and Auto Layout to keep the system flexible and the file fast.
AI Pair
Claude Code
I use Claude Code to translate Figma sections into working HTML and CSS, scaffold prototypes, and pressure-test interaction logic before it goes back into the design file.
Versioning
GitHub
Every code-side artifact lives in GitHub — landing-page prototypes, token exports, and handoff docs. Commits make it trivial to roll back a bad idea or branch off a good one.
08 · Results & Impact
A system that compounds.
The biggest win wasn't a single screen — it was building infrastructure that makes the next ten screens cheap. The team can now swap brand colors globally in seconds, A/B test layouts without rebuilds, and hand off to engineers with confidence.
8
Screens shipped across desktop & mobile
40
Design tokens (color, spacing, radius)
1
Variable update to re-skin the whole product
100%
Components built on Auto Layout
09 · Key Learnings
What I'd carry into the next project.
01
Design variables are a force multiplier.
Semantic naming up front makes every brand evolution cheaper and faster.
02
Visual consistency comes from constraints, not restrictions.
A tight palette and small type scale remove small decisions so meaningful ones get more attention.
03
Copy is designed.
The biggest landing page improvement came from rewriting one headline.
04
Transparency builds trust.
Showing users what the system detected and letting them approve it turns automation from scary to useful.
Nextstep is a system, not a screen.
The project reinforces a core principle I keep coming back to: constraints enable creativity. A tight palette, a clear grid, and a semantic token layer don't slow design down — they let the work move faster, stay coherent, and survive the next round of changes intact.