Build a modular, easily changeable prototype to test granular micro-interactions
Overview
Each prototype has a place in the product lifecycle. Different types of prototypes help evolve different phases of the product. A high-fidelity prototype is most helpful when designing and perfecting micro-interactions. This is the story of one such high-fidelity prototype. It was built using Airtable and W3.js, and was a superstar in it’s time.
UMHealthResearch
UMHealthResearch is a platform that connects the public to health research studies. Born out of the University of Michigan, the platform is now being adopted by various Universities across the country.
Prototypes and where they fit in the product life-cycle. A high-fidelity prototype is most useful when the product direction is relatively established.
Each prototype that we build for UMHealthResearch has a defined role in the design process. We use paper prototypes to help shape basic ideas and inVision prototypes to explore macro-interactions. We build high-fidelity prototypes to define the micro-interactions and help with branding, stakeholder engagement, business analysis, and usability testing.
How we built Peak, our high-fidelity prototype
Creating a good high fidelity prototype is an art. Since the entire goal of a prototype is to inspire change, we needed Peak to be modular, easily updatable, and to have real content. Here is how we built Peak:
1. Create repeatable UI components using W3.js
Creating repeatable UI components enabled easy and efficient updating.
To begin with, we created static repeatable UI components. We brought these components together using W3.js, a Javascript library that simplifies prototyping.
Let’s take a look at the global navigation bar as an example:
A global navigation bar that appears on lot of pages in UMHealthResearch
To create this bar, we created a separate HTML file that contained the markup for this bar alone. A corresponding SCSS file contained the styles. We then used W3.js’s include functionality to include this bar on all the pages that it needed to be included on. This meant that if something needed to be changed with this component, it only needed to be changed in one place
2. Bring in real content using Airtable
Adding live data to our high fidelity prototype made testing real-life scenarios possible.
We took real content that our users had entered into the application, desensitized it, and stored it in Airtable. Being able to change the design and see how it looked with real content was very important for us and using Airtable made this easy and efficient. It also helped us test real life scenarios with users. We would add data to Airtable during a user test to mimic a new participant being added or a participant’s state being changed and see how our users reacted.
One of our Airtable bases. Storing data in Airtable allowed us to separate the content from design and move forward with more confidence.The Interested Participants interactions. All the participant data on this screen came from the above Airtable base.
3. Add interactivity
Adding interactivity to components with live data allowed us to test & refine microinteractions.
After getting the prototype to pull in live data, we added interactivity to the most important tasks that users would perform using simple Javascript and jQuery. Examples include searching, filtering, pagination, moving participants to various lists, labelling participants, and pagination. This exercise helped us figure out the little details about the interactions. It also helped us provide specific instructions about these interactions to the developers.
Further reading
See our medium article for further details including examples and code snippets.
Reflection
Prototypes are useful for a specific purpose and in a specific phase of the design process
It is the role of a prototype to inspire change and they should be built with that goal in mind
The lesser the effort to change something, the more the chances are that it will change
