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!

Comments

Comments
2 Responses to “From whiteboard to working prototype. How a startup takes shape!”
  1. Alison Sharp says:

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

Trackbacks
Check out what others are saying...
  1. [...] The first Aussie Launch48 was held in Melbourne in April 2011. During that weekend I was fortunate to be in the team that worked on what is now successful Melbourne learning startup, WeTeachMe (read more about the Whiteboard to Working Prototype of WeTeachMe). [...]



Leave A Comment

Post Calendar

May 2011
M T W T F S S
« Apr   Jun »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Disclaimer

Long Straws is the personal blog of Stephen Colman.

The views represented here are mine and should not be considered representative of my employers.

Any posts containing statements around the suitability of financial service products should be considered "general advice" which does not take into consideration your financial background or circumstances. Please contact a licenced financial planner should you require advice in this regard.