Design System
DEARhealth
Context
DEARhealth is a pioneering digital health platform that revolutionizes patient care through personalized, data-driven treatment plans. Leveraging cutting-edge technologies such as artificial intelligence and machine learning, DEARhealth develop tailored care pathways that address individual health needs with precision and efficiency.
My Role
From the outset of the process, I'm involved in research, user flows, and wireframes, ensuring a solid foundation for the project. As it progresses, I'm responsible for developing high-fidelity prototypes and provide continuous support throughout the development phase. Additionally, I create and maintain the Design System and Feature Documentation, enabling seamless communication and consistency across the design journey.
My holistic involvement ensures that every project is thoughtfully crafted, user-centric, and achieves its intended objectives.
Project Process - Design System
1.Introduction:
DEARhealth already had some screens and flows and shipped the MVP. But they were lacking cohesiveness and alignment between components. The development part was also affected by the lack of uniformity and consistency.
2. Project Goals:
A design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. The core element of Design System is often a Library of UI Components, these UI elements have also their representation implemented in code. It has multiple benefits that make the system worth preparing. Here are the main ones:
-
Consistency
-
Higher quality
-
Better Communication with Development Team
-
Faster Design Process
3. Research and Analysis:
I gather the information about the components we already had and started the benchmark on others companies Design Systems so I could have a better idea of which approach I would take.
Since most of our components are in Flutter, I used Material Design System as a base to build our own. But also took some inspirations from Apple's Human Interface Guidelines, IBM's Carbon, and Shopify Polaris.
4. Define Components and Patterns:
After the information gathered, I defined that the best way to approach the building was to use the Atomic Design. Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are: Atoms, Molecules, Organisms, Templates and Pages.
I also defined that we would have 2 separated files, the desktop and mobile variants. The components are divided by categories and pages on the Figma file with all the technical specifications.
5. Prototyping and Testing:
The prototyping and testing were an iterative part of the process. I built the components and then did a fast screen prototype to see if the components were behaving as intended and talked with the dev team to see if it was clear and feasible.
6. Implementation and Rollout:
During all the design and build process the dev team was involved, so we could align and see how the components would be documented and how they will interact design and code wise. We opted to use Figma's inspect tool as our ally and most of the tech specs are directly there. For the behavioural part, we have the description on the Design System file itself and documented on Notion for a fast check when needed for other teams.
I also created a "Figma for Devs" page, that way if we have new people onboarded on the dev team that never used Figma, they could understand the process on a faster way.
7. Results and Impact:
Thanks to the design system, our dev team became way more efficient! They were faster on the feature development and UI updates like never before because they got the hang of our components and their names.
Our communication game got a major upgrade when we all started speaking the same design language. "Primary Button," "Accent Colors," you name it – it made discussing layouts a breeze.
The visual vibes got a serious glow-up too!
Our screens now have a consistent look, and it's not just for show. Users love it because they don't have to guess how things work. No learning curve, just a smooth ride through familiar components.
Long story short, the design system didn't just speed up our work; it made our users' lives easier and our screens look awesome. 🚀
