Rebranding SiSU Health's self-service health stations

How I helped rebrand SiSU Health's self-service health stations, making the experience easier to use, more consistent, and more accessible across kiosk, web, and app.

UX Research Phygital Rebranding Design Systems Accessibility Self-Service Experience Health Tech
RoleUX/UI Designer
Duration1 Year
TeamProduct, embedded with dev team
SkillsUX/UI Design, Design Systems, Usability Testing
SiSU Health station welcome screen redesign
Impact at a glance

A rebrand built for real-world use

50+
Components in the design system
3
Platforms unified: kiosk, responsive web, and app
WCAG AA
Colour contrast compliance across the full style guide
Context

A brand that needed to work in person

SiSU Health's self-service stations needed more than a new look. The brand had to translate into an experience that was genuinely easier to use, consistent across every touchpoint, and accessible to a wide range of people.

My Role

Designing the experience end to end

  • Designed end-to-end UX/UI for the self-service health measurement stations
  • Created and scaled a design system and style guide for a consistent product experience
  • Conducted concept testing and usability testing to validate design decisions
Challenges

What was getting in the way

  • Bringing a consistent brand across different platforms, from the self-service stations to mobile and web
  • Low clarity in instructions, reducing user confidence in self-service interactions
  • Accessibility gaps that made the experience harder for some users
  • Users struggling to understand health measurements and results
  • Balancing speed, accuracy and accessibility in a kiosk-based environment
Approach

Solving it, challenge by challenge

Each challenge shaped a specific decision, from the style guide through to how instructions and results appeared on screen.

One style guide, every platform

To bring a consistent brand across platforms, I built a single style guide covering colour, type, components and spacing, then applied it across the health station, the responsive website and the app. Screens that once felt disconnected started reading as one product.

SiSU Health responsive website style guide
Style guide for the responsive website.
Updated health station design applying the unified style guide
Updated design for the health station.
Updated responsive website design applying the unified style guide
Updated design for the responsive website.

A flow you learn to expect

Health checks are usually repeated over time, so consistency needed to extend to the flow itself, not just the visuals. I mapped the full user journey for both the health station and the member portal, so each repeat visit followed the same structure, making the experience feel consistent and predictable rather than something to relearn every time.

Full user journey mapped for the SiSU Health station
Full user journey mapped for the health station.
Full user journey mapped for the SiSU member portal
Full user journey mapped for the member portal.

Showing, not just telling

Instructions alone were not enough to build confidence. I introduced a series of illustrations played simultaneously as short animations, so people could see exactly how to interact with the kiosk while they read the instruction, rather than working it out on their own.

Illustration frame showing kiosk interaction guidance, first frame
Illustration frame, played as part of the guided animation.
Illustration frame showing kiosk interaction guidance, second frame
Illustration frame, played simultaneously to reinforce the instruction.

Accessible by default

Accessibility came down to getting the details right, the correct keyboard triggered for each field, for example numbers for a date of birth rather than a full letter keyboard, and colour contrast that passed WCAG AA throughout the style guide.

SiSU Health station form screen showing the correct numeric keyboard triggered for the date of birth field
The right keyboard triggered for the right field.
SiSU Health station style guide showing WCAG AA colour contrast compliance
Colour contrast in the style guide, built to pass WCAG AA.

Results people can actually read

Results combined colour and text rather than relying on either alone, paired with plain labels and a short benchmark description, so people could understand what their numbers meant without needing to interpret it themselves.

SiSU Health station results screen using colour, text and benchmark descriptions to explain measurements
Results screen, combining colour and text with a clear benchmark description.

One mental model, two platforms

The same visual style carried onto the website, so the mental model people learned at the health station carried over, reducing cognitive load rather than asking them to learn the product twice.

SiSU Health responsive website styled to match the health station experience
Responsive website, styled to match the health station experience.
Results

What changed

  • Delivered a consistent, rebranded experience across every self-service station
  • Improved task completion and reduced user drop-offs during measurements
  • Increased user confidence in self-service health interactions
  • Made the experience more accessible for a wider range of users
  • Reduced the need for assisted support from staff, enabling true self-service usage
  • Enhanced user understanding of health metrics and results interpretation
Learnings

What this project taught me

Reflection

Designing for a phygital product means treating accessibility much like mobile, but for a different viewport entirely. Getting the foundations flexible, rather than fixed, was what let the same design system hold up across a kiosk, a phone and a browser.

  • Accessibility for a phygital product is similar to mobile, but the viewport is different. Touch targets, text size and spacing all needed rethinking for the kiosk.
  • Different fields need different keyboards. The keyboard triggered for a date of birth field is not the same as one triggered for a name field.
  • Designing for multiple platforms means the design system foundation needs to be flexible. Using em instead of px meant components could be adjusted easily across different viewports.
Back to
Selected Work