Because my company (Lucid Software) has a history of being more engineering oriented than design oriented, my design team has had to work with a significant gap between “the design” and the engineered “product”. Translation: there aren’t enough design-sensitive engineers to take a mock and built it to spec.
4 months ago, two of the designers on my team began using HTML, JQuery, and Angular to build out more expressive prototypes of our design work to deliver design solutions. The result of those experiments was a higher adoption rate of design work – more of the specified design solution ended up in the final code. This was great because it reduced our need to follow up on the engineering team as much and QA had fewer bugs to report, resulting from the engineers losing some of the design in the translation from mocks to code.
Move ahead 4 months (now) – we’ve invested a couple of months to build out a dynamic HTML component library so that all of our team can build interactive prototypes of our designs. Directing the work of Cory McArthur, we have begun using these “building blocks” of code to even build dynamic prototypes for customers to engage with, using Codepen. It’s helped engineers build a better product, increased our ability to explain important nuances of interaction design, and helped sell our ideas and improvements across the company.
Our plan is to have a fully functional version of our product in 2016 so that we can test new ideas, get customer feedback early, and drive more of the design work at a code level. These few pictures show some of the content from Lucid Particle Design.