# data[].attributes.headline
3 Ways to Design Better Service Experiences

# data[].attributes.subject
3 Ways to Design Better Service Experiences

# data[].attributes.attachment_link.readable_text
"Service design can feel less tangible at times, because it's such a human interaction, but we all know the benefits of getting it right can have lasting effects for your org or brand."
-Melanie Bell-Mayeda, Partner and Managing Director at IDEO SF

In our most recent Creative Confidence Series chat, IDEO Managing Director and Human-Centered Service Design instructor Melanie Bell-Mayeda and IDEO U's Coe Leta Stafford shared stories and tips about how to use service design to bring more meaningful experiences to customers and organizations.

Just before leaving on a recent business trip, Melanie caught a bad cold. So she made an appointment with her doctor right away, "I was very stressed out, and wanted to prove I wasn't feeling that well," she says.

At the end of the appointment, after clearing her for travel, the nurse said something that took her aback. "I'd like to thank you for coming in," she said. "Because actually having the meds you need and knowing you feel well before going on a trip is the best way that we can help to take care of you."

Normally, Melanie would have worried that she was wasting the nurse's time, or had made an unnecessary appointment. But not after that comment. "That struck me as an important service moment," she says. "She flipped the script on me by saying thank you." It was the perfect example of good service design-finding the negative points of an experience and changing them up to make it better for the user.
Start with a Customer Journey Map
For Melanie, that process starts with a journey map, breaking down a service or experience to figure out exactly how it works, and what delights or frustrates a user. "You have to be hands-on," Melanie says. "It makes such a big difference. That's really the way I learn, by mapping things out and trying them on my own."

When you dive into an experience yourself, you'll discover what users know: that not all moments are equal. "You want to identify those moments that are sticky for individuals, that help them think about you and your service in a differentiated way, and give them that positive memory of the experience," she says.

For example, when the company Wholesome Wave wanted to find a way to encourage people with food stamps to use them and to buy healthier food, they thought about the actual process. "The food stamp experience is actually quite broken," Melanie says. "Most transactions happen with credit or cash." But with food stamps, "you can't use them as easily as you can money. There are things you can spend them on or can't spend them on. So often, at that moment of purchase, it's uncomfortable for the person using them." On top of that, the healthiest foods a family can buy are fruits and vegetables, which are also the most expensive, and tend to eat up users' limited food budgets.

To address these two broken pieces of the system, the company negotiated with fruit stands and farmers markets to make food stamps stretch a little further; if families bought fruits and vegetables, they could get a two for one deal. It encouraged them to try healthier foods they might not have otherwise and got them away from that traditional supermarket cashier experience. It was a very different solution than say, sending an email to get people to use their benefits. It's a good reminder that a journey map isn't just about the user-it can be about the other partners that come into play and things that happen immediately before or after an experience. "It really does help to unpack those moments that are the most critical and look at them more expansively, to see different solutions, and creative ways of expressing them," she says.

"You want to identify those moments that are sticky for individuals, that help them think about you and your service in a differentiated way, and give them that positive memory of the experience."
Melanie Bell-Mayeda

Prototype Your Service: Smart, Scrappy, and in a Real Context

Prototyping a service may seem a bit tricky, or less straightforward then testing a physical product, but it's a quick, scrappy way to see if your ideas might stick. "You really have to think about the mindset and the experience someone is in, and how you replicate that in the prototype you're going to do," Melanie says.

On one project, she and her team were working with a customer service division that was helping answer questions by phone and email. As new people came to work there, they had a hard time answering questions, because there was so much to learn. "They needed help," Melanie says, "but they didn't want to ask for it, because they wanted to perform well in the job."

"The (prototyping) mindset is about learning. It's not about getting it perfect."
Melanie Bell-Mayeda

To kick things off, the team prototyped a solution. Every time someone needed help, they would hit a flashing red light, so their boss would know to come over and answer questions. It turned out to be a terrible idea-not particularly practical and a bit embarrassing. But it did exactly what they wanted it to do. "The point of that exercise was to tell people, 'It's not about being perfect, it's about trying.' It was about involving a whole group of people in an exercise that could be fun and funny. And it took a really short amount of time to see what didn't work, so we could start seeing what ideas did work."

Service design prototypes don't have to be expensive or high tech. In a project with a shopping mall, Melanie and her team worked to find out if they could create an interesting and engaging experience for people who had just grabbed coffee or food and couldn't take it into a store. Was there a way to engage those folks who weren't sitting in the food court, but couldn't shop, either?

The team started with a small experiment that cost a few hundred dollars pulling clothing from retail stores, assembling a nice area with low budget furniture and a rug, and creating a place where people could check out goods, but also relax.

"You can move quickly with prototypes, especially when you have prototypes in the beginning. You have one or two simple questions and simple ways of measuring them. The risk/reward is right-sized."
Melanie Bell-Mayeda

The team made some hypotheses about how they thought behavior might shift, and captured simple metrics-checking to see if people sat down, for how long, and if the merchandise in the area-or even a picture of it-would help drive would-be shoppers into stores. Even short-term experiments gave them real data that helped them figure out which direction to push it.

As prototypes became more complex, so did the metrics. Did some stores have an uptick in sales? Could those be connected to the pop-up space?
Co-Create Your Service
Users aren't the only partners that can help with service design. Co-creation is when you invite users, key stakeholders, people who actually deliver a service, and clients to be a part of the process. "People use what they create," Melanie says. The earlier on you bring people into the process, the more that they share in the ideas, and the solutions, the more likely they are to implement them. Be collaborative in that process, because you may learn things from your customers, your employees, or people who work on the front line, that you might not see yourself."

"Bring other people into the process. Be collaborative, because you may learn things from your customers, employees, or people who work on the front line, that you might not see yourself."
Melanie Bell-Mayeda

When it's time to bring executives in, have them participate and observe a prototype so they can see it in action. It's also a great way to get feedback earlier. Too hard to get them there? Give them audio or video of the prototype, with enough context to explain what's happening.

If bringing a solution to colleagues is proving tough, start by sharing the customer's point of view, or the problems that your team has had that have led you here. "At the end of the day, everyone wants the customer to have a great experience," Melanie says. "If you start from that place, it gives everyone a common ground, and it lets you shed new light on the question in a way they may not have seen it."

Learn more from IDEO Designers and get hands-on practice alongside a global community in our new online course human-centered service design.

# data[].attributes.attachment_link.title
3 Ways to Design Better Service Experiences

# data[].attributes.attachment_link.description
In our most recent Creative Confidence Series chat, IDEO managing director and Human-Centered Service Design instructor Melanie Bell-Mayeda and IDEO U's Coe Leta Stafford shared stories and tips about how to use service design to bring more meaningful experiences to customers and organizations.

# data[].attributes.body
Here are some tips for UX

# data[].attributes.attachment_link.readable_text
User flows, which define the paths that users can take to achieve their goals, improve both UX and business values of a website/app project.

That's why more and more companies/product teams are spending a lot of time and effort in designing better user flow diagrams for smooth UX sailing.

If you are working on user flow design your current project, here are 25 of the best user flow tools and templates that will help you create perfect user flows with ease.

Table of Contents:

What is a user flow？

Why do you need a user flow

User flow vs user journey

How to create perfect user flows for smooth UX

15 best user flow tools you should not miss

10 best user flow templates and examples

What is a user flow?

Before diving into the details, you should first understand what a user flow really means.

A user flow, also known as UX flow is the route that users follow to achieve a meaningful goal on your website/app. To create more enjoyable UX, a website/app is designed with different user flows for the same or diverse user goals.

Let's take a food delivery app as an example. It is often created with several user flows for customers to order desired food smoothly.

User flow 1:

User flow 2:

User flow 3:

These are perhaps the simplest and most comm user flows a food delivery app should have to enable customers to place an order successfully.

However, a food delivery app generally has far more user flows designed for different purposes, such as canceling a delivery order, tracking the delivery process and getting after-sale support.

Designers always use a user flow diagram to visually present all possible user flows.

Why do you need a user flow?

Here are the main reasons a user flow is essential when creating a practical and functional website/app:

Visualize user needs intuitively. At the very early stage of website/app desig, the user flow diagrams can help you and your team present user needs more intuitively for better communication and testing.

Make the design handoff and development process easier. User flow diagrams are critical during the design handoff stage. With detailed user flow diagrams, developers can view any user flow to have a better understanding of the user needs and implement designs quickly.

Simplify the design testing process. At the final testing stage, product teams can easily follow the user flows to find potential problems, and see whether these flows meet user needs.

In short, to create a good website/app and UX, the user flow design cannot be ignored.

User flow vs user journey

A user journey, also known as "customer journey", refers to the scenarios where the users interact with your website/app. User journey focuses on providing solutions for user needs with detailed steps, including the smooth interactions, user emotions, copy designs and other aspects.

Both of user flows and user journeys help solve the problems of customers. However, user journeys focus more on the process of user experience while user flows concentrates on providing a smoother and more comprehensive process.

Related article: User Journey Vs User Flow - Differences & Similarities

How to create perfect user flows for smooth UX?

Step 1: User research

User flows are designed to help users achieve their goals. So, before you start to diagram a user flow, the first step is to know the users' real goals. Doing some user researching is a good way for you to achieve that.

During the process, you should remember two things. One, exhaust all possible options to determine real users' needs. Two, do not forget to check out your competitors and record the common user flows, especially the mainstream user flows of these websites/apps. You can use the data gathered for reference.

Step 2: Determine the target users

It doesn't matterwhether your design purposes are the same with your competitors or not, it is necessary for you to define your targeted users in advance. If possible, divide them into several groups so that you can plan the user flows for them separately.

Step 3. Sketch out user flow outlines for different user groups

After determining real user needs, you might get a slew of great ideas to solve their problems. Sometimes, old school is still best. Outline your user flows on paper. This is a convenient way for you to edit and iterate your ideas as needed.

Having good ideas is not enough. You need to turn them into reality, and the first step is to select a handy user flow tool to draw out your user flows, iterate, share and test them easily online with your team members.

Still do not understand how to actuallycreate a user flow? Here is a video tutorial to help you with that:

The creator of this video tutorial, a UX designer, introduces how and why user flows are important for the workflow, how she creates a user flow step by step in her job. You'll find it very useful.

15 best user flow tools you should not miss

If you are looking for a good user flow tool to draw out, iterate and share your user flows easily and quickly, here are 15 of the best user flow tools for you:

1. FlowMap - fast online user flow tool to outline your user flows

FlowMap is a simple online user flow tool to map out your customer journey paths and plan a better UX quickly for your website/app. It provides a full set of shapes, lines, icons and images to visualize your user flows or design ideas with simple clicks.

You can also share your user flow diagram with your partners or team members with a simple link.
Pros:
Easy and fast to build a simple architecture of your user flow charts

Cons:

Limited icons (only 80 icons)

Limited free project (1 project for free)

2. Mockplus RP - free and rapid design tool to build interactive user flows and prototypes within minutes

Mockplus RP is a free and rapid wireframing and prototyping tool for you to create interactive user flows, UI flows, interaction flows and even real-life prototypes with simple drag-and-drop.

It offers powerful UI and icon libraries, rich interactions and animations, enabling to map out your user flows and prototypes within minutes.

You can also create a collaboration project to edit, test, share and iterate your user flows and interactive prototypes effortlessly online with your entire product team in real-time.

It is an efficient tool for you and your team to plan user flows, design UIs and create interactive prototypes together online.

Pros:

Everything can be done with simple clicks and drag-and-drop.

Provide over 200 ready-made components and over 3000 icons

Provide many website and app templates to fasten your design process

Share and preview your user flows anytime and anywhere

One link to share your user flows and get feedback

Sketch integration to import high-quality Sketch images

All registered users get a 7-day free trial to fully test the tool

Cons:

It is not a good choice for creating a hi-fi prototypes

3. Wireflow - free , online and open source user flow tool

Wireflow is a free, online and open source tool for you to create beautiful user flow prototypes. It offers over 113 flows in 10 categories. You can also invite your team members and design the user flows online together.

Pros:

Offer over 100 easy-to-use graphic/card designs

Offer rich user flow templates

Live chat to communicate design ideas with your team members

No Photoshop skills required

Cons:

As an old and buggy project created by a digital agency, it is not updated frequently and the user experience is not as good as would want.

4. Overflow - a playable user flow diagramming tool for designers

Overflow is a playable user flow diagramming tool. You can easily import web/app designs from Sketch/Figma/Adobe XD, then connect and animate them to present your user flow ideas with ease.

Pros:

Sketch/Figma/Adobe XD integration to create beautiful user flow charts

Offer device skins to create more real user flow diagrams

Offer simple interactions and animations to present user flows

Cons:

Only available for Mac OS.

5. MockFlow - Cloud based tool to brainstorm user flow ideas quickly

MockFlow is a cloud-based tool for you to easily visualize user flow ideas quickly. It provides a large library of components, icons, stickers and other shapes to bring your ideas into life, test, share and collaborate with your team members in real-time.

It is a good tool for you and your team to visualize and iterate your ideas at the brainstorming stage.
Pros:

Provide a 3-month free offer

Integrate with some common collaboration and communication tools

Cons:

Limited free version (1 UI project for free)

6. - online UX planning tool to create user flow diagrams easily

Timblee is an online UX planning tool for you and your team to create user flow diagrams and visual sitemaps for your web/app project. While mapping out your user flow diagram, you can easily click to choose a design screen, decision point, action and link to present your design ideas.

You can also share your user flows and sitemaps with others and get feedback instantly.

Pros:

Provide many screen options to complete your user flows quickly

Add simple links and actions to animate your user flows

Comment right on your user flows for better iteration

Share your user flows via emails

Offer a 14-day free trial

Cons:

No way to preview the user flows

Visual Paradigm Online Diagram offers a large number of diagram templates for you to quickly draw out your user flow diagrams. If necessary, it is easy to build a user flow diagram from scratch by using its built-in screens, components, interactions and usage cases.

Pros:

Provide hundreds of built-in screens, components and interactions

Offer a powerful editing tool to customize your user flow diagram

Cons:

8. User Flows - a useful plugin to create user flows in Sketch directly

User Flows is a useful plugin for generating user flow diagrams from artboards directly in Sketch. If you do not want to download a different user flow tool, export and import your Sketch artboards to visualize your design user flow ideas, you will find this plugin is ideal.

Pros:

Add links and conditional logics for two relevant artboards

Generate user flow diagrams with simple clicks

Show or hide artboard connections for better editing and viewing

Customize and export your user flow diagram with ease

Cons:

Only available for Sketch yet.

9. Lucidchart - popular online user flow diagramming tool with over 500 templates

Lucidchart is a powerful visual diagramming tool that allows you to plan and diagram your user flow diagrams with simple drag-and-drop. It allows designers, developers and other product team members to communicate and collaborate on user flow projects online in real-time.

Pros:

Create user flows, mind maps and software prototypes with ease

Offers over 500 diagram templates

Integrate with Google App, Confluence, and JIRA

Provide a 7-day free trials

Cons:

Free diagram is limited to 60 objects

10. Cacoo - collaborative user flow diagramming tool to customize and share your user flows with ease

Cacoo is a handy collaborative user flow diagramming tool for you and your team to edit and iterate the same user flow diagram together. It offers powerful editors and rich diagram templates to present your user flow ideas clearly.

It is quite easy to learn and navigate for a new user.

Pros:

Offers over 100 beautiful user flow diagram templates

Communicate, collaborate and track any user flow diagram freely online

Integrate with many widely-used tools, like Google Drive, Adobe Creative Cloud, Type Talk, etc.

Provide a 14-day free trial

11. Draw.io - free Cloud based diagram tool to create and save any type of user flow diagrams in the Cloud

Draw.io is a free Cloud-based diagram tool that allows you to create and save unlimited number of user flow diagrams in the Cloud. As a professional diagram tool, it offers powerful features for you to create different charts, diagrams and flows with simple drag-and-drop for free.

Pros:

Offer different diagram templates

Import diagram templates with a URL

Offer a powerful editor to customize your user flow diagram from scratch

Save your user flow diagrams to different Cloud services, such as the Google Drive, One Drive and more.

Cons:

A Google Drive account is required to log in.

12. - good user flow diagramming tool for Apple users

Omnigraffle is a diagramming tool for Apple users to create precise and beautiful diagrams and designs, including user flow diagrams, step by step. In comparison with common diagramming tools that allow you to connect shapes and screens to present your connection logics, this tool allows you to visualize your design ideas with the smallest design layers.

Registered users get a 14-day free trial.

Only available for Mac and iOS users.

13. Microsoft Visio - best user flow diagramming tool for Windows users

Microsoft Visio is a great diagramming tool created by well-known software giant, Microsoft. It is a good tool for you to visualize your user flow diagrams quickly by using its professional diagram templates sand shapes. Since its interfaces are very similar to Microsoft Office, it is also easy for you to explore and learn its features.

You can sign up and get a 30-day free trial before any purchase.

Only available for Windows users.

14. Smart Draw - smart online flowchart maker to create your user flows

Smart Draw is another web-based flowchart and diagram tool. It has two editions, desktop and online, for you create your desired user flow diagrams on any device anytime.

There are over 60 professional quick-start diagram templates for you to present your design ideas instantly.

Once registered, users get a 7-day free trial. So, never forget to fully try out all possible pro features before you decide to subscribe.

15. Gliffy - online diagramming software

Gliffy is another powerful online diagramming software that allows you to create user flow diagrams and other types of design diagrams and charts with simple drag-and-drop.

You can easily drag and drop shapes, templates and themes to complete your user flow diagram, collaborate and share with anyone.

It integrates with many other apps, including WordPress, Jira, Lucidchart, Confluence, Nuclino, etc.

And you can also enjoy a 14-day free trial after registration.

In short, we hope these tools will help visualize user flows as fast as you come up with ideas and help you test, share and collaborate with your teams effortlessly.

10 best user flow templates and examples

If these user flow tools are not what you're looking for, here are 10 of the best and latest user flow templates and examples which just might be what you need to ignite that spark of inspiration:

BBS Sounds User Flow Diagram is a user flow concept that the designer builds for the famous BBC Sounds app. It is clean, simple and user-friendly.

If you are working on a music or radio app, this user flow diagram can be a good example for you.

User Flow Example of a Fintech Product showcases a simple user flow diagram created for a Fintech Product.

If you are working on a Fintech product, don't forget to check out the the designer's Behance account to read more about the project details, including the colors, illustrations, typography and branding, etc.

Student Guide sitemap showcases the student guide flow of a website and is another good example for you to design a smooth user flow for a student or educational page of your next project.

Greyhound UX flowchart offers 108 flowcharts and many other design components, such as the commonly-used arrows and actions.

This freebie contains many essential elements for you to create simple user flows easier and faster. All of these elements are customizable. You can freely change the heights, widths and colors, and even rotate or animate them to suit your design.

This free user flow diagram template is made for Sketch and about 128 KB. You can directly download and use all blocks and arrows to create your desired user flow diagrams as quickly as possible.

This template provides 65 desktop layouts and page templates, a full set of pre-made arrows and symbols, and other essential elements for you to create your own user flow diagrams and sitemaps with ease. You can also change text styles and colors in one place, and apply the changes throughout the files in one click.

This flowchart package includes 63 minimal wireframes and other flowchart elements in both AI and EPS formats. You can easily get all the pages, lines and labels to create your own user flow diagrams quickly with drag-and-drop.

If you are looking for a mobile user flow template, this is a good one. It contains 66 fully customizable minimal wireframes and flowcharts in both AI and EPS formats. With this template, it takes only minutes for you to visualize your user flows, UI flows and layouts of a mobile app.

This website lists a full set of tutorial videos for you to learn and design a better user flow design from existing products in all categories. It is a good place for you to get inspiration if you get stuck.

FAQ:

1. What is UI flow?

UI flow helps visualize the ways users interact with web/app interfaces. Unlike user flows which focus on creating a smooth path to help users achieve a goal, including the relevant interfaces, interactions and the logical relations, etc, UI flow emphasizes motion designs that users follow to achieve a goal.

2. What is a user journey map?

A user journey refers to the scenarios that users may find themselves in as they interact with your website/app. And a user journey map helps present all the user journeys of a website/app. To showcase how a customer can go through your website step by step, as well as interact with your interface under different scenarios, at least one diagram is used.

3. How do I create a user journey map?

After doing enough user research, there are various customer journey mapping tools that can help you create a user journey easily and quickly, such as Canvanizer, UXPressia, Snaply, etc.

Want to know more detailed steps? Watch this video tutorial:

This video tutorial introduces the concept of a customer journey map and illustrates how to create one step by step.

You May Also Like:

# data[].attributes.attachment_link.title
Top 25 User Flow Tools & Templates for Smooth UX

# data[].attributes.attachment_link.description
User flows, which define the paths that users can take to achieve their goals, improve both UX and business values of a website/app project. That's why more and more companies/product teams are spending a lot of time and effort in designing better user flow diagrams for smooth UX sailing.

# data[].attributes.attachment_link.title
Paper Prototyping - Design Thinking Book

# data[].attributes.attachment_link.readable_text
A business model describes how a company does business and what its value proposition (benefits or offering to customer), value creation (resources, suppliers and other partners who help create value) and value capture mechanisms (cost structures and revenue streams) are.

Sustainable business models consider a much wider group of stakeholders than just customers, and explicitly consider society and environment as stakeholders. They go beyond creating value for a customer and include concerns about the benefits and harms to society and the environment by the way business is done. This is a much more systemic view on doing business than making money by delivering benefits and value to customers.

I am interested how current business models can become more sustainable and how start-ups can develop sustainable business models from the outset.

Together with my colleagues Sam Short, Padmakshi Rana, and Steve Evans, I developed the Value Mapping Tool, to assist in 'sustainable business modelling' - the process of inventing new sustainable business model ideas.

Value mapping tool. Source. Bocken et al. (2013)

This tool can help users to:

Understand the positive and negative aspects of value in a network of stakeholders

Identify conflicting values (i.e. where one stakeholder benefit creates a negative for another stakeholder)

Identify opportunities for business model redesign - especially to improve societal and environmental impact

Here is a simplified process of using the value mapping tool to use for your business:

Each ring in the diagram represents a different brainstorm. During each of these brainstorms, all of the following "stakeholders" need to be considered:

Customers - perceived and actual benefits and negative impacts. You may want to break this down into different customer segments.

Network actors - in short, the firm and its supply chain responsible for creating value. This may be broken down into particular key suppliers or partners.

Environment - benefits (afforestation) and negative impacts (e.g. emissions to air).

Society - benefits (e.g. health) and negative impacts (e.g. working conditions)

Brainstorm 1: the purpose of the business is discussed. Why is the business here in the first place? What is the product or service offered by the company or business unit? What is the primary reason for the existence of the business (this should not be primarily financial)?

Brainstorm 2: what value is created for the different types of stakeholders? What positive value is created and what negative value do all the stakeholders mitigate?

Brainstorm 3: what is the value destroyed or missed or negative outcomes for any of the stakeholders? Consider for example, waste to landfill or loss of local employment caused by offshoring. Are there contradicting impacts at a global and local level? Is the business missing an opportunity to capture value, or squandering value in its existing operations? For example, are assets, capacity and capabilities under-utilised? Are potentially useful materials going to landfill?

Brainstorm 4: This brainstorm is intentionally put at the end and is about blue-sky thinking. The focus is on turning the negatives into positives. What new positive value might the network create for its stakeholders through introduction of activities and collaborations? What can you learn from competitors, suppliers, customers or even other industries?

To move from ideas to implementation the brainstorm may be followed up by roadmapping the activities and business model elements to be changed. A great way of doing this is using the Business Model Generation work by Osterwalder and Pigneur (see www.businessmodelgeneration.com for more details). We have adapted their "strategy canvas" here:

Overview of business model elements. Source: www.businessmodelgeneration.com. Adapted by Bocken (2013)

For a more detailed discussion of the value mapping tool, I refer you to the full research article:

Nancy Bocken, Samuel Short, Padmakshi Rana, Steve Evans, (2013) "A value mapping tool for sustainable business modelling", Corporate Governance, Vol. 13 Iss: 5, pp.482 - 497. DOI link: 10.1108/CG-06-2013-0078

The open access version of this article (not edited by the journal) is available here: https://www.repository.cam.ac.uk/handle/1810/245028

# data[].attributes.attachment_link.description
A business model describes how a company does business and what its value proposition (benefits or offering to customer), value creation (resources, suppliers and other partners who help create value) and value capture mechanisms (cost structures and revenue streams) are.