The purpose of mapping social experiences (aka social mapping) is to get a complete picture of everything that’s influencing social interactions in your game. This information can then be utilized to improve the overall player experience.
This article compares four methods of social mapping:
To show social mapping in practice, we will provide real-world examples that the author created while working on projects at Riot Games.
Dynamic journeys
Dynamic journeys are moment-to-moment walkthroughs of social experiences. These are generally used for presentation more than problem solving.
- What they look like — Low- to high-fidelity slideshows that visibly toggle between the perspectives of multiple people.
- When to use them — When you want to guide an audience through the solutions of a social experience.
- What you need — Combination of design (e.g., Figma, Photoshop) and presentation tools (e.g., MS Powerpoint, Google Slides).
Dynamic journey example
The author created the following as a base template for creating dynamic journeys. As you can see, the journey begins by introducing four players (could be more or less in practice) that will be involved in the journey.
The journey of each player is represented by parallel timelines. Mockups are placed on the timeline to show parts of the social experience, and player icons / names are turned on and off to represent who is or isn’t involved in the current moment. Titles and descriptions are added to provide detail for each moment.
Experience maps
Experience maps are step-by-step, low-fidelity visualizations of a person’s experience within a product, service, or system.
- What they look like — A series of lanes that visualize the activities, phases, feelings, touchpoints, and more of a person. For social experiences there will be an emphasis on social interactions and related features and services.
- Why use them — To show what someone in your target audience is undergoing in order to improve their social experience.
- What you need — Sticky notes and markers are usually enough.
Experience map example
The author created the following experience map during a project involving a reporting system. The goal was to identify and understand all the moments where a player could report other people for various reasons (hopefully an unrealistic situation).
This experience map was based on research and a series of interviews with people who had knowledge and experience with particular types of disruptive behavior. This information was distilled down into bite-size pieces and then assembled into a fictional story that could cover a wide range of negative social interactions.
While most experience maps don’t move much beyond sticky notes, the example above was intended to be shared, discussed, and further iterated upon.
Parallel wireflows
Parallel wireflows show the experience flows of multiple people who are interacting within a user interface. This method builds upon more traditional wireflows, which are a series of wireframes ordered to show the flow of a person’s experience in a user interface.
- What they look like — A series of lanes that show low-fidelity versions of the user interface in chronological order as well as when and how interactions appear in those interfaces.
- Why use them — To show what social interactions look like within the user interface of your product in order to improve social experiences.
- What you need — Simple wireframing tools are usually best. You can create them with sticky notes, but that can be very time consuming.
Parallel wireflow example
The author created the following parallel wireflow during the design of the now-defunct Team Builder queue in League of Legends. The goal was to understand what multiple people would see and do during the formation of a team.
The author would like to point out that using parallel wireflows was too time-consuming for the rapid problem-solving that was needed for the Team Builder project. The need for a faster problem-solving and iteration method led to the development of the following method.
Multiperspective prototypes
Multiperspective prototypes (MPP) are low-fidelity interactive tests of potential social experiences. With the press of a button, we can see how potential social experiences could play out through the eyes of multiple people.
MPPs are good for rapidly solving social problems within limited contexts and demonstrating what will and won’t work.
Multiperspective prototype example
The following is a multiperspective prototype created by the author during the design of Team Builder. Because it was so easy to duplicate, modify, and discuss different problems explored with the same basic set of elements, literally dozens of different MPPs were created in a short period of time.
Now what?
Now that you’ve gotten some understanding of social mapping methods, explore other methods for digital thriving.
If you’re interested in learning more about the design of the Team Builder queue, check out the three part series: Taking on Team Builder.
