The Dispensary: A design system for a Telehealth startup
I built a design library from scratch for a growing design team. This improved collaboration, sped up the design process, and improved consistency across of app and web.
Role
Sole designer creating the design system for mobile app and web dashboard.
Timeline
Jan – May 2023
The Dispensary: A design system for a Telehealth startup
I built a design library from scratch for a growing design team. This improved collaboration, sped up the design process, and improved consistency across of app and web.
Role
Sole designer creating the design system for mobile app and web dashboard.
Timeline
Jan – May 2023
The design system
Using the atomic design methodology to scale a complex healthcare ecosystem
Atoms and molecules serve as foundational components across all platforms and breakpoints. Organisms, templates and pages serve device or product-specific needs.
These levels help maintain global consistency for all our products while allowing flexibility for differing use cases.
What is atomic design?
A methodology consisting of five hierarchical levels: atoms, molecules, organisms, templates, and pages
The design system
Using the atomic design methodology to scale a complex healthcare ecosystem
Atoms and molecules serve as foundational components across all platforms and breakpoints. Organisms, templates and pages serve device or product-specific needs.
These levels help maintain global consistency for all our products while allowing flexibility for differing use cases.
What is atomic design?
A methodology consisting of five hierarchical levels: atoms, molecules, organisms, templates, and pages
How does the system work for every designer?
How does the system work for every designer?
1
Scalable building blocks
Components and templates were made usable across different use cases. This keeps our flows predictable and familiar – something important for patients on our app.
The screens below illustrate a common template used in our pre-consultation flow.
1
Scalable building blocks
Components and templates were made usable across different use cases. This keeps our flows predictable and familiar – something important for patients on our app.
The screens below illustrate a common template used in our pre-consultation flow.
2
Clear component structure and labels
Descriptive labels create an accurate understanding of information variables for both designers and product stakeholders.
Below shows an example of a component’s build and content fields.
2
Clear component structure and labels
Descriptive labels create an accurate understanding of information variables for both designers and product stakeholders.
Below shows an example of a component’s build and content fields.
3
Flexible templates
I built templates to accommodate foreseeable evolution in our content needs while maintaining design standards and without the need to update components regularly.
With the expansion to other regional markets, the screens below show the same template used with different languages.
3
Flexible templates
I built templates to accommodate foreseeable evolution in our content needs while maintaining design standards and without the need to update components regularly.
With the expansion to other regional markets, the screens below show the same template used with different languages.
Next project
Doctor's Dashboard
Next project
Doctor's Dashboard
Next project
Doctor's Dashboard