From whiteboard to working prototype. How a startup takes shape!
Following on from last weeks post on the Launch48 experience I thought I might share some visuals of the process from whiteboard, to wireframe, to working prototype during the development of the we.teach.us web app.
Initial Sketches
Under the Launch48 model our designers didn’t have the luxury of a detailed requirements document or style book to guide the look and feel of the tool. Instead, we spent the first couple of hours of Friday night working on some initial whiteboard sketches based on how we thought the website functionality may work. At this stage we really had no direction as to what content the business wanted to appear where, but instead of this being a barrier it actually provided a high level concept of what might be possible for the busines, allowing them to pick and choose their preferred approach.
Sitemap
Once we had iterated a few ideas on the whiteboard we needed a better idea of the what content we needed to populate and how it would all come together. Working with the business we generated a sitemap outlining the main pages that were to be constructed and how they would interlink.
Wireframes
Now we understood the flow of content, it was time to take this online and design some more detailed wireframes.
Wireframing is a crucial step in web design and development as it allows for rapid prototyping and helps to pinpoint potential problems early in the process. The process of wireframing quickly provides visual representation of content, hierarchy and layout and makes it easier to communicate ideas, reduce scope creep, cut down on project costs, and enable greater upfront usability and functionality testing.
In short, if you’re not wireframing before detailed development, you’ve already screwed up.
At Launch48 the team used a fantastic tool by the name of Lucid Charts to develop and collaborate on the wireframes, and quickly design and iterate layouts to best suit the content being delivered.
The great part of wireframing is its ability to assist you in failing quickly. You can attempt a design direction, discuss the benefits or pitfalls of the approach, and adjust accordingly.
[caption id=”attachment_841" align=”aligncenter” width=”554"]
This ability to constantly reiterate greatly contrasts the “business as usual” approach taken by most organisation where problems are often not found until well into production. It’s a mentality shift that has to occur if traditional organisations are going to become more innovative.
During our design process we would build multiple versions of each of these pages to provide the business options around their preferred approach. This gave us an edge as the business could quickly articulate what they liked, or pick-and-choose the various aspects of each design to develop best-of-bread options.
Mockups
Following a number of design iterations we were finally ready to commit to a high-fidelity mock-up. At this stage you should have a good idea of how your site is going to function and an understanding of the user interactions you will be building.
Taking this to the next level, we now applied a bit of photoshop spit-and-polish to generate and illustrate the user experience & look and feel we were hoping to deliver through the online view.
[caption id=”attachment_853" align=”aligncenter” width=”633"]
Developers
Finally, it was time to hand over everything to our development team. Here’s the first pass our devs accomplished based on our mock-ups.
[caption id=”attachment_859" align=”aligncenter” width=”581"]
Unfortunately, while it may be easy enough to generate some amazing looking mockups over the course of a weekend, delivering that through a production system takes a little bit more work!
Admittedly, we did make some further progress during the remaining hours of the weekend, however I wasn’t able to grab any screen-grabs prior to close. Rest assured, for the time we provided them, they achieved some amazing things.
I’d also like to give a big shout out to Barton Smith the designer responsible for most of what you see above. He’s an amazing talent, and will be doing some very cool things in the near future I suspect
Hopefully this provides some illustration of the design process. Is this something you’ve attempted personally? I’d love to hear your feedback in the comments below!
