Published on <a href="http://ift.tt/2s7uJlz">| Prototyping: From UX to Front End &mdash; Medium</a> James Zhou <img alt="" src="http://ift.tt/2tbTldj">
<h4>How I iterated the interactions of a grid-based journaling app</h4>
During the Rapid Prototyping course at the <a href="http://www.ciid.dk">Copenhagen Institute of Interaction Design</a>, I used Origami Studio by <a href="http://ift.tt/2kjZ1Nx">Facebook Design</a> to prototype high fidelity microinteractions of a grid-based journaling app.
<h4>Prototyping a Journaling App</h4>
My inspiration came from the <a href="http://ift.tt/2eucZIu">100 Blocks Day</a> post on the blog <a href="http://waitbutwhy.com/">Wait But Why</a>. An average 16 hour day can be divided into one hundred ten minute blocks. A day’s activities can be visualize spatially by filling out the blocks. For example, an one hour at lunch is equal to six blocks.
<img alt="" src="http://ift.tt/2tLpxRC">A day represented in 100 ten minute blocks
Rather than building the entire flow of the app, I was drawn to the potential interactions that I could create with the grid. I wanted the interaction to be fun like a game.
<img alt="" src="http://ift.tt/2tby7Mx">Final prototype
Before I dig into my process, here is the final prototype built with Origami. You can download the Origami file <a href="http://ift.tt/2tL7nQ2">here</a> to see how I built it and try it out yourself.
<h4>Prototype 1 — Failing Fast</h4>
I had no idea how to make 100 squares react instantaneously when I run my finger across the Grid. But I knew I needed to start small and simple. In this first prototype, I hardcoded the interaction of a single square on the upper left corner of the 10 x 10 grid.
<img alt="" src="http://ift.tt/2tbWium">Prototype 1
However, there were some cropping issues, and hardcoding the behaviours of 100 squares is definitely not a good use of my time.
I said goodbye to my first prototype and moved on.
<h4>Prototype 2 — Loopty Loops</h4>
Loops are powerful yet eccentric patches in Origami. Instead of hardcoding the behaviour of 100 different squares, I drew a 10 x 10 grid using the loop patch. In order to target each square in the Grid, I put a Hit Area Layer over the grid and mapped the coordinate space of the Hit Area with the coordinate space of the 10 x 10 grid.
Now, when I drag my fingers anywhere on the grid, the Hit Area will compare the location of my finger with the location on the 10 x 10 grid. If the location matches within a set range, then an action will be triggered. Each square reacts immediately to my touch and pops out.
<img alt="" src="http://ift.tt/2tLpyFa">I removed all UI elements to only focus on the interaction
However, I learned from this prototype that a 34 x 34 pixel square was too small for precision tapping and drawing 100 squares often crashed Origami. Time for another iteration.
<h4>Prototype 3 — Back to Simple</h4>
In prototype 3, I reduced the number of squares from 100 to a more manageable 16. I started to fine tune the bounciness, speed, and size of the animation. The snappier animation made it more fun to run my fingers across the grid. I introduced the function of long pressing on a square to activate coloring. After holding down for 1 second, you can color any of the square that you subsequently touch.
At this point, I wanted to add some haptic feedback every time I touch a square. Luckily, Origami has a Haptic Patch! Now you can really feel the squares underneath your finger tips.
<img alt="" src="http://ift.tt/2tbT5uE">You can feel the haptic feedback when you touch a square
<h4>Prototype 4 — The People Have Spoken</h4>
I wanted to test a high fidelity prototype on a phone so that people can touch and feel the interaction. During the testing, I learned that:
<ul>
<li>People wanted to tap the grid in addition to dragging their finger across</li>
<li>People expected to tap again to deselect</li>
<li>The long press was a hidden and difficult to understand interaction</li>
</ul>
As a result of the feedback, I implemented a color picker above the grid and removed the long press. I set the default color to grey and highlight the chosen color with a stroke. I also added tap to select, and tap again to deselect.
<img alt="" src="http://ift.tt/2tLb7Rq">The color of the existing squares change with the color picker
<h4>Prototype 5 — Bring in the Context</h4>
At this point, I could not make anymore design decisions without introducing the context. Even though I only wanted to focus on the microinteractions, I still needed to mockup a quick flow in order to communicate the context.
<img alt="" src="http://ift.tt/2tbPnB7">UI interaction flow
Within the context of the activity journal app, most people expected to pick the color first and then assign it an activity before coloring the squares. Ultimately, I decided to use this mental model.
<img alt="" src="http://ift.tt/2tLfpIq">Pick the color first before selecting the squares
<h4>Prototype 6— Small Details</h4>
Before the last iteration, I still needed to fine tune small details. The interaction is the most important interaction. In prototype 6, when you start to interact with the grid, the color picker disappears. When you release your finger, the color picker reappears. I’ve also decided to use a 5 x 5 grid instead of 4 x 4. Because I wanted a larger square to increase the hit area, I divided one hundred blocks into four sections of 25 squares each.
And here is the final prototype again.
<img alt="" src="http://ift.tt/2tby7Mx">Final prototype
<h4>Prototype #— My Learnings</h4>
I can still refine this prototype. My next step would be to prototype labeling the activities and tweaking the interactions. But, I am happy to stop here for this exploration. Here are the things that I learned prototyping high fidelity interactions with Origami.
Context matters: Even though I only wanted to explore microinteractions, the context still mattered. I needed the context to direct my design decisions.
Start small: I learned to approach building high fidelity prototypes with Origami like to how I approach coding. Start from the most basic interaction and then build up.
Good interaction is hidden: I learned that a successful microinteraction takes a lot of effort to craft. The small details are both technically and mentally challenging. But when you make them work, it will blend into the background.
Origami is powerful but there is a learning curve. The built in interactive patches, animations, and integration with mobile phones helped me make high fidelity interactions quickly. Part of the reason that I am writing this post is because there are not a lot of resources out there for Origami. I have only described my design process here. But if you are interested in a tutorial on how I made my grid, leave a comment or reach out to me at <a href="mailto:hi@jamesxzhou.com">hi@jamesxzhou.com</a>.
Lastly, big shout out to Christian Palino, Joshua Dickens, and Christina Varshavskaya, a team of designers from Facebook and Instagram that taught the Rapid Prototyping course.
<img src="http://ift.tt/2tbPhtA" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2tLwGSa">Prototyping Microinteractions Using Origami</a> was originally published in <a href="http://ift.tt/2cAqCpx">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Prototyping Microinteractions Using Origami

How I iterated the interactions of a grid-based journaling app

Top Stories