Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Mobile-First Is Just Not Good Enough: Meet Journey-Driven Design

In a recent sales meeting for a prospective healthcare client, our team at Mad*Pow found ourselves answering an all-too-familiar question. We had covered the fundamental approach of user-centered design, agreed on leading with research and strategy, and everything was going smoothly. Just as we were wrapping up, the head of their team suddenly asked, “Oh, you guys design mobile-first, right?”

Well, that’s a difficult question to answer.

While the concept of mobile-first began as a philosophy to help prioritize content and ensure positive, device-agnostic experiences, budgetary and scheduling constraints often result in mobile-first meaning mobile-only.

But according to the analytics data of our healthcare clients, the majority of their users are still on desktop. We want to provide a positive experience for those users and for users on mobile and tablet apps and for those using mobile browsers — and even for users having an in-person experience! It is not accurate to assume that mobile is the primary experience.

A computer, tablet, and mobile phone on a desk.1
We have so many devices today, it’s impossible to assume someone will use mobile. (Image credit2) (View large version3)

We’ve come to the conclusion that mobile-first is not specific enough to user needs. Truly user-centered design needs to start with the journeys our users are taking and the flows they follow to complete their objectives. In other words, journey-driven design. Journey-driven design naturally emerges from a user-centered approach that factors in the who, the when and the how to reveal the truly complex set of user needs. Good design doesn’t force users to pick up the device that we designers want them to pick up; good design gives users the best of what a company has to offer on the device that the user wants to use at that point in their journey.

What’s Wrong With Mobile-First? Link

Early in the world of mobile, we (designers in general) essentially designed for desktops… desktops with small screens. UX designers were used to thinking about things like how their users would approach a website and what visual, linguistic and contextual clues they would need to complete their tasks, but we didn’t think about the screen’s size changing. In 1999, we merely worked with 800 pixels. Then, we expanded to 1024, then 1200. Designers rejoiced!

As mobile design improved, battery life lengthened and Wi-Fi became ubiquitous, we learned that users were likely to approach a website from their mobile screen. But all of the design considerations for desktop didn’t translate well.

A comparison of different screen resolutions.4
A comparison of different screen resolutions, including MacBook Pro, iPhone 4, Traditional/XGA/iPad, BlackBerry 8520/HTC Wildfire, Nokia 5228, and Kindle. (FlySource) (View large version5)

The idea of mobile-first was a triumph for the user. In 2009, Luke Wroblewski introduced6 this best practice. Karen McGrane added to the conversation7 with her Content Strategy for Mobile in 2012. They found that designing with the constraints of small screens helps us to prioritize content, which leads to a better experience for the end user. In addition, the capabilities of mobile devices left more opportunities for engaging experiences.

Still, it focused on only one great experience. One variation focused on the concept of graceful degradation, which suggested that we design a perfect experience (typically for desktop), and then account for older browsers and less common devices by ensuring functionality, even if the design suffered. Similarly, we tried progressive enhancement, which suggested starting small (mobile), and then enhancing the design as the device or browser gets bigger. Neither accounted for a great design across the realm.

And, more importantly, no one intended mobile-first to mean mobile-only.

Now it’s 2017, and we assume that every project needs to be mobile-friendly; so, when budgets decrease, mobile-first does become mobile-only. After all, 34% of people8 use the Internet predominantly from their mobile phones, and as of April 2015, Google penalizes websites that aren’t usable on mobile. But the choice isn’t as simple as mobile or desktop. Many users switch devices mid-task9, making it even more vital that we focus our content and create consistency across the experiences. In healthcare, 50% of smartphone users download health apps10 — which also means that 50% do not yet.

In a recent report on mobile marketing statistics, Smart Insights’ founder Dave Chafey analyzed the reports11 and concluded:

The reality is that while smartphone use is overwhelmingly popular for some activities such as social media, messaging and catching up with news and gossip, the majority of consumers in western markets also have desktop (and tablet) devices which they tend to use for more detailed review and purchasing.

We have to ask: Did a patient get their diagnosis via a phone call at home and then turn to their desktop, or were they at the doctor’s office searching on their mobile phone? Did that shoe shopper peek at their phone for a cheaper online deal, or did they go home and make the purchase on their tablet?

Apple watch on a wrist, helping someone find their car.12
The Internet of Things connects physical devices to one another and to us, like this Apple Watch app that helps people find their car. (Image credit13) (View large version14)

The divide between online and offline has dissolved as the Internet of Things15 expands, and our experiences are likely to cross between phone, laptop, tablet, TV, watch, refrigerator, car and even toilet16! Pixels and dimensions mean far less than responsive design, adaptive content and journey mapping. There is no obvious starting point for a journey, and no clear template to follow. In order to prioritize content as well as to design for screens beyond mobile, we need to focus on the journey as a holistic piece.

Uncovering The Journey Link

What makes journey-first design more effective than mobile-first is that we are looking at the process holistically. This means that even small budgets have the time and money to take into account design thinking for more screen sizes. In addition, journey-first provides context, a necessary element of today’s design, which was not a focus when mobile-first design began.

The first step in journey-driven design is to map the journey itself, with a focus on how someone accomplishes their goals, and the best person to ask is the end user. Most user-centered design projects already begin with a research phase. It’s an opportunity to hear from users or prospective users and to learn what their expectations are, where they have pain points, and what device or devices they will use as they navigate through the experience.

Based on the research, we create personas17, and then map out each persona’s ideal journey, including making note of every touchpoint along the way to the final objective. These are the times when the business and the persona communicate, whether via email, website, social media, store visit, phone call, mailing or other method. Those touchpoints will be what we can actually design, in order to shape the complete experience. In other words, we can’t necessarily control what a user does when they’re out for a walk, with their phone on silent, but we can control what they see when they receive an email from us, and that will affect the portions of their experience when we’re not connected.

For one of our healthcare clients, this became particularly clear when we considered how end users interact with insurance companies. Though the patient’s goal is to get their lab results, on the way to the doctor’s office, the patient might wonder what their copayment is. If they check the mobile website to log in, that’s a touchpoint for us. If they look for signs in the doctor’s office that list typical copayments, that’s another potential touchpoint. After the appointment, when the claim is filed, we have an opportunity to email the patient an update — another touchpoint.

An ecosystem web18
An ecosystem web can be as loose or tightly connected as the touchpoints it displays. (Image: Amy Cueva, Mad*Pow19) (View large version20)

All of these touchpoints come together in an ecosystem web21, which is one of our primary tools when we engage in journey-driven design. The ecosystem web will help us make connections between the areas of our website, the various other technologies involved in the Internet of Things, and the actions the user is taking. On the ecosystem web, we can also identify which device the persona is using at each digital touchpoint. We might know this information from user research, or we can gather it from analytics, which can get so granular as to tell us which pages on a website are most visited by which devices.

From Journey To Design Link

Knowing the touchpoints and designing an ecosystem map is all well and good, but there’s still the matter of designing an appropriate user interface and interactions to help the end user accomplish their goal(s). We still need to build out wireframes or mockups that can ultimately be developed into an app or website.

For some designers, creating an ecosystem map or shifting that into a journey map (whether current or idealized) is as far as journey-driven design goes, before shifting back to mobile-first. The consistency of viewing all designs in mobile-sized mockups is attractive, and stakeholders love the cohesive feel. But our job as designers is to sell them on the need for a variety of screens. We need to consider each set of interactions independently. If there is an ideal user journey that begins on mobile but after four screens switches to desktop, then we need to design four steps for mobile and then change to desktop. If another prospective user journey (maybe the power user’s journey) within the same app begins on a tablet, then we should begin with a tablet design. If still another begins on the watch, then that’s where we begin. We’re still prioritizing content, but we’re also accounting for the visual frame.

After designing each interaction, ask these key questions:

  • Have I designed for the most critical device?
  • What other devices might come into play here?
  • What is the context for this interaction22? Where will my user physically be?

Although the designs won’t have the cohesive feel of a stack of mobile screens, it will have the context of the user’s scenario and their rationale for particular actions. As an added benefit, this type of non-linear thinking will encourage new design approaches. Plus, front-end developers love getting a few screens for each screen size early on; it helps them to structure their development work.

For our healthcare client, we sketched out an ideal journey map on sticky notes, using one sticky note for each touchpoint, and different colors for each likely device. Once we understood the touchpoints along the journey, we were able to think in terms of interactions on screens. We designed every screen for tablet, as well as variations for the six screens most likely to be done on mobile and the four most likely to be done on a larger desktop monitor. We used mobile-first and responsive design best practices, resulting in screens that engage users across all devices.

A full storyboard showing how a patient would interact with an app.23
For a project designed to help rheumatoid arthritis patients, we sketched out a full storyboard to understand the touchpoints between patient, doctor, application and website. The information on the phone represented the ideas we were going to design, rather than the exact content and UI. (Image credit24) (View large version25)

But best of all, we improve our work as storytellers by linking interactions back to the journey. Even the best, most user-focused designers can forget about the narrative when they begin to focus on individual interactions. The shift from one device to another will help recenter you, reminding you again and again of who the user is, where they are, why they’re doing what they’re doing and what their main focus is — particularly when their focus is not on your UI!

Adding In Content Link

For designers working with content, there’s still another benefit to journey-driven design. Content strategists tend to plan out screen content by identifying what the goal of a screen is, and then providing copy to accomplish that goal and to get across any related messages. In traditional UX design, different content strategists have different methods for determining the goal of any given screen. But with journey-drive design, the designer and strategist will identify the goal or action happening each step of the way early on.

The designer and content strategist should work together to consider the goals of each touchpoint through the journey. Rather than waiting to ultimately write copy in wireframes, the content strategist can help ascertain the goals during the mapping of the ecosystem, which gives the designer a leg up on designing something that will work hand in hand with the content.

In addition, content strategists need to consider what content will be static and what will be adaptive26. When the designer designs different screens for different steps of the journey, they provide insight into how content will be perceived, whether the user will be distracted and what other clues to context the content strategist should consider.

In short, journey-driven design provides us with a big-picture approach that ensures fewer surprises and easier work the farther you go into the project. It keeps the whole team working together, all engaged in the creation of the ecosystem, so that decisions are shared early on, before designs are begun.

Evolving And Expanding Link

At its heart, journey-driven design is still just another flavor of user-centered design. Once the ecosystem is mapped and the journey identified, journey-driven design proceeds like any other UX project. Designs need to be created for other screen sizes and then checked for consistency across devices to account for edge cases. Usability testing, revising and iterating is as much a part of journey-driven design as any other.

Looking to get started with your own journey maps? Try out these steps:

  1. Begin with user research.
    Ask current members how they accomplish their goals — it’s a great way to identify the current user’s journey!
  2. During research, pursue pain points.
    When you understand the pain points, it’s easier to brainstorm potential solutions. Those potential solutions become the ideal user journey.
  3. Keep track of the steps in the journey.
    When the team moves into wireframes and visual design, don’t lose sight of the rationale for beginning each step on its designated device. Annotations or a digitized version of the journey can help keep these top of mind.
  4. Test the journey.
    Designing based on a journey is great, but then we need to make sure it works! Follow the analytics to find out where people drop off and what devices people are using along the way. Then go back and improve the ideal journey.

We live in an Internet of Things. There’s no use pretending that mobile, desktop or tablets will be the way of the future. There are still more devices to come our way, more technologies to infuse our homes, workplaces and commutes. Journey-driven design allows design to expand and evolve as technologies evolve. We’re starting to practice this more and more, and we hope to share a case study or two in the coming months.

Resources Link

(cc, vf, al, il)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/11/1-Devices-large-opt.jpg
  2. 2 https://www.pexels.com/photo/apple-iphone-desk-office-425/
  3. 3 https://www.smashingmagazine.com/wp-content/uploads/2016/11/1-Devices-large-opt.jpg
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2016/11/2-Resolution-large-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/11/2-Resolution-large-opt.png
  6. 6 http://www.lukew.com/ff/entry.asp?933
  7. 7 http://abookapart.com/products/content-strategy-for-mobile
  8. 8 http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
  9. 9 https://econsultancy.com/blog/64464-more-than-40-of-online-adults-are-multi-device-users-stats/
  10. 10 http://www.greatcall.com/greatcall/lp/is-mobile-healthcare-the-future-infographic.aspx
  11. 11 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/11/3-appwatch-large-opt.jpg
  13. 13 https://www.pexels.com/photo/smartwatch-smart-watch-watch-apple-28208/
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/3-appwatch-large-opt.jpg
  15. 15 http://www.uxbooth.com/articles/web-2-0-web-3-0-and-the-internet-of-things/
  16. 16 http://www.wired.com/insights/2014/04/toilet-role-internet-things/
  17. 17 http://www.usability.gov/how-to-and-tools/methods/personas.html
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-new-Ecosystem-large-opt.png
  19. 19 http://www.madpow.com/
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2017/02/4-new-Ecosystem-large-opt.png
  21. 21 http://www.uxbooth.com/articles/designing-digital-strategies-part-1-cartography/
  22. 22 https://medium.com/@mattsutt0n/designing-for-context-going-beyond-mobile-first-e0c4f4babd65#.l2g2992p9
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/5-companion-large-opt.jpg
  24. 24 //madpow.com/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/11/5-companion-large-opt.jpg
  26. 26 http://contentmarketinginstitute.com/2014/09/adaptive-content-omni-channel-technique/
  27. 27 http://www.bbc.co.uk/blogs/internet/entries/ca4e1ad8-edef-4bf8-947a-97409e5c53c4
  28. 28 http://thenextweb.com/dd/2015/10/01/5-ux-demons-that-need-exorcising/
  29. 29 http://www.uxbooth.com/articles/designing-digital-strategies-part-1-cartography/
  30. 30 http://www.lukew.com/ff/entry.asp?933
  31. 31 http://karenmcgrane.com/2012/09/04/adapting-ourselves-to-adaptive-content-video-slides-and-transcript-oh-my/
  32. 32 http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design
  33. 33 https://codemyviews.com/blog/mobilefirst
  34. 34 http://www.forbes.com/sites/marketshare/2012/12/04/consumers-take-a-multi-device-path-to-purchase/
  35. 35 http://blogs.forrester.com/anjali_lai/14-06-27-the_data_digest_our_multi_device_journey_through_the_digital_world
  36. 36 http://www.greatcall.com/greatcall/lp/is-mobile-healthcare-the-future-infographic.aspx
  37. 37 https://getreferralmd.com/2015/08/mobile-healthcare-technology-statistics/
  38. 38 http://www.nirandfar.com/2014/07/how-successful-companies-design-for-users-multi-device-lives.html

↑ Back to top Tweet itShare on Facebook

Marli Mesibov is the Director of Content Strategy at the digital UX agency Mad*Pow. Her work spans strategy and experiences across industries, with a particular interest in healthcare, finance, and education. She is the managing editor at UX Booth, and a frequent conference speaker. Marli can also be found on Twitter, where she shares thoughts on UX Design, content strategy, and Muppets.

Since 1999, Jason Levin has led and directed user experience teams on projects large and small for corporations, start-ups and non-profit institutions. He takes projects from idea through concept and vision, prototype, detailed design, build and launch. He believes that less is more, function is form, and the best experiences make the complex simple without being simplistic. He also believes that marketing is a dirty word for a product that doesn't have enough value to sell itself. Jason has worked at ZEFER, Razorfish, Roundarch, Isobar, and others. He is currently an Experience Director with Mad*Pow.

  1. 1

    I didn’t think designing “mobile first” was about mobiles being the primary experience, necessarily. I thought it was more about it being easier, more logical, and all round better, to scale a design up than trying to scale it down. It translates well into development too, as it’s much easier to build for mobile and then scale up.

    That doesn’t mean the desktop or tablet experience has to be compromised. I’m just not quite sure I agree with the supposed down-sides of mobile first. This sounds more like a slightly different approach to UX, rather than a design methodology, so it’s also confusing that they’re discussed as being at odds with each other.

    28
    • 2

      Michael, you’re exactly right. One of the main points of mobile-first was to scale design. Mobile-first also helps prioritize what’s important and get rid of the fluff, not limit the experience as the site moves from one device to another.

      4
      • 3

        Great points guys! But I think you’ll agree that more is not always fluff or unimportant. Are you going to design an air traffic controller’s interface on mobile and exclude half the planes in the air? When a clinical trial physician needs to look at how patients are responding to a new drug, doesn’t she need all the data-points? There are simply some screens that won’t work best on mobile. Marli and I are suggesting here that perhaps those screens are best approached in larger format first.

        3
        • 4

          This is making an assumption that all projects should be approached ‘mobile first’, which simply isn’t the case. The analogy of an air-traffic controller’s interface is a project where ‘mobile first’ would clearly not be an option.

          ‘Mobile first’ was never deemed to be a hard and fast rule, just a method of working that doesn’t fit every project.

          One of the main benefits of the approach had very little to do with mobile at all, rather, it was derived from that approach. By focussing on smaller screens, the ‘mobile first’ method forces a team to decide what is most important.

          It seems like the approach has been taken very literally, as clearly not all mobile devices are tiny, or have tiny screens. A tablet can be considered a mobile device.

          And if you are taking a ‘mobile first’ approach and not fleshing out where a project will go all sorts of different devices, you are doing it wrong.

          3
    • 5

      Well, scaling up is not that easy so it seems, as is evident by a lot of web sites and apps I see recently that are basically scaled up mobile websites.

      For example, a hamburger menu on desktop whilst there’s tons of space to just show all menu items. Or, a “read more” link on every single paragraph, cutting it off whilst there would be plenty of space to just show the whole text.

      It is not needed to scale up this poorly. I think it is a combination of laziness (or in some cases, perhaps a budget issue) and designers going overboard in their quest for minimalism, all copying each other.

      3
    • 6

      Thanks, good ui design. I really like.

      0
  2. 7

    Love it! Absolutely love this way of thinking. I recently read an article that challenged the belief that design evolves. The contention of the author was that we as ‘designers’ know how to design and it’s simply a task of educating our clients. I believe, however, that we are beginning a new era of thinking in design. Thinking about ecosystems and how they are interconnected is the beginning. And it’s more than the familiar “omni channel” approach. It’s now more about understanding, as you say, the journey and the interactions. Journeys, and/or Use Cases, are the way to go. My two hot buttons to add…one, let’s kill Personas. Users simply can’t be silo’d like that any more. And secondly, it’s time to marry UX/UI designers into one role of Experience Designers. Talk amongst yourselves ; )

    1
  3. 8

    Tradesouthwest

    February 3, 2017 3:27 am

    One word: Bootstrap. Works on everything.

    -29
    • 9

      Bootstrap is great! But let’s not conflate the technology one uses to get the job done with the thinking required to do it right. Whether it’s bootstrap or skeleton or pen and paper, we designers still need to make smart decisions about content, relative sizes, hierarchy, placement, etc.

      3
  4. 10

    Robin van Dongen

    February 7, 2017 1:42 pm

    Can we just hold on and use our common sense, be real and say that there is not 1 way to design a website, app or whatever. In my opinion there is only one way to at least start a design process, and that is simply by asking the right questions. To yourself, users or whoever is/or representing a stakeholder and is involved in a project.

    I read numerous books, blog and watched a bunch of webinars about design methods but in the end there is not one that fits all. All great tools, but come on. You “the designer” should be challenged by a designproblem, not seeking for the easiest way to get it done.

    6
  5. 11

    First lets also apply a little forward thinking here. With the Internet of Things, just because something can connect and be a portal into the internet doesn’t mean it should. Many of these devices are being driven by the manufacturer whose main goal is profit. Let’s let the users decide what they want to connect with.

    Let’s take a glimpse into the past the last time we let manufacturers tell us what is best… does anyone remember 3D TVs?

    The one device I do think has the most momentum and makes the most sense is the smart watch. In its current form I can’t say I would want to browse an entire website on it but I do like it as an extension of my smart phone. As this platform continues to mature I can see this dynamic changing.

    Just my 2 cents.

    0
  6. 12

    Kill me now; Another article about how to design, well anything.

    Look. Let me sum up the issue here.

    Every company has a “flavor” of design practice or whatever. Congrats, you and every other IDEO like agency have a “process.” Thats not what I;m discussing.

    I wish articles would stop telling us what to do, and start teaching how to implement such changes within a company. I’ve spent the better half of my career reading and reading and practicing for the day when someone says “Hey design, what do you think?” and they actually mean in. I mean really mean it. I mean Design has a god damn seat at the table, not this subservient exec-driven-product-design nonsense you will run into everywhere you work for the next decade or three.

    Where is that article? Where is the content catered towards everyone else? Smashing, you’re preaching to the choir.

    1
    • 13

      Thank you for sharing your thoughts with us, dear Spencer. I’m sure we’ll have just the right article for sooner or later ;-)

      0
    • 14

      It’s odd that you start with “I wish articles would stop telling us what to do…”, and then proceed to complain about how you need articles to figure out how to implement change management (asking what to do). You’re talking about change management. There are plenty of books and articles on change management, and they don’t have to be “design specific” to under. How it gets implemented into an organization’s culture doesn’t seem to be the topic in this article. Design driven approaches to solving problems are making there way into organizations. Waiting for an exec to ask what you think is passive. I’m not sure how you deserve a seat at the table if you’re just sitting there waiting for someone to ask your what your opinion is.

      1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top