Part of an augmented intelligence sprint at CoLab, Pillpack people was developed by Reid Williams and Parker Woodworth, with me leading visual and interaction design on the project. I created live code sketches of different interactions and visualizations created by the data that were implemented in the final prototype by Parker.
During the project, we found that patterns surfaced in the anonymized data that were very similar to user personas, we wanted a way to visualize these people to create a sense of empathy for a person with these trait sets while preserving the privacy of the customers in the data. As a user updates sliders to input traits about the user on the left side of the application, the prototype generates a face for the user that has those traits. It also generates a bio for the customer using a name generator algorithm with a small back story and location based on broader user groups.
The prototype seeks to provide at a glance feedback to communicate the emotions that the person on the other end of the phone might be feeling. As a result, the facial expressions in the generated face can range from happy faces and laughter to anger or shouting. behind each user is a unique watercolor splash that changes color and shape whenever a new face is generated. The color of the shape changes to a warmer color for anger, or a cooler color for contentment. In this way, a customer’s mood can be communicated very quickly using minimal text.
The system uses over 100+ svg shapes that I custom illustrated on a vertical and horizontal grid system. There are sets of face shapes, eye shapes, brows, noses, mouths, and facial hair that are all weighted differently in a randomization algorithm to generate a new face each time a slider bar is changed.
I scanned over 50+ watercolor washes in high resolution to create sample color washes behind each generated character.
Combining facial animation and watercolor interaction
The watercolor washes are dynamically changed and animated in an out with a masked png animation and an svg filter for color interpolation. Below is my proof-of-concept dynamic svg filter using a masked css animation to animate the watercolor droplet in and out when data is changed, later the water-color splash would change color and shape on every update.