01
The problemOne login, three kinds of people
The design answer
Decision · Accounts→Three doors on one sign-in page: Site, Company and User Details.
QI-Tech: case study of a white-label quality and compliance platform
A white-label quality and compliance platform. CarePlus runs it under its own name across every pharmacy site, from head office down to each person on shift.
SMSarah MitchellSenior Pharmacist · Bristol
4-digit PIN on the shared device
✓RCA assignedINC-2208 · Dispensing error
Open items by urgencyASDA Manchester · today
10open
- Overdue2
- Due today4
- Awaiting reply4
Tasks due today31 overdue
Case feedback22 unread
Forms overdue21 due today
RCAs pending2Unstarted
Essentials
One engine,
any brand.
QI-Tech is the company and the platform. CarePlus is the customer running it, so every screen had to wear someone else's name without losing its own logic.
White-label by design
The platform
The customer brand
Built by QI-Tech, launched as CarePlus.
Each customer gets its own logo, colours, sign-in page and site themes. The product underneath stays the same, with a quiet "Powered by QI-Tech" at the foot of the sign-in page.
The platformThe customer brand
Theme builder. Head office picks the logo, primary and secondary colours, tabs and buttons, and sees them on a live preview before anything goes out to the sites.
01 · Overview
Three doors,
one product.
QI-Tech helps multi-site healthcare businesses report incidents, run audits and root cause analyses, and keep forms and tasks on schedule.
We designed the full platform around three kinds of account, so head office, each site and every person on shift sees exactly the part they need.
!The problem
The challenge
A pharmacy group juggles incidents, controlled-drug checks, fridge logs, audits and training across dozens of sites. Head office needs the whole picture, a pharmacist at the counter needs to log an error in seconds, and every customer wants the system to look like their own.
One rigid tool for everyone meant too much for the counter and too little for head office.
HQHead officeSees every site, sets templates and reports.
SEach siteLogs incidents and forms, works its own tasks.
UEvery personSigns in fast on a shared device.
✓What we delivered
How we helped
We designed one product with three doors: a company account for head office, a site account for each regional site such as a pharmacy, and a user account for every person at that site.
All three share the same components, status colours and layouts, and every brand decision lives in themes, so a new customer is a configuration, not a redesign.
3Account types
9Core modules
130Screens designed
02 · The accounts
Who signs in, and why.
The same CarePlus sign-in page opens three different products. A tab picks the door, and everything behind it is shaped for that role.
Company account01
For head office
Compliance and operations teams who look after every site at once.
- Create sites and shape the company structure
- Build case, RCA, task and form templates
- Dashboards and scheduled reports across sites
- Brand the whole platform with themes
Site account02
For each site
A regional site such as a pharmacy, signed in on a shared device at the counter.
- Submit incidents and scheduled forms
- Work through site tasks and RCAs
- A timeline of everything that happened on site
- Its own sign-in page and theme
User account03
For every person
Each member of staff at a site, from a pharmacist to a new starter.
- Pick your face, then a 4-digit PIN
- Your own tasks, cases, forms and audits
- Which sites you can access, and your role on each
- Upcoming leave at a glance
One sign-in page
A tab picks the door.
Site, Company and User Details sit side by side on the CarePlus sign-in page, so nobody hunts for the right link, and each tab explains what it opens.
OpensThe site account
A shared device at the counter, for everyone on shift.
Site usernamePick your face4-digit PIN
03 · The outcome
What the design delivered.
A complete web product for all three accounts, every module and inner state, from site creation to the RCA an outside investigator opens by email.
130screens designed
Three accounts, nine modules, every state
Company account · 107Site account · 22User account · 1 view
04 · Design thinking
Five places compliance
got stuck.
Before drawing screens, we walked through a day at a pharmacy group and listed every point where reporting slowed down or broke. Each one became a design decision.
02
The problemA shared tablet at the counter
The design answer
Decision · Site sign-in→Pick your face, then a 4-digit PIN. No passwords on a shared device.
03
The problemIncidents lost in email threads
The design answer
Decision · Case manager→Every incident becomes a case that follows a workflow head office designs.
04
The problemBlame instead of causes
The design answer
Decision · Root cause→Fishbone and 5 Whys templates, sent to sites or outside investigators.
05
The problemEvery customer wants its own brand
The design answer
Decision · Theming→A theme builder for the platform, the sign-in page and each site.
5problems
→5decisions
→1product
One product that three kinds of people use every day.
CompanySiteUser
Notes from the working fileQuestions we kept asking while the screens took shape
Sign-in
Can six people share one tablet without sharing one password?
→ Face + PINWhite-label
What has to change for a new customer, and what must never change?
→ Brand tokens vs status coloursRCA
How does an outside investigator open an RCA without an account?
→ Email code, read-only viewHome
What does head office need to see before the first click?
→ Four KPIs, four listsSites
How do you move a site to another company without losing its open cases?
→ Transfer with access tokensContacts
Imports bring duplicates. Who decides which record wins?
→ Confidence score, merge per field05 · User flow
New site to first sign-in,
five clear steps.
Head office adds a pharmacy in one guided flow. Two real decisions, what kind of site and when it goes live, and the product handles the rest.
Set up a site1 of 5
Head office · one guided flowDecisions are marked
Chapter 01 / 04 · Company accountDecision 01 · Company home
The day,
before the first click.
Head office used to open five tools to find out what was late. Home now answers it in one screen: four numbers, four lists and what changed in the latest release.
Four KPIs, each with what is overdue
What's new in CarePlus v2.4
4KPI cards
Tasks due, case feedback, forms overdue and RCAs pending, each with its own alert.4live lists
Tasks, cases closing soon, forms due for review and audits across sites.Week30 daysQuarter
3time ranges
This week, 30 days or quarter, without leaving the page.Chapter 02 / 04 · Cases & RCADecision 02 · Case manager & root cause
Find the cause,
not the culprit.
Incidents used to end with a name. We mapped the journey from report to closure first, then designed each step so the case moves toward a cause and an action.
From the project fileThe case lifecycle, mapped before any screen
01
SiteIncident reportedReport now
02
Head officeCase createdFrom a template
03
InvestigatorsInvestigationAssigned
04
Root causeRCAFishbone5 Whys
05
OwnersActions & tasksDue dates
06
Closing checklistCase closedChecklist
Configured once in a case templateCan be sent to a site or an outside investigator
Case templates
Head office draws the workflow.
Each case type gets its own template: the stages a case moves through, the tasks inside each stage and who acts on them.
- Stages in orderName a stage, then the case can only move forward when it is done.
- Tasks inside each stageAdd, edit or remove tasks without touching the cases already open.
- Drag to reorderSteps move by handle, so a template is rebuilt in seconds.
Outside investigators
No account, no friction.
Some RCAs go to people outside the company. They get an email, enter a six-digit code and land on a read-only view of the RCA, with nothing else of the platform exposed.
What we designedAssign to sitesAssign to usersCustom emailEmail verificationRead-only RCA view
1
CarePlus · to j.doe@gmail.comYou’ve been asked to review an RCAINC-2208 · Dispensing error · due 24 July
Open RCA
Fishbone5 Whys
2RCA models
Fishbone for many causes, 5 Whys for one chain.SitesUsersEmail
3ways to send
To sites, to named users, or to any email address.481
6digit code
All an outside investigator needs to open an RCA.Chapter 03 / 04 · Work & numbersDecision 03 · Tasks & reporting
Work that never falls
between sites.
One board for every task and project, and reports that arrive on a schedule instead of being rebuilt in a spreadsheet every month.
What we designedKanban boardTask templatesProject templatesSaved filtersReport builderDashboardsScheduled PDF & Excel
Chapter 04 / 04 · White-labelDecision 04 · Theming
Configured once,
branded everywhere.
A customer's brand lives in three layers: the company theme, its sign-in page and an optional theme per site. Each one is edited on a live preview, so nothing goes out untested.
Three layers, one engine
Try a brand
Same product, any colours.
Pick a brand. The logo, tabs, buttons and highlights follow it. Status colours never move, so overdue still reads red whoever is on top.
Example brands, for illustrationChanges per customerNever changes
Also in the product
Four more calls
that mattered.
Smaller decisions outside the main flows that keep the data clean and the platform safe.
06
Duplicates, merged by field
Imported contacts are matched with a confidence score. Review picks the value to keep for each field and previews the merged record.
07
Forms on a calendar
Forms are versioned and archived, then scheduled per site, so a fridge log or CD check is never a reminder in someone's head.
08
Devices you can trust
Verified devices, IP allow-lists and two-factor where it matters, all visible to head office in one table.
09
Structure that mirrors the business
Countries, regions and groups in a visual tree, so reports and permissions follow how the company is actually run.
The site account
Built for
the counter.
One shared device per site, many people using it. Signing in had to be quick, and the site's work had to be one tap away.
1The site signs in
The site account signs in once on the shared device, on its own branded page.
2Pick your face
Everyone at the site appears as a photo and role, with search for bigger teams.
3Four digits
A 4-digit PIN signs you in, and a reset is two fields away if you forget it.
Site home
The site's day,
The site's day,
by urgency.
Outstanding tasks, new feedback on cases, scheduled forms and pending RCAs, with one ring that splits everything open by what needs doing first.
10open items todayASDA Manchester Superstore
2OverdueAct now
4Due todayBefore close
4Awaiting replyFrom head office
Open items by urgency
01TasksFrom head office
What the site owes head office, each with a priority, an owner and a due date.
PriorityOwnerDue date
02RCAsAnswered on site
Root cause analyses assigned by head office and answered here with a Fishbone or 5 Whys.
Fishbone5 WhysDeadline
03TimelineSite history
Every report and form the site has filed, newest first, in one running list.
ReportsFormsNewest first
The user account
Everyone gets
their own view.
Behind the PIN, each person sees their own workload across every site they belong to, and managers see the same page when they open a colleague.
What Sarah seesHover a point to light it up
Under the hood · Design system
One system,
re-skinnable.
Built on Untitled UI: a purple scale a customer can swap for its own, four status colours whose meaning never changes, Inter throughout and Untitled UI’s line icons.
ColourBrand scale · 4 status colours
Primary · CarePlus#7F56D9
Buttons, active tabs, highlights. Swapped per customer.100#F4EBFF
200#E9D7FE
300#D6BBFB
400#B692F6
500#9E77ED
700#6941C6
OverdueAct now
Due soonBefore close
RCA dueInvestigate
DoneClosed
TypeInter · one family
Aa
Page title24 / 32 · Semibold
Card title16 / 24 · Semibold
Body copy14 / 20 · Regular
316 open itemsNumbers · tabular
ComponentsUntitled UI React, themed
Report incidentSave draft
Dispensing error · Bristol
Send to an outside investigator
Overdue 1dDue in 2dRCA dueCompleted
This week30 daysQuarter
Built with
Designed and built
on Untitled UI.
Untitled UI ran through both sides of the project: its Figma kit for the design system and its React components for the build, so what we designed is what shipped.
UIDesign & development
Untitled UI
The Figma library gave us tokens, components and page patterns. Untitled UI React, built on React Aria and Tailwind CSS, gave the developers the same components in code, themed per customer through CSS variables.
FigmaKit · tokens · variants→TokensCSS variables per theme→ReactUntitled UI React
RcDashboards
Recharts
Every dashboard tile and report preview: stacked bars by site, rings by urgency and the live graph in the report builder.
NTypeScript
Next.js
The app framework for all three accounts, with shared layouts and routes.
TWThemes
Tailwind CSS
Brand colours as CSS variables, so a new customer is a new theme, not new code.
TQData
TanStack
Query for server state, Table for every list, filter and saved view.
RHForms
React Hook Form
With Zod validation for cases, sites, forms and every builder.
✦
And the rest of the toolkit
React AriaUntitled UI Iconsdnd kit · task boardReact Flow · workflowsdate-fns · schedulesFramer MotionStorybookPlaywrightVitest
What we took away
01
Design the system, not the logo.
Every brand decision lives in a theme, so CarePlus is a configuration of QI-Tech, not a fork of it.
02
Three doors, one house.
Company, site and user accounts share components and status colours, so moving between them never feels like a different product.
03
Speed at the counter.
A face and a 4-digit PIN beat a password on a shared device, which is where most incidents are first reported.
