MENU

HQ

Australia

Contact us

hello@zenithcreativegroup.com

Quokka is a robust and scalable design system that enhances consistency, efficiency, and usability across all telehealth products, empowering design and development teams to deliver high-quality, accessible, and user-centered healthcare solutions. This system streamlines product iteration, reduce development time, and ensures cohesive branding and functionality.

Challenges & Design Solutions

Aligning Brand Identity with Component Design

Challenge

Guaranteeing that brand identity is seamlessly integrated into component design is essential for establishing trust and recognition within the healthcare sector. The challenge arises from the need to balance a strong brand presence with the functional and usability demands of healthcare applications. 

Design Solution

Collaborative effort between the design and marketing teams was initiated. This included creating a detailed style guide that outlines the brand’s visual elements – such as color schemes and typography.

Accessibility Standards Compliance

Challenge

Ensuring accessibility standards compliance, particularly in healthcare, involves navigating a complex landscape of regulatory requirements (such as WCAG) while also meeting the unique needs of diverse user groups, including patients with disabilities and healthcare providers.

Design Solution

To ensure the components meet WCAG 2.2AA and with a view to work towards AAA standards on product build overall, the design decisions prioritized keyboard navigability, proper color contrast, and assistive technology compatibility during component development. Continuous user testing and code audits were performed to ensure compliance.

Maintaining Design Consistency Across Components

Challenge

In a complex healthcare environment, ensuring design consistency across various Angular components presents a significant challenge. Different teams often create components in isolation, leading to variations in visual style, behavior, and usability. These discrepancies can confuse users, especially when they interact with multiple applications or modules within the healthcare system.

Design Solution

A design system with standardized UI patterns was established, guiding the creation of Angular components to maintain visual and functional consistency. This approach also streamlined future updates.

Ensuring Components are Reusable Across Various Modules

Challenge

If components are not designed with reusability in mind, development teams may end up duplicating efforts, leading to inconsistent user experiences and increased maintenance overhead. Furthermore, as new features are introduced or existing functionalities evolve, maintaining a cohesive look and feel across applications can become increasingly difficult.

Design Solution

Each component is designed with configurable properties that allow it to be easily integrated into different modules, catering to the unique needs of various healthcare applications while maintaining consistency in appearance and behavior. This modular approach not only streamlines the development process but also enables teams to quickly adapt components to meet specific requirements, whether for patient portals, telehealth sessions, or administrative dashboards. 

Interaction Patterns for Telehealth-specific Use Cases

Challenge

Managing complex interaction patterns for telehealth-specific use cases presents a multifaceted challenge due to the diverse range of user needs and scenarios encountered in healthcare delivery. Telehealth applications must support various functionalities, such as scheduling appointments, conducting video consultations, sharing medical records, and facilitating real-time communication between patients and providers. Each of these tasks requires distinct interaction patterns that must be intuitive and easy to navigate for users, many of whom may not be tech-savvy.

Design Solution

We adopted a user-centered design approach that involved standardized interaction patterns tailored for telehealth-specific scenarios, ensuring they were both intuitive and efficient. This approach focuses on modular design and  reusability, enabling the development of components that are both adaptable and consistent across various telehealth scenarios.

Success Stories

  • Users highlighted that the comprehensive documentation and training sessions provided by the design system empowered cross-functional teams to effectively utilize components, leading to more cohesive product experiences.
  • Users noted an increase in team satisfaction, as the design system facilitated smoother communication and collaboration among designers, developers, and product managers.
  • Users celebrated the consistent interaction patterns established by the design system, which reduced onboarding time for new team members and improved overall efficiency in product development.

I had the pleasure to work alongside Rachael for five years. From the beginning, I realized she was a constant voice for the user, using research and data to drive sound design decisions. She does not shy away from a challenge which was evident as she led our large design system initiative, building upon her team’s original system and broadening it to support the organizations platform. She has an analytical approach and knows how to get to the root problem quickly, making her successful at improving departmental systems and team process. She has a talent for bridging the gap between software development’s technical side and design’s right-brain creative side. She’s a solid team leader that is patient and caring for her designers, consistently building relationships with them. There’s a foundational strength that Rachael brings and any design team would be lucky to have her!

James Hatfield
Product Design Director
Prev Project
Health Huddle
Next Project
Telemedicine Cart

all Projects