Tag: Integration Persona and User Flow

Integration Persona and User Flow

You can easily integrate Personas into the User Flow in one Project.

To add exsisting Persona to User Flow:

1. Open the Project,
2. Go to the User Flow,
3. Click on the icon for creating an item,
4. In the shown window, click on the (Personas icon),
5. Select the required Persona from the list.

To change the Persona in User Flow:

1. Open the Project,
2. Go to the User Flow,
3. Choose a Persona on canvas,
4. In the bottom bar, click on the (Personas icon),
5. In the shown Personas list, select another Persona.

Persona Blocks

All Personas consist of blocks (avatar, description, etc).
To create a block, hover and click on the  icon on the free space.

User picture

Pay more attention to the selection of realistic photos of the user’s Persona. This will allow you and your team to empathize with your users. Try not to use popular stocks photos or photo op, try to find the right photos that display the characteristics of your Persona.

How to create User Picture.

To create a picture of a Persona:

1. Create block,
2. Click on Upload Image,
3. Choose image to upload from your computer,
4. Crop the image to set the person thumbnail (the original image will not be cropped),
5. Confirm action.

You can configure the parameters in this block (CMD (CTRL) + E):

• Image — allows you to upload any image to the background, adjust the display method and opacity settings.
• Preview — allows you to customize the preview of the Persona in the top toolbar and Personas selection list.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Each Persona can contain only one User Picture block.

Main info

Please specify Persona’s basic information in the “Main info” block: “Name”, “Location”. Also, this block contains a free form for adding a key individual characteristic of a Persona.

Select a block style and add it to the canvas.

To edit content, click on the text. To apply the changes press Enter or click on space near the block.

You can configure the parameters in this block (CMD (CTRL) + E):

• Align — allows you to align tags relative to a block.
• Name — allows you to customize the color of the name parameter and the size of the pin.
• Short info — allows you to adjust the color of the parameter.
• Location — allows you to select the right icon, change the color of the icon, and change the color of the text.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Headline

An ancillary element for creating titles to any modules for full customization of your Persona’s content.

Select a block style and add it to the canvas.
Edit the title by double-clicking on a text. Replace or delete the icon by clicking on the icon.

You can configure the parameters in this block (CMD (CTRL) + E):

• Icon — allows you to select an icon for the block from the list of existing ones, as well as customize the right color.
• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Text

Empty text box. Designed to store any information in any form. Be creative!

Select a block style and add it to the canvas.
Edit a text by double-clicking on the text. To format the text, select the fragment and format it in the pop-up box.

You can configure the parameters in this block (CMD (CTRL) + E):

• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

List

Use the “List” block to create intuitive lists. Usually, the following parameters are specified: “Motivation”, “Frustration” and “Needs”.

The content of the lists is edited in the same way as the text block.

You can configure the parameters in this block (CMD (CTRL) + E):

• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Border – you can change the border border color settings and width as needed.
• Bullets – you can choose the point type and change its color in the settings of this parameter.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Valuebar

The main purpose is to display progress in an intuitive interface. Valuebar displays the necessary for designing a Persona of the specific target group, such as «software proficiency level», and any other useful skills for the designer and the whole team that can be visualized similarly.

To edit the text, double-click on it. If you want to show the icon before the text — select it in the options of the setting box.
To set the required value in the value bar, simply click on it.

You can configure the parameters in this block (CMD (CTRL) + E):

• Icon — allows you to select an icon for the block from the list of existing ones, as well as customize the right color.
• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Progress Bar — you can choose the type of progress bar: Dots, Line, Star, Emoji, and it’s value depending on the selected type. You can also change the color of the selected bar in parameter setting.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Services

Display services, brands, products, and social networks to characterize your Persona in detail, and analyze your current selection. Understanding the choices, needs, and challenges your Persona faces will help you identify potential funnels and sales channels.

Select a block style and add it to the canvas.

Click on the block to activate it. To edit icons, move the cursor and click on the icon.

You can configure the parameters in this block (CMD (CTRL) + E):

• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Technology

With the help of the technology block, you can visually demonstrate the choice of technical solutions of your users. Show what they use more often. A mobile device or a desktop? What browsers do your target group prefer?

Select a block style and add it to the canvas.
Click on the block to activate it. To edit icons, move the cursor and click on the icon.

You can configure the parameters in this block (CMD (CTRL) + E):

• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Tags

Information label that allows you to quickly classify a Persona.

To edit the text, double-click on it. To apply the entered text, press Enter or click on space near the block.

You can configure the parameters in this block (CMD (CTRL) + E):

• Align – allows you to align tags relative to a block.
• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Tag background – allows you to change the fill color of tag shapes.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Quotes

In the “Quotes” block, you can use quotes from real users that you received as a result of your research. Quotes should be relevant to the product or characterize the Persona, which in consequence will help determine the attitude of the target group to the product.
You can also use the information provided by the customer support department and the user’s feedback from the website.

You can configure the parameters in this block (CMD (CTRL) + E):

• Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Divider

It will help you logically divide information blocks to create an intuitive content structure in the description of your Persona.

You can configure the parameters in this block (CMD (CTRL) + E):

• Direction – allows you to define the horizontal or vertical position of the line.
• Appearance – allows you to adjust the line color and opacity settings.
• Line – allows you to adjust the dashed line and pixel width settings.

Image

You can use any photos in the process of creating a Persona to detail the characteristics and/or demonstrate the attitude of the target group to your product.

After selecting this type of block, you must select the image to upload from your computer. After uploading, it will adjust to the size of the block. You can resay it.
You can adjust the display settings in the settings box.

You can configure the parameters in this block (CMD (CTRL) + E):

• Image source – allows you to upload any image to the background, adjust the display method and opacity settings.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Background

Background block allows you to create a background layer for your info blocks using a color, gradient, or pattern image.

This block works on the same principle as the Image block.

You can configure the parameters in this block (CMD (CTRL) + E):

• Image source – allows you to upload any image to the background, adjust the display method and opacity settings.
• Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Personas Setting boxes

The appearance of the Persona blocks is configured using Setting boxes.

They are called up in several ways:

• Using shortcuts CMD (Ctrl) + E.
• Right click and select Edit item in the appeared box.
• Click on the block and click Edit button at the bottom panel.

In the opened panel, you can see all the possible block settings, such as: font size and color, backgrounds, list types and other characteristics.

Setting box sections

Setting box sections are a set of block’s settings that includes sections.

Preview

Preview — allows you to customize the preview of the Persona in the top toolbar and Personas selection list.

Image

Image — allows you to upload any image to the background, adjust the display method and opacity settings.

Background

Background — allows you to customize the background of the block by selecting the appropriate option from the list: disable background, fill, vertical or horizontal gradient.

Align

Align — allows you to align tags relative to a block.

Name

Name — allows you to set icon and its color, customize the color and size of the name.

Short info

Short info — allows you to adjust the color of the parameter.

Location

Location — allows you to select the right icon, change the color of the icon, and change the color of the text.

Appearance

Appearance – allows you to adjust the line color and opacity settings.

Text

Text — aligns text to the left, center, and right. You can change the color and size of the pin in the Text parameter settings.

Tags

Tags block – allows you to change the fill color of the tag.

Border

Border – you can change the border border color settings and width as needed.

Bullets

Bullets – you can choose the point type and change its color in the settings of this parameter.

Progress bar

Progress bar – you can choose the type of progress bar: Dots, line, Star, Emoji, and it’s value depending on the selected type. You can also change the color of the selected bar in parameter setting.

Icon

Icon – allows you to select an icon for the block from the list of existing ones, as well as customize the right color.

Line

Line section – allows you to adjust the dashed line and pixel width settings.

Direction

Direction – allows you to define the horizontal or vertical position of the line (Devider block).

Personas Tool

Personas building is a great way of exploring the user’s expectations, concerns, and motivations. By creating the Persona — whose behavior patterns are well understood — you can satisfy the broader group of people represented by it. FlowMapp is everything you need to tell great visual stories. Personas help a product team find the answer, “Who are we designing for?”.

Contents

• Managing Personas
• Personas Shortcuts
• Working with Personas
• Integration Persona and User Flow
• Share Personas
• Export Personas