Prototyping in Code
When wireframes just aren’t enough
If you just want to see the live prototype in action, click here.
For step-by-step details, skip ahead to The Process section.
For a few months, I’ve been working on a product with Jonas Escobedo and Diamond Alexander that helps people become more emotionally fluent by normalizing the full range of emotions and teaching skills for self-regulation and self-awareness.
A brief history of our product design process so far:
We started with in-depth, generative research to come to our problem statement, utilizing interviews, secondary research, and conceptual prototyping. We synthesized our research using the Elito method and created an impact pathway to understand the behavior change design goals. Then we began translating those insights through rapid sketching, user flows, and wireframes. Along the way, we’ve been testing and validating our direction with card sorts and more prototypes.
One of our key insights has been that people use abstract language or imagery to describe how they’re feeling, especially when their feelings are complicated or perceived to be negative.
This has led to the product’s central experience, a check-in that prompts the user to untangle how they’re feeling through a visualization exercise before tagging their feelings with keywords.
We’ve been able to break this experience down into pieces for lo-fi prototyping, except for the actual interactivity of the visualization feature. This conundrum is what led me to hard-code this prototype.
Inspiration & Research
Earlier this year, I ran across Blobmaker, a project from Z Creative Labs for randomly generating one of those beloved svg blobs. This has been a big inspiration for the dev side.
D3-simple-slider is a project by John Walley, using D3.js to generate svg sliders (github / live examples). This is what I used to create the sliders that control the color, complexity, and contrast variables for the svg.
InteractJS provides the logic for draggable objects and dropzones, which I used for the sticker drawer piece of the prototype.
Ok, now for the actual build —
Set up the workspace.
I created/added files in a directory:
- /img (where I added sticker images)
Install js libraries.
I installed D3.js, d3-simple-slider, Interactjs, and Blobs, which we’ll use in the next steps (see overview in research section above).
For Blobs, I just linked to the unpkg file in the
<head> of the index file:
npm install d3
npm install d3-simple-slider
npm install interactjs@next
Build out index.html.
Next, I set up the structure of the html file. First, I took my wireframe from Figma and sketched it out on a whiteboard. This helped me break it down into
div elements and think through nesting,
I wanted to simulate a phone screen, even if the prototype were to be accessed on desktop, so I created
<div id="screen"> to nest everything else inside.
Here’s what my HTML ended up looking like:
I also added some basic styling to main.css, including setting all divs with
display: none; so that they would be hidden by default.
Here’s what the prototype looked like so far:
Call in the blob.
Next, I started building out main.js. First step: Use the blobs library I imported to create a blob in
I’ll use the variables
blobColor later on when I work with the sliders, but for now I set the defaults to make a mild, happy green blob.
Make the nav dynamic.
Next, I wanted to make the nav dynamic, so that clicking on one of the icons would display the associated div (which I hid by default in the CSS).
var for each of the nav icons and the
div associated with them in the controls area:
Then I added an event listener to each icon, which toggled to display of the other icons and the associated control
div on click. Here’s the script for the color nav icon, which I duplicated and tweaked for the other two nav icons:
Now, the nav bar is dynamic, which I tested using placeholder content. Next, I replaced that placeholder content with the interactive sliders.
Build out the sliders.
On a basic level, D3.js and d3-simple-slider libraries let me grab a
div in the html file and append an svg slider. I did this to create RGB sliders in the color controls, which then pass through a new value to the global
blobColor variable used in the blob svg formula. I also used this approach to create two sliders in the shape control div, to control the
By now, the prototype was looking like this:
Make stickers that drag and drop.
The final step was writing the script using Interactjs that would let me drag and drop stickers on top of the blob, to add a bit more personality to the visualization.
First, make the stickers (
class="draggable") actually draggable by calling a function that locates the mouse and translates the sticker’s x and y attributes accordingly:
Next, we identify the dropzones where the stickers should live and clarify what happens when the sticker is dropped:
Now, the stickers can be dragged and dropped between their homes in the sticker drawer and the dropzone layer on top of the mood svg:
Testing it out.
I uploaded the repo to my playground url (everyone has one of those, right?!) so others could explore the prototype. It’s still a little buggy, especially on mobile — but please go on and test it out for yourself!
Here are a few of the images that some test users have made. Check out the 3-faced avocado!
Building this prototype taught me so much — about patience in debugging, cobbling together js libraries, refactoring for cleaner code, and the challenges (and joys) of the design/dev intersection.
Next up, my project team and I will do some user testing with the prototype so we can keep moving forward with the design process.