Case study · JHS Orbit - project & task management app for JHS & Associates LLP
Every project at a multi-office CA firm, in one orbit.
JHS Orbit is the web app JHS & Associates now runs its projects, tasks and teams on. We took it from first interview to production: UX research, UI design, a design system and full-stack development.
CLIENT
INDUSTRYChartered accountancy · Audit, tax & advisory
WHAT WE DIDUX research · UI design · Design system · Full-stack development
KICK-OFF · PLATFORMMarch 2025 · Web app (responsive)
SUPER ADMIN HOME · DELIVERY HEALTH, PARTNERS AND PROJECT VALUE ON ONE SCREEN
{01} - THE CHALLENGE
Hundreds of projects. Zero single view.
JHS & Associates runs audits, tax filings and advisory work for clients across sectors and offices. Each project has its own statutory deadlines, review steps and team. The firm had outgrown the patchwork of tools holding it together.
01No single view of the firmProjects lived in [Excel trackers, email threads and WhatsApp groups]. Partners had to ask around to know what was due, who was on it, or where it was stuck.
02Deadline risk found too lateStatutory due dates (GST, TDS, ITR, tax audit, ROC) were tracked by hand. Slippage usually surfaced in the last week, when it was most expensive to fix.
03Reviews buried in inboxesDiscussion, files and approvals were spread across email and chat, so there was no single record of who decided what, and when.
04Workload you could not seeWith teams split across offices and client sites, some people were overloaded while others had capacity, and nobody could see it until it hurt.
{02} - OUR ROLE
We owned it end to end.
No hand-offs between agencies. The same MediaIkon team that interviewed the partners also designed the screens and wrote the code, so the decisions made in research made it all the way to production.
2Designers
4Engineers
14 wksTo first release
- 01Discovery & stakeholder interviews
- 02Workflow mapping & information architecture
- 03UX flows, wireframes & prototypes
- 04UI design for web (+ responsive)
- 05JHS Design System - tokens & components
- 06Frontend development
- 07Backend, database & role-based access
- 08QA, rollout & team onboarding
{03} - PROCESS
DISCOVER → DEFINE → DESIGN → BUILD
What we looked into, and why.
01Shadow the workInterviewed [partners, team leads and team members] and sat with teams during a live [audit / filing] cycle.WHYA CA firm's day runs on deadlines, reviews and partner oversight, not sprints. We needed their vocabulary before drawing a single screen.
02Map roles and permissionsDefined what a Super Admin, a Partner, a Team Lead and a Team Member each need to see and do, from firm-wide numbers down to their own task list.WHYRole-based access shaped the navigation, the home screens and the back end. Getting it right early avoided rework later.
03Audit the spreadsheetsCatalogued every column in the existing trackers and asked which ones people actually used each week.WHYKeep what teams relied on (owner, due date, priority, status), drop what they didn't, and lose nothing important in the move.
04Prototype on real projectsTested a clickable prototype with 36 users, using their own projects and deadlines.WHYReal data exposed edge cases like dependencies, subtasks and shared projects that dummy data never would.
05Build in slicesShipped [onboarding, projects & tasks] first, then [inbox & comments], then [role dashboards & project value], with feedback after each release.WHYThe team got value in weeks, not months, and each release was shaped by actual usage.
PROJECT VIEW · LIST
Every project reads top to bottom: what's next, who owns it, how far along.
Tasks group into To do, In process, Complete and Do later, with assignee, due date, priority and progress in one row. List, Dashboard, Message and Attachment tabs keep everything about a project in one place.
{04} - DECISIONS & TRADE-OFFS
What we changed, and what it cost.
DECISION 01Team spaces → Projects → TasksWork is organised the way the firm is: team spaces (like Onboarding, Legal), projects inside them, tasks inside projects. Partners see a portfolio; team members see their day.TRADE-OFFMore structure than a flat to-do list. "Create" is always one click away in the sidebar, so quick tasks never feel heavy.
DECISION 02Two status languages, on purposeProjects carry health (On track, In review, Delayed, On hold, Cancelled) for partners. Tasks carry progress (To do, In process, Complete, Do later) for the people doing them.TRADE-OFFTwo vocabularies to learn. Consistent colour and placement make them read at a glance.
DECISION 03Role-based home screensSuper Admins, Partners and Team Members each land on the view that answers their first question of the day.TRADE-OFFThree dashboards to design and maintain, kept consistent through one shared component library.
DECISION 04Task detail as a side panelOpening a task slides a panel over the list (fields, files, subtasks, comments and activity) instead of loading a new page.TRADE-OFFLess room for the list while it is open, so the panel can expand to full screen when someone needs to focus.
DECISION 05Custom build over off-the-shelfWe chose a purpose-built app over adapting an off-the-shelf PM tool, for data ownership, firm-specific roles and project value tracking in INR.TRADE-OFFA longer first release, de-risked by phased rollout and an early pilot team.
DECISION 06Design system before screensWe built the JHS Design System (tokens, components and states in the firm's red and navy) before the high-fidelity screens.TRADE-OFFSlower first two weeks; much faster, more consistent design-to-dev handoff after that.
ONE APP, THREE HOME SCREENS
Each role lands on the view that answers its first question of the day.
TASK DETAIL · OPENS AS A SIDE PANEL, KEEPS YOUR PLACE
COMMENTS & ACTIVITY · DECISIONS STAY WITH THE WORK
FIRST RUN · ONBOARDING & SIGN-IN
Separate onboarding flows for admins and employees, so everyone is set up right on day one.
JHS ORBIT · STYLE GUIDE
TOKENS SHOWN ARE THE LIVE FIGMA VARIABLES
A design system built for the build.
Every colour, type style and component state is a named token in Figma (for example button/primary/bgColor/hover) and the same name in code. Designers and developers on our team worked from one source.
COLOURBrand colours come from the JHS logo; the product UI runs on a calm blue action scale and grey neutrals, so red is saved for urgency and errors.
JHS Red#CB1944
brand / logo
brand / logo
JHS Navy#2A5985
brand / logo
brand / logo
Primary#6696F5
button/primary/rest
button/primary/rest
Hover#6287E6
blue/600
blue/600
Pressed · brand text#5B75D2
text-brand
text-brand
Disabled#A2CAFD
primary/disabled
primary/disabled
Focus ring#82B5FA
border-focus
border-focus
Text primary#25272D
text-primary
text-primary
Icon#74798B
icon-primary
icon-primary
Text tertiary#8F929C
text-tertiary
text-tertiary
Placeholder#D3D6DD
text-placeholder
text-placeholder
Border#E2E4E9
border-primary
border-primary
Surface#F3F4F6
bg-hover
bg-hover
Blue50 #E6F2FE · 900 #4656B9
Green50 #E4F7EB · 900 #008539
Orange50 #FFF3E0 · 900 #E65200
Red50 #FFEBEE · 900 #C10616
Teal50 #E0F2F1 · 900 #004D40
Yellow50 #FFFDE7 · 900 #F57F17
TYPOGRAPHY · INTEROne family, seven styles. Dense enough for tables, clear enough for partners scanning on a laptop.
Good evening, PartnerHeader / H3
Inter 500 · 24/32
Inter 500 · 24/32
Projects on holdHeader / H4
Inter 600 · 20/28
Inter 600 · 20/28
Vistara [2025]Page header
Inter 500 · 18/24
Inter 500 · 18/24
Reporting: design conceptText md / Medium
Inter 500 · 14/22
Inter 500 · 14/22
Assigned to Amit · due Apr 25Text md / Regular
Inter 400 · 14/22
Inter 400 · 14/22
UPCOMING · OVERDUE (3)Text sm / Medium
Inter 500 · 12/18
Inter 500 · 12/18
Updated 2 hours agoText sm / Regular
Inter 400 · 12/18
Inter 400 · 12/18
TAGS, PRIORITY & STATUS
designdesigndesigndesigndesigndesign
UrgentHighNormalLow
On trackIn reviewDelayedOn holdCancelled
BOARD CARDTitle, tags, assignee, comments, subtasks and due date: everything needed to triage without opening the task.
Contact customers with failed payments or who churneddesigndesignANAnna2 comments · 5 subtasks · Aug 6
BUTTONS · 5 VARIANTS × 5 STATES
RESTHOVERPRESSEDFOCUSDISABLEDPrimaryButtonButtonButtonButtonButtonSecondaryButtonButtonButtonButtonButtonLightButtonButtonButtonButtonButtonDangerButtonButtonButtonButtonButtonDanger outlineButtonButtonButtonButtonButton
INPUTS
Label text · DefaultPlaceholder…
Label text · HoverPlaceholder…
Label text · FocusPlaceholder…
Label text · ErrorPlaceholder…
Label text · DisabledPlaceholder…
COMPONENT LIBRARY · 15 GROUPS
Buttons & social buttonsInputs, textarea & dropdownsRadio, checkbox & switchTags, badges & statusSidebar, team spaces & menusPage headers & tabsToolbar, filters & searchModals & templatesProjects board & cardsTable rows & sectionsTask details, comments & attachmentsCalendar & timelineDashboard cards & chartsNotifications & inboxOnboarding & empty states
{05} - OUTCOME
LIVE SINCE AUGUST 2025 · MEASURED OVER 10 MONTHS
One orbit for every project, in 4 months.
30%fewer delayed projects
9 hrssaved per manager, per week
220active users across 4 offices
14spreadsheets & trackers retired