Once upon a time, there were three little prototypes being built for a big powerful client. The first prototype was constructed out of wireframes and static comps; an industry standard for many years. Although many hours of work went into each execution, the client was ultimately confused and returned the PDF with a slew of questions and criticisms that tore down all the team’s hard work.
Then came the second prototype, which the designers and developers created in After Effects. The team felt that by creating a video demonstrating how their app would work, it would clear up many of the client’s previous questions. Although the video worked better than the wireframes and static comps, it opened up a new can of inquiries regarding the actual user interaction. Once again, the team was left to pick up their scraps and start again.
The team regrouped and created a third prototype. This final prototype used web-based design elements to mimic the look and feel of the native application they were tasked to create. Not only did the third prototype take less time to construct than the previous iterations, it also provided the client with a tangible demonstration that was full of prompts and animations capable of clearing up all of the client’s questions about user experience.
With tired eyes and hopeful hearts, the team shipped their third prototype to the client. As if by magic, the client’s skepticism and complaints turned to excitement and praise. The team was applauded for their efforts, the client decided to extend their initial contract, and the speed and agility of the team’s prototyping process was improved beyond their wildest imagination. It was a fairytale ending to an age-old problem; how do we increase the speed of our prototypes?
What materials went into the third prototype?
The shining star of the third prototypes was the ability to emulate spring animations in the Web. Although most people don’t realize it, motion and animations are what make our apps so intuitive. How would you know what you selected if it didn’t change color or spring into action? Motion is one of those things users don’t appreciate until it’s gone, and that goes double for a client that’s pouring a ton of money into a project. With so much money on the line, they don’t just want to be told what something will do; they want to see it and feel it.
“It was already doing the mathematical calculations (physics),” said David, “so we just took that math from their open source project and did it with CSS3 animations. There are a lot of different ways you could do it, but we chose CSS3 animations to prevent dropped frames. Daniel Wilson, another Mutual Mobile team member, coded it and together we took the spring physics math calculation and made a spring animation that could perfectly mimic the spring animations in iOS.”
And just like that, the team was able to create and pivot native feeling prototypes faster than a native developer. As an added bonus, David and his team have made their CSS3 spring animation available to the public at getlavaca.com, preventing you from having to go through all the trial and error that led David and his team to a workable solution.
Life after Web Prototyping
Although the third prototype was a definitive success, it was not the end of the road for David and his team. They still had to taper the client’s expectations and remind them that prototypes are never a pixel-perfect match with the native app.
And clients aren’t the only ones who need a little coaching. According to David, his web team was so successful due to their willingness to continue moving forward. “You need a web team that is quick and is totally willing to iterate and throw away code,” explains David. “This can be extremely frustrating to developers who dwell on how much work they’ve put into something that needs to die, but we don’t have that problem. Our developers have a keen understanding of design. Making awesome UI that people enjoy using is what motivates us.”
Save Our Static Comps
Despite the speed and agility of web-based prototypes, David believes there’s still a place for wireframes and comps. Internally, these resources can continue to accelerate the process. The key is making sure everyone viewing them has the imagination and technical knowledge required to decipher what they’re trying to explain. In front of the right set of eyes, wireframes and comps inspire the prototype that’s being made for the client.
“If we get a static comp many times, we can build a prototype that same day,” claims David. “Then we show it to the client the next day and get their sign off. It turns what was once a two-week process into a three-day sprint. And best of all, the majority of the presentation can be spent talking about whether it makes sense for the user, rather than explaining the animations.”
The same is true for user testing. Sure, you can stand in front of a focus group and explain how everything’s going to work via a wireframe and static comps, but the resulting insights aren’t nearly as useful as when people actually see the product in action. Putting real prototypes into the hands of real users leads to real results. But really, it’s all about knowing your audience.
Is web-based prototyping the only solution? Of course not. Some clients and users are sophisticated enough to take a static comp and a wireframe and comprehend the entire software experience. Others, however, require a little more hand holding. That’s when you should consider implementing web-based prototyping.