01926 311880

Not such a dummy after all!

Gravatar Image by Matthew Pearson

User Experience Prototyping...Wireframes, Personae, Journeys and all that great stuff really help us to shape the User Experience of a system; but nothing beats getting something onto peoples screens. Even better onto the smart phones and tablets in their hands.

Over the years we at Webmoco have developed lots of full-on web and native systems. These range from e-commerce to content/document management and self service to completely bespoke systems. But we’ve also developed a fair few dummy systems too, why? Well, these dummy systems act as life-like prototypes of the final production environment; simulating the behavior of a full system at a fraction of the cost.

This prototyping process can provide an awful lot of proof points and insights along the way, so it’s a really powerful part of the project lifecycle.

Clickety Click

In the old days it was common to hardcode data into static HTML screens and create click through page by page prototypes. But we’ve confined this approach to the dark ages now.

At Webmoco we now create rich data driven prototypes. These are clever user interfaces which we program to respond to user interaction. As the user interacts with them we visibly change the display data to simulate how a real system would behave. This can be performed in-page without any re-loads so the user gets the sense that this is a real experience.

With this approach users can build up shopping carts, interact with management or self-service dashboards, change views and see the system react to their decisions. We do this by creating rich, but static, data models that underpin these prototypes. We can even store user input and make the prototype feel personal.

Most of the client work we do these days involves some sort of responsive web development. With the help of CSS Media Queries we can adapt user interfaces to provide tailored UI’s for mobile, tablet and desktop users. Over and above styling we make skillful adjustments to script how these interfaces behave on touchscreen devices.

When we combine this armoury of skills with these data driven prototyping capabilities we really can produce rich mobile, tablet and desktop prototypes.

Why Prototype?

Years ago while training as a software project manager I learnt an interesting fact (See 'The Software Project Survival Guide" by Steve McConnell). The cost of changing a website/software system increases the later the change comes in the project lifecycle. Changing something during the System Test phase was five times more expensive than changing it at the Analysis phase. This was due the rework involved, the impact on other components and retesting that results from a change.

Ok, so that was in the bad old days before we worked in a more agile way, defining requirements more interactively. But in the multi-device world we live in getting things right is as important as it ever was. The cost of change is still high as the breadth of re-testing is now greatly increased with many more browsers, devices and platforms.

This is where prototyping can be very useful. When Webmoco has developed client prototypes, we have done this as part of the early Analysis and Design phases of a project. In some ways this is to confirm requirements. But more importantly it is to provide an opportunity for vital User Testing prior to full production development.

Apart from User Testing, UI prototyping has other important benefits. Our teams are engaged in building digital assets with touch interactions and subtle interface transitions. These often can only be portrayed to a client and tested through prototyping. With device rotation, interface scaling, crunches and scrolling images overlaid over background images the proof point is often best served by a prototype of the code itself. 

It's also important to note that the code that we develop for our prototypes is production quality HTML/CSS/JS code driven by an underlying data source. So this is re-usable code, which is quite capable of going into a production version. As the front-end needs building anyway it's better to develop it early as a prototype before all the costly back end development is done. This way user testing can happen much earlier in a project, with obvious cost benefits.

If you would like to discuss how user interface prototyping could help you with a project then please get in touch.

Prototyping Projects

We’ve used prototyping on an range of projects from self service energy management to banking. All providing critical insights that helped to create better end products.

russian mobile and desktop banking

Russian Mobile and Desktop Banking Prototype.

h samuel & ernest jones store portal

Prototype of In-store Portal for H. Samuel & Ernest Jones stores.

npower smart metering prototype

User testing prototype of smart metering self-service dashboards.

Add a Comment

Add a Comment