Prototyping in Code

When wireframes just aren’t enough

I built an app prototype with code. I needed to test an interactive feature set that lets users visualize their current mood by personifying a blob. Javascript seemed like the best way forward. It was also a great chance for me to push my front-end dev skills.

If you just want to see the live prototype in action, click here
For step-by-step details, skip ahead to The Process section.

The Context

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.

L to R: artifact from early conceptual prototype; card sort; screenshot of another prototype

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.

Wireframes in Figma

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.

My front-end skills are firmly in the beginner camp, and I’ve been so grateful for all of the open-source examples, code-snippets, tutorials, and libraries shared by the dev community. Here’s the javascript stack I ended up pulling together for this prototype:

Blobs, a project by g-harel, provides the math for generating an svg blob from a set of variables (github / live example). This is what I ended up using to generate the svg in the prototype.

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 —


The Process

Set up the workspace.

I created/added files in a directory:

  • index.html
  • main.js
  • main.css
  • /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:

<script src="https://unpkg.com/blobs"></script>

For D3.js, d3-simple-slider, and Interactjs, I installed with npm. You can also download the files by following the links.

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, class, and id.

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 class="slider" to 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 <div id="mood">.

I’ll use the variables complexity, contrast, and 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).

I used vanilla javascript for this, first setting 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 contrast and complexity variables.

I explained the process for building out the RGB sliders in this tutorial. (You can also find the code on my github.)

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!

Wrap Up

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.

Find the project on github / or / Go to the live prototype

This project was a deliverable for the Critical Making studio and an extension of my work in RE studio at CMCI Studio (👋 RJ Duran & Jesse Weaver).