Thinkedufy · mobile prototype · v0.1
Forty-five screens for the job-seeker persona — the complete v1 surface, from splash through offline. Translating Salviata’s soft-pastel editorial vocabulary into a calm, AI-led job discovery experience for Indian students and early-career professionals. Hover any frame to lift it.
01 / tokens
Six soft tiles do the categorical work. One ember accent does everything urgent.
Display — Instrument Serif
Good morning,
Ajay.
Used for screen titles, hero headlines, salary numerics in detail view, and italic emphases.
Body — Manrope
Senior Frontend Engineer · Novel Office, Bangalore · ₹18–24 LPA · Hybrid · 5 of your skills + remote-friendly culture make this a strong match.
Used for everything UI — captions, body, labels, buttons, code-like badges via JetBrains Mono.
02 / screens
Tuesday, 20 May
5 new matches today · 1 recruiter viewed you
Novel Office · Bangalore
Hybrid · Full-time
₹18 — 24 LPA
Five of your skills overlap. Remote-friendly. Closes in 4 days.
picked for you
React
Developer
Razorpay · Bangalore
₹12 — 16 LPA
Frontend
Engineer
Zerodha · Remote
₹14 — 20 LPA
Product
Engineer
CRED · Bangalore
₹16 — 22 LPA
Web
Developer
Swiggy · Hybrid
₹10 — 14 LPA
grow your match
01 · Home
AI Assistant first. Greeting + top-of-day match hero + 2×2 colour-coded recommendation tiles + skill nudges. Pull-to-refresh maps to ?refresh=true.
Novel Office
Verified · 200—500 employees
salary · per year
₹18 — 24
LAKHS · INR · ANNUAL
Experience
3 — 6 yrs
Openings
2
Notice
≤ 30d
why this matches
02 · Job Detail
Pastel hero carries identity. Salary takes display-serif scale. Accordions over tabs — easier on the thumb. Sticky Apply bar with deadline countdown.
238 jobs
React
Developer
Razorpay · Bangalore
₹12—16 LPA
88Senior FE
Engineer
Novel · Hybrid
₹18—24 LPA
92Frontend
Engineer
Zerodha · Remote
₹14—20 LPA
84Product
Engineer
CRED · Bangalore
₹16—22 LPA
81UI
Engineer
Flipkart · Hybrid
₹14—18 LPA
77Web
Developer
Swiggy · Onsite
₹10—14 LPA
7603 · Search
Horizontal pill chips for primary filters; sliders-icon top-right opens the filter sheet. 2-column pastel tile grid keeps density without claustrophobia.
You hear back from recruiters 2× faster when your resume score is 80+.
Novel Office
Hybrid · BLR
Senior Frontend Engineer
Applied
14 May · with AI cover letter
Reviewed by recruiter
16 May · 2 days later
Shortlisted
19 May · interview likely
Interview
Decision
React Developer
Razorpay · applied 12 May
Frontend Engineer
Zerodha · applied 10 May
Junior Frontend
Flipkart · closed 8 May
04 · Applications
Featured active app gets the timeline treatment. Closed ones compress into low-attention rows. Segmented control collapses 7 statuses into 3 mental buckets.
resume score
Ajay_Resume_v3.pdf
78
/ 100
Strong, with three small fixes.
Updated · 2 min ago via AI parse
improve to 90+
Quantify your last role
Add 1—2 metrics (users, latency, revenue) for the Acme Co bullets.
Add a one-line summary
Recruiters skim the top 50 px. A summary lifts callbacks ~12%.
Surface TypeScript
It appears once but it’s in 7/10 of your matched roles.
parsed skills · 14
05 · Resume
A wellness-style score ring on a sage tile. Three numbered suggestions, colour-coded. Camera-scan path elevated to a first-class CTA — the mobile differentiator.
Job seeker · 3 yrs
Ajay Singh
Frontend engineer · Bangalore
profile completion
84%
12
Applied
7
Saved
2
Interviews
06 · Me
Profile reduces to 5 focused sections, each its own edit sheet. Completion meter graduates from sage to ember as you fill in fields — the only place ember sits beside a neutral.
07 · Drawer (overlay state)
Side drawer carries identity + a glance-at resume score, then collapses into icon-led navigation. Sign-out lives at the bottom away from accidental taps.
03 / flows
The moments that move the metrics — first sign-in, the AI cover-letter generating, the apply-success haptic, the camera scan that finally turns a paper resume into a parsed match.
welcome back
Sign in to pick up your applications, recommendations, and resume score.
08 · Sign in
A Clerk-backed entry point disguised as a magazine cover. Segmented switch keeps sign-in and sign-up in one screen — no extra route to load on 3G.
education
We use this to surface matched roles — and to nudge recruiters who care about your background.
09 · Onboarding · Education
One subject per step. Five segments at the top, two filled. The "Skip" affordance is honest about progress without forcing it.
Senior Frontend Engineer
Novel Office · ₹18 — 24 LPA
Ajay_Resume_v3.pdf
Score 78 · primary
SUBMITTING WILL APPLY ONCE · NO DUPLICATES
10 · Apply · AI streaming
Cover letter streams into the textarea with a blinking cursor; Submit stays gated until generation finishes. Regenerate and Edit live one tap away.
application 12 of 12
Now we wait.
Your application to Senior Frontend Engineer at Novel Office is with the recruiter.
Most reply within 3—5 days.
Active applies
3
Avg match
87
11 · Apply · Success
A sage stamp lands, confetti showers, the serif headline relaxes into italic. Two CTAs: dark for the natural next-step, ghost for the divergent path.
3 unread today
Today
You’ve been shortlisted.
Novel Office moved your application to Shortlisted. Expect interview details soon.
2 min ago
3 new matches above 80%
Razorpay, Zerodha, and CRED match your profile this morning.
2 hr ago
A recruiter viewed you
Razorpay opened your application. Most replies follow within 48 hours.
5 hr ago
This week
Complete your profile to unlock 24 more matches
Mon
Zerodha closes in 2 days
Sun
12 · Notifications
Three sections (Today / Week / Earlier), colour-tinted icon tiles per type, pulsing ember dot on unread. Swipe right to mark read; left to delete.
filters · 4 applied
Narrow it down
location
job type
work mode
salary range · LPA
₹14 — 30
deadline
13 · Filter sheet
Drag-to-dismiss bottom sheet, dimmed Search behind. Live result count on the apply CTA so users see the filter narrow the field in real time.
Ajay Singh
Frontend Engineer · Bangalore
Experience
Education
Skills
Hold steady. We’ll auto-crop and run AI parse once you capture.
14 · Camera · Resume scan
The mobile differentiator. Live edge-detection in ember, sweeping scan line, multi-page counter. Auto-crops + auto-parses with OpenAI vision on capture.
don’t miss a callback
Status changes
Shortlisted · interview invite · offer received
High-match alerts
Up to 3 per day, never more — only matches above 80%
Interview reminders
24h, 1h, and 15 min before — meeting link attached
15 · Push · Rationale
Fires after the first apply, never on app open. Three concrete benefit rows. The single ember CTA is the only place this screen earns its accent.
04 / details & states
Six more for the return-visit loop — application detail with interview rounds, saved jobs, settings, verification, edit-skills bottom sheet, and the empty state for users without a profile yet.
Novel Office
Hybrid · Bangalore
Applied 14 May · ₹18 — 24 LPA
next up
With Anita Rao · Rohan Patel
3 rounds planned
Round 1 · Phone screen
Cleared · 16 May · 30 min
“Strong communicator with clear examples of design-system work. Moving to technical.”
— Anita, hiring lead
Round 2 · Technical · React deep-dive
Tomorrow · 60 min
Round 3 · HR + culture fit
To be scheduled
16 · Application detail
Flagship return-visit screen. Next-up peach callout with one-tap meeting join, then three round cards in done / now / future states. Phone-screen feedback inlined in italic.
7 saved · 3 closing soon
Zerodha
Remote
₹14 — 20 LPA
84also saved
UX Engineer
Razorpay · Hybrid · ₹16—22 LPA
Senior Product Engineer
CRED · Bangalore · ₹22—28 LPA
UI Engineer · Growth
Flipkart · Onsite · ₹14—18 LPA
Frontend Lead
Swiggy · Hybrid · ₹26—34 LPA
17 · Saved jobs
Most-urgent gets the peach pedestal with an ember countdown pill; the rest collapse into a calm list. Closing-soon items wear a tiny ember chip wherever they appear.
Ajay Singh
ajay@example.com · +91 98xxx xxx40
notifications
Push notifications
Match alerts, status, interviews
Daily email digest
08:00 IST · matches ≥ 80%
Recruiter activity
Profile views, status changes
v 0.1.0 · build 0512 · made in Bengaluru
18 · Settings
Tile-icon rows keep the eye moving between sections without labels. Toggles use ink-solid for on, hairline for off. Destructive actions wear ember; sign-out stays neutral and bottom.
verify your email
We sent a 6-digit code to ajay@example.com. Enter it to finish creating your account.
Didn’t receive it?
Resend in 24s
UNVERIFIED · YOU CAN’T APPLY UNTIL THIS IS DONE
19 · OTP verification
Six big serif digits in ink-filled tiles — feels like a numbered passport stamp. Active box wears a thick ink border with the blinking cursor; remaining empty stays calm hairline.
edit profile
Your skills
14 / 50
currently listed
suggested for frontend roles
trending in bangalore ↑ 18%
20 · Edit Skills sheet
Pattern for all five edit-section sheets. Currently-listed in ink chips with X-to-remove; suggested in sage (role-targeted) and peach (trending). Save CTA tells you exactly what changes.
tuesday, 20 may
warming up
Add three more skills and a resume so the AI can find roles tailored to you. Usually takes under five minutes.
arriving once your profile is ready
21 · Empty · No recommendations
Pulsing sage circle says "the engine is on, it just needs fuel." Single bold CTA + one quiet alternative. Shimmer skeletons at the bottom preview the experience to come — the empty state is a promise, not a wall.
05 / loose ends
The remaining eight — the rest of the resume pipeline, interview prep, two destructive confirms, the T&C wrap, and the version-gate the App Store will demand.
add a resume
Camera works best for paper or WhatsApp-shared resumes.
Your resume is private · never sold or shared
22 · Upload source picker
Camera leads the choice — wears a peach pedestal and a tiny ember "recommended" chip. Files and Cloud are calmer alternatives. Privacy line at the bottom earns the user’s trust before they upload.
openai · gpt-4o-mini
Usually 8–12 seconds. Hang on.
Extracting text
3 pages · 2,140 words
Identifying sections
summary · experience · skills · education…
Scoring strengths & gaps
resume-score · 0—100
23 · Resume · parsing
Double-pulse sage halo signals "the engine is on." Three-step progress with DONE / NOW / NEXT keys turns 10 seconds of wait into a story the user can read.
resume score
Strong with 3 quick wins available.
Confirm the AI got things right below.
summary
“Frontend engineer with 3 years building React + TypeScript design systems. Led the rebuild of a 60-component library cutting UI bugs ~40%. Open to senior IC roles in product-led teams.”
14 skills detected
Education
B.Tech · IIIT Hyderabad · 2022 · CGPA 8.4
Experience
2 roles · 3 years · last at Acme Co
Certifications
2 listed
24 · Resume · parsed review
Summary rendered in italic serif inside a sage tile — it reads like a magazine pull-quote. Each parsed section gets an edit pencil; nothing is locked. Skip is honest about progress.
novel office · tomorrow 4:00 PM
3 likely questions
01 · System design
“Walk us through how you’d build a design-system migration at scale.”
02 · State management
“When would you reach for Zustand vs Redux?”
03 · Performance
“Tell us about a time you made something faster.”
before you join
Test camera & mic in Meet
Open the design-system rebuild PR on a tab
Notebook + water within reach
Read the latest Novel Office blog post
25 · Interview prep
Panellists, three likely questions in editorial serif italics with sample-answer drill-downs, and a quietly motivating checklist. Sticky bottom shows time-to-start in ember + Join Meet CTA.
destructive action
You’re currently shortlisted at Novel Office, with a technical interview tomorrow. Withdrawing tells the recruiter you’re no longer interested and cannot be undone.
If you have to reschedule, you can do that from the interview card instead.
26 · Withdraw confirm
The one place a centered dialog beats a bottom sheet — destructive actions need to feel like a doorway. Ember-tinted header, italic display headline, and the “keep it” safe button gets equal weight so the user doesn’t panic-tap.
Senior Frontend Engineer
Novel Office · 92% match
Tell us why — we’ll use it to improve your future recommendations.
Also hide all roles from Novel Office
You can unblock anytime in Settings
27 · Dismiss recommendation
A lighter destructive — bottom sheet, four reason chips that double as training data for the AI cache. Block-company option sits below as an opt-in toggle, not a default.
one last thing
We protect your data and never sell it. Confirm the basics below and you’re in.
Your data, in three lines
We share your profile only with recruiters you apply to. We don’t sell your resume. You can delete your account any time from Settings.
28 · T&C consent
Required consents wear thick ink borders and pre-ticked confidence; the optional digest row sits in a dashed border to telegraph “genuinely optional.” The sage tile is the disarming bit — a plain-English data summary before the legal links.
update required
Your version v 0.1.0 can’t talk to our latest backend safely. A small update on the Play Store gets you back in — under a minute.
your version
v 0.1.0
latest version
v 0.4.2 new
what’s new in 0.4.2
app will reopen automatically after install
29 · Version gate
Required by Apple guideline 4.8 + our own /api/config/mobile. Clay wrench tile, version diff card with ember "minimum supported" line, and a what’s-new list that turns the forced update into a small gift.
06 / finishing the set
Splash, the three missing onboarding steps, four edit-section sheets, the rest of the empty states, granular notification preferences, help, the skill-assessment loop, and the offline + error states.
Thinkedufy
mobile
made in Bengaluru
v 0.1.0 · build 0512
30 · Splash
First 800 ms of the app. Pulsing sage brand tile + italic “mobile” subtitle. “Made in Bengaluru” at the bottom does a quiet flag-plant.
about you
Recruiters see this exactly as you type it.
31 · Onboarding · Personal
Step 1 of 5. The active field wears a thick ink border with the cursor inside; idle fields stay calm hairline. India phone-prefix mounted left of the input.
your skills
Tap at least 3 to continue. AI gets better with every one you add.
popular this week
soft skills
languages
32 · Onboarding · Skills
Chip picker as the input. Selected ink-filled with a check, unselected hairline with a plus — tap-to-toggle. Counter in ember nudges progress. Three category bands keep it scannable.
where you are now
Even if it’s your first role — that’s okay too.
3
years
₹12
lakhs · annual
₹18
lakhs · annual
33 · Onboarding · Experience
Working / Fresher segmented at the top respects the audience. Current and expected CTC become serif-display tiles — your salary literally on a pedestal. Years uses a stepper, not a slider, for precision.
edit profile
Personal
34 · Edit Personal
Active name field carries the focus border. Phone shows a small sage VERIFIED chip — earned trust shouldn’t be hidden behind a menu.
edit profile
Education
IIIT Hyderabad · 2018—2022
Class XII · PCM
DPS Bangalore · 2018 · 89%
recruiters often ask
35 · Edit Education
Stacked education cards with the most recent on its own butter pedestal. Quiet “add education” dashed CTA + AI nudges below — the screen helps you do better, not just edit fields.
edit profile
Experience
Jul 2022 → present · 2y 10m · Bangalore
Led design-system rebuild · TypeScript-first component library · cut UI bug rate ~40%
Frontend Intern · StartupCo
May 2021 → Aug 2021 · 4 months · Remote
total
3 yrs
current CTC
₹12L
36 · Edit Experience
Current role gets the sky pedestal + CURRENT chip; past roles collapse into cards. Bullet summary in italic — Acme’s achievements feel like a magazine pull. Total + CTC tiles at the bottom give the recruiter a TL;DR.
edit profile
Preferences
Open to remote
+ 38% more matches
preferred cities
job types
expected salary · LPA
₹16 — 24
notice period
37 · Edit Preferences
Open-to-remote earns a sage tile with a “+38% more matches” nudge — the reward for the toggle, not just the toggle. Salary range as a dual-thumb slider with display-serif numbers above.
nothing in flight
When you apply to a job, it lands here with status updates as recruiters respond.
Median time-to-first-apply · 8 min
Most seekers apply to 3 jobs in their first session.
38 · Empty · no applications
Sky tile + paper-plane = motion implied. “See your top matches” routes back to Home (where the seeker can actually do something). Tiny stat below normalises behaviour without preaching.
your shortlist
Tap the heart on any job to keep it here. Comes in handy when you want to apply tonight from your laptop.
Tip · long-press for quick save
Hold any job card to save without opening it.
39 · Empty · no saved
Peach bookmark tile with an ember heart-badge — the verb “save” rendered. Italic display headline reframes “empty” as “a place for the maybe-laters.” Tip card teaches the long-press shortcut.
unlock the AI engine
We’ll score it, extract your skills, and find tailored roles — usually in under a minute.
what you’ll get
Score 0—100
AI cover letters
3× match rate
40 · Empty · no resume
Two-button CTA (Scan / Upload) elevates the camera path without burying Files. “What you’ll get” tiles preview the reward — sage, peach, sky echo the rest of the system.
channels & cadence
Application status changes
Shortlisted, interview, offer
Recruiter viewed you
Once per recruiter per day
Interview reminders
24h, 1h, and 15 min before
High-match alerts (≥ 80%)
Max 3 per day
Deadline approaching
T-3 days, T-1 day
Profile incomplete
Max once every 7 days
Daily AI digest
Email only · 08:00 IST
Quiet hours
22:00 → 07:00 IST
41 · Notification preferences
A clean two-column matrix (push × email) per trigger — no nested screens. Digest row shows that push is N/A. Quiet-hours card at the bottom protects late-night sleep without spinning the AI off.
we’re here
browse by topic
popular this week
still stuck?
42 · Help & support
Four pastel topic tiles map to the rest of the system. Peach “still stuck?” card pledges a 4-hour human reply — the only place the brand promises something specific. Tiny status row at the bottom builds trust.
React assessment
Score ≥ 80 to verify · timed
question 5 · medium
43 · Skill assessment · quiz
Question rendered as a magazine headline with the technical phrase in italic. Selected option flips to ink with a check, others stay calm. Timer pill turns ember as the clock winds down.
92
/ 100
Verified · Expert.
React · 13 of 15 correct · finished in 9 min
badge unlocked
React · Expert
Shown on your profile · visible to recruiters
where you shone
Hooks & effects
5 / 5
State management
4 / 4
Performance & rendering
2 / 3
Concurrent features
2 / 3
44 · Skill assessment · result
Score ring on a sage tile, badge inside a thick ink-bordered card to feel earned. Breakdown shows where the user shone (sage) and where to grow (butter, peach) — never red.
No internet — showing your offline cache
connection lost
Some things still work — your saved jobs, applications, and resume are right here on your phone.
available offline
Applications
12 cached
Saved jobs
7 cached
Resume
last sync 12 min
Your profile
read-only
needs internet
45 · Offline
Top banner explains the state in plain English. Available-offline tiles use the system’s colour vocabulary so the user reads “yes” and “no” faster than words. The 4G-flaky-commute screen we were always going to need.
07 / components
Eight reusable pieces compose every screen. They are intentionally small in number — the variety comes from the pastel category-tiles, not from inventing new components.
Pills
Filter & status chips
Match badge
Score pill
Segmented
Status switch
Score ring
Resume score
Tile cards
Category surfaces
Sage
Match ≥ 80
Peach
Recommended
Sky
Info / status
Butter
Skills / pending
Bottom nav
Floating tabbar
Sticky CTA
Apply bar
App bar + FAB
Header surface
08 / decisions
Editorial serif over corporate sans
Job hunting is emotional. Instrument Serif on greetings and job titles signals respect — a magazine treatment, not a database. Manrope keeps everything else legible at 11—15px.
Pastel tiles do the categorisation
Six soft tiles (sage / peach / sky / butter / clay / lilac) tag job categories without labels. Match-score sage = strong; recommendation peach = warm; info sky; learning butter. The eye learns the system in three screens.
One ember accent, used sparingly
Ember (#e85a2b) is reserved: the FAB, save-heart fill, "closes in" countdown, profile-completion bar tail, unread notification dot. When the user sees ember, it means now.
Bottom-thumb CTAs always
Apply, Submit, Re-parse, Sign out — every primary action lives in the bottom third. The top reserves itself for identity (greeting, breadcrumb, app bar) and the middle for content.
INR salary always in LPA
Salaries display as ranges in LPA (e.g. ₹18 — 24 LPA). On the detail screen, the salary number is the biggest piece of typography on the page — confidence and clarity.
Avatar = monogram in a tile
Company logos use serif monogram letters inside pastel tiles. Photographic logos don’t survive at 32px on cream backgrounds, and the monogram approach gives us absolute control over palette.