Using a component library to quickly develop and test new prototypes
I am currently working for ABN AMRO on the development of new website templates. During this project, our team follows an agile methodology and uses feedback from customers and stakeholders to iterate on the results. Our development stack is built around the idea of remixing components for the sake of prototyping, rather than for reusability or consistency. Here’s how that is working out for us.
Development driven by usability tests
To validate the design language, tone of voice and desired functionality of the new templates, we carry out usability tests with actual customers of ABN AMRO. This gives us insight in their desires and expectations. Furthermore, we demo the templates during internal gatherings in order to get feedback from different teams. With the obtained feedback, we improve our designs in the next iteration.
Remix components for fast iteration
Using Nunjucks as our templating language and a mix of JSON & Markdown-formatted files, we can easily build new templates with real content. We copy components, remove and remix what we need, and put out a new template in a matter of hours. Bits of JavaScript and CSS animations can usually be adapted to fit a new interaction concept. Then we move things around, switch out content or duplicate templates for comparison.
This requires some solid core styling, so that the flow of the page isn’t broken by “unintended use” of a component. And while that holds true for any type of modular development, our pragmatic way of writing throwaway code (literally) makes iterations fast and easy. We simply don’t have to worry about creating technical debt.
Effective deployment with Heroku
The resulting pages are then pushed to Heroku. This way everything we built is available to the whole team to get a feeling for how the redesigned pages look in various browsers. Also, we use the Heroku environment for internal demos and usability testing in ABN AMRO’s usability lab.
Combining the power of the feedback loop with component-based development, we can build better templates fast. Currently, the templates are incorporated as an A/B-test in the live website. We hope to see a real result in conversion as well. Keep you posted!
