IngotPCC

Redesigning healthcare dashboard

Ingot PCC, a care management product under PulseSync, underwent a transformation from person-centred care to active ageing to align with Singapore's new elderly policy.

My role at PulseSync involved reviewing the existing design system and proposing a redesign approach to make the experience more approachable while addressing existing pain points. I was also responsible for developing user flows and layouts for module add-ons, including a mobile counterpart to facilitate remote consultations and feature upgrades.

Client

Pulsesync

Year

2021–2022

Scope

Design System

Visual Design

Prototyping

UI Audit

Design Process

I worked with a team of product managers, developers and medical practitioners to reevaluate IngotPCC to fix bugs, improve the experience, and add new features.

1 - Discover

Onboarding

Stakeholders onboarding
Audit of existing interface

2 - Define

Research

Moodboarding
User feedback
User journey mapping

3 - Create

Design

Design system
Hi-fidelity prototyping

Discover

Identifying insights with stakeholders

Before this, Ingot PCC grappled with the usual challenge with most clinical system — information overload. The primary goal is to present the same information while avoiding visual clutter that could overwhelm medical staffs during extended shifts. In our discovery session, we also identified other issues.

User Pain point

Information overload

‍The average patient records frequently surpassed the allocated space, resulting in a cluttered and ungrouped display. This hindered overall readability and understanding of the information.

User Pain point

Unclear and inconsistent icons

The usage here is quite specific and doesn't adhere to a unified visual style, as it is sourced from various online outlets. This results in a lack of consistency and clarity in conveying their respective meanings.

Opportunity

Dated visual style

The current design allows for quick deployment. Although not identified as a user pain point, the client requested, as part of this redesign exercise, to make the interface more inviting and friendlier.

This led us to formulate the problem statement to align the main objective of IngotPCC's redesign:

Problem Statement

Managing clinical information can become overwhelming. Medical staff need an efficient way to access and interpret data to reduce visual clutter, alleviate stress during extended shifts, and focus attention on patient care.

Define

Visual Style A/B Test

While tackling the redesign, the additional challenge is to avoid introducing anything unfamiliar and overwhelming for existing users, who are accustomed to the previous interface. After presenting a series of mood boards as screen tests, we pivoted towards the Claymorphism style, which was the most preferred direction for making the interface look acceptable.

Define

Design considerations

We focus two major visual design tweak to transform the interface to be less cluttering.

Claymorphic elements bring a friendly approach to the interface and reintroduce tactility, making actionable buttons more distinct.
Spaced-out grid increased the spacing between information to make it more digestible. Instead of the previous single-column stack, a multi-column layout was chosen to facilitate information comparison."

Claymorphic elements

Spaced out grid

Mapping user flow

In a separate task, I was also involved in mapping the user journey to anticipate their interactions with the new mobile app and dashboard add-on.

Outcome

Design system

With these priority considerations laid out, I proceeded to form the design system before moving into the redesign. The aim was to improve design consistency across the product while creating a brand that felt fun and approachable, yet professional and trustworthy.

Component system in Figma using the atomic design approach

Icon component system

Icon Styling

To ensure the icons of different shapes and weights adhere to a consistent ratio and maintain clarity even at small sizes, I used an icon grid and ensured that all icons are drawn uniformly in the round glyph style.