User interacting with gold iPhone

Effective Thinking

The Hidden Value of In-Browser Prototyping

Hopefully you’ve had a chance to read the other posts outlining some of the strategic and design thinking that went into building EffectiveUI’s new website. For this post, I’ll focus specifically on in-browser prototyping and its ability to build stronger, more capable creative and technical teams.

One of our main goals with the new site was for it to continually evolve and grow, both in content and construction. Therefore, a process that relied on multiple iterations was key. In addition, as the site was built to be responsive/adaptive, in-browser prototyping became more of an imperative due to the dynamic nature of the architecture and content.

inbrowser-prototyping

Although we started our initial design efforts with static wireframes and visual comps, we quickly moved into iterative code prototypes. This decision did come with a price – namely a fairly steep learning curve.

Fortunately, our long-term strategic goal of continual growth and improvement also extended to our project team. Utilizing in-browser prototyping not only resulted in more productive and efficient design/production cycles, but also served as a powerful tool for self-education. This is one of the most significant, albeit hidden, features of the new site … its ability to serve as a tool for education and learning.

Our prototyping efforts required that I work closely with our development team rather than pitching a heavily specified set of documents over the proverbial wall for translation. Since we worked on the code together, the technical learning curve was significantly reduced for myself and, as a result, my technical capabilities and understanding were greatly expanded. Our prototyping sessions also provided ample opportunities for design education with the development team.

For experiential learners such as myself, I appreciate how in-browser prototyping cultivated an ethos of “learn by doing.” In the long term, I know this will allow me to more readily retain the knowledge I’ve gained and apply it to future updates and projects.

In my early years as as designer focusing on print design, I learned that it was exceptionally valuable to converse with and learn from the press operators who were printing my work. Although I could never hope to gain the depth of expertise and knowledge that a seasoned press operator possesses, I know these opportunities for self-education were helping to make me a better designer.

Similarly, in-browser prototyping is a great tool for designers to gain more technical literacy and, in turn, become better designers. In-browser prototyping also provides opportunities for deep collaboration amongst design and development team members, resulting in a more cohesive and productive relationship. This allows teams to expand their capabilities and ultimately increases the quality of the work.

Often code prototypes are handled exclusively by dev teams, but by involving design resources early on, and treating the prototypes as vehicles for educational, experiential learning, you’ll be generating tangible, long-term value for your team and organization that extends well beyond the launch of a new site.