Name: Design Glossary — FlowMapp
Brand: FlowMapp
Availability: OnlineOnly

UX designing of a product can be centered to various starting points. Depending on business specific, one chooses best suiting to users’ needs and team capabilities.

large_607721e3a896b14cd6c59d95_glossary%20snippet

medium_607721e3a896b14cd6c59d95_glossary%20snippet

small_607721e3a896b14cd6c59d95_glossary%20snippet

thumbnail_607721e3a896b14cd6c59d95_glossary%20snippet

607721e3a896b14cd6c59d95_glossary%20snippet

Approach, User experience — FlowMapp

large_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

medium_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

small_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

thumbnail_5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3aa9a491dd005fbd9da1a9_category%20card_ux__1920_696

5f3ab44f1e10243c3d918b06_ux_icon

is the process design teams use to create products that provide meaningful and relevant experiences to users. This involves the design of the entire process of acquiring and integrating the product, including aspects of branding, design, usability and function.

5 listings

User Experience

5f2a99ed2ffab0faffc6ca55_approach_icon

5f2be305b6a261c8534a8bac_approach_icon-color

5f2be30009c25853dd8249fa_approach_icon

Approach-UX

large_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

medium_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

small_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

thumbnail_5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f325d20607a1474e4bcfb6f_category%20card_cx__1920_696

5f3ab42e8b2f9226d34dd2ff_cx_icon

focuses on usability of sites, user reviews, customer loyalty index

3 listings

Customer Experience

large_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

medium_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

small_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

thumbnail_606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606b17535f86cb3f498b1ede_category%20card_productivity__1920_696%20(1)%20(1)

606716c8a9322fc8bd91a4ba_productivity_icon

are about small changes in how you work, raise your or your team's talent and find work-life balance

2 listings

Productivity

large_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

medium_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

small_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

thumbnail_5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3aa9c03eba5d4ca636f26f_category%20card_ixd__1920_696

5f3ab438c8fa4f256028f0c9_ixd_icon%20(1)

is based on animation inside interfaces: moving icons, menus, transitions, gifs. Motion designers work on IxD

Interaction design

large_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

medium_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

small_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

thumbnail_5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3aa9b291dd0056399da1b8_category%20card_sd__1920_696

5f3ab4430dc3b215841f8cad_sd_icon

is the process of building relationships between an end client and a business to balance their needs

Service design

large_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

medium_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

small_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

thumbnail_5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3aa99365d8f8db97acdd1e_category%20card_ui__1920_696

5f3ab4590345cd978afc3ea7_ui_icon

design is the process designers use to build interfaces in software or computerized devices, focusing on looks or style

User Interface

Design Glossary contains popular and useful terms commonly used by web design and UX professionals

large_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

medium_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

small_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

thumbnail_https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

https://uploads-ssl.webflow.com/5ef46931a352569ed1a1f509/5f3e7055c0acb276cbedbcb5_main_sn.png

Design Glossary — FlowMapp

CJM can help you to improve the customer experience without wasting a lot of time and effort

large_607721e3a896b14cd6c59d95_glossary snippet.png

medium_607721e3a896b14cd6c59d95_glossary snippet.png

small_607721e3a896b14cd6c59d95_glossary snippet.png

thumbnail_607721e3a896b14cd6c59d95_glossary snippet.png

607721e3a896b14cd6c59d95_glossary snippet.png

Customer Journey Map (CJM)

Customer Journey Map (CJM) is a step-by-step scenario of user interaction with a specific e-commerce site. The process described in the scenario is not linear. This means that it is extremely important for UI/UX designers to foresee all possible options for user actions so as not to lose him or her at any stage.&nbsp;&nbsp;CJM can help you to improve the customer experience without wasting a lot of time and effort.

5 Steps To Create a CJM

There is no single algorithm for building a customer journey map, but there are several preliminary procedures that will help you in this process.&nbsp;<h4>To draw up a portrait of the client</h4>What kind of people they are, where they live, what they are interested in. In general, you have to draw up separate maps for each type of client — after all, their scenarios can be very different.&nbsp;You can use personas here. Personas are typical users of your product with specific features. This approach is more effective than describing groups of potential clients as it helps designers to build empathy with end-users.&nbsp;&nbsp;<h4>To analyze sales funnel&nbsp;</h4>Here you need to figure out exactly which stages and in what sequence the user goes on the way to becoming a client: for example, searching for a product in search engines, going to a website, communicating with an online consultant, ordering, using a product. You also need to provide an approximate time frame for each of these stages.&nbsp;<h4>To define the user’s goals&nbsp;</h4>For example, for the search stage, it can be a search for an item in a given category with the lowest cost. This can also include questions that buyers ask themselves on each of them. This will give you a glimpse of your website's usability through the eyes of a real customer.&nbsp;<h4>To analyse sales channels</h4>This can be an offline point of sale, search results, an affiliate site, an influencer's blog, etc. It is also important to take into account such channels that marketers may not work on — for example, forums, publics on social networks. &nbsp;<h4>To identify barriers&nbsp;</h4>Finally, you will need to figure out the aspects that prevent users from moving to the next stage of the sales funnel. Standard options are a complicated registration procedure, unreasonably high or low cost of goods, incorrectly working search on the site.

This is the approximate time required to complete all stages of the journey&nbsp;

Time frames

This is a clear sequence of actions from your potential customers that help them achieve their final goal. For example, buy a vacuum cleaner. It is also important to consider the context and their intentions at each stage.

Scripts

These are specific manipulations that users perform within your website in order to achieve the final goal.

Touchpoints

These are the locations from where users come to your website.

Channels

4 CJM Components

Useful Tools

Tool for improving user experience and planning user journeys

Flowchart.png

Flowchart by Flowmapp

Figma.svg

Figma

abstract_icon-50.svg

Branch of design in which interface does not end on the device screen, but goes beyond. To create this immersive experience designers can use different technologies such as augmented reality, virtual reality, mixed reality 360° content

Immersive Design

Branch of design in which interface does not end on the device screen, but goes beyond. To create this immersive experience designers can use different technologies such as augmented reality, virtual reality, mixed reality 360° content.

<h3>3 Immersive Design Use Cases</h3>&nbsp;<h4>Gaming</h4>Gaming applications are definitely taken on a new level through immersive design. Instead of limiting yourself to the screen of the gaming device, you will be able to see the universe of the game around you! This effect of live presence gives users new exciting emotions. One of the most acclaimed examples of immersive design in gaming is well-known <a target="_blank" rel="noopener noreferrer" href="https://apps.apple.com/ru/app/pok%C3%A9mon-go/id1094591345">Pokémon Go</a>.‍<h4>Marketing</h4>Immersive design can help brands not only create unique and spectacular advertising campaigns but also offer retailers better ways to present products to potential buyers. For example, through augmented or virtual reality reviews. You can see how immersive design can be used in marketing campaigns watching <a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=ENau7AkayN8">this 360° interactive video, created by Oreo</a>.‍<figure class="media"><div data-oembed-url="https://www.youtube.com/watch?v=ENau7AkayN8"><div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;"><iframe src="https://www.youtube.com/embed/ENau7AkayN8" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div></div></figure>&nbsp;<h4>Learning and training</h4>When it comes to learning and training, immersive design can significantly reduce the length of lessons and the cost of their implementation. Students can use emulators that are no different from their living prototypes. A good example of immersive design is <a target="_blank" rel="noopener noreferrer" href="https://www.classvr.com/">ClassVR</a> — it’s a platform that involves VR and AR for education and training.

One of the key features of immersive design is use of virtual and augmented reality. Designers allow users to apply UI elements to real objects. That is what IKEA does in IKEA Place. This application allows to try true-to-scale furniture in user’s own apartments or house.

Use 3D elements as much as possible

Along with 3D graphics, you can implement voice navigation capabilities. This will provide interface control even for those users who are simultaneously busy with something else. Music also creates an immersive experience, but be sure that your design works even without it as you can’t be sure that users have an ability to turn the music on.

Use voice directions and music

Personalization is a huge trend that is also relevant for immersive design. You can personalize your design by remembering the previous actions of a particular user, or via the integration of artificial intelligence based tools.

Personalize UX

Tips & Tricks 

VR engine for creating solutions with 3D experience. 

Amazon_Web_Services_Logo 1.svg

Amazon Sumerian

Unity_Technologies_logo 1.svg

Unity3D

3D modeling, animation, and rendering software for games and design visualization

3ds Max.svg

3DS MAX

6135f5e4d05065381d9a8fc6_abstract_icon-46.svg

Co-creation is a practice of value-based collaboration between stakeholders and users to generate value

Co-creation — FlowMapp

Co-creation is a practice of value-based collaboration between stakeholders and users to generate value.The aim is to find new approaches to solving problems and optimize the processes of creating a product.

In Practice

<h4>Collaborating</h4>Collaboration is the most free form of co-creation, which gives end users access to any modifications to the product. A typical example is an open-source software. In general, this form of co-creation is usually found in the case of products for non-commercial use.&nbsp;<h4>Tinkering</h4>Mastering implies a slightly lower degree of intervention in the final product than the previous option. For example, by introducing standards for edits or providing only separate elements for this. The final decision on making changes is made by the development company.&nbsp;<h4>Co-designing</h4>This form of co-creation consists not only in the formation of a certain list of requirements for product changes but also in the approval of these changes by independent parties. A standard example of co-designing is a user voting for proposed edits on the developer's website.&nbsp;<h4>Submitting</h4>This is the strictest form of co-creation, which involves the selection of proposed product upgrades by the specialists of the development company itself. Examples of submitting include searching for contractors on a competitive basis. As a rule, the winners will receive a cash prize.

5 Basic Co-Creation Steps

Co-creation is only suitable for those companies that are able to involve end users(or other stakeholders in the process of finding ideas and accept their proposals with an open mind. This is not an easy task, as usually experienced designers insist on their expertise too much

Evaluate the company's readiness for this type of idea research

Before contacting specific representatives of your potential target audience, it is important for you to find out how clear your design team is about the reasons for modernizing the existing solution. Thanks to this, they will be able to choose the right direction for their further actions

  Analyze existing issues

Obviously, choosing the right participants for the "idea generation" group is of particular importance. In particular, it is necessary that this group includes all the characters that display different customer portraits for a particular product. Usually, a group of 10–12 people is needed for optimal results

Think about the composition of the team

The co-creation procedure should not be chaotic. Instead, you should think about a clear scenario and roles for each team member. And of course, define the goals of this event

Think over the event

Do not forget to invite a competent moderator to the co-creation procedure - a character who would lead the process and organize productive interaction between strangers

Choose a competent moderator

Flowchart.svg

Flowchart 

A powerful tool for visualizing the customer’s experience

CJM.svg

Customer Journey Map

A great tool for collective brainstorming.

ideaboardz.svg

IdeaBoardz

Co-creation is a practice of value-based collaboration between stakeholders and users to generate value.&nbsp;<figure class="image"><img src="/uploads/60522f9d0eb54f3040cb69ee_0baa2bc54f2deeeb9e3959d1acb66eb9_88f7ee5e60.jpeg" alt="Designed by Max Tkachenko"></figure>‍<h3>Controversial</h3>«create an uproar»‍Co-creation requires you to provide customers and at times, non-customers ownership, by giving them a seat at the design table. Journey may be different, but there is one thing that must be consistent – and that’s commitment. Because, in the eyes of a consumer, there is nothing worse today than a company that makes a promise it doesn’t end up following through on: &nbsp;<ol><li>Low scale usage</li><li>Not a lot of self-criticism</li><li>Co-creators upsets</li><li>Angry members</li><li>Destruction</li><li>Willful mockage</li><li>Deliberate harm</li><li>Brand bullying</li></ol>

60522f5ca5c8d54f78d76904_abstract_icon-162

Co-creation

UCD is constructed around the user and user needs.

User-centered design (UCD) — FlowMapp

UСD is an iterative design process focused on the user’s needs. Each iteration of the process is based on user’s feedback throughout research, interviews and testing. This approach helps to create highly usable and accessible products.&nbsp;<figure class="image"><img src="https://cdn.dribbble.com/users/816579/screenshots/15150980/media/8f0d4b98b59666b371102b9b2bd5af0e.png" alt="User-centered design example"><figcaption>Help Experience — USM App by <a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/shots/15150980-Help-Experience-USM-App">Horia Veselin</a></figcaption></figure>&nbsp;Here is an example of the UCD approach. Users ask similar questions, but might prefer different ways to search for answers. Solution of this problem in the design above is good. The designer gives all the possibilities to find the answer, and a user can choose the most сonvenient one. He can write an email, ask his question in the chat or check the FAQ.

Specify the users’ needs: identify the people who are going to use your product and their context

Specify requirements: align business requirements with users’ goals

Evaluate designs against requirements

4 Key Phases Of The UCD Process

UCD vs Activity-Centered Design

Junior designers may confuse the user-centered design for the activity-centered design because they may seem similar. But they aren’t. &nbsp;The user-centered design focuses on users, their needs, preferences, and experience with similar tasks. The activity-centered design doesn’t focus on users but on tasks and the activity that user needs to perform. The UCD makes the product accessible while ACD waits for users to adapt to accomplish their tasks. &nbsp;For some products ACD approach might work. Especially, when there are no alternatives — when your product is complex, unique and highly demanded. But in most cases UCD is better as it allows to attract and retain more users.

Find all the possible information about users — all kinds of research can help you here. Make sure that you understand users’ needs

Involve users in the design process. Focus groups, interviews, testing — try them to find better design solutions

Make the design process iterative. You can start with research on users’ needs, then go to design solutions and testing

Get users’ feedback and reevaluate your design constantly

Use site maps, user flows, and personas to make the process more simple

Tips & Tricks

Useful tools

Miro_logo.svg

Miro

Invision_logo.svg

InVision

FlowMapp_logo.svg

FlowMapp

5f3bee5e8a263077f4892976_abstract_icon-24

UCD is constructed around the user and user needs

User-centered design (UCD)

It is an approach of product creation, based on principles of SOA (service-oriented architecture).

Service-oriented design — FlowMapp

It is an approach of product creation, based on principles of SOA (service-oriented architecture): building a system with a set of loose coupling replaceable components with standard interfaces and protocols. That means the product is built iteratively, going through eight production phases, following the guidelines:&nbsp;<ul><li>Service Coupling — two business process must be as independent as possible</li><li>Service Cohesion — the service must have highly related functionality</li><li>Service Granularity — the service shall be high-level and of huge parts to conduct the whole business process</li></ul>

5f3bee11e2ca987246f42f5e_abstract_icon-23

Service-oriented design

This design method engages a group of stakeholders in the process of product design to create a service, fully satisfying users’ needs.

Participatory design — FlowMapp

This design method engages a group of <a target="_blank" rel="noopener noreferrer" href="http://www.flowmapp.com/glossary-term/stakeholders-interview">stakeholders</a> in the process of product design to create a service, fully satisfying users’ needs. It does not refer to the aesthetic issue of the product, but touches informational architecture and illuminates the functional part of the future software.

5f3bedb062449eb20eeea538_abstract_icon-22

Participatory design

An approach to design, where the structure of a new product or creation of additional features is conditioned by a particular hypothesis.

Hypothesis-driven design — FlowMapp

An approach to design, where the structure of a new product or creation of additional features is conditioned by a particular hypothesis. Further, the hypothesis shall be either proved or disproved with research and experiments.&nbsp; &nbsp;The method gives a huge source of fresh ideas and product insights. Adding to that, it gathers the team together, allowing each member to influence product development via forming and checking one’s hypothesis.

5f3bed7f8cfff9ee7bf7e7a6_abstract_icon-21

Hypothesis-driven design

The design concept displays the graphical solution to a design problem.

Design concept — FlowMapp

The design concept displays the graphical solution to a design problem. It represents the way of thinking, the logic connections, as well as the aesthetic approach. This is what the style, including the gird, color pallet, font sets, illustrations, comes from.

All terms in

Approach-UX(11 terms)