Summary
My team needed a way to create IVAs that worked across multiple brands—without starting from scratch every time. Treating the creation of the design system as I would a product, I align the team on the needs for the system, uncover pain points in the existing process, and prototype and iterate on solutions to build a scalable yet flexible design system that could be tailored to multiple brands.
My Role
As the lead UX designer on this initiative, I owned the end-to-end design system strategy.
- Facilitated cross-team alignment. I led workshops and design syncs to bring stakeholders into the process early.
- Defined the system architecture. I mapped out how components should be structured, themed, and reused.
- Built the system in Figma. Taking inspiration from Atomic Design, I created everything in a way that allowed easy duplication and branding.
- Socialized the system to the team. The new system is useless if no one uses it, so I onboarded the team to its benefits and uses.
Getting Aligned
The Problem Space
Merck Pharmaceutical Reps often detail HCP’s on multiple drugs across a variety of brands in one visit. They rely on documents called Interactive Visual Aids, housed on iPads, to facilitate these conversations. Different IVAs for different brands could potentially function very differently, slowing down these discussions. The main function of the new template was to ensure consistency in navigational patterns across these IVAs, and the design system being created was the means of helping to guide that consistency.
Research & Definition
I treated the build process like a product in itself, making sure I was solving the right problems before diving into a build.
- Ran discovery workshops. I brought together product and design leads to talk through what wasn’t working—surface-level issues, workflow blockers, and brand constraints.
- Clarified the goals of the system:
- Ensure a base level of template consistency, while still leaving room for brand-specific customization
- Create modular, reusable components with clear definitions
- Build with scalability and clarity in mind—especially for other designers who would use the system
- Audited our design files. I reviewed legacy design system libraries to find what could be kept, improved, or rebuilt.
A snapshot of the Figjam board I created to inventory and categorize existing components.
Planning the System
System Architecture
I mapped out a modular structure for the system components
- Created a phased build structure, identifying which components were most critical to the template and prioritizing their builds first.
- Defined which components would be necessary across brands and organized them into categories
- Established a naming convention that mirrored existing systems, but refined them.
- Aligned on necessary design tokens which would be necessary for the build of the components.
Workflow Integration
I ensured the system worked within the team’s existing workflow
- I had frequent consults and touch-bases with the other team members who would work with the file to make sure that I had the appropriate buy-in.
- I incorporated their feedback to make sure it would function in a way they found value in.
Governance and Maintenance
I made sure to have a plan for how the system would be scaled and documented.
- Designated which parts of the template could be customized for individual brands, and in which ways.
- Factored in how new components could be added over time, and how changes would be tracked.
- Created a backlog of new component requests or refactors.
The Approach
As the main function of the new template was to ensure a similar navigational experience across the different IVAs, that is where the bulk of the design system focused.
- The design system would provide clear guidance on how the information architecture of the IVAs should be structured
- It would also ensure that all IVAs were leveraging the same navigational patterns, while still being flexible enough to account for brand specific needs
- Page content across the brands is highly bespoke and strictly regulated, but the most common patterns and elements would be accounted for in the design system for ease of use
Building & Documentation
Constructing the System
Once I had the plan, I moved into hands-on system creation—testing, refining, and scaling as I went.
- Leveraged Figma design tokens. By setting up brand colors, type scales, and spacing tokens, I made it easy to “reskin” the design system for different brands with minimal effort.
- Started small with a prototype. I built a test version of the system and worked with a few designers to make sure it fit into their day-to-day process.
- Rebuilt components from the ground up. I took the useful pieces from old files and reconstructed them using Figma best practices—ensuring they were clean, consistent, and ready for reuse.
- Created a duplicate-ready system file. This file served as a base for every new IVA project, with built-in architecture and component logic already in place.
A snapshot of one of the components, with documentation
Documentation
Every component included guidance on what could (and couldn’t) be modified, so designers could move faster without second-guessing decisions. Documentation lived in Figma; I wanted to make sure designers would not need to look far for how components should be used.
- Each component was accompanied by live, visual examples on how they should be used and organized, as well as brief text where necessary
- Documentation was also built into how the components were constructed, using component variables to illustrate in which ways a component could be adjusted.
Driving Adoption
- I held walkthrough sessions and demonstrations with the team at large, and more focused “how-to” sessions with the designers that would be using the file.
- I established feedback channels, so designers knew who to reach out to if they had questions or encountered any glitches.
Results
Ongoing Impact
The system made a big difference—for both the team’s workflow and the quality of our output.
- Faster design cycles. Designers now start with a solid foundation, cutting down the time it takes to build each new IVA.
- More consistency across brands. Even with different branding, the experience remains cohesive thanks to structured components and usage rules.
- Less ambiguity. Clear documentation removed the guesswork, especially for new team members or external collaborators.
- Ongoing improvement. New components and patterns are added as content needs evolve, keeping the system fresh and relevant.
What’s Next
I’m continuing to expand the system and make it even easier to use.
- Building out a companion starter file. This file is already connected to the design system and helps kick off new projects with the right architecture in place.
- Improving the documentation experience. I’m iterating based on designer feedback to make the system even more intuitive.
- Adding more flexible content blocks. As we scale, I’m prioritizing components that accommodate more complex content components.
Get in touch!
I love talking design, art, technology, and social good.
Feel free to reach out for a chat!