Case study · Product Design · Web Application · Admin Dashboard
01
Wellness is an admin dashboard for hospital and clinic administrators. It brings the day-to-day records of a healthcare facility (appointments, patients, doctors, departments and employees) into one workspace, with a dashboard that summarises what needs attention today.
I designed the product end to end in Figma: information architecture, every screen and state, and a small design system. The design was then rebuilt as a working prototype you can use: search, filter, sort, add, edit and delete records, change settings and walk through sign-in, all running in the browser with sample data.
02
Lots of records, many roles, and very little time to look for things.
Hospital administration is made of many small, repeated tasks across several record types. The design challenge was less about any single screen and more about making a large surface feel predictable.
Design challenges the product had to solve:
03
Every records page shares the same toolbar, table, filter, form and confirmation pattern, so learning one page means knowing them all.
The dashboard leads with today’s numbers, trends and who is available, then hands off to detail pages.
A small, consistent colour language for status, used the same way in tables, cards and badges.
Every delete asks for confirmation and names exactly what will be removed.
04
05
A dashboard that answers “what’s happening today?”
One records pattern for every list
Adding and removing records
Departments and staff
Settings that scale
06
Creating a welcoming first experience.
The onboarding experience is designed to help people get started with confidence, understand the platform, and complete the steps they need to reach their workspace.
Wellness is a tool for hospital staff, so onboarding is about access rather than personal setup: creating an account, confirming it, signing in, and getting back in when a password is forgotten. Every access screen shares one split layout, with the form on the left and a panel on the right that explains what the product is for.
07
Three short paths, depending on who is arriving. All of them end in the dashboard.
New user
Returning user
A wrong email address keeps the user on Log In with an inline error.
Account recovery
01 · New user
Create an account
02 · New user
Verify the email address
03 · Returning user
Sign in
04 · Returning user
Recover from mistakes
05 · Account recovery
Reset a forgotten password
08
A short form and a clear heading (“Create Account / Enter your details to sign up”) introduce the product without asking for more than it needs.
Sign-in, “Keep me login” and “Forgot Password?” live on one screen, and recovery takes two steps before returning to Log In.
Each screen asks for one kind of information: identity on Register, a code on verification, an email on recovery.
As an admin tool, Wellness has no preference or goal screens in the design; personal details are managed later in Settings › My Account.
Every screen has one primary button and a text link to the other path (Register ↔ Log In), so users always know the next step.
09
The prototype works end to end, so the flows can be tried rather than imagined. Changes are saved in the browser and can be reset from the profile menu.
Global search from the header jumps to the matching record; each table also has its own search, filters and sortable columns.
Add New opens a validated form; required fields and phone and age formats are checked before saving, and a toast confirms the result.
View opens a record’s details with quick status changes; Edit reopens the same form, filled in.
Select rows for bulk delete; every delete goes through a named confirmation.
The dashboard date range updates the stats, and Download exports a CSV report.
10
A small, quiet system: a soft grey canvas (#F8F8F8), white cards with generous radius, an indigo primary for actions, a blue used only as light tints for charts and toggles, and status colours used only for status.
The same dashboard at phone width
11
The result is a complete set of screens and a working prototype that behaves like the product: every button does something, and the main tasks can be completed from start to finish.
The biggest lesson was how much a shared pattern carries. Designing the records page once, carefully, and reusing it for appointments, patients, doctors and employees did more for consistency than any individual screen. Building the prototype also exposed states the static design glossed over (empty search results, bulk selection, validation messages), which are now part of the design.
Next, I would test the flows with front desk staff to check the wording of statuses and the order of table columns, and design role-based views so each team sees only what it needs.
Let’s create digital experiences that make complex things feel simple.
Let’s Work Together