Build a modular, easily changeable prototype to test granular micro-interactions
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 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.
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
Let’s take a look at the global navigation bar as an example:
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
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.
3. Add interactivity
See our medium article for further details including examples and code snippets.
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