Back to Homepage
Collaborative Health Record (CHR):

A Story of Design Transformation for Healthcare

Product Design
UX
UI
Design Systems
Design & Dev Collaboration
Design Management
Revamped UI with exciting new features
Consistency across clinician-patient ecosystems
Innovation with Vue.js and Storybook
+27%
User satisfaction scores
+43%
Efficiency gains
Visit CHR
Dashboard mockup
Intro

In-depth product shape in all aspects

My mission

As a product designer at TELUS Health I had to establish clear design processes, revamp user interfaces, and create seamless, intuitive experiences that align with both user needs and business goals.

My role

Product designer, User experience, User interface design, Design Mentorship, Design Management, Team leading, Research

Full-time occupation

Oct 2021 - Oct 2024
Contex for the start
• Collaborative Health Record – unique EMR of clinicians.
• Legacy product, > 8 years of designerless development.
• Absence of consistency, patterns, cohesive UX and etc.
• Multiple unaligned abstracted development streams with no designers.
• Missing design documentation, processes, rituals and etc.
Design System

Creating a Robust Design System for Consistency and Scalability

Since the product had been running for several years, we developed the design system retrospectively, carefully standardizing existing elements while ensuring scalability for future growth.
Established a Scalable Design Foundation
Inventory and Alignment of Old Components and Styles
Increased Efficiency and Consistency
Dashboard mockup
Dashboard mockup

Variables

Together with the CH design team, we established variables for colors, typography and other design properties to maintain consistency and flexibility. These variables allow for scalable adjustments across the system, ensuring a unified look while enabling easy updates.

Design tokens

Later on, we created design tokens to define design decisions, storing values like color palettes, typography scales, and spacing units. Tokens bridge the gap between design and development by translating styles into structured, reusable elements that adapt seamlessly across platforms and themes.

Patterns documentation

We documented behavior patterns to establish clear guidelines for interactions, animations, and user flows. These patterns ensure consistency across components and products, providing a seamless and intuitive experience while aligning design and development teams on best practices.

Accessibility guides

We developed accessibility guides foe each component to ensure our products are inclusive, user-friendly, and compliant with accessibility standards. These guidelines cover color contrast, typography, navigation, key board access and interactive elements.
Leadership

Establishing and leading UI refresh team

A team of 6 members focused on innovations and smooth UX.

I was planning, documenting, designing and executing on new product features on Vue.js, managing the team on daily basis.
Design & Developers Collaboration

Building a Storybook Library for Seamless Design-Developer Collaboration

The idea was born during one of the discussions with our Design Director and we decided to give it a try. We created a quick POC, demoed it to leadership and got a green light.

Research among internal dev teams

We started from research asking our developers and designers directly in slack and through interviews.

Analysis and goals setting

In post-research analysis I identified and triaged key needs.

Define structure and JTBD

I defined a clear structure with categories such as Intro, Components, Layouts, and Common Issues, ensuring we're covering and what jobs our users.

Execute

Then UI refresh team implemented the most wanted components such as Buttons, Inputs and Icons.

Test and collect feedback

In order to collect feedback at any point, I created #chr-ui-refresh-support slack channel where anyone can ask questions, suggest ideas or repot any issue regarding current solution.

Iterate ∞

Since Design System is constantly evolving organism, Storybook will be iteratively improved.
Integration icon
Clinician Dashboard

From Concept to Key Feature

A signpost for clinicians and MOAs to get an overview of everything important in the practice and start their day.

What started as a simple idea evolved into a major feature, enhancing the product’s functionality and user's daily experience.
• Many stages of research and usability testing.
• Three concepts: Community Hub, Signpost or Utility Dashboard.
• Defined scope and timeline.
• Iterative approach after every cycle of feedback.
• Unexpectedly Bulletine board become the most favorite widget.
Dashboard mockup
Clinician-Patient Ecosystem

Smoth interaction between clinicians and patients

CHR Connect app and CHR Family management feature.
Dashboard mockupiPhone mockup
Dashboard mockup
Settings Redesign

User experience first

After 8 years of designer-less product development, the Settings area had become extremely cluttered and inconsistent. My mission was to triage and optimize this section to improve usability and create a more intuitive experience. Through careful analysis and restructuring, I streamlined the interface, eliminated unnecessary complexity, and ensured consistency across the settings. The result was a cleaner, more efficient layout organized by categories and tabs, that made navigation easier and enhanced the overall user experience.

Upgraded UX

I was relying on personas and their JTBD, triaging available settings parts by features and provinces.

Responsive design

Due to the usage if Vue.js I was able to implement interactive and responsive design to make such complex area more intuitive.

Complex Billing flows by provinces

Standardizing complex billing flows across provinces ensured accuracy, compliance, and a seamless user experience, simplifying a previously fragmented process.

Flowsheet Management

Flowsheets streamlines the tracking of chronic illnesses by offering two adaptable layouts—table and card views—along with graph visualizations, enabling clinicians to monitor patient data more effectively and make informed decisions.

Proper Design Specification

Ensuring clear and detailed design specifications helped streamline development, reduce inconsistencies, and improve the accuracy of implemented designs across the product.
Impact

Results of my work

Throughout my work with TELUS Health, I’ve focused on delivering tangible, measurable outcomes that drive both user satisfaction and business success. By enhancing the user experience, increasing product engagement, and streamlining design and development workflows, I’ve contributed to creating cohesive, intuitive, and high-performing features. My work has led to improved usability, faster iteration cycles, and stronger collaboration between teams, ultimately resulting in a more efficient and impactful design process that scales with the needs of the business.
+27%
User satisfaction scores
+43%
Efficiency gains

Improved User Experience

Through thoughtful design decisions, usability improvements, and a user-centered approach, I contributed to a more intuitive and seamless product experience. By streamlining navigation, optimizing key workflows, and ensuring design consistency, I helped create a product that is easier to use, more efficient, and more enjoyable for users.

Increased Everyday Product Engagement

By enhancing features like the Clinician Dashboard, Family Management, and the Billing Experience, I helped drive significant increases in daily product engagement. By refining these key interactions, I made the product more intuitive and user-friendly, which led to higher user retention and improved overall satisfaction for clinicians.

Streamlined Design and Development Processes

By creating and implementing a comprehensive design system, I helped bridge the gap between design and development teams. This streamlined workflow enabled faster iterations, improved collaboration, and ensured consistency across platforms. Tools like Storybook and design tokens allowed for seamless integration of design decisions, reducing friction and accelerating time-to-market.