Image and Date Visualisation: The Principles and Processes of Interactive Design, Jamie Steane

Steane, J., 2014. The Principles and Processes of Interactive Design. London: Bloomsbury

Industry Perspective: Campbell Orme, Moving Brands


Client Hitachi

Brief to design the user-facing experience of new innovative interactive software, which allowed for remote collaboration, using a protagonist, gesture-based interface.

Agency Moving Brands

Solution Moving Brands created detailed user journeys, logic flows, user interaction guidelines and a full user interface, for implementation and build by Hitachi Tokyo-based development team.

Interview with Campbell Orme, Design Director, Moving Brands

Campbell has worked in design and direction roles for a number of international design agencies including Moving Brands, Imagination, BERG, and Pentagram. Campbell’s specialism is interactive installations, software applications and custom hardware-specific software.

After your initial briefing, how did you set about structuring the whole project?

There were a number of clear phrases in the project, which spanned: requirements gathering, feasibility, information architecture, use flows, user experience (UX) and user interface design (UI).

Can you describe the ‘requirements gathering’ phase?

Some of the criteria that we look to summarize here are: ‘How do we succinctly describe the perceived outcome?’; ‘What is its purpose and who is it for?’ This last question is especially important as it’s one of the means of validation that we use for ascertaining whether the brief has been met.

What research methods did you use to achieve this?

Alongside current trend and market analysis, we worked with our client to get under the skin of what were deemed to be the core features of the software. Equally, as the end product was going to be targeted to a specific audience type – corporate, education and civic environments – we looked at what parallel user-case scenarios, away from technology were relevant.

Could you explain the ‘feasibility’ phase?

What we needed to know from the outset was whether our proposals were technically achievable, for fear of winding up with a design that couldn’t be realized. As there were third-party technologies being employed for some of the messaging and network feature – each with their own API nuances – we had to be aware of how these functioned.

What happened next? 

The next stage looks at the information architecture: the overall structure of the software. This often uses user journeys and slows, to ensure the given steps within a task are efficient and clear. This in turn leads into UX – page layouts and frames – and then eventually overlap, as we find issues that require us to revisit earlier phases. What this all means is that the fidelity and definition of the end product is continually being refined as the project progresses.

What form do user journeys take?

These are often a combination of paper prototypes, video demonstrations, or clickable interactives. These all have their individual strengths; for example, we find clickable demos are very useful for website wireframes, where we deliberately package up something that looks very rough to give the client a sense of walking through the end product without them fixating on its aesthetic appearance.

What is the purpose of video prototypes?

It depends on who they’re for. For the development team, they might be rough -and-ready stories to discuss how to navigate the product – to demonstrate a sequence that’s hard to convey on paper. for the client’s CEO, it may have to look very real, with a level of polish or realism that serves to get top level buy-in for the project.

You’re developing a new product, so was it important to use familiar visual metaphors for the user interface? 

As designers and developers, it’s preferable to lean on metaphors and tropes that are familiar to both end users and us. However, we quickly found that some of these weren’t applicable for this project. Designing a gesture based interface for a six-feet-wide screen presents new design problems, as, for example, people’s height and size come into play. You can’t automatically decide on a menu on the left or right of the screen without acknowledging a left-handed or right-handed bias.

How do you visually research a project? 

One of the first things we do is try and understand the client’s visual tone of voice. How do they represent themselves in the real world? Next, we have to access whether what we are doing has to sit alongside it, or has to work completely within it, or indeed has to be distinct.

What visual methods of research do you use?

We still use moodboards however they manifest themselves, and we often create mood films with sound and moving image that try to reflect the client’s tone of voice. They are not a means to an end in themselves, but they are effective for setting a project’s tone at an early stage, in a format that is self-presenting and easily shared.

Did you undertake a formal user-testing?

On occasion, we might engage a third-party user-testing company to organize formal assessments and focus groups within our target audience, but for confidentiality reasons this was less viable with this project. However, we did a lot of user-testing with the client’s development partner – the teams at Moving Brands and Hitachi’s team in Japan – and with people in our studio not directly involved with the project.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s