Mobile Application Rupesh N. Chavan Mobile App / AI-native HRMS 2026

Not a companion app.
The whole product.

Every US-first HR incumbent ships mobile as a reduced subset of the real thing. Emplora on Android is the same product. Same fourteen modules, same Copilot, same permissions, wrapped in a shell that behaves like a native app rather than a web page in a frame.

Emplora · Mobile · interface
RoleProduct Design & Build
Timeline2026
CategoryMobile App / HR Tech
StackCapacitor 8 · Next.js 15 · Supabase
14
Modules, same as web
4
Roles & permission scopes
0
Features cut for mobile
2-tap
Approve from a notification
02 · Problem Statement

Core Challenges

01
P1, Frankensystems
6.17 providers per employee lifecycle; 77% of organisations split people data across multiple HCM databases. The result is repetitive manual entry and no single source of truth.
02
P2, Fake self-service
If employees still need three systems, two logins and a manager's help to complete a basic task, the queue has not been removed, it has been moved. Frontline staff without a desktop are hit hardest.
03
P3, Administrative gravity
45% of HR leaders lose more than half their week to admin, crowding out the strategic work they were hired to do, and were promised software would free them for.
04
P4, Reactive, blind decisions
Hiring, performance, engagement and compensation data live apart, so attrition and comp-equity risk are only visible after they have already cost money.
05
P5, Integration tax
Systems integration ranks second among HR-professional pain points. Point solutions silo by default, and every connection between them is its own project.
06
P6, Adoption failure
82% of HR-tech deployments report adoption challenges. The root cause is interface quality and task friction, not training budget, which is why this is a design problem.

Six pain points, grouped from review corpora and industry surveys. They are not independent, each one compounds the next.

03 · Research Insights

Mobile treated as an accessory,
not as the product

Research across eight HR platforms found the same pattern: mobile ships as a reduced companion. You can check a balance and approve a request, then you hit a wall and are told to open a laptop. Darwinbox displaced SAP and Workday in Indian conglomerates largely because it did not do this, which is the clearest proof available that mobile parity wins deals.

Two of the three user populations are phone-first. The line manager approves between meetings; the employee has no desktop at all. Both are the users the category serves worst, and 82% of HR-tech rollouts report adoption failure, concentrated exactly there.

So mobile parity became a strategic wedge rather than a delivery detail: identical capability on Android and web, from one codebase, with the phone getting its own layouts instead of a reflowed desktop.

01 / 04
The queue moved, it didn't disappear
Self-service portals reduced HR email and increased HR Slack. The interaction cost was never removed, only relocated, and the people relocating it are the ones without a desk.
02 / 04
Managers are episodic users
They open an HRIS twice a year, under protest. Any interface that depends on recall between sessions fails them structurally. This is the mechanical cause of the 82% adoption number, not a training budget problem.
03 / 04
A WebView announces itself
Users cannot name what is wrong, but they feel it instantly: a dead back button, a rubber-band overscroll, text that selects when you tap a tab, a bar bar floating over the keyboard. Each one alone is small; together they read as "this is a website".
04 / 04
A reflowed table is a hidden table
A 720px data table behind a horizontal scrollbar hides the columns that matter, and nobody discovers the scroll. Responsive is not the same as designed. The phone needed its own layouts, not narrower versions of the desktop ones.
The Problem
The Opportunity
Capability Parity Capacitor Shell Offline-Tolerant AI Edge-to-Edge Android

Everyone in the category ships an app. Almost nobody ships the product. Read this table as capability on a phone, not "is there an icon on the home screen".

On a phone, can you… BambooHR Rippling Darwinbox Emplora
Approve leave & view your own record ✓ ✓ ✓ ✓
Open the full org chart and reach every node ~ ~ ✓ ✓
Run analytics and see comp-band outliers , ~ ~ ✓
Read explainable attrition risk per person , , ~ ✓
Bulk-import a roster from a spreadsheet , , , ✓
Ask an AI assistant in plain language , ~ ~ ✓
Get an answer with no network connection , , , ✓

The gap that falls out of this: the upper-right quadrant of depth versus self-serve is empty. Darwinbox has the depth but needs a sales cycle; BambooHR has the ease but hits a ceiling around a hundred people. Nobody occupies both, which is the 50-500 "graduation gap", and Emplora's beachhead.

Consolidation
6.17
Providers per employee lifecycle
The average company runs six-plus disconnected systems across hiring, performance, leave, payroll and offboarding. This is the number Emplora sells against: 6.17 → 1.
Data fragmentation
77%
Split people data across HCM databases
More than three-quarters of organisations store employee data in more than one database, which makes a single data model a defensible differentiator rather than a hygiene feature.
Admin burden
45%
HR leaders spending >half their time on admin
Time saved is the ROI story that closes deals in this segment, and the clearest evidence that the category competes on friction, not on feature count.
Adoption
82%
HR-tech rollouts reporting adoption challenges
The market is not short on HR features. It is short on HR systems people actually use, so the winning product competes on time-to-value and interface quality.
AI in HR
24.8%
CAGR, $3.25B (2023) to $15.24B (2030)
AI is the growth axis, not the feature axis. Enterprise apps shipping task-specific agents go from under 5% to a projected 40% within eighteen months.
Pricing
$250
BambooHR's monthly seat floor
Sticker prices understate true cost by 30-50% once add-ons land. Price opacity is the single most consistent complaint across every review source, and therefore an opening.
04 · What Users Need

What Users Need

As a... I want to... So that... Priority
Line manager (Marcus) Approve a request from the notification without navigating anywhere I can clear it between meetings instead of saving it for a laptop I won't open High
Employee (Aisha) Ask "how much leave do I have left" in plain language and get an answer A thirty-second question doesn't become a portal, a form and a DM to HR High
Line manager (Marcus) Reach any screen by typing what I want, not by remembering where it lives Opening the app twice a year doesn't mean relearning the navigation each time High
HR manager (Priya) Open a full employee record on my phone, including risk and compensation I can answer a leadership question from a corridor, not promise to follow up High
Employee (Aisha) Have the directory and Copilot still work on a train with no signal The app is useful in the places I actually use my phone Medium
Any role Press the Android back button and have it do what I expect The app feels like an app instead of a website someone wrapped Medium

Five roles that appear in every 50-500 person company, synthesised from review corpora and industry surveys. Two of them buy; all five live with the result.

🎯
Priya Sharma
HR Manager, 34 · Primary
  • Cut admin below a quarter of her week
  • Predict attrition before it becomes a resignation
  • Walk into leadership with data, not caveats
  • Six systems, none of which agree with each other
  • Told to "be strategic" while doing data entry
  • "I knew Rahul was leaving. I just didn't have anything to show for it until his notice landed."
⭐
Marcus Chen
Engineering Manager, 38 · Largest population
  • Approve things in under two minutes, from a phone
  • Write fair reviews without spending a weekend
  • Never be surprised by a resignation
  • Opens the HRIS twice a year and relearns it each time
  • Blank-page review writing with no memory of Q1
  • "I don't need a people platform. I need to click yes and get back to work."
👥
Aisha Okafor
Customer Success Associate, 26 · Volume
  • Know her leave balance without asking a human
  • Find the remote-work policy in one query
  • See a visible path forward in the company
  • Phone-first, desktop-optional, and the portal is neither
  • Three systems and two logins for one question
  • "I just want to know how many days I have left. That shouldn't be a project."
💰
David Rodriguez
COO, 45 · Economic buyer
  • One system before headcount doubles to 300
  • Predictable cost with no implementation fee
  • Live in a week, not a quarter
  • Every vendor hides pricing behind a demo
  • Quoted $60-80 PEPM for capability he'd use a third of
  • "I won't sit through four demos to learn what it costs."
📊
Sarah Lindqvist
CHRO, 51 · Expansion buyer
  • Board-ready workforce intelligence
  • Defensible comp equity across three countries
  • Retention as a forecast, not a postmortem
  • Reports that only describe what already happened
  • AI recommendations she cannot explain to an employee
  • "Explainability isn't a feature, it's the whole thing."
05 · Journey Map

Flow A · Priya spots a flight risk

The flow the whole product exists to make possible: a 60-day warning that ends in a specific action assigned to a specific person, not a chart.

01
Dashboard
The role-adaptive home surfaces a risk widget, no report to run, no filter to configure
02
Open the record
One entity behind tabs, overview, timeline, performance, documents. Compensation and risk surface only within your read scope
03
Read the attribution
Engagement decline, below band midpoint, stalled progression. Each with a weight and a sentence that justifies it
04
Ask Copilot
"Draft a retention plan", the assistant produces the work rather than suggesting she do it
05
Review & assign
She edits, then assigns to the line manager. One approval, not a new project
06
Tracked
Written to the employee timeline, so the next person to open the record sees what was already tried

Four more flows, compressed

Flow B, Marcus approves in 30 seconds
Push notification → mobile deep link → approve. Two taps, no navigation. The whole design target for the episodic user.
Flow C, Aisha checks her balance
Open app → ask bar → "how much leave do I have left" → answer with its source. Optionally: "book Aug 20-22" → filed.
Flow D, Onboarding a new hire
Add employee → Copilot generates a role-specific 30-day plan → assign a buddy → tasks appear on the new hire's own dashboard.
Flow E, Review cycle
Copilot drafts each review from goals, 1:1s and peer feedback. Marcus edits and submits, editing beats authoring from a blank page.
06 · Design Decisions

How we decided

Four decisions shaped the Android build. The first set the ambition; the rest are what that ambition costs once you leave the browser.

Decision 01
Companion app vs. capability parity
Option A, Rejected. A focused companion: dashboard, my record, approvals, notifications. The category standard, and genuinely easier to design. A small surface can be polished quickly and tested cheaply.
Option B, Chosen. All fourteen modules on the phone, including analytics, payroll, bulk import and the risk register. The tab bar carries the five highest-frequency destinations; "More" opens the complete lifecycle and administration tree.
Reasoning
A companion app is a promise that the real work happens elsewhere. For two of the three personas there is no elsewhere. Aisha is phone-first by circumstance, Marcus by preference. The moment a user hits a feature wall they learn the app is not to be trusted for anything important, and they stop opening it for the things it does handle. Parity is not a feature list; it is the precondition for the app being used at all. It also removes an entire class of product decision, nobody has to argue about what earns a place on mobile.

A companion app is a promise that the real work happens elsewhere. For two of the three personas there is no elsewhere. Aisha is phone-first by circumstance, Marcus by preference. The moment a user hits a feature wall they learn the app is not to be trusted for anything important, and they stop opening it for the things it does handle. Parity is not a feature list; it is the precondition for the app being used at all. It also removes an entire class of product decision, nobody has to argue about what earns a place on mobile.
Decision 02
Native rewrite vs. one codebase in a Capacitor shell
Option A, Rejected. A separate Kotlin or React Native client. First-rate feel, real native components, and a second implementation of the permission matrix, the risk model and every screen.
Option B, Chosen. One Next.js build, statically exported and wrapped in Capacitor 8. The shell adds haptics, splash, status bar, keyboard and hardware-back handling; every plugin call is a no-op on the web so components never branch on platform.
Reasoning
Parity and a second codebase are in direct conflict. Two implementations means two permission matrices, and a permission matrix that exists twice is a permission matrix that will disagree, which is how a hidden button becomes an unguarded endpoint. The native feel that a rewrite buys is real, but it turns out to be a finite list of behaviours you can restore deliberately. The parity it costs is not recoverable at all.

Parity and a second codebase are in direct conflict. Two implementations means two permission matrices, and a permission matrix that exists twice is a permission matrix that will disagree, which is how a hidden button becomes an unguarded endpoint. The native feel that a rewrite buys is real, but it turns out to be a finite list of behaviours you can restore deliberately. The parity it costs is not recoverable at all.
Decision 03
Fight edge-to-edge vs. design for it
Option A, Rejected. Opt out of edge-to-edge and let Android letterbox the WebView between opaque system bars. Simple, and every existing layout keeps working unchanged.
Option B, Chosen. Transparent system bars, content drawing underneath, and layout utilities that add env(safe-area-inset-*) to element height rather than padding inside it.
Reasoning
targetSdk 36 forces edge-to-edge, so opting out was borrowed time. The detail that matters is the one everyone gets wrong: padding inside a fixed 64px app bar leaves the bar 64px tall with the status bar sitting on top of its contents. The inset has to grow the element, not inset its children. Getting this right is the difference between a phone app and a web page with a notch problem, and it is invisible when correct, which is why it is worth writing down.

targetSdk 36 forces edge-to-edge, so opting out was borrowed time. The detail that matters is the one everyone gets wrong: padding inside a fixed 64px app bar leaves the bar 64px tall with the status bar sitting on top of its contents. The inset has to grow the element, not inset its children. Getting this right is the difference between a phone app and a web page with a notch problem, and it is invisible when correct, which is why it is worth writing down.
Decision 04
Responsive reflow vs. phone-specific layouts
Option A, Rejected. Keep every desktop component and let it reflow. Tables scroll horizontally, the org chart canvas pans, stat tiles stack one per row. One layout to maintain.
Option B, Chosen. Below md, tables become card lists, the org chart becomes an indented tree, short stat tiles go 2-up, and rows with actions stack identity above buttons instead of sharing a wrapping flex line.
Reasoning
Each of these started as a bug report that was really a design failure. A horizontally scrolling table hides the columns that matter and nobody discovers the scroll. A centred org-chart canvas wider than the viewport renders the root off-screen behind empty space. Fixed by centring scroll position with a ResizeObserver, but only after deciding the canvas belonged on tablets and up. And a flex-wrap row with a name and two buttons crushes the text column to one word per line. Responsive is a mechanism; the layouts still have to be designed.

Each of these started as a bug report that was really a design failure. A horizontally scrolling table hides the columns that matter and nobody discovers the scroll. A centred org-chart canvas wider than the viewport renders the root off-screen behind empty space. Fixed by centring scroll position with a ResizeObserver, but only after deciding the canvas belonged on tablets and up. And a flex-wrap row with a name and two buttons crushes the text column to one word per line. Responsive is a mechanism; the layouts still have to be designed.
Decision 05
An hour-long session, on a device people keep for years
Option A, Rejected. Let the token expire and return the person to the login screen. The web build never has this problem, because it holds an httpOnly cookie the Supabase client renews without being asked, so the fault is invisible until someone actually uses the app for a full afternoon.
Option B, Chosen. A refresh endpoint the native build calls with its stored refresh token. The Capacitor bundle has no cookie jar, so it carries a bearer token that expires after an hour, and with nothing to renew it the app quietly dropped to login roughly every hour of use. Neither side assumes the old token keeps working afterwards, because that depends on a rotation setting rather than on anything in this code. Being logged out while working is exactly the tell that says the thing in your hand is a website wearing a shell.

Native feel is not one big thing. It is a finite list of small betrayals, each of which has a fix. All of it is scoped to html[data-native], which the app shell sets only under Capacitor, so the browser build keeps normal browser behaviour.

Extracted from Figma via the Figma MCP server and built on Untitled UI primitives. These are the published variables, not approximations of them. The phone inherits the same tokens; only the layout rules change.

Role-adaptive rather than role-gated: one route, three compositions. A promotion changes what Marcus sees without changing where he goes, which matters more on a phone, where there is no sidebar to re-learn.

Product Tokens
--success-500 (Primary) #17B26A
--gray-900 (Primary text) #181D27
--gray-600 (Body) #535862
--gray-200 (Borders) #E9EAEB
--warning-500 (At risk) #F79009
--rose-500 (Critical) #F63D68
Roles & Read Scope
Owner, all HR Admin, all Manager, team Employee, own Restricted
Native Layout Rules
Tab bar height 64px + safe-area
Touch target minimum 44 × 44px
Table → card list below md
Canvas → indented tree below md
Corner radii 8 / 12 / 16 / 20 / 28
Motion, informational, not decorative
Nav pill (shared layoutId) spring 300 / 30
Page transition y 8→0, 250ms
Metric count-up 900ms, tabular nums
Drawer x 100%→0, spring
prefers-reduced-motion honoured globally
Type Scale, Inter, self-hosted
24 / 32 · 600 display-xs, page titles & metric values
16 / 24 · 600 text-md-semibold, card titles, active nav
14 / 20 · 500 text-sm-medium, table cells and labels
12 / 18 · 600 TEXT-XS-SEMIBOLD, BADGES

The hardware back button

Problem
A dead back button is the fastest way for an Android app to feel like a website. The default in a WebView shell is either nothing at all, or an exit that discards the user's place.
Approach
A single handler unwinds the stack in the order the user built it: Copilot, then the command palette, then the nav drawer, then history, then exit.
User Benefit
Back always undoes the last thing you did. You never lose your place, and you never have to hunt for a close button.
Design Benefit
Overlays can be layered freely, because there is a consistent, predictable way out of any depth.

The keyboard and the tab bar

Problem
A fixed bottom tab bar floats on top of the keyboard, covering the field the user is typing into, the single most common flaw in wrapped apps.
Approach
Body resize plus adjustResize, and the tab bar unmounts entirely while the keyboard is up rather than trying to reposition itself around it.
User Benefit
Typing anywhere in the app, Copilot, search, a form field, behaves the way it does in every other Android app.
Design Benefit
Input-heavy screens no longer need custom padding hacks to stay usable.

Page feel · the small betrayals

Problem
Rubber-band overscroll, pull-to-refresh, text selecting when you tap a nav item, the long-press callout, a 300ms double-tap-zoom delay, images that drag. Each is minor; together they are unmistakable.
Approach
All of it suppressed on chrome, with inputs and anything marked [data-selectable] opting back in, because a payslip figure you cannot copy is its own bug.
User Benefit
Taps register immediately, scrolls stop where they should, and nothing highlights blue when you meant to navigate.
Design Benefit
The interface can be judged on its own merits rather than through a layer of browser artefacts.

Copilot that answers offline

Problem
An AI assistant that returns a network error is worse than no assistant, it teaches users not to ask. Phones lose signal in exactly the places people use them.
Approach
The model-backed answer is the preferred path; when it is unreachable, a deterministic fallback computes the answer from the roster already loaded on the device.
User Benefit
"Who is at risk of leaving, and why?" or "how many people are on leave today?" still returns a real answer on a train.
Design Benefit
The ask bar can be presented as a primary surface rather than a best-effort extra, which is what makes ⌘K viable as the zero-recall path for episodic users.

Tables become cards, canvases become trees

Problem
The desktop directory, payroll ledger and risk register are all wide tables. Reflowed onto a phone they hide their most important columns behind a scrollbar nobody finds.
Approach
Below md every data table renders as a card list, and the org chart switches from a pannable canvas to an indented tree whose search auto-expands the path to each match.
User Benefit
Every field is visible without horizontal scrolling, and finding a person in a 40-node hierarchy takes one query rather than a hunt.
Design Benefit
Parity stops meaning "the same markup" and starts meaning "the same capability", which is the only version of it that survives contact with a phone.
Design System

One system,
two form factors

One dashboard, three compositions
Employee My balance, my tasks, my team
Manager Team to-dos, approvals, pulse
HR Admin Org metrics, status, risk, birthdays
07 · Low-Fidelity

Structure first,
before it got pretty

The mobile build in grey, which is where the cramped screens show themselves.

A desktop HR layout does not become a mobile one by getting narrower. These studies are where the dashboard lost its tile grid and the employee record stopped trying to show every field at once. Grey makes a cramped screen obvious in a way a polished one hides.

Low-fidelity structure study: dashboard
Dashboard
Low-fidelity structure study: people
People
Low-fidelity structure study: employee record
Employee record
Low-fidelity structure study: org chart
Org chart
Low-fidelity structure study: payroll
Payroll
Low-fidelity structure study: copilot
Copilot
08 · High-Fidelity Design

The same product,
at arm's length

Five destinations in the tab bar, the full tree behind More, and a dashboard that recomposes for your role rather than gating you out of it. Nothing here is a mobile-only screen, it is the web app, laid out for a thumb.

Emplora, Employee Management System
Emplora · employee management system, mobile app

Below: captured from the running build at 390×844. Every screen here also exists on desktop. None of them are mobile-only, and none of the desktop ones are missing.

The tab bar carries the five highest-frequency destinations; everything else lives behind More. Analytics, payroll and bulk import are the three most commonly cut from a companion app, they are the reason this section exists.

This is a design and engineering concept running on demo data, so these are build facts rather than adoption numbers. What the Android app can actually do, verified against the same test suite as the web build.

14
Modules on the phone
Dashboard, directory, records, org chart, analytics, import, onboarding, training, performance, time off, payroll, offboarding, documents, settings.
0
Features cut for mobile
Everything the web app can do, the Android build can do, including bulk import and the comp-equity register.
18
RLS checks passing
Authorisation is enforced in Postgres, not in app code, so the phone client cannot widen its own scope even if the UI is wrong.
58
End-to-end API checks
One suite covers both clients, because both clients call the same endpoints with the same permission matrix.
09 · Tools & Workflow

Tools & Workflow

Design and build were the same loop on this project, so the toolkit spans both.

Figma
Figma
Source of truth for the design system
Figma
Figma MCP
Token extraction straight into code, published variables, not eyeballed hexes
Next.js
Next.js 15 · React 19
App Router, TypeScript strict, Tailwind v4
Supabase
Supabase
Postgres with RLS, authorisation in the database, not app code
Capacitor
Capacitor 8
Android shell around the same build
Framer
Framer Motion
One shared motion vocabulary, reduced-motion honoured centrally
Claude
Claude Opus
Powers Copilot in-product; deterministic fallback when offline

Five phases, each producing a document the next one is accountable to. The point of writing them down was that later decisions could be checked against earlier reasoning instead of relitigated.

01
Market & competitive research

Eight-platform teardown, BambooHR, Rippling, Deel, Zoho People, Darwinbox, Keka, Gusto, Workday, scored on price, real strength and where each one breaks. Positioned the depth/self-serve quadrant and found the empty corner.

Deliverable: market sizing, feature parity matrix, six ranked pain points, four strategic wedges.

02
Discovery, empathise, define, ideate

Empathy maps for the three daily roles, five field observations, a problem statement, five point-of-view statements, and a How-Might-We set grouped by consolidation, agency, adoption, mobile and trust. Concepts scored on impact × feasibility.

Deliverable: five personas with feature traceability, prioritisation matrix, seven success metrics with baselines and targets.

03
Information architecture

Organised by employee lifecycle rather than by internal department, under three rules: every screen is a view onto one record; depth capped at three levels for zero-recall; and every node reachable by typing, so hierarchy never becomes a memory test.

Deliverable: sitemap, desktop/tablet/mobile nav models, RBAC matrix, URL scheme, content model, five key flows.

04
Design system

Tokens pulled from Figma through the MCP server rather than transcribed by hand. Colour, type, spacing, radii and the Untitled UI skeuomorphic button ring, which is what stops the buttons reading as flat. Motion specified as a named vocabulary so no component invents its own easing.

Deliverable: token spec, component inventory (primitives, composites, shell), motion spec, accessibility baseline: AA body text, 44px targets, reduced-motion honoured globally.

05
Build, verify, ship both surfaces

One Next.js codebase, statically exported and wrapped in Capacitor for Android. Authorisation enforced by Postgres RLS rather than application code, so a query the app never wrote still cannot leak another tenant's roster.

Deliverable: live web app, Android build, 18 RLS checks signed in as real users, 58 end-to-end API checks, deployment runbook.

06
Audit what shipped, against a buyer who does not exist yet

Asked whether the product would survive procurement at Samsung or Google scale and answered it against the repository rather than from memory. The finding that mattered was not a missing feature: the roster silently truncated at 1,000 rows, so past that point the product displayed a smaller company than the one that existed, with no error anywhere. Reproduced on a throwaway tenant of 1,200 employees before anything was changed.

Deliverable: readiness audit with measured payloads, a prioritised fix list, paging with truncation detection, throttled auth endpoints, and a written decision not to build AI resume screening or individual performance prediction.

10 · What I Learned

What this project taught me

01
Parity is a constraint you accept before you design
Deciding up front that nothing would be cut for mobile removed a whole category of argument. No roadmap debate about which modules earn a phone screen, no "v2 will add analytics". It also made every layout problem non-negotiable: you cannot quietly drop the risk register because it is hard to fit, you have to design it. That pressure produced better mobile layouts than a smaller scope would have.
02
"Native feel" is a finite checklist
It felt like an unwinnable, atmospheric problem until I wrote it down: back button, safe areas, keyboard, overscroll, selection, tap delay, drag, splash, haptics. Nine items, each with a specific fix. Naming them turned a vague sense that the app felt wrong into a task list, and it is worth documenting, because the next wrapped app will have exactly the same nine.
03
An offline fallback changes what the AI can be
A copilot that sometimes fails is one users learn to route around. Adding a deterministic answer computed from data already on the device wasn't primarily a resilience feature, it let the ask bar be presented as a primary navigation surface, which is what makes it viable as the zero-recall path for a manager who last logged in six months ago.
04
Auth has to follow the platform, not the pattern
The web app uses an httpOnly cookie. A statically exported bundle has no origin and therefore no usable cookie jar, so the phone sends a bearer token from encrypted storage instead, and one middleware resolves either. Trying to force one mechanism across both would have meant either weakening the web session or shipping an app that silently signs itself out.
05
The failures that matter are the silent ones
Three independent gates: CORS preflight, Android's cleartext policy, and WebView mixed content, all surface as the same useless TypeError: Failed to fetch. The fix was as much diagnostic as technical: the boot screen now shows the compiled-in API address, the app's own origin, and a button that tests the connection. Error messages are interface.
The problem
Mobile HR is where frontline and episodic users actually live, and it is where every US-first incumbent is weakest. A companion app with three of the features, treated as an accessory to the desktop product.
The approach
Ship the same product, not a subset. One Capacitor shell around the same Next.js build, then design away every tell that gives a WebView up, safe areas, back button, keyboard, haptics, overscroll.
The outcome
Full capability parity on Android, with phone-specific layouts rather than a reflowed desktop, and a Copilot that still answers when the network is gone.
14
Modules on phone
5
Tab bar destinations
7
Native behaviours restored
0
Capability removed
"I went into the Android build expecting the hard part to be layout, and it wasn't. Shrinking a dashboard is a solved problem. The hard part was everything the browser does for free that an app is not supposed to do. The overscroll, the selection highlight, the tab bar drifting over the keyboard. None of it is in a spec, and users can't name any of it, but they feel all of it within about four seconds. Writing that list down was the most useful thing I did on this project, because it turned an unwinnable vibe into nine tickets. The parity decision was the other one: committing to zero cut features before designing anything meant I never got to negotiate my way out of a difficult screen."
Rupesh Chavan, Product Design & Build
Explore more