My Musings

May 5, 2011
|

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

Whiteboard Mockups

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

Site Map

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

Home Wireframe

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.

Search results page

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.

Profile page wireframe

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.

Feature Page

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.

User Profile Page

Mockups

Main Page Mockup

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.

Teachers Mockup

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.

Profile Mockup

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.

No quite what we were after!

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!

2 Comments

  1. Reply

    Alison Sharp

    May 9, 2011

    It's amazing what can be achieved so quickly when people focus on a common goal, use their imagination, and put aside politics. Fantastic!


Would you like to share your thoughts?

Would you like to share your thoughts?

Leave a Reply