goa Health

Revamping and designing the onboarding process for goa Health. goa Health is a personalized, evidence-based virtual AI assistant specifically for women with PCOS.

Role
Product Designer
Timeline
Nov '23 - Jan '24
Core Responsibilities
Onboarding Redesign

Background

Bay Area start up focusing on building a personalized virtual assistant for women with PCOS (polycystic ovary syndrome). Aim is to not only enhance the well-being of women dealing with PCOS but also proactively prevent and improve metabolic conditions associated with this syndrome.

goa's updated onboarding UI

Current Challenges

After conducting internal research with the design team, I knew I had to address the challenges associated with the existing design setup:
🚫 Non-existent Design System
UI Kit exists for Eng. Team on Storybook but no source of truth for the design team in Figma.
❓ Scattered components
Design components existed as separate entities with each designer creating their version of a component.
🐌 Slow Design process
Design team resorted to finding, copying, and pasting design elements = slowing down their design process
How can we create a Design System that is cohesive, scalable, and efficient.
Solution

Built over 400+ components and published D2iQ's Design System Library

⚛️ What's Atomic Design?

Prior to building out a Design System, I conducted additional desk research into established Design Systems by companies like Atlassian, Google, IBM, and Shopify. It became evident that many companies were benefiting from design systems based on Atomic Design Principles.

Upon discovering that numerous successful design systems were grounded in Atomic Design Principles, which provide scalability, modularity, and consistency, I recognized the potential for incorporating these principles to streamline our design process and enhance collaboration within the team.

I proposed a strategic plan to revamp the existing design system based on Atomic Design Principles.

  • Establishing a Unified Design Language: Implementing a system that ensures consistency across all products by defining a set of design principles, patterns, and component
  • Improving Collaboration: Streamlining the design process to enhance collaboration among team members and facilitate a more efficient workflow.
  • Building Reusable Components: Breaking down the design system into smaller, reusable components, aligning with the Atomic Design methodology.

🛠️ Building the Design System

Atoms: The Building Blocks

Examples of atoms include buttons, icons, and typography, colors. By defining these elemental components, I created a consistent and reusable foundation for constructing more complex structures.

Molecules: Combining Atoms for Functionality

Climbing one level above, we get molecules that are combinations of multiple atoms.  

Organisms: Building Functional Components

Organisms are groups of molecules joined together.

Templates: Structuring the Layout

Templates take the design abstraction one step further by combining multiple organisms to create page-level structures.

Design Guidelines

In the process of revamping the design system, it was imperative not only to incorporate Atomic Design Principles but also to align with broader design guidelines. These guidelines encompassed various aspects, including considerations for empty and interactive states, layout patterns, and other user experience elements. This approach aimed to create a comprehensive and user-centric design system that goes beyond individual components.

Results

💨 Efficiency
The streamlined design process resulted in a more efficient workflow, reducing the time required for designing and iterating on new features by 50%.
♺ Reusability
The adoption of Atomic Design Principles led to the creation of reusable components, fostering a modular and scalable design system.
✅ Published Library
This centralized resource facilitated seamless collaboration, allowing designers to work cohesively on projects, share updates in real-time, and maintain consistency across various design assets.

💡 Learnings

  • Design systems are evergreen. They are living organisms in that they're complex and ever evolving.
  • I wasn't just designing components, I was thinking of ways to make it easier for my team to utilize these components to make their jobs easier.