Connect Suite is Deloitte's flagship Salesforce health platform, modernizing cancer screening, scheduling and medical supply across Canadian provinces and internationally. I designed and owned the system behind it.
A white-label health platform, built on Salesforce.
Connect Suite - formerly Health Connect - is Deloitte's flagship, Salesforce-based modular digital health platform. It helps public-health organizations modernize cancer screening and clinical workflows: patient management, appointment booking and scheduling, eligibility, outreach, and healthcare inventory. As a Deloitte-owned asset, it's customized per client and deployed across Canadian provinces and internationally - including New Zealand Health.
{{ m.icon }}
{{ m.name }}
{{ m.desc }}
02 · MY ROLE
I own the design system - and much of what surrounds it.
I developed the design system for Connect Suite and created user flows across every module - Eligibility Connect, Appointment Management, Outreach Connect and Supply Management Connect. I drove UX and interaction design, integrated stakeholder feedback, ran user testing, and supported delivery, QA coordination and project management. I've contributed to RFP responses and client workshops - ensuring the product meets client needs and stays scalable, consistent and user-centered.
{{ c }}
03 · DESIGN SYSTEM
The Connect Suite design system.
Derived off Salesforce Lightning and documented in Figma - foundations, custom components, modals, tables, the scheduler and a print framework. The full interactive documentation lives in this section.
Connect Suite · Design System - living documentation
Foundations
Colours
Contrast is critical for legibility - every colour pair passes WCAG AA. Primary blue drives all interactive elements; grey is the neutral foundation; red, orange and green carry error, warning and success.
{{ p.name }}
{{ p.hex }}
Type Scale
Built on the native system font - improving readability, performance and non-Latin language support. Eleven steps; a selection shown.
Font {{ t.n }}
The quick brown fox
{{ t.spec }}
Components
Headers, tabs and types
Header Style 1 - heading + actions
⛵
Enter your text here
Card Title
Button 1
Button 2
Header Style 2 - read only
👑
Card Title
Card Tabs 1 - underline (click)
{{ t.label }}
Card Tabs 2 - segmented (click)
{{ o.label }}
Card Type
Card types
Available card headers and bodies combine with tables, accordions, empty states and forms to create different card types. The body can be swapped according to spec, and card width adjusts to the requirement.
👑
Card + Table
Name
Program
Status
Avery Chen
Cervical
Eligible
Riya Patel
Cervical
Done
⛵
Card + Accordion
Patient eligibility+
Scheduling & booking–
Results tracking+
👑
Card + Empty state
No records to display
⛵
Card + Form
Participant name
Placeholder
Program
Save
Composable: tables, accordions and empty states inside a card can be changed according to specifications, and the card width can be changed according to the requirement.
Buttons - types & states
Two families - Positive (Brand, Neutral) for safe actions and Destructive (Brand Destructive, Text Destructive) for removals. Each ships with four states: normal, disabled, hover and selected.
Primary. Use once per screen - the single most important action, e.g. 'Save'.
Secondary. Pair with a CTA; avoid as a lone button.
Primary destructive. Irreversible actions (e.g. delete). Never stand-alone - pair with a CTA.
Secondary destructive. Quieter option when a Brand button is present (e.g. scheduler save).
Other stateshover any button above to preview its hover state
Pickers, inputs & disclosure
Date picker
A sizeable calendar that fits tight spaces, with an optional time dropdown alongside.
{{ dpValue }}📅
‹
{{ dpLabel }} {{ dpYear }}
›
Mo
Tu
We
Th
Fr
Sa
Su
{{ c.label }}
Input fields
Text, search and dropdown fields share one visual language - 1px grey border, 6px radius, blue active state.
Field label
* Required field
Search
🔍
Dropdown field
Notes
Accordion
Progressively discloses content - keeping dense clinical records scannable until detail is needed.
Patient eligibility{{ accAIcon }}
Eligibility is evaluated against the screening program's rules engine - age, screening history and risk factors - then surfaced here with the participant's status.
Scheduling & booking{{ accBIcon }}
Booking slots are generated from the clinic's appointment blocks. Capacity, duration and booking counters keep the schedule accurate in real time.
Results tracking{{ accCIcon }}
Results flow back into the participant record and trigger templated outreach - recall, re-screen or refer.
Dropdown (hcSelect)
A custom dropdown replaces the native select across Connect Suite - consistent styling and an outside-click menu.
Default
Compact
Why custom: native selects can't be styled consistently across operating systems - this keeps the menu, type sizing and active state identical everywhere.
Modals
Five modal types
Modal sizes are based off the layout grid - Small, Medium and Large. Each type has a distinct purpose and a strict set of affordances. Click any type to open it, then read the guidelines below.
Modal type
{{ t.label }}Size · {{ t.size }}
Connect SuiteHomeParticipantsSchedulePrograms
Cervical Screening Program
Participants
👑
Eligible cohort - October
Participant
Program
Invited
Status
{{ r.name }}
{{ r.program }}
{{ r.date }}
{{ r.status }}
Confirm send
Send eligibility letters to the 1,284 eligible participants in this cohort?
Program details
The cervical screening program invites participants aged 25–69 every 3 years, evaluated nightly against the Salesforce Business Rules Engine. This modal is read-only.
New appointment block
Start time
Duration (min)
Appointment type
Eligible cohort
Participant
Program
Invited
Status
{{ r.name }}
{{ r.program }}
{{ r.date }}
{{ r.status }}
Scheduler - appointment blocks
Block
Start
Duration
Capacity
{{ s.block }}
Confirmation modal · Size Small
Confirms an action before it is executed, giving the user a chance to review and verify. Two actions - a primary to proceed and a secondary to reconsider. Variants: Confirmation, Destruction, Unsaved Changes.
Size: the smallest. Affordances: no tables, forms or images - only 1–3 lines of text. UX: keep text minimal for visibility and accessibility.
Information modal · read-only
A read-only modal where the user has no decision to make - not to be confused with a confirmation modal. Surfaces extra detail that wouldn't fit in a tooltip.
Affordances: one primary button only - no secondary action, mostly read-only.
Caution: never give it only a destructive button - a destructive modal must include a secondary action to retreat.
Input field modal · Size S / M / L
Lets users enter detailed information. Fields and forms generally belong in a page - use this only when an exception is required. Can also hold tables and accordions.
Affordances: fields sit in a single or double column (tables an exception). Size varies with the amount of information.
Avoid: putting too many actions - or too many fields - inside one modal.
Table modal · Size Large
Surfaces a configurable table inside a modal - read-only or actionable. May be accompanied by text, accordions or input fields, and the table within can be swapped for another variant.
Affordances: the largest modal - use when the user needs to scan or act on a set of records without leaving the page.
Scheduler modal · a type of Table modal
Shows the scheduler table inside a modal so clinic managers can edit appointment blocks in context. Validates inline as values change.
Best practice: governs button choice (positive vs destructive), modal size off the grid, modal type, and behaviour across languages.
Tables & Scheduler
Configurable tables, scheduler and clinic calendar
Two table styles share one configurable component. Style 1 uses wide row spacing for large tables that need the full page width; Style 2 uses narrow spacing for smaller tables that must fit a tighter space. The scheduler table is a separate component, used only inside the scheduler.
{{ t.label }}
Wide line spacing; the largest variation, for big tables that require the whole page width.
Affordances: row width is fixed and cannot be adjusted; rows can be copied and pasted to create more. UX: a row reflows when overflow text is pasted into a cell - keep cell text minimal.
Participant
Program
Invited
Status
Result
{{ r.name }}
{{ r.program }}
{{ r.date }}
{{ r.status }}
{{ r.result }}
Narrow line spacing; the smallest variation, for tables that must fit a tighter width or height.
Resize: cells can't be resized individually - drag the table's bottom-right corner and it masks within its frame. A Table-with-scroll variant handles tight spaces; the Empty State shows "No records to display".
Participant
Program
Invited
Status
Result
{{ r.name }}
{{ r.program }}
{{ r.date }}
{{ r.status }}
{{ r.result }}
↘ Drag the bottom-right corner to resize the table within its frame.
The scheduler table looks and functions differently from every other table and validates as you type: end time must be after start time · capacity per block cannot be negative · duration must not exceed the time allotted for the block · start time must be before end time. Errors surface in a red banner on top of the table.
Live - Scheduler table (editable · validates inline)
🗓️
Scheduler - appointment blocks
Schedule week
‹Oct 11 – 17, 2024›
Type
⚠Scheduler validation error
{{ e.date }} - {{ e.err }}
Date
Start
End
Duration
Capacity
Custom block
Booked
Status
{{ s.date }}
YesNo✏️
{{ s.book }}
Try it - set an End earlier than Start, a negative Capacity, or a Duration longer than the block: the field turns red with the matching error (row 2 starts in an error state).
Live - Clinic Calendar (toggle the appointment types)
PROGRAM SCALE · NEWFOUNDLAND & LABRADOR HEALTH SERVICES
{{ m.icon }}
{{ m.k }}
{{ m.v }}
Interactive prototype mounts here
{{ s.proto }}
07 · IMPACT & CLIENTS
Outcomes, sales and successful implementations.
Appointment Connect powers LifeLabs' appointment-booking experience across Canada - the same scheduling, booking and daysheet flows shown above, at national scale.
