Despite all the tremendous benefits using an HTML based, interactive prototype (which we will sing praises for til the end of time), I often find that if we begin with HTML alone, we're more likely to cling to a certain layout simply due to the time (and pride) put into crafting a complex HTML structure. This is why I begin nearly all template layouts with a number of hand drawn sketches or whiteboard layouts before we even begin with HTML.
In this post, I'll share an example of how paper prototyping played a critical role in how we approached a redesign for winwithoutpitching.com.
Example of Paper Prototyping in the Win Without Pitching Site Redesign
Here is an image of the previous Winwithoutpitching.com site:
Screenshot of Win Without Pitching Site prior to redesign process.
There were a number of issues with the layout of this homepage that we agreed upon:
Goal 1: Place content centerstage. The old homepage hid the fact that Blair was producing tons of great content. It was hiding the best asset he had to engage visitors. We needed to bring the content out of the extranet and in to the forefront.
Goal 2: Create clearer Calls to Action. The calls to action were hidden inside way too much content. Visitors needed to see immediately what next steps they should take (sign up for a newsletter, subscribe to blog, become a member).
Goal 3:: Make Blair's social media presence much more visible. After a number of high profile mentions and interviews, Blair's presensce on the social media map has become more important than ever. We added a twitter feed, social media icons, and sharing features to the prototype.
Paper Prototype Example
We went through a number of both paper and whiteboard prototypes until we all felt we had a good starting point.
Image Left: Whiteboard prototype example. Image Right: Paper prototype example after beginning design moodboards.
HTML Prototype Example
After a couple rounds of feedback on the paper prototypes from the group, we adjusted the layout yet again and moved to the next step of building the grayscreen version of this in HTML:
Screenshot of HTML built Grayscreen Prototype.
We've not taken this final grayscreen layout, made some further changes at the subpage level to carry these goals through sitewide, and have moved on to the design creation stage. The prototype is then passed off to our designer who uses the grayscreen as a starting point in developing design concepts.
Stay tuned for the final version of the redesign which we'll be unveiling early this fall.