Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

A Framework For Brainstorming Products

Brainstorming is notorious for being unstructured and often unactionable. People get in a room with some Post-its and whiteboards and expect the great ideas to happen. The problem is, even if there are great ideas in the room, there is often no clear-cut way to decide on what ideas to take action on.

An example of some steps a user might take in his story
Building a new service for a Fortune 500 company using applied user story mapping. That’s me facing the camera. (View large version1)

Birth Of Applied User Story Mapping Link

About a year ago, I and my colleague Michael (founding partner at AJ&Smart) were sitting in a masterclass run by the fantastic Adrian Howard on the subject of feature prioritization in agile development. More specifically, we were asking how we could decide which feature comes next and when it should be released.

Further Reading on SmashingMag: Link

Going through the exercises in the class, something clicked with us: this quite dry, systematic approach could be an interesting way to structure our product discovery workshops. So a week later we did what we always do when we want to experiment with a new technique: we tested it on a high-stakes client without too much preparation or overthinking.

It was perfect. The structure that user story mapping brought to a workshop that is heavily focused on ideation and discovery was exactly what we needed. We’ve been using the technique ever since and have adapted it workshop-to-workshop to make it even more useful. We now call it applied user story mapping (applied USM) as it has taken on a life of its own. We’ve used it with all our clients over the past year to release or enhance many successful products. Over the last year we’ve found that applied USM is not just a fantastic way to get ideas that nobody would have come up with on their own, it’s also the perfect alignment tool for your client or stakeholders. Let me show you exactly how it’s done.

Supplies You’ll Need Link

  • Post-it notes, three different colours
  • Color-coding labels
  • Sharpie markers
  • A wall, or flat surface
  • One moderator

Total Time Needed Link

With 10–15 people, plan 45–50 minutes. Add about 10 minutes and an additional moderator for every 10 people added to the exercise. For example:

  • 10–15 participants: 1 moderator, 50 mins
  • 15–25 participants: 2 moderators, 60 mins

Step 1: The Story Link

The backbone of the entire process is the story. The story is simply a list of steps or actions that the hypothetical user you’re designing for makes during a specific timeframe. (Finding out who the user is, that’s for another day.)

An example of some steps a user might take in his story6
An example of some steps users might take in a story. (View large version7)

For example, if we were talking about designing a news reader specifically for sports fans, we might create a story based on a match day. Or if we were designing a new premium service for frequent flyers, we might have a more advanced story expanding from the first booking all the way to the flight itself.

How To Create The Story Link

  • All participants should have a pile of yellow Post-its and a Sharpie.
  • Give participants seven minutes to write out as many steps as they can think of in the chosen user’s timeframe (this can be 10–25 Post-its per person).
A participant writing steps8
A participant writing steps. (View large version9)
  • The granularity of the steps will be very different from person to person, and that’s fine.
  • Once the time is up, everybody in the room should bring their Post-its to the chosen flat surface and begin creating a timeline of steps. In the end there should be only one horizontal timeline. Many people will have similar steps, and these should simply be piled on top of one another.
Keep the timeline horizontal and avoid any vertical columns. We’ll need that space later.
Keep the timeline horizontal and avoid any vertical columns. We’ll need that space later. (View large version10)

Step 2: Group The Actions Link

To keep things tidy, we’re going to group the actions on the timeline. This is especially helpful when you have a long story that spans multiple days. Later, we can use these groups to easily find which part of the story to focus on. This is simple and should only be carried out by the moderator.

Let's make some groups!11
Let’s make some groups! (View large version12)

How to Group the Actions Link

  • Moderator looks at the timeline and decides on groups, like “morning preparation,” “commuting to work,” “work,” “lunch,” “commuting home,” “dinner,” and so on.
  • Using an orange Post-it, the moderator simply puts a group name at the beginning of each section.
You can get as specific as you like with groups, but usually four to five groups are fine.
You can get as specific as you like with groups, but usually four to five groups are fine. (View large version13)
Beautiful.14
Beautiful. (View large version15)

Step 3: Brainstorm! Link

Now comes the fun part. Participants should try to come up with as many ideas as possible for points on the timeline they consider to be relevant. The idea here is to look at a step on the timeline (for example, “wakes up”) and then come up with ideas on how your product or service could affect or interact with the user’s life at this point in their day. An example for a news reader app could look something like this:

Time to brainstorm.16
Time to brainstorm. (View large version17)

Participants only get 15 minutes for this step but that’s more than enough time to spit out a lot of ideas. It’s important for the moderator to tell the participants that this exercise requires quantity over quality. It doesn’t matter if the ideas are feasible or even legal! Just get everybody to spit out as many ideas as possible within the timeframe.

How to Brainstorm Link

  • All participants should have a pile of blue Post-its and a Sharpie.
  • Participants should be standing around the story timeline holding their Post-its, ready to write.
  • Give participants 15 minutes to write as many ideas as possible.
  • Post-its should be placed in a vertical line underneath the relevant step.
  • Any ideas not relevant to the timeline can be placed in a seperate stack on the left of the timeline.
If it doesn’t look like this, something has gone horribly wrong.18
If it doesn’t look like this, something has gone horribly wrong. (View large version19)
  • I recommend playing some music here to get people’s juices flowing. Try this playlist20 if you don’t feel like finding your own.
  • Once the 15 minutes are up, participants should take their seats and the moderator should read out every single blue Post-it. This way, everybody in the room will hear the ideas of everybody else. This is especially helpful when some people have horrible handwriting.
Look at those stunning stacks.
Look at those stunning stacks. (View large version21)

Step 4: Vote And Arrange Link

Now that everybody in the room understands what ideas are on the timeline, it’s time to vote to find out the favorites. This way we can quickly pick out trends within the group and begin to prioritize features and ideas to work on further.

Now it's time to make decisions.22
Now it’s time to make decisions. (View large version23)

How to Vote Link

  • Give all participants six dots. Colours don’t matter unless you want to highlight a specific stakeholder.
  • Give participants eight minutes to vote on the ideas. It’s best not to ask participants to vote on what they like, that’s too subjective. Rather, give a specific goal like “What could we prototype within one week?” or “What would make this person’s day ten times better?”
Voting.24
Voting. (View large version25)
  • Once all participants have voted, the moderator should collect all the Post-its with votes and arrange them vertically in order of votes.
Voting.26
Voting. (View large version27)
Voting.28
Voting. (View large version29)

A Note On Prioritization Link

Having a prioritized list of features and ideas is great, but it doesn’t yet take into account which of these features and ideas should be developed further. Some items may be unfeasible and take months to develop for example. This is why, at this point, we usually put the blue Post-it notes on an effort/impact scale. This is a great way to give people whose crazy ideas can’t be developed right away the feeling that their ideas were not lost, while being able to focus on what’s actually doable.

Impact/effort scale.
Impact/effort scale. (Image Source: Anne Simmons30) (View large version31)

It is important to define what exactly “impact” means, as it can relate to the impact the feature would have on the user, the business, or on the specific problem being solved.

Using And Adapting Applied USM Link

As I said, we use applied USM with every client, but here are some specific cases.

  • We helped eBay come up with novel and delightful perks for their new service eBay Plus32. Even though the service itself focuses on the seller, we created the timeline from the buyer’s perspective to consider the advantages the Plus service could give to them.
  • We mapped out football fans’ match days and non-match days for the German football league (Bundesliga)33 to figure out how we could improve their experience. This meant we needed to create two separate timelines to study. We’ve since used this dual timeline on other products with multiple user types or scenarios.
  • We used the process to think about how the future of banking might look for the amazing Number2634, then used the results to create multiple prototypes to test. The timeline in this case went from waking to going to sleep, and included a lot of detail, down to where this user went to eat. This allowed us to consider very granular notifications and specific features.

Phew! That’s Applied USM Link

At this point in the process, you should now have a nice pile of ideas, feature suggestions or solutions that everybody in the room has both created and voted on. Of course, I’m leaving out plenty of steps before and after applied user story mapping for a full-scale product discovery or innovation workshop. Usually, applied USM comes a step after we know a little about the users we are designing for and so we have some basic personas, but before sketching out concrete interface or service ideas. A one-day product discovery workshop typically looks a little like this:

  • General introductions and discussion of product/service goals
  • Creation of lean personas
  • Applied USM
  • Storyboarding of prioritized solutions
  • Sketching of potential products/features
  • Deciding on what to prototype and test

When To Use Applied USM Link

Applied USM is an extremely versatile and flexible exercise that can be used in the ideation process for any product or service. Applied USM is cheap and easy to try out. It’s also something you can experiment with in a small product team before exposing the rest of your company to it. I recommend trying it on something non-critical, like updating a user account section of your product, or highlighting opportunities for increased user engagement in one of your existing user flows (e.g. where could we send users a useful notification during their average week).

I hope you get a chance to try out this exercise in your own company or with your own clients. If you do, please tell me how it goes!

(cc, il, og, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/wp-content/uploads/2016/05/titleimage-large-preview.jpg
  2. 2 https://www.smashingmagazine.com/2013/12/using-brainwriting-for-rapid-idea-generation/
  3. 3 https://www.smashingmagazine.com/2015/01/hold-a-kickoff-meeting-before-diving-into-the-design/
  4. 4 https://www.smashingmagazine.com/2014/01/how-working-walls-unlock-creative-insight/
  5. 5 https://www.smashingmagazine.com/2017/01/becoming-better-facilitator/
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/06/02-usmstory-opt.png
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/06/02-usmstory-opt.png
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/06/03-usmstoryphoto-opt.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/06/03-usmstoryphoto-opt.jpg
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/05/thisisthestory-large-preview.jpg
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/06/05-usm-group-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/06/05-usm-group-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/05/USMGroupphoto-large-preview.jpg
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/06/07-usm-group-2-opt.jpg
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/06/07-usm-group-2-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/06/08-usmbluepostitis-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/06/08-usmbluepostitis-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/06/09-usmbluepositphoto1-opt-preview.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/06/09-usmbluepositphoto1-opt-preview.jpg
  20. 20 https://soundcloud.com/tycho/sets/tycho-awake
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/05/USMphoto2-large-preview.jpg
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/06/11-usmvote-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/06/11-usmvote-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/06/12-usmvote2-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/06/12-usmvote2-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/06/13-usmarrange-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/06/13-usmarrange-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/06/14-usmarrange2-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/06/14-usmarrange2-opt.jpg
  30. 30 https://annejsimmons.com/
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/05/impacteffort-large-preview.png
  32. 32 http://pages.ebay.de/einkaufen/ebay-plus.html
  33. 33 http://www.bundesliga.com/en/
  34. 34 https://number26.eu/de/

↑ Back to top Tweet itShare on Facebook

Jonathan Courtney is the UX Director and Founding Partner of AJ&Smart, a User Experience and Product Design Agency in Berlin, Germany. He helps companies and organisations like the United Nations, Lufthansa and Zalando create better products faster. Follow him on Twitter, or ask him anything on Snapchat !

  1. 1

    Nice article! Have you tried MURAL? You can use Applied USM, set brainstorming sessions, create empathy maps, story telling, planning and so much more. And the best part, it’s remote friendly, so you can set up a brainstorming without being in the same room and do it with your laptop or your mobile device from anywhere in the world. https://blog.mural.ly/2016/03/best-practices-and-use-cases-with-mural/

    Cheers!

    -2
    • 2

      Hey Dani, I have tried Mural with my time but I don’t think it’s the same as being in the room with the workshop group. It’s nice for later documenting the workshop… if people want to do that… but for me it’s just extra friction that I don’t need.

      Thanks for the recommendation/advertisement though :)

      Cheers,
      Jonathan

      1
  2. 4

    Hi Jonathan,

    This is a fantastic methodology on investigating solutions for enhancing targeted customers/users experience. Sure will have some brilliant ideas after this kind of sessions.

    Do you have any smart and agile systematic work flow/methodology for situations that you’ve already known what specific problem you are trying to resolve?

    Looking forward to your advise, cheers!

    0
    • 5

      Hey Hunter,

      Thanks for the compliment. We often know the specific problem we want to solve when we start a USM session – but if you want to skip straight to solution building, I can recommend the “Note and Vote” technique from Google Ventures. I wrote about it here.

      Cheers,
      Jonathan

      0
  3. 6

    https://hbr.org/2015/03/why-group-brainstorming-is-a-waste-of-time

    Ultimately, brainstorming continues to be used because it feels intuitively right to do so. As such, it is one more placebo in the talent management cabinet, believed to work in spite of the clear absence of evidence. So go ahead, schedule that brainstorming meeting. Just don’t expect it to accomplish much, other than making your team feel good.of-time

    0
  4. 8

    hi Jonathan, great article will try it out! However what we are struggling with is how to get the user story lineair because u users journey seldom is there are multiple choises branching the user off in other directions, or do you go for one happy flow with risk of missing out onother things? Would love to hear how you deal with this.

    0
    • 9

      Excellent question, and I have to deal with this a lot!

      Sometimes you need multiple timelines OR timelines that break off and have parallel tracks to achieve it. For example, when I was designing for a Football league here in Germany, I needed to consider that there was “Pre Match”, “Match Day” and “Post Match” to make sure I was really covering the entire timeline. The same thing happened when designing for a travel company, we had the “discovery phase” the “selection phase” etc etc.

      Parallel or splitting timelines are different but the same idea. One user will do one thing, but another might do another. I might do an update to this article at some point to answer your question in more detail :)

      0
      • 10

        thx Jonathan! Yes I have this issue with a travel site. But even in the discovery fase the users can go on different tracks because of different options to discover. However the underlying dataset is the same it just mixes and presents itself in different results based on the choices the user makes. Ill be looking forward to your next post! :)

        0
        • 11

          I understand what you mean. The same complexity occurs when dealing with search results pages for large ecommerce sites. I don’t want to post my email address here but if you want some advice specific to your problem (for free of course, not trying to sell anything here :) ) Just ask me anything on twitter or even better snapchat! I’m happy to give my opinion or show you how I would use USM in the situation you have. Those links are in my little profile thing at the end of my article above.

          0
  5. 12

    Hey! Great article. Do you have any advice for a remote team to be involved in this sort of work?

    0
    • 13

      To be really honest, I haven’t found the right way to make this work remotely yet. Someone in the comments suggested using the app MURAL, but for me, especially since I do this directly with my clients, it’s important to have everyone physically in the room.

      If you try it and it works though, let me know! :)

      0
  6. 14

    Hello Johnathan,

    Great article, it looks like a really focussed model to get progr ss on the board and keeps priorities in check.

    One question, do we assume that everyone in the workshop understands the audience enough to map the user story accurately or is a collaborative assumption/mix?

    Thanks again!

    0
  7. 16

    Nice article! Have you tried MURAL? You can use Applied USM, set brainstorming sessions, create empathy maps, story telling, planning and so much more.

    modamodel.net

    -2
  8. 18

    Hey Jonathan, thanx for sharing this – sounds really cool! Will try this with my entrepreneurship students this semester… they can really benefit from this for their start-up ideas.
    One thought concerning the impact/effort scale: I use something similar in my idea workshops (see my short German post on rating ideas – “so poppt das Korn”), except that I put “originality/ease (of implementation)”. I know the wording is a bit bumpy, but I found it makes the visual more intuitive (and thus easier to work with), as the “good ones” land in the upper right corner… What do you think about that?

    0
  9. 19

    … mixed up the posts… the one on rating ideas is “gute Ideen schwimmen oben”. The other post is about the impact of ideas once the are conceived – that you can’t undo them.
    Cheers
    Maren

    0

↑ Back to top