The (Enterprise-Friendly)

MOBILE DESIGN PROCESSA how-to guide from industry leaders.

22016 | The (enterprise-friendly) mobile design process.

Mobile has changed the game for every business of every size,

everywhere. Eighty-three percent of market-leading CEOs say

mobile technology is the number one near-term change-driver

for their company.1 And with good reason:

• U.S. adults now spend more of their digital media time on mobile than

on desktop.2

• Mobile now outnumbers desktop in Google searches.3

• 18 percent of Starbucks’ annual transactions now happen through their app.

• Old fashioned bricks-and-mortar leaders like Walgreens now refill

prescriptions via mobile at a rate of one per second.4

• A record-breaking one billion people recently logged into Facebook on

a single day (84 percent of them through mobile).5

This trend will only accelerate. By 2020, the mobile app market is

projected to reach $101 billion—basically doubling in just four years.6

In short, mobile has become big business.

“The smartphone revolution brought design’s value into the foreground. We want to

do in our palm, while walking, what we use to do on a big

screen, while sitting down at a desk. The interaction design

challenges presented by that shift are huge.”7

JOHN MAEDAAutomattic

3

The key—gleaned from the design practices of mobile leaders—is to balance a

human vision with rigorous and focused execution. Sounds obvious? Maybe, but it’s

rare to find organizations that do the full process the right way. Here’s what everyone

who works on mobile products can learn from the mobile market leaders:

First, make it human. It begins with understanding what human experience

the enterprise is trying to improve (and how mobile fits in).

Next, make it real. With a human foundation in place, great enterprise design

teams then ruthlessly narrow their focus to create living versions of device

appropriate designs.

Finally, make sure it works. Great mobile design teams stay engaged testing,

learning, and measuring success with real people using real mobile products.

Ready to give it a try? Let’s break it down, step by step.

32016 | The (enterprise-friendly) mobile design process.

1 2 3 7 84 5 6

Ask the right questions to define

a shared goal

Go wild (ideate)

Name your North Star

Let them at it (your customers,

that is)

Measure success of goals

Narrow in on an MVP

Itterate in the device

Adopt an engineer

MAKE IT REAL MAKE SURE IT WORKSMAKE IT HUMAN

4

Smart enterprises start with human questions. They ask, what customer problem are we trying to solve? What are the characteristics of a strong solution? And how will we measure that we’ve really solved the problem? After the launch of a low-adoption digital receipts initiative, Walgreens learned that customers found the new receipts-option checkout process tedious and irritating—and that they didn’t care about digital or even paper receipts. While assuming the question was “What type of receipt do you want?”, the real, more human question was “Do you want a receipt?” To ensure they’ve zeroed in on a genuine “people problem,” Facebook uses a short checklist to arrive at a strong, simple, straightforward problem statement to guide product development.8 Mobile design leaders then translate insights from quantitative and qualitative research into design principles—people-centered statements

FIELD NOTE

Keep in mind that design principles should be specific to your target market and customers. What plays well with mobile users in the U.S. may be quite different from what customers desire in, say, Asia—as the designers of the Foodspotting app found when they took their minimalist, elegant design to Japan and learned that users there perceived it as too stark and corporate.

FIRST, make it human.

Facebook’s Checklist for People-Focused Problem Statements

Is it human, simple, and straightforward?

Is it solution agnostic?

Is it “company wins!” agnostic?

Does it get at the “why?”

Is it functional, emotional, and social?

that characterize the ideal solution. For Facebook’s Collage, a photo sharing feature, one design principle was “help people remember that they have stories to share.”9 The Facebook team also states early on how they will measure that they’ve achieved their goal—for example: “a super high-quality experience means that 50% of people who try out this feature will come back and use it again within the week.”10 Together, simple, well-defined problem statements, design principles, and intended measures form a balanced foundation that supports the project as it evolves.

The agile ethos and the continuous delivery mindset reign supreme in tech, but enterprise design leaders begin in a more basic, human place.

2016 | The (enterprise-friendly) mobile design process.

1 Ask the right questions to define a shared goal.

FIELD NOTE

Take a cue from OpenTable and host a “design drinks” session—a fun, cross-functional ideation session where attendees can brainstorm, visualize and even quickly prototype potential design directions. Don’t forget the drinks.

If step one creates a conceptual foundation for the product, in step two, mobile design teams move quickly to tangible ideas for potential design directions. Brainstorming and ideation are key techniques here. Indeed, it’s now common to see brainstorming sessions and walls of sticky notes in organizations big and small. But what separates the mobile design leaders from the rest of the pack is that even at this early stage, their ideation is high-fidelity, often manifesting as prototypes in the device. This helps teams and stakeholders not just understand the concepts but feel them. An executive stakeholder can grasp intellectually that mobile is important for her business, but once she holds it in her hand, she gains a visceral appreciation for how fundamentally it will change her customers’ behaviors. This type of in-hand exploration is key to communicating mobile’s potential to the enterprise. It also facilitates early, in-market experiments. The Europe-based telecommunications company Telefonica maintains a steady pipeline of mobile experiments to determine which might have revenue potential for the company. As one designer there explained, “there should be a whole part of your business that’s focused on experimenting quickly to see what can drive the most revenue through mobile.”11

2 Go wild.

52016 | The (enterprise-friendly) mobile design process.

The North Star is the story of the human experience that you want to be able to offer two-to-five years out. It’s a reference guide for validating that the big ship is arcing in the right direction when you’re years-deep. One key to a successful North Star that’s often missed by channel-centric enterprises is that it should be bigger than mobile, bigger than any one touch point. Instead, it should envision a fluid, relatable in-real-life experience that unfolds over time. OpenTable’s North Star envisions a complete and seamless multi-channel experience with details like the following:

• You check your watch to see the wait-time at arestaurant and maybe invite a friend right from there.

• You walk into the restaurant and the host greets youby name and offers you your favorite cocktail.

• When the bill comes, you easily split it via the app.

FIELD NOTE

A North Star also serves to communicate the larger mission to new employees trying to understand where the company is headed and how their work contributes to it. Develop visuals that illustrate the intended customer experience you’re working toward

Heads of product then document the fully fleshed-out vision as a roadmap for future development. A good North Star is good for the short-term too. When CNN realized that its increasingly complex, multi-channel broadcast business was creating brand inconsistencies that confused audiences, it re-committed to a strong vision and user experience that embraced both the brand values originally stated by Ted Turner and user feedback. Because it touched so many devices and content streams, the redesign was a multi-year effort, but enterprise wide alignment of goals allowed new, smaller projects to start off right while rolling out larger changes and shedding technical debt.12

and add them to onboarding and training decks. Airbnb even brought in an illustrator from Pixar to bring its North Star to life, and it proudly displays the illustrated scenes on HQ walls today.

2016 | The (enterprise-friendly) mobile design process.

3 Name your North Star.

“Design is much more than objects. It’s the whole experience. Could we use design to create trust?”13

JOE GEBBIA Airbnb

6

FIELD NOTE

Standardization can help speed things up for small teams serving large organizations (as the team at the Russian giant Mail.ru discovered), but be sure to balance it with refinements that feel right for each channel, device, and context—as excelling at creating these nuanced experiences engenders user trust .17

2016 | The (enterprise-friendly) mobile design process. 7

CHARLES EAMES

NEXT, make it real.While a grounding in human needs, clarity on direction, and a compelling

vision create a foundation for great mobile design, they don’t ensure that

enterprises will get great mobile products out the door. How a company

pivots from vision to detailed execution matters.

4 Narrow in on an MVP.

Effective enterprise mobile designers transition nimbly from the big picture thinking of the North Star to the focused craftwork of designing a minimum viable product (MVP). “Working backward from your strong point of view, you figure out the needs of your platform,” advises one design leader at Atlassian. For Facebook, this requires a two-pronged approach—first, by working with engineering on preliminary viability prototyping, and second, by working with research to validate basic assumptions about how people will use the mobile offering.14

After that come MVP refinements. Or, as Netflix designers put it, “MVP is really just baseline performance, like ‘make sure it’s not absolutely terrible.’ That sounds really bad, but it’s the truth.”15 This is a process, ultimately, of simplification—stripping away all non-essential features, interactions, and elements until reaching that critical threshold of just enough robustness to still feel like a complete and satisfying experience for users (and no more).

“Recognizing the need is the primary condition for design.”16

While startups and more niche players sometimes have the luxury of specializing in a subset of mobile platforms, enterprises that serve a broad customer base have to tailor their digital offerings to a range of supported touch points, device types, and screen resolutions. This is best done by seeing designs live on the device. As one Netflix designer explains, “don’t get too bogged down in… doing all these different designs for different screen sizes. Really just think flexibly and work with prototyping tools or a prototype or an engineer to really start seeing how that design reacts depending on the different screen size.”18 When designers from Nationwide Insurance led a responsive redesign, they went device-by-device, testing and adapting designs in a range of digital environments. As Nationwide’s Brian Greene explained, “we are doing a lot more designing in the browser… some work is still in Photoshop. [But] where we’ve landed is we have a large desktop view and then the mobile view, and then anything in-between sort of gets figured out in the browser.”19

FIELD NOTE

Bring an iPad mini with Retina display to every meeting. Nationwide’s Greene considers the device his “+1”. “You [can] just see how excited the business [gets] when they [see] it on those devices. So we [do] our best to not ever project. It just doesn’t really do it justice.”20

5 Iterate in the device.

82016 | The (enterprise-friendly) mobile design process.

Just when you thought you were in the home stretch, the implementation phase introduces new risks that good design will receive poor implementation. This is especially a concern in siloed enterprises where design and engineering are disconnected work streams. Enterprise mobile design teams are mitigating this risk, increasingly, by buddying up with engineers, or doing higher fidelity prototyping to document intended interactions and subtle animations. This step is so crucial at Facebook that the team has created its own prototyping tool that creates animation code that can be used directly in the engineering build, so the final version will feel just like the prototype.22 For Russia’s Mail.Ru, it’s not just about documenting interactions; prototyping and designing in code are critical techniques to streamline the entire design process, create reusable design resources, and ultimately speed up their time to market.23

FIELD NOTE

Co-locate designers and front-end engineers during this iterative phase. Or, consider bringing in a creative technologist—a front- end design expert who resides within design and partners with visual and interaction designers—as Nationwide Insurance did.

6 Adopt an engineer.

92016 | The (enterprise-friendly) mobile design process.

“Engineers are efficientproblem-solvers. Businesspeople think short-term.Designers want things to be elegant and beautiful.All three need to createcollaboration andharmony, and honor thevalue each other brings.There needs to be a kindof “multi-dimensional”approach to design that is yet to be invented.”21

LINDA HOLLIDAYCITA

The risk-averse enterprises will be (rightly) hesitant to just throw an MVP in market and hope customers like it. Many enterprises have gotten religious about usability testing as one mechanism to prevent poor mobile experiences from going live. But enterprises with leading mobile design practices go further—conducting concentric circles of user testing and iteration, starting with in-house tests with their own employees, then moving to a larger beta group, and finally a general market test. Facebook “dogfooded” Collage to employees to test and gather preliminary

feedback, which led to refinements in UI design and the MVP. This stage of refinements typically involves a paring down of features or elements—compared to the usual bad habit of adding stuff in. The next step was a limited geographical release in Scandinavia to gather more data and make final adjustments before release.24 Likewise, Netflix tested the waters on a responsive redesign by first changing its signup flow. An in-market test against the existing design proved that responsive was a winner, paving the way for a broader responsive redesign.25

FIELD NOTE

Release new products and versions first to your earliest adopting and most-loyal customers. In addition to being forgiving of early tech missteps and happy to be part of the “behind the curtain” process, as the genuinely intended audience, their feedback is gold.

2016 | The (enterprise-friendly) mobile design process.

7 Let them at it.

10

LAST, make sure it works.Strong vision and execution are required, but the design process isn’t really

done until real people have had a chance to use the resulting product

or service. It’s the customers, through their feedback and their behavior,

who conduct the final quality check on the mobile design process.

In the end, it comes back around to the goals, principles, and measures that enterprise mobile product teams articulated at the outset. Walgreens checks its progress by asking three questions of newly launched products. Is it Usable? Useful? Indispensable? While the electronic receipts effort failed all of these tests and led to a project overhaul, Walgreens’ Refill by Scan answered each with a resounding yes to become a runaway success that revolutionized their core prescription business. Like many mobile-leading businesses, Starbucks uses ongoing cross-channel measurements to gauge the results of its mobile investments. CEO Howard Schultz recently declared that mobile is helping the company “serve more customers more quickly and efficiently and…significantly reduce attrition off the line.”26 That’s CEO-speak for keeping more customers happy.

Mobile Leaders Test and Measure with Increasingly Broad Pools of Users.

Focused usability research to define minimum viable product.

Internal “dogfooding” for quality assurance and to discover new use cases.

In-market testing with early adopters or test markets.

Release to broad market and measure performance.

FIELD NOTE

Encourage your organization to look beyond basic engagement metrics like unique users and frequency of use and instead examine the impact of mobile behavior on other measures that matter. Walgreen’s did this, and found that customers who visit the store, mobile, and web channels spend 3.5-6 times the amount of customers who only visit the store—a compelling case for cross- channel development investments.27

8 Measure success of goals.

112016 | The (enterprise-friendly) mobile design process.

122016 | The (enterprise-friendly) mobile design process.

Designing for mobile in a large organization can be complex, but—like any

worthy endeavor—it offers unique benefits to those who undertake the

challenge. First, enterprise scale means your work has a good shot at touching

the lives of lots of people (and that feels really good). Second, absent the

pressure cooker of a startup environment, enterprise projects afford the time

and space to research and build truly solid foundations for your programs

(which will make them more likely to succeed). Lastly, mobile is here to stay.

Designers who champion the cause and help businesses execute on broader

digital strategies will establish themselves as leaders in organizations

that are paving the way forward. Everybody wins.

Good for Business, GOOD FOR YOU.

122016 | The (enterprise-friendly) mobile design process.

132016 | The (enterprise-friendly) mobile design process.

1 IBM, “Redefining Competition: The CEO point of view,” January, 2016.

2 Kleiner Perkins Caufield & Byers, “KPCB Internet trends 2016,” May 31, 2016.

3 TechCrunch, “Mobile searches surpass desktop searches at Google for the first time,” October 8, 2015.

4 Mobile Marketer, “At the corner of mobile and innovation,” Deepak Pandey, November 4, 2014.

5 McKinsey & Company, “Global media report 2015,” July, 2016.

6 App Annie, “App Forecast: Over $100 billion in revenue by 2020,” February 9, 2016.

7 John Maeda, “#DesignInTech Report,” Kleiner Perkins Caufield & Byers, March 15, 2015.

8 Julie Zhuo, “Building with creative confidence,” from the TNW Conference, May 28, 2016.

9 Christophe Tauziet, “Designing Facebook Collage; A journey in design & storytelling,” December 15, 2015.

10 Julie Zhuo, “Metrics versus experience,” July 6, 2016.

11 Personal interview with Ricardo Marquez, August 8, 2016.

12 Marisa Gallagher, “This is CNN / Next; Modernizing for the news of now,” UX Week, 2013.

13 Joe Gebbia, “How Airbnb Designs For Trust,” February 2016.

14 Christophe Tauziet, “Designing Facebook Collage; A journey in design & storytelling,” December 15, 2015.

15 Responsive Web Design podcast, “Airbnb,” March 16, 2015.

16 Charles Eames in Joseph Demakis, The Ultimate Book of Quotations (Raleigh: Lulu, November 2012).

17 Smashing Magazine, “Product Design Unification Case Study: Mobile Web Framework,” February 4, 2015.

18 Responsive Web Design podcast, “Netflix,” December 14, 2015.

19 Responsive Web Design podcast, “Nationwide,” December 1, 2014.

20 Responsive Web Design podcast, “Nationwide,” December 1, 2014.

21 “#DesignInTech Report.”

22 Wired, “Facebook shares its design secrets in the Apple app store,” February 24, 2015.

23 Smashing Magazine, “Product Design Unification Case Study: Mobile Web Framework,” February 4, 2015.

24 Christophe Tauziet, “Designing Facebook Collage; A journey in design & storytelling,” December 15, 2015.

25 Responsive Web Design podcast, “Netflix,” December 14, 2015.

26 Fortune, “Starbucks wants your phone as much as it wants to sell you coffee,” July 24, 2015.

27 John Yesko, “At the corner of digital and retail,” The Service Experience Conference, 2014.

Copyright © 2016 Adobe Systems Incorporated. All rights reserved.Adobe and the Adobe logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Leah Buley is the author of the book The User Experience Team of One and the founder of Leah Buley Co., a design consulting and advisory firm. Bridging the roles of practitioner and analyst, Leah conducts research on the user experience field, and uses what she learns to help companies evaluate where they stand competitively with respect to design. Before starting her own business, Leah worked as a research analyst at Forrester, examining the evolving role of design in business. Prior to Forrester, Leah was a design strategist at Intuit and an experience design lead at Adapative Path.