The Paper Doll
Effect
Unlocking UI Flexibility
with Modular Illustrations
Prepared for:
Thermo Fisher Scientific
DISCLAIMER: The work shown in this case study is for an unreleased product; some details have been omitted, and some images and content have been altered and/or obscured. Opinions presented are my own and do not necessarily reflect the views of Thermo Fisher Scientific. For more information, please contact me via email at clara.e.leet@gmail.com.
Project Overview
Operation of the new SwiftArrayStudio instrument requires manually loading and unloading materials in different combinations for various protocol types. Accuracy is critical, as mistakes could compromise both instrument operation and valuable sample data. To reduce these risks, users are shown a series of screens with instructional text on the instrument's embedded display.
My Roles
UX/UI Design
Interaction Design
Visual Design
Illustration
Team
Industrial Design
Application Scientist
Engineers
Tools
Figma
Adobe Illustrator
The Problem
Usability testing revealed users had low confidence with text-only instructions; they wanted visuals along with the text for additional clarity, which they felt would boost confidence and accuracy.
However, accommodating all scenarios would require over 800 unique illustrations that would need to be hand-drawn for consistent visual styling and accessible viewing on the low-resolution display. Manual production would create a months-long bottleneck, engineering handoffs risked development delays, and most critically, the sheer file volume would exceed the instrument's limited storage capacity.
Solution
Instead of hundreds of static images, I built a modular illustration system inspired by paper dress-up dolls, featuring a handful of interchangeable visual components that could be rapidly assembled in any combination by engineers in code.
Outcomes
4+ months of design and development time saved.
Created a scalable system that allowed rapid design and code modifications.
Fostered collaboration between design and engineering teams.
Enhanced user confidence and reduced user error rates.
Process
Step 1:
Make a "Paper Doll"
I created a modular set of illustrated components inspired by paper dress-up dolls — yes, the childrens' toy. The idea was to create a universal base layer (the “doll”) and then “style” it with interchangeable pieces (the “clothes”).
The Process
After receiving CAD images from Industrial Design, I drew all variables in Adobe Illustrator, ensuring visual consistency with our design system and accessibility compliance.
Illustrations were imported into Figma as components, then tweaked to be “pixel-perfect” for seamless layering and effortless swapping.
Finally, I built it all into a “template” component for rapid generation.
The result was an easy way to let any designer build illustrations in any combination imaginable in a matter of seconds.
This modular approach saved countless hours in design production time. Unfortunately, there were still obstacles to overcome:
It would take several weeks to identify, build, and export images for all possible scenarios for handoff to engineering .
Engineering would need to code in and test all images and scenarios.
Worst of all: Technical limitations around file storage couldn't be avoided.
I proposed that engineering could assemble images in code using SVGs instead of relying on a designer to create and hand off hundreds of static PNGs.
Initially, the team was hesitant, until an engineering manager mentioned his daughter enjoyed playing with paper dolls, and agreed that the idea could not only save time but that it would be much less of a burden on the storage load. Suddenly the concept clicked! I prepared the graphics for handoff and documented the assembly process to ensure coded layouts matched the design.
Sample Screens
Reception
Despite an unconventional source of inspiration, my “Paper Doll” modular solution was well-received for its innovation and feasibility.
Feedback
Closing thoughts
Sometimes, the best design solutions come from looking outside our industry for inspiration. The paper doll concept transformed what could have been months of repetitive illustration and tedious coding into an elegant, systematic approach that engineering could own and modify independently.
This experience also highlighted the benefit of prototyping not just for users, but for internal stakeholders. Sometimes the most innovative ideas need to be demonstrated rather than explained to gain buy-in.