Componentizing Health Studies
2023
Systems Designer
- Staff Interaction Designer
I was tasked with platformizing Google Health Studies with templates, components, and sticker sheet libraries which enables repeatable collaboration with research partners.
I came into the project new to Google Material Design, which meant that I needed to first learn GM2 design patterns, color theory, and copy language. Then there was the tedious nature of the project.
Page templates
I went through every mockup in every study to identify regularly occurring page types to copy over to a templates library where I transformed the mockups into components that included any necessary variants. I then went back through every mockup in each study to replace those regularly occurring page types with the newly built components.
Components
Just like with page templates, I went through every mockup in every study to identify regularly occurring elements to copy over to a templates library where I transformed the elements into components that included any necessary variants. I then went back through every mockup in each study to replace those regularly occurring elements with the newly built components.
The sticker sheet directory in the left frame houses links to components throughout the sticker sheet. The right frame houses a component displaying multiple use cases.
What is a sticker sheet?
- An open location housing copies of templates and components
- Includes a directory, descriptions of each component, and links to return to the directory
- Elements displayed in order of when they first appear in a typical study
Each component’s frame includes a title, button links to examples of where the component is being used, a return link to the directory, a description of when and where the component appears, and tips for how to utilize and customize the component
Why is a sticker sheet important?
- Demonstrates the vast majority of potential uses for each component
- Separates copied components from main components, which limits the chances of unintentionally editing main components
- Minimizes the amount of editing a designer needs to do on a component
A vendor was able to use an external version of the sticker sheet to resource starter building blocks to piece together the study
The extensive Health Studies audit contains screenshots of all accessible interactive touchpoints organized in groups of linear flows
Purposes for the audit:
- Documenting existing behavior
- Creating a design paradigm to guide future iterations
- Identifying UX and UI flaws