I am a firm believer in the fact that close collaboration is the foundation for bringing high quality work to the digital space.

Every individual brings their own talent to the table and it’s important to provide a vehicle to express those individual talents. At the same time, when team members seamlessly work together that’s when lot of the magic happens.

It’s in our nature - no matter how hard we try, we are always going to have a limited point of view shaped by our individual experiences and the way we perceive things around us. Innovation often comes from looking at something from an angle that we haven’t considered before. Collaborating with talented people with different backgrounds is a great creative catalyst so why limit your creative brainstorms to designers and strategists? Why not include developers and information architects into the mix as well?

But don’t let yourself feel like this point of view dilutes your creative expression. It’s actually quite the opposite. Your raw idea can evolve and blossom into something delightful that you never expected. Just because it’s a collaborative effort doesn’t mean that you can’t feel a sense of pride, ownership and accomplishment.

Prototyping can be a great tool to spark this cycle of creativity. It can be used in a number of ways and fulfill several purposes. In a series of blog posts we’ll explore some of them and expose the value that they provide. We’ll look at prototypes that help define the user experience, others that evaluate technical feasibility and some that can be used as a sales tool or even a spec for application development.

Prototypes that define the user experience

This type of prototyping commonly happens at an early stage - often after the creative execution is somewhat defined and there is a need to further explore the user interfaces. These prototypes can be used to test a small discrete piece of functionality such as how an image carousel might work up to the level of user engagement that an interactive game generates.

Since defining user experiences is central to our work this is definitely one of the most common and valuable types of prototyping that we work with. A wide range of prototypes fall in this category and often inform other parts of the process such as design, asset production, user interaction models and even video shoots.

Let’s take a look at some examples.

DonQ’s LadyData data visualization

The first prototype we’ll look at is one that we developed for DonQ’s LadyData. LadyData has been a very successful campaign that has helped DonQ increase its brand awareness in the US. On the site, users get to learn about the opinions of a team of female insiders who lend their intuition to crucial man-topics like style, careers, manners and, of course, sex and dating.

When we were working on the wireframes for the site we started thinking about what pieces of functionality could bring some delight to the experience. Since users were going to spend most of the time browsing and filtering through the female survey results, we decided to focus on ways to ensure user engagement on those pages. We sketched a bunch of data visualization options trying to find a balance between usefulness, engagement and visual richness.

From wireframes to prototype.

Inspired by the wireframe where results were made of columns of boxes, a developer on the project prototyped a Tetris-style data sorting mechanism.

It was an instant hit both internally and with the client. It proved to be surprisingly fun and rewarding to interact with as well as very usable. It’s easy to get carried away designing overly complicated interfaces in the pursuit of uniqueness but often times, simplicity is still the best approach. See the real deal in action here.

Sony Style 2010 Bravia UI design

The second prototype we’ll look at was used during the production of the Sony Bravia 2010 showcase site. This site was one of three pieces that we created to coincide with the new line of Sony 3D TV’s coming out at CES this year. An important goal for Sony’s product design team was to consider how this product would fit in a real living space; what the Japanese call Tatazumai.

The Sony Bravia 2010 Showcase site.

With this in mind, we placed the flagship TV model in an interactive 3D living space, which served as a platform to tell this design story as well as showcase the new technology and features. Our goal was to allow users to interact with this room and the product in an approachable and playful way while learning about the features.

We decided to come up with a family of UI controls that had a cohesive style and a consistent placement on the screen to minimize users having to re-learn how to interact with the site. When designing each screen, our designers would have to take this into consideration. After sketching a lot of different options on paper first, we selected a subset that seemed the most interesting and appropriate for each particular interaction.

This is when a prototype came in. There is often a gap between concept and execution, a lot of nuances are really hard to define or even consider until you see things in motion. These types of prototypes help bridge that gap. One of the developers on the project built several of these UI widgets so we could actually test and fine tune how each of them worked through different rounds of iteration.

Different User Interfaces designed for the Sony Bravia 2010 showcase site.

After that, we put the prototype in front of a larger group of people who had never seen it before to see if these UI controls measured up to our expectations. This exercise was extremely useful. Having different options to compare interaction models in context makes you realize what really works and what doesn’t.

For this particular prototype, we realized that the UI controls that we envisioned for one particular interaction (see bottom 3 knobs) were hard to use and behaved in an unexpected way for users. After trying different things out, we ended up with a more traditional control that was also more in line with the real world interface (up/down on the D-Pad on the Playstation 3). See what we ended up with here.

In conclusion, this iterative, collaborative process between designers and developers helps validate, refine or even discard ideas early on. In the end, prototyping early and often saves a lot of time, reduces project risk and sets you up for success.

Continue on to Part 2 »