Prototyping WebsitesThere's always a considerable amount of data to discover, organize and strategize on when starting the process of building a new website. We've always strived to pull together that information in a manner that lays out a clear blueprint for the path the project is going to take. That blueprint forms the basis of mutual understanding and agreement between us and the client – and as such, is one of the most critical phases of building a website.
Traditionally, we've focused on sitemaps (flowcharts), functional specification documents and occasionally wireframes (relatively simple line drawings that roughly lay out major components of a proposed website) to make up our blueprints. It has worked relatively well for the better part of 10 years but recently we made a switch in the process that I hoped would ultimately result in better communication with our clients and our internal developers. And that would likely result in less time and cost and hopefully better final projects.
pro•to•type a first or preliminary model from which other forms areI've always known what a prototype is but just hadn't given it the attention it deserves. I had become used to a certain workflow process that while ultimately a bit flawed in some areas, was comfortable. I realized one day that "comfortable" was really only something to be strived for in the areas of TV watching and bank accounts – it has no place in the design world.
developed or copied
With that, I decided it was time to include prototypes as part of my normal workflow. The benefits are significant. In developing a prototype, you are giving the client a chance to experience the flow of the website and how users will actually interact with many parts of its UI. Being the visual and experiential creatures that we are, this elicits much clearer feedback from our clients during this phase. That ultimately helps us develop a better website and saves us time and money by catching issues and bottlenecks earlier in the project.
There appeared to be some cons up front when I first looked at this in detail. Prototypes can range a lot in their degree of fidelity (one could argue that our old wireframes were really prototypes at the extreme low end of the spectrum). As you approach the higher end of that spectrum though, the closer you get to approaching the final working experience. The trade-off is that as the fidelity ramps up, so does the time to create that prototype. That was a concern as on the surface it looked like I was adding significant additional time to the project. However, I soon realized that what I was really doing was replacing effort I used to spend working out questions of UI during creating actual design comps with working out those items with prototypes – and the simple fact is it's much faster iterating through those in a prototype than in a Photoshop comp.
When we started delivering prototypes to clients we had further validation of the merits of this process. Our old meetings of 1, 2 or even 3(!) hours to walk a client through our old static discovery phase documentation suddenly became highly productive 1 hour sessions where the client already "got it" – and could focus on how to make things function better and address their needs better. They felt like they already had the site in front of them – the excitement and their engagement was palpable.
When I personally got into my first design phase with a prototype behind me, it was more fireworks and revelation. I had much of the UI questions laid out and answered. I could focus more on of issues of branding and feel, as well as subtler issues of certain UI specifics – and still pull together comps in less time than I used to. When those comps went to the client, again we had more focused input from them and not surprisingly much less feedback in regards to items that needed to be re-thought and reworked completely.
We're through 3 projects at this point and I'm a convert. Prototype. Prototype. Prototype.
With that said, there is a critical second component to this process – and that was finding the right tools to accomplish this. There are a lot of options out there – and we spent a lot of time looking at them. In my next post, I'll walk through some of the tools we looked at and lay out their pros and cons.