The key ingredients of mobile design and UX methodology

Mobile projects can live or die on design. This column looks at the importance of design methodology, with a blow-by-blow account of the digital design process at the UK mapping agency, Ordinance Survey (OS).

While mobile development is rooted in methodologies inherited from web and software development – Waterfall or Agile; Scrum and Kanban – there is no industry-standard methodology for the design stage of your mobile project.

When you consider how important design and user experience (UX) is to the success of mobile projects – it’s crazy that companies and agencies have had to develop their own procedures… and it’s understandable that too often these prove inadequate.

The design and UX stage is the process by which the mobile project – or new iteration of the mobile project – goes from great idea to something the developers can get to work on.

Steps in this process include:

• Visualization of the project – often drawn on paper as a storyboard.
• Testing that on the target audience, then refining it.
• Getting agreement from stakeholders, then refining it.
• Giving the project its structure, look and feel and user interface – on paper or digital, usingwireframes.
• Test again, refining and getting agreement.
• Creation of a prototype – usually digital.

There’s a variety of design and UX techniques and tools that companies/agencies might use to achieve this – some of which we will examine in detail in successive columns.

These include storyboards, user journey mapping, mind maps, personas, wireframes, prototyping and minimum viable product.

Waterfall or Agile or neither?

The traditional methodology for software development, usually referred to as Waterfall, is a linear process of defined stages: research -> design -> development -> test -> deploy (or similar).

While this makes design just a stage in a development process, the advantage is that actual development can’t start until design is completed and signed off.

In web and particularly mobile development, there is a need for speed, a requirement to work on different parts of the project concurrently, for regular scheduled testing and to continually enhance and upgrade.

This has led to the evolution of, and widespread adoption of so-called Agile development methodologies such as Scrum or Kanban, where research (including viability studies and audience identity and needs), design, development, testing and deployment – on different aspects of the project – could all be going on at the same time.

One of the best illustrations of Waterfall and Agile, is the following from US (New Hampshire)-based web-design agency CommonPlaces. However this agency, like many, actually uses a hybrid of the two approaches.

While agility brings many advantages, there is a danger that the design process can become squeezed, rushed, overlooked or, if outsourced, cause lack of continuity and delays. This makes it all the more important that companies put in place a design methodology. This shouldn’t just be a subset of a development process, but a methodology in its own right.

Bespoke v off-the-shelf design methodology

As previously stated, there is no commonly accepted methodology for designing mobile projects, no equivalent of developer processes, such as Scrum or Kanban. But many companies and agencies have developed their own in-house methodologies, some have gone to share these with others.

One of these is a lean UX methodology that mobile design expert Greg Nudelman, CEO of design agency DesignCaffeine calls the $1 Prototype. This process has been used on mobile projects for Intuit apps, Wells Fargo, USAA and Oracle and is the basis for his UX design courses.

N.B. $1 is not the price of the book, this is the price of two packs of sticky notes. Nudelman argues, convincingly, that sticky notes are the most important tool for storyboarding and wireframing mobile projects. The image below shows a mobile project sketched out by some of Nudelman’s students using this method.

We will look at the value of pen and paper – and sticky notes – in the digital design process in future columns.

Design methodology in practice: Ordinance Survey Maps

It is increasingly common for businesses to employ digital creatives with an agency background, as these come with a design methodology honed through years of client work.

Ordinance Survey, the UK’s mapping service, recruited Ben Scott-Robinson, a co-founder of the pioneering UK agency We Love Mobile, to found its internal agency to deliver its digital products and services.

This is Ben Scott-Robinson, head of The Agency at Ordnance Survey’s summary of design process for OS digital projects:

The OS Agency team runs a design sprint at the start of the project. We start with a narrative that outlines the emotional engagement we are looking to achieve with our customer, and use that as a basis for starting to work through the user journeys.

With OS Maps, for example, we focused on creating an experience called Emotive Mapping. We asked:

• How can we take the emotional resonance people have with paper maps in general, and OS in particular into the digital space?
• How can we product maps that are more than functional, but clearly crafted to give a positive emotional engagement?
• How can we take people from a concept of ‘location’ to a concept of ‘place’?

This focus was driven by existing customer engagement with traditional OS paper maps, and the sense of belief and reassurance around understanding their immediate environment, rather than just knowing where they are.

From here we work in a relatively standard way; we:

1. Create a list of potential benefits that fulfill the narrative, and do card sorts among representatives of the audience types.
2. Taking those benefits, we create user journeys and storyboards around them. These tend to be scamped.
3. Test the journeys among the audience types again (always testing against criteria established around the narratives) and then start divergent thinking around interfaces.
4. Research interface types, then start sketching interfaces.
5. Create clickable prototypes from these sketches, using Marvel and use remote testing, such as usertesting.com usually, to test which works.
6. Start creating detailed prototypes of specific experiences in Axure (mapping apps tend to be multiple interaction single screen experiences which requires a pretty sophisticated tool).
7. Validate with the developers to check if our designs are possible or not!
8. Test remotely, again, to cut the chaff; then test with audience type for more detailed feedback.
9. Start stitching together the experiences into a product – again using Axure –and start simplifying and aligning interactions.
10. Then the visual designers get involved and we start creating design patterns and whole screen designs, which are included into the prototypes. We also look at the design of transitions and animations.
11. Test and test again, then we bring the developers in to start building the design.
12. A UX and visual designer is seconded to the development team to work with them in the Agile process, being involved in the planning, and supporting questions, providing revisions on the fly, and working through edge cases. OS tends to take a more Kanban approach rather than Scrum, as this is more flexible, and less of a planning overhead on the development team.

This is Part 16 of the ClickZ ‘DNA of mobile-friendly web’ series.

___
by Andy Favell