No other area of design requires such deep immersion in the client's world as UI/UX design. To create a user-friendly and practical product, it is necessary to understand the customers’ pains, needs, and expectations. This is what design thinking is all about.
Design thinking is a unique client-centered approach that helps businesses create innovative ideas using a human point of view instead of raw historical data. For example, our recent client, HandPrinter, based their project on a goal that is very important - to encourage people to protect the environment - which helped them become a company with an inimitable vision and no analogs around the globe. Interested in how they did it? Please, read further in our case study.
With the help of design thinking, you can help your clients solve their problems and create benefits for your business. Of course, in theory, using this approach seems just a piece of cake. But what about real life? I guess you are wondering if it is possible to efficiently apply design thinking in your business.
In this article, we will discuss five design thinking examples of real companies that actively use this approach as a part of their corporate strategy. So, get ready for your dose of inspiration!
Examples of companies that use design thinking
To show how resulting the design thinking can be we won't have to dig through the whole internet. What's more, I bet that you have not only heard about companies we're going to talk about but even use their products regularly!
Anyways, without further ado, let's analyze some cases when companies revolutionized the market using design thinking.
Airbnb
The first design thinking case study is Airbnb, cloud software for vacation rentals. The creators of Airbnb, designers Brian Chesky and Joe Gebbia met at the university, moved together to San Francisco, and rented a nice spacious apartment there for two. In 2007, there was a design conference in the city and that’s why the prices for rooms in hotels went up a lot. That’s the time when two friends came up with a simple business idea: they bought several air mattresses and hosted colleagues in their flat. To find guests, they created airbedandbreakfast.com.
The idea was good and Brian and Joe wanted to continue developing it. They used the empathy method they studied at design school and asked themselves:
- What do people do when they travel?
- How can they quickly and easily learn the way from the airport to their home?
- How can you recommend your favorite place on the next street to have dinner?
Answering these questions gave Chesky and Gebbia useful ideas on how to update the website. From that point with the help of the app, the user could rent apartments, order breakfast, and also communicate with the host like with a friend (ask them for advice or recommendation).
With design thinking, they solved the problem of distrust between the host and the guest: the ability to leave the feedback from both sides broke that barrier.
Now every design team at Airbnb has a leader whose first priority is to represent the customer and their needs.
Sasha Lubomirsky, head of User Research at Airbnb says: “When you understand the problem, the solution is way more straightforward. If you understand the problem, the ideas follow!”
These words prove the importance of design thinking for Airbnb.
Netflix
According to Forbes, back in 2001, Netflix founder Reed Hastings spent $10 million a year on streaming technology research. This fact alone shows how customer-centric Netflix has been from its very beginning.
In the same article, the author points out that Netflix's design thinking can be boiled down to four rules:
1. Think Big - Netflix was not afraid to destroy its existing successful DVD delivery business and follow the technological advance.
2. Start small - the company did not rush headlong into the implementation of a new product, but waited for the right moment.
3. Fail quickly - Early streaming attempts were abandoned.
4. Scale Fast - Netflix has been able to grow rapidly by moving to the original content.
Many of us are familiar with all the advantages of the Netflix platform and its human-centered UX design:
- Card design (you can interact with each card: pick it, bring closer, flip over, etc.)
- AI-powered recommendations (based on your view history Netflix personalize the experience for you)
But Netflix's design thinking goes beyond digital design. It covers the entire process of user interaction with the system.
Making the customer a top priority and continually thinking about what would be better for them helped Netflix to not only reshape the video rental industry but also let Netflix become an essential part of how to relax correctly. Because let's be real, there's "Chill" and there's "Netflix and Chill".
Uber
More than 75 million people in 600 cities in 65 countries around the world use Uber, and for many, it has become the most familiar mode of transportation. The main reason for the success of this online ride-hailing taxi app is its unique business model that Uber managed to develop using a design thinking approach.
Putting themselves into their customers’ shoes allowed Uber’s team to define that the most critical issue that influences the client’s final impression is the need to wait. That is why Uber has given a lot of attention to this issue.
Let’s take a look at how with the help of a design thinking approach Uber managed to develop the user experience that helps to cope with the problem of waiting and makes this application impossible to give up.
- Eliminate inaction. The first thing that Uber’s design team did great is coping with inaction with the help of interactive elements. In the example below, you may see how Uber uses animations that entertain and inform the passenger while they are waiting for the car.
.gif)
- Make all operations clear and transparent. Uber deliberately demonstrates some aspects of the work of the service. It helps users see that the company makes a lot of effort to improve the experience of their customers. Thanks to this, people value the product more and feel more satisfied.
The screenshot from Uberpool shows how the app calculates arrival time. This information gives the user an understanding of what is going on without overloading the reader with technical details.
- Show the goal. Most of all people want to know how much time is left before they reach the goal. The closer the reward, the faster the user wants to get it. That’s why Uber explains each step when the customer is waiting for the car, making people feel like they are getting closer and closer to their goal.
There is no doubt that Uber's success is largely due to the fact that the company uses design thinking to improve user experience. With the help of this customer-centric approach the idea to replace cabby blokes with ordinary and trustworthy people owning their own cars resulted in a usable and convenient app we all love so much.
IBM
Bridget van Kralingen, senior vice president of IBM Global Business Services, recently told: “There’s no longer any real distinction between business strategy and the design of the user experience” and these words make a big difference.
IBM design has gone through many stages in its development ("good design is good business"), and now the company provides design services and invests $100 million in implementing principles of design thinking in their organization.
In 2014, IBM used design thinking when creating Bluemix (now IBM Cloud), a cloud platform for application development. IBM’s main goal was to help developers in big companies create cloud applications much faster.
Researching their target audience allowed IBM to create an easy-to-use and functional platform that attracted more than 1 000 000 developers.
Here are three main points why all these developers fall in love with Bluemix:
- Choice. Bluemix allows to build a consistent application that can run both on and off premise. It helps to reduce the cost and time developers spend on setting up infrastructure
- Extensive catalog with tools. Bluemix offers almost 150 tools and services that propels you months ahead in development (e.g. Internet of Things for secure data collection, Watson for cognitive computing services, etc.)
Methodology. Using the DevOps tool chain allows to easily scale your projects.
That’s how identifying pains and needs of the target audience allowed IBM create a platform that helps developers quickly build applications.
Intuit
Intuit is a global platform that helps its customers cope with financial issues (accounting, tax preparation, etc.).
Back in 2006, Scott Cook, the founder of Intuit decided that his accounting software company has to be more innovative. Inspired by an article about design thinking written by Roger Martin, Cook started thinking about how this approach can help to develop and improve his product.
First of all, Intuit’s team identified the problem. Most people hate spreadsheet-based personal finance tracking solutions, and they stop using them as soon as they start. The research of competitors helped to realize that existing solutions are suitable for professional accountants but difficult to use for an average person. Although there is a need for financial planning for individuals or small businesses as well.
The solution was to create an easy-to-use and consistent UX. When Intuit introduced its software to help people control their finances, there were 46 similar products on the market. At the beginning of the journey, they joked that at that moment they had the "47th mover advantage."
The basic version of Intuit offered only a third of all available features, but with a great design. Instead of spreadsheets, the program displays familiar images with check receipts on them.
Because of its extremely intuitive design, Intuit immediately became the market leader in personal finance software.
As a result, Intuit has shown software companies that good design is something every industry should care about. You can use empathy to create well-designed software that can both solve business problems and serve people.
Think of people and they will think about you
To make a successful product you need to put user needs at the center of your efforts focusing on designing usable, delightful, and efficient experiences. Design thinking helps you to understand real people’s needs and problems and uncovers ways of improving user experiences.
So, don’t hesitate to make design thinking a part of your company culture. It will promote creating products that deeply resonate with your customers — ultimately driving engagement and growth.
And if you need help in creating products that show how much you care about your customers, come to Eleken for a human-centered UI/UX design.
Top Stories
Visualize Like a Pro. Top Customer Journey Mapping Tools
Whether you are building a new product, developing extra features, or finding ways to improve your retention rates, a customer journey map is a great tool. As a design agency, we know well how valuable can be an insight from a customer journey map that is based on good research.
Creating a customer journey map requires previous research, analysis, interviews. After that you are left with loads of information that is hard to present to the team. Here you can see the best tools that can help you visualize the map and make it a pretty picture that you would really enjoy analyzing.
Customer Journey Map (CJM). Why Does It Matter?
Through the customer journey map, you can truly empathize with your users. It shows not only how people interact with the product, but also what they feel and desire. The graph shows clearly the moments of truth that make you lose or acquire clients.
Before you start working on a customer journey map, think of a concrete problem that you want to address. Make sure to include real customers in the process, do not rely on your team to provide all the information about clients’ feelings, desires, and actions.
Once you’ve gathered the information, you start thinking of a way to visualize it. The tools are various: we’ll start with the most basic ones and go on with the software created exclusively for customer journey maps visualization.
Building Customer Journey Map Using Tools That Are at Hand
Craft Tools
Let’s say that you plan a workshop with your team and customers to create a customer journey map. You expect to end up with a beautiful color scheme, where everything is crystal clear. There are plenty of tools for that, as you will see below. However, when you are working live with a group of people who are probably unfamiliar with those tools, a good old whiteboard and stickers can be your best choice.
Start building the stages of the journey during live sessions using hand-made materials. You can use this template to structure your ideas. Later, when the content is ready, you can make a pretty digital version to work with in the future.
Computer Programs
The customer journey map does not always have to be that huge graph with illustrations and icons. You can build a cjm using just Excel: if you are more of a text person than an illustration person, that would work just fine. Here is a simple customer journey map by Nielsen Norman Group, made in spreadsheets.
You can create a customer journey map in (almost) any visual editor that you know: Adobe Illustrator, XD, Figma, Sketch, etc. There are some free customer journey templates that give you a prepared set of elements to fill in with your data. Check out this template for Adobe XD.
You can also try free customer journey map templates for Sketch. And if you want to go really fancy, use this interactive template for Figma. The clickable elements allow you to fit in lots of data and metrics, including numerous personas and integrating user flows.
Customer Journey Map Software. Web Apps
There is a bunch of software made specifically for creating customer journey maps. They allow you to use pre-made templates, visual elements to get a result that looks put-together without thinking too much of design. We’ll give you a brief overview of the most popular and useful customer journey map tools, both paid and free.
UXpressia
With UXPressia you can build customer journey maps, personas, and impact maps. You can choose one of many templates for any type of product – from coffee stores to online banking apps. Also, a separate template for employee journey maps is worth notice: remember that employee experience directly influences the customer experience. The app has a high rank on review websites and got the Best Value award from Capterra among Customer Journey Mapping Tools Software (2020).
UXPressia offers a free version with limited functionality and a paid one for $24 a month. The paid version allows many team members to work on the project at a time.
Smaply
With Smaply, you can create a customer journey map from scratch or use one of the templates based on different types of cjms: service blueprint, communication journey, empathy journey map, and comparison between different personas. The interface is clean and minimalist. The template is black and white and basic, so adding the right colors and visual effects is up to you.
Smaply is another cloud-based tool. Other than visualizing customer journey maps, you can create personas, and stakeholders maps. The price is $25/month, and a free trial is available.
Custellence
The distinct feature of Custellence is that it emphasizes the use of the customer journey map as a change plan. You can mark right away what needs to be removed or created: great feature to remind you that cjm is about finding weak points and improving, not just visualization of data.
The templates are very detailed and each is tailored for a specific kind of business. Take a look at this template for customer journey map of retail: numerous lines, and each of them has a few sub-lanes to make your map as detailed as possible.
This is a web app and the price is higher than the competitors’. The free version allows you to make only one map without exporting it. Paid plans start at $30/month.
Miro
Miro is a very versatile tool, suitable not only for customer journey maps, but also for agile, retrospectives, mood boards, and many more. Miro is a digital whiteboard.
The website offers various templates for different uses. They are rather basic (like an actual whiteboard), but the service gives lots of possibilities for customizing. In our agency, we use Miro often for visualizing customer journey maps, as it has a perfect balance of the default instruments and the flexibility of their use.
The software is cloud-based. If you would use it only for customer journey maps, the free version with 3 boards would probably be enough. If you decide to use it for other projects, it is only $10/month and has many integration options.
Take a look at this template to see what your cjm may look like in Miro.
Visio
Visio is a diagram-building tool by Microsoft. Paid options start at $5 per month (only web app) and go up to $15 per month (web and desktop app). The service is built on Microsoft cloud, and the desktop version is not available for Mac.
Apart from customer journey maps, Visio is great for flowcharts, Gantt charts, and all sorts of diagrams. See this template for Visio.
Gliffy
Like Visio, Gliffy is suitable for workflows and diagrams as well as customer journey maps. The templates are rather basic and to make a detailed cjm, you have to add parameters and metrics on your own.
The paid version is $7.99 per month (cheaper if you purchase it for a team). The free version allows only a limited amount of graphs. Also note that the documents created in the free version are public, so if you need privacy, opt for another version.
Comparison Table
Collecting Feedback Software
A simple customer journey map is built based on research and interviews with users. However, if you want to go further with collecting data, test the insights of your cjm, and see how the changes work, you may need special software that helps collecting and analyzing feedback.
In this article, we focus on the tools for visualization, but if you are serious about improving customer experience, check out Clarabridge and CXsuite.
To Sum Up
There are a bunch of tools for visualization of customer journey maps, apart from the few ones listed in this article. Some of those you already have at hand. Some you’ve used numerous times before with different objectives. We have collected some good examples of customer journey maps so you can see which one works best for your type of business.
Experts in customer journey mapping claim that the pretty picture is not the main focus, rather it is the process that drives changes. However, a nice visualization is always a plus.
Now that you know more about your customers, learn how to make them happier with these 6 strategies for customer success.
Do It Like Google. Angular Material Design Layout Examples
When you are thinking of building a new website, choosing the right tools is crucial. As a design agency, we do our best to find the most suitable solution for each client, from layout to button corners. The tools we use vary depending on the specifics of each project. Here we have picked a few examples of websites built with Angular Material, each one using a different layout style.
So, What Is Angular Material?
Angular Material is a UI component library for Angular JavaScript developers. The library consists of all sorts of components – buttons, icons, grid lists, etc. By using these you can ensure you build a modern and functional website or app that looks put-together. All the components of Angular Material are coherent with Material design system. If you are new to the concept of design system, read this article.
Angular Material was introduced by Google in 2018 and has been steadily rising since then. Don't be confused by a decline at the end of 2020, this is a typical end-of-the-year graph plunge, it is the same for other UI components and web frameworks as well (see this graph).
Angular Material supports different styles of layouts. According to the guidelines of Material Design, the principles of the layout are the following:
- Predictable. Go for proven styles and avoid experimenting with layouts that were not tested with users.
- Consistent. The style of basic components of the layout should be the same throughout the website. Using a components library helps a lot here.
- Responsive. Products have to be adapted to different devices. Angular Material is not responsive by default, but its elements can be used to build modern designs with responsiveness in mind.
Nowadays Google promotes Angular Material to be used by developers in all sorts of products. For the developers, it means that they can rely on the tested system and save time they could otherwise spend re-inventing buttons and icons.
It does not mean that using Angular Material would inevitably turn your website into a Google-style page, with those colorful icons and Google font. The library allows for a high level of customization. You can change parameters of elements to fit the needs and style of different products, use one of the existing Angular Material themes or create your own.
We have chosen some great examples of websites with different styles and content, all developed with Angular Material and using different layouts.
Grid-based Layouts. Image Lists
Grids consisting of images or cards (image and text grouped together) are very common in Material design. Let’s take a look at some examples:
Standard
This grid is made of items that have no hierarchy. All of the equal size, arranged in a symmetrical pattern. This is how Metalshub, a metals trading platform, displays the goods that they work with. Standard image grid is the most common layout for a large number of pictures.
Woven
The woven image list sets a regular grid without cutting the images to the same format, like when the lists are created by users and therefore have to be flexible with different formats. It works great in the case of Keen, a Google's experimental product that allows users to create their own curated sets of materials.
Keen is a great example of how Material Design adjusts to fit modern trends and get an instant “cool” look. How do they do it? Use only black minimalistic typography, no theme colors. Set the focus on the content: use a modular grid of bright images. Add a strip of running text. Done. The style reminds of a trendy online media website for the younger generation.
Masonry
Masonry is also a grid of images with different formats, but unlike woven image list, the distance between the images is the same, and only the width or height is pre-set. The elements are set like bricks. Take a look at how Keep, Google service of notes, arranges separate notes into a scrollable grid.
Image lists can have a vertical or horizontal scroll. Horizontal scroll is typically used for devices with touch screens. All the ones above are vertical, as the most common option. The following example is interesting: a vertical grid that can scroll horizontally.
Quilted
Here on Google Arts & Culture, the images are scrolled in direction from left to the right. The website is not made particularly for gadgets with touch screens, but the horizontal orientation makes perfect sense when the images are arranged in chronological order.
Some of the cats are shown bigger, so they draw more attention to the images that are harder to appreciate when there are lots of small objects. This way of arranging images creates a clear hierarchy among the objects. It is mostly used for pre-edited content (woven and masonry are the best for peer content).
Google Arts & Culture shows many ways of presenting a number of visual materials: they use all sorts of grids. Here, for example, the group articles and projects in a series of swipeable cards:
Zig-Zag Layout
Smartbnb, a service for rental property management, uses this layout to describe the benefits of their product. Images and text blocks arranged in a zig-zag pattern follow the natural line of a human eye. Just like when reading, we start with the top left corner, move to the right, then right and down, and then left again. This layout is very common on the main pages.
Magazine Layout
Magazine layout is used for pages with lots of information that needs to be placed with high density. The website of Boardroom.Media was built with Angular Material and follows a classical magazine layout with bright color accents.
Complex Lists with Filters
Here is another example of how large amounts of information are represented. Babcock is a dashboard designed to keep track of the vehicles. It contains a list, menu, search and filter tools.
JetRadar is a flight booking service. The search page contains even more information, filters, and variables. The layout has a standard fixed top bar with search parameters and scrollable part divided into two parts: filters and search results.
Here you can also see what a typical Angular Material buttons look like.
Main pages of the product often mix all sorts of layouts to build a dynamic design that tells a story and displays different kinds of information: slogans, product value proposition, list of benefits, reviews, FAQ, partners, etc. Let’s see some examples.
Landing Pages Built with Angular Material
T-Mobile
The landing page of the website of the mobile network provider combines the “Hero” image (big train in this case), products displayed on swipeable cards, and split screens. Blocks of information are united in the modular grid. Mobile phones are displayed on classic Angular Material cards.
Wix
Wix may not be a synonym of great design when it comes to the websites built on their platform, but their own landing page is worth taking a look at. The text is put in a grid made of large color blocks. Wix is doing its best in sticking to minimalist style while the menu and the list of the products have grown so much.
Firebase
Firebase is a product by Google aimed at app developers. The design is built according to the main commandments of Material Design: intense colors (accent blue and shades of yellow for logo and icons), bright modern illustrations, etc. Note that each block of information is placed on a separate card – feature element of Material Design.
Claris
Claris, the business app builder, is another example of a classic main page: benefits, previews, schemes, clients reviews, blog articles. For more inspiration, see out list of best landing pages. and some more examples of usable, responsive and high-converting websites.
To Sum Up
If you are building a relatively simple website, Angular Material is a foolproof way to create a bold and clear UI, while speeding up the process as well. It is used for a variety of products in different fields.
However, if you need to build something rather complex, you may need another tool. We had few clients coming to our design agency with the idea of building a product with Angular Material, and we winded up using Ant Design, another UI library. For instance, it happened when we worked on Gamaya, a complex data analysis platform for farm management. In this case study, we explained how we made a custom UI kit for developers that helped to save lots of time.
Click here for more website design examples:
Web Design Examples of Usable, Responsive and High-Converting Websites
Your email has been submitted successfully. Check your email for first article we’ve sent you.
