User Stories, Scenarios, and Flows

Recently, I deconstructed the Shanghai municipal website information architecture and explored what opportunities existed for building a companion app. The site targets three different audience groups: newcomers outside of China, businesses, and residents—with a large portion of it dedicated to residents. The city actually does an excellent job of publishing regular news and updates with valuable information. Shanghai is actively speaking to its residents, but are they getting the word from this website?

According to data presented in 2016, people in China spend more time on their smartphones than Americans and spend less time on PCs than Americans. Also, 19% of the Chinese online population was mobile-only. Since this data was published, the number of mobile users in China has increased, while desktop usage has decreased. If Shanghai wants to communicate with its residents regularly, it makes sense to reach them through a mobile app or WeChat mini-program.

Mobile usage is more popular in China compared to desktop usage.

The city has also laid out a clear plan to make Shanghai a global cultural center by 2035. The goals are thoughtful and relevant to residents—including initiatives around public transportation, sustainability, parks, wellness, and cultural facilities. Suppose residents were kept aware of these initiatives and their updates—they could become active participants in the city’s evolution and help promote the positive experiences life in Shanghai offers.

The app I have proposed developing is made for Shanghai residents with these insights in mind. It will provide all of the news and resources they need to enjoy life in their city daily. This app is called the Shanghai Source.

Made for Shanghai residents, the app will provide all of the news and resources they need to enjoy life in their city daily.

About the Shanghai Source

Shanghai Source is a mobile application that connects residents with city news, policies, initiatives, and attractions. Shanghai Source’s goal is to make life in the big city more enjoyable and effortless. By providing valuable information to users, Shanghai Source empowers its residents to participate in everything the city offers, from cultural attractions to recycling programs. Shanghai Source also provides more opportunities for the city to talk directly to its residents and keep them in the loop on how their initiatives are positively impacting the city and its residents.

The application will feature content related to news, daily life resources, events, getting around, attractions, and the history of where Shanghai has been to where its going.

Understanding Users & Their Interaction with the Application

After building my first version of the information architecture, I wanted a better understanding of how users could potentially move through the application based on their distinct needs. I developed user stories and scenarios based on past conversations I’ve had with residents here, then created flow charts according to their situations.

Let’s break each of these tasks down and provide some examples.

User Stories

A user story is a short statement that explains who the user is, what they need, and why they need it. User stories are generally told in the first person to personalize the experience from their perspective. User stories help designers empathize and personalize with who the users of the product are.

Justinmind.com explains that “User stories help to document practical information about users, such as the different needs and motivations for accessing a website or app. They also help the development team estimate a roadmap needed to deliver the end product.” User stories can be created using this simple sentence structure:

As a (**define role)**, I want (**action/need)** because (**reason)**.

User stories help to document practical information about users, such as the different needs and motivations for accessing a website or app. They also help the development team estimate a roadmap needed to deliver the end product.
Justinmind.com

Nick represents a user segement for the Shangai Source. Lets take a look at his user story.

Nick’s User Story

As an active runner and outdoor enthusiast, I need to find trails and parks to run in Shanghai because I want to do what I love while exploring the city.

User Scenarios

A user scenario is a short story that describes the user and their interaction with your product. Scenarios help designers understand what the user’s current situation is. They help answer the 5 W’s (who, what, when, where, why).

As described by Interaction Design Foundation, “scenarios succinctly and explicitly capture what users would likely experience as they proceed toward using an ideal solution.”

Scenarios succinctly and explicitly capture what users would likely experience as they proceed toward using an ideal solution.
Interaction Design Foundation (IxDF)

Nick’s User Scenario

Nick is an expat living in Shanghai and working for an international company. He loves staying active and tries to take a long run every weekend. Nick loves the neighborhood he lives in, but it is not the best for running. The streets are narrow and crowded, and the parks nearby don’t have running paths. Nick knows there are many places to go running in Shanghai, he just isn’t sure where. Nick wants an app that can tell him where the best running paths and parks are in the city and how he can get there from his location. He likes the idea of combining his passion for running with exploring different parts of the city.

Because Nick is health-conscious, he also needs to know what the Air Quality is every day. The other day he went for a run during high pollution and didn’t realize it until it was too late. Nick was frustrated that he didn’t know ahead of time. He would love notifications to be sent to his phone every morning and throughout the day if there are drastic changes in air quality. Nick wants to enjoy the outdoors but not at the risk of impacting his health negatively. If the air pollution is high, he would prefer to go to the gym.

Flow Charts

Flow charts—also known as process maps or workflow diagrams—are visual diagrams that show how users move through a product/service or device. Flowcharts help designers understand the process that users may go through to accomplish a task and identify areas of improvement in the site’s architecture. There are two main types of flow charts:

Task Flows

Task Flows represent how any user would flow through a task. These work best for tasks that will be completed the same despite the user. Examples include signing in, checking out, or updating a profile. Task flows are pretty straight-forward. They have a specific start and endpoint, no pathways, and no decision-making points.

Task flow charts represent universal tasks all users may carry out similarly on an app or website.

User Flows

User flow charts depict possible paths users may take depending on their needs and goals. They are not universal, and require users to make decisions along the way.

User flows are based on a user story and/or scenario. User flows show how certain users may move through the app based on their own needs and motivations. User flows can have multiple paths and decision-making points. They usually have one starting point but could lead to numerous paths to the endpoint.

Regardless of which flow you create, they both follow the same visual language, UML (Unified Modeling Language). UML utilizes shapes and symbols to represent different types of information. It was developed in the 90s to help software developers visualize and document systems and are still standard in diagramming methods like flow charts.

The most commonly used shapes when creating flow charts are:

Rounded Rectangle

Usually, a place or an action that begins or concludes the flow of the sequence.

Rectangle

A step or action within the process

Diamond

A decision-making point for the user. The diamond will usually require a yes or no answer from the user, then branch off into different directions based on response.

Flow Line

Dictates the direction of the flow. Like a one-way street, the direction of the flow should always point in the same direction

The UML system has an entire library of shapes you can learn and use— although in most cases, it’s suggested to keep it simple and stick with the basics mentioned above.

With my user stories and scenarios to guide me, I finally felt prepared to build user flows. Working through my user flows felt very similar to the process of creating journey maps. I continued to ask myself, “what happens next?,” “does the user need to make any decisions?,” and “is this the end of the process?” as I imagined the user traveling through the app. Here is the result.

Nick’s User Flow

I repeated this exercise with other user segments of the app. To explore more user stories, scenarios and flows, please download the document or click on the images below for a few more examples.

movalle_shanghai-app-userflows Download