The Paper Doll
Effect
Unlocking UI Flexibility
with Modular Illustrations
Prepared for:
A major life sciences company
DISCLAIMER: The work shown in this case study is for an unreleased product; images and content have been altered and/or obscured to protect the privacy of the client and project. All information and views presented are my own and do not reflect the views of the client. For more information, please contact me via email at clara.e.leet@gmail.com.
Project Overview
Operation of a new scientific instrument required manual loading and unloading of materials in unique combinations for various protocol types. Accuracy during this process was critical, as mistakes weren't just inconvenient, they risked compromising both instrument operation and valuable sample data. To reduce the chances of error, users were 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 insights revealed users had low confidence in text-only instructions; they said they wanted visuals along with the text for additional clarity in order to 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.
Sample Screens
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.
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.