In a previous post, we introduced prototypes and the value that they provide. Through some examples we explored how they can help define and refine the user experience. In this post we’ll look at another type of prototypes, those that evaluate technical feasibility.

In order to achieve the best possible outcome for a project, both creative concepts and technical execution need to work together and complement each other. A dialogue between designers and developers needs to be established as early as possible when ideas are still at a malleable point.

During an initial technical assessment, designers and developers can work together to decide the best approach. However, for this collaboration to be successful, it is important for both parties to be on the same page. Designers must be willing to be informed by developers of the technical complexities involved and be flexible enough to tweak the creative concepts accordingly. Developers must also approach this collaboration from a constructive point of view. They must clearly communicate what complexities exist but more importantly, offer alternate solutions when necessary.

Prototypes that evaluate technical feasibility
Cutwater came to us for the launch of their new campaign for NVIDIA, Speak Visual. The campaign, which was targeted at the creative class, celebrated the stunning visuals that NVIDIA technologies make possible. A general visual direction was provided to us by Cutwater. From there, our contribution would be to extend the campaign into the digital space.

Initial creative direction provided by Cutwater.

At its core, we reached our audience in two ways. We shot video portraits of an influential set of visual artists, from architect Michelle Kauffman to digital artist Joshua Davis. Secondly, we provided a platform for users to become part of this creative, visual movement by allowing them to submit their own art to a gallery for everyone to see.

To house this content, it was important to adhere to high visual standards and provide visual integrity to fit within the tone of the campaign. To achieve the desired sense of space and depth, it was decided that we would design a 3D environment that would seamlessly tie all the pieces together.

Our designers always push developers to maintain a high level of visual fidelity when implementing their designs. We knew from the get-go that this would be a creative and technical challenge. In order to succeed it was crucial to make some decisions around what technology would be used to accomplish each 3D piece on the site. Instead of trying to use one 3D engine across the board we took a more segmented approach and combined different technologies. In the end, this proved to be a much more successful method since it provided a lot more flexibility when bringing the designs to life.

Hand crafted elements
The first 3D element that we wanted to include on the site was the green ribbon, which is a distinct part of the NVIDIA brand. Both from a visual and narrative standpoint, we thought that it would be nice to use it as a transitional element that connected all the pages.

The NVIDIA green ribbon in action.

We first introduced the green ribbon to the user as the main loader of the site. Once the site is loaded, the ribbon unfolds and reveals the home page. After that it is also used to go from section to section. The ribbon not only it became a persistent branded element on the site, but it also served as a way to seamlessly transition from page to page.

A designer on the team created a motion prototype to demonstrate how he expected the ribbon to look and behave. The manual production technique used allowed for fine control over the shape and animation. It also proved that using manual timeline animations was a viable and efficient option. This method would also offload some of the work on the engineering side as designers could help create these animations while developers focused on more complex functionality. This approach was feasible due to the fact that we knew that there were a limited number of transitions that would need to be created. Animations from point A to point B would always be the same. If transitions had required a more dynamic system with more variation, the manual approach would not have been practical and an alternate solution would have had to be found.

Other manually created 3d pieces: folding planes and name ribbons.

The ribbon wasn’t the only manually crafted 3D element on the site. Other noteworthy elements were the artist pages seen above and the Why NVIDIA section.

Papervision3D
Another 3D technology that we used was Papervision3D. This is an amazing technology but we’ve learned to use it wisely over time. It can quickly pose a significant memory overhead and without a lot of tweaking, can make performance suffer.

NVIDIA Speak Visual Papervision3D home page

We wanted the home page to be striking and to really provide a sense of space as this is where users would be introduced to the site. The design comps contained boxes placed in space that would slide horizontally and would come forward to show more detail. To achieve a sense of perspective we would need real 3D geometry, hence why we wanted to use Papervision3D. Translating the designs into an actual interactive interface was challenging and we had to find a balance between graphic richness and performance.

A prototype was useful at this stage to quickly iterate and tweak things to evaluate the different outcomes. The designs definitely pushed the technology and after rounds of refinement, we had to make some compromises and optimizations. For example, on the live site only two videos play simultaneously at any given time. We also decided to make the buildings in the background not real geometry to increase performance; they ended up being an image mapped onto a plane. When the cursor is moved from side to side, the perspective is technically broken since the viewing angle of the buildings doesn’t change. We felt this was a good trade-off since our top priority was to make the interface usable and responsive.

FIVe3D
The third and last technique we used was FIVe3D. For the gallery section of the site, which was populated with user-generated content, we wanted to place the artwork inside of the speech bubbles that were used in the Speak Visual campaign. This seemed like the logical choice since they had conceptually become a symbol for individual expression.

User generated gallery

When we were working on this site, Flash Player 10 hadn’t come out yet so Flash didn’t have a z-axis for sprites out of the box. We had to look for other technologies. We knew that one performance bottleneck was going to be having a lot of sprites on screen that would animate all at once. In order to test this, we created some prototypes and found that FIVe3D met our needs the best. As a side note, designers had originally envisioned the artwork in the speech bubbles to animate using a flicker effect. The prototype made it obvious that, with that amount of elements on screen, all the flickering was too jarring.

See the FIVe3D prototype here »

This approach came with some trade offs. For example, the original design comps had speech bubbles with geometrical depth, much like the designs that Cutwater initially provided. We had to lose that depth with FIVe3D in order to obtain a usable responsive interface.

See the live gallery here »

Prototypes as a production tool
Once this approach was chosen, we realized that the position of the speech bubbles on screen couldn’t be randomized for several reasons. We wanted greater control over the placement of each individual one. We also had to make sure that there wasn’t too much overlap to avoid obscuring art pieces in the background. We also realized that we would need different layouts for the different number of results returned. For instance, if a user did a search and only received three results back, we would need a custom layout for that scenario so the design would still hold up.

At this point, the previous prototype evolved into a production tool. Using the motion prototype as a foundation, we created a tool that would allow designers to position the speech bubbles in space and then hand these layouts off to developers to implement on the site. This process made the creation of these speech bubble layouts a lot simpler and more customized. If the prototype hadn’t been created in the first place, this beneficial tool would most likely not have been generated.

Play around with the tool here »
(Note the instructions in the bottom right corner.)

Conclusion
The digital medium is constantly evolving; even when faced with a challenge that we’ve encountered before, it is wise to re-evaluate the options available. Familiar technologies might have evolved since the last time we used them and new techniques and tools might have emerged.

Technical prototypes can be used to evaluate the feasibility and limitations of a specific technology or platform. For example, you might want to evaluate the effort involved to migrate your site’s backend from Expression Engine to Django. In some other instance, you may want to look into the possibilities that the ever-changing Facebook platform provides. Prototypes can help quickly examine the viability of these objectives before committing to any given execution. These types of prototypes can be used as purely technical proof of concepts. Other times, prototypes can help define the best technical approach to achieve a particular visual look, much like the examples provided above.

It is important to understand that technology is not a means to an end but an intrinsic part of the process. What makes a great end product is not based on a singular aspect, but rather the product in its entirety. A beautiful design with a poor technical execution will be deemed unusable to users. On the other hand, a perfectly engineered application with a visually uninteresting or confusing user interface will have a limited appeal and engagement.

Stay tuned for the next type of prototypes to be explored in a future post.

« We Love Prototypes - Part 1 | We Love Prototypes - Part 3 »