If there’s one challenge every business faces, apart from customer acquisition, it’s creating user experiences (UX) that lead to purchases and customer retention. While there are many strategies you can use to achieve that, one of the most important is a simple two-word concept.
Whether it’s a website or app, it takes good flowchart to create an exceptional UX. A UX that will keep users fulfilling the goal of your website (or app) and even coming back for more.
What is Flowchart?
In it’s simplest form, flowchart is a visualization of the journey a website or app user will have to take to complete a certain action.
A flowchart breaks the journey down into simple steps, allowing the design team to better reduce any friction the user may encounter at each step by creating the most efficient route to the finish line.
5 Effective Hacks to Creating a Good Flowchart.
Now that you understand what flowchart is and its importance, let’s quickly look at 5 hacks to creating a flowchart that results in exceptional UX.
1. Answer the Right Questions.
One of the first steps in designing an effective flowchart is to answer the right questions – questions that will help you create the perfect journey for users. Typical examples of questions you can ask include (but are not limited to):
- What is the end goal?
- How is the user supposed to accomplish it?
- What elements can you include to give them the confidence to see the journey through?
- What barriers need to be eliminated to reduce friction?
Answering these questions correctly will help you lay a perfect foundation for your flowchart. It will also help you discover unique approaches that you can take to differentiate yourself.
2. Understand All Your Entry Points.
An entry point simply means the “doorway” to your website. Examples include:
- Landing pages
- Social media posts
- Search results on Google
Understanding these entry points is critical to designing a great flowchart. This is because each entry point essentially means starting the buyer journey from a different level. As such, in order to create fluid flowchart, you will have to understand every entry point and how to ensure that each user transitions into the customer journey smoothly.
Another reason to consider entry points is that some users may be first-time visitors while others are recurring customers. You’ll have to create personalized journeys for each group to ensure that they have a smooth flowchart. Understanding the various entry points will help you do just that.
3. Create User Personas.
A user persona is simply a representation of the different types of users who use your platform. Understanding each persona that visits your website or app is crucial to understand what they are looking for and how they want to achieve it. This knowledge will help you understand the elements in your design that your users will find necessary and those that are redundant.
While creating flowcharts for multiple personas may seem like a daunting task, it’s actually easy with our User Flow Tool. Creating flowcharts for each different persona will greatly improve your UX and, ultimately, increase conversions.
4. Minimize the Steps Users Have to Take.
No matter how beautiful your website design is or how irresistible your product may be, a flowchart with unnecessarily too many steps will discourage some users. This is why, when designing your flowchart, try as much as possible to keep the number of steps to a bare minimum.
Every step a customer has to take requires more effort, thereby increasing friction.
Two simple tips for cutting down the amount of work a user needs to do before reaching the finish line are:
- Only ask for the most important information
- Auto-populate as many fields as you possibly can
Reducing the number of steps required will ensure that users remain engaged throughout the process.
5. Incorporate Visual Feedback.
When people navigate through your system, one thing they’ll always look for is feedback. Each step on their journey must be accompanied by a visual (or audio for the visually impaired) response. Good examples of feedback that improves UX include:
- Pop-ups. Affirm a user’s actions and encourage them to take the next step by using popups. These also work well in letting users know that their input has been recorded.
- Progress bars. By letting users know how much they have progressed on their journey (and how much of the journey is left) is a great way to keep users engaged. It also encourages them to complete all the steps as they know exactly where they are on the journey.
Feedback is crucial to flowchart as it helps encourage users to take the next step. Without feedback, users may hesitate (this is a form of friction), repeat the same action (leading to frustration) or drop off altogether due to uncertainty.
6. Don’t Ignore Heuristics.
Heuristics simply means the rule of thumbs in designing a user-friendly system. While it is tempting to be innovative and break the norm, sticking to flowchart and usability best practices is the surest way to provide users with an exceptional UX. A few heuristic factors to keep in mind as you design your flowchart include:
- Error prevention. Eliminate error-prone conditions or provide users with a confirmation option before they go ahead with such a step.
- Easy user control. Users need to feel in control all the time. And when they make a mistake, make it easy for them to go back to the previous step.
- Consistency. Never use the same word or visual elements to mean 2 different things. The use of any one element should be consistent throughout.
- Keep designs simple. A simple design or UI is the best gift you can give your users. This is because it will save them the time they’d otherwise spend trying to figure your system out.
When it comes to UX, you don’t need to reinvent the wheel. Stick to the best practices and you’re bound to make life easier for your users – thereby eliminating friction.
Bonus Flowchart Hacks for Exceptional UX.
Creating a flowchart that results in an exceptional UX takes a lot of strategic planning and combining of different elements.
- Label all interactive elements clearly. UI elements such as links and buttons should be clearly labeled is such a way that users will know exactly what will happen when they interact with them.
- Test your flowchart. Before launching, make sure everything flows smoothly by rigorously testing your flowchart. This will help save you and your users from some nasty surprises.
- Keep users focused. Eliminate all distractions and unnecessary elements in your UI. Only use elements that will help the user achieve their goal and give them a great experience while doing so.
Giving users an experience to remember is critical in this day and age – after all, you’re not their only option. Because of this, do everything it takes to design an exceptional flowcharts that will help you nail your UX.
Creating Effective Flowcharts – The Key for Creating an Exceptional UX
With the competition to attract and retain customers becoming fiercer by the day, you have to pull all the stops to ensure your system succeeds in its purpose. To do that, you have to nail your flowchart as it determines the experience users will have. And as you well know, in today’s world UX is everything. Give users a great experience and you can bank on them being hooked.
Shahid Abbasi is a growth marketer and CRO specialist at Cruzine. He helps individuals and agencies in digital transformation by improving their products’ user experience, bringing them traffic, sales, and revenue growth. He blogs about SEO and content marketing and marketing on Marketer Search. Connect with him on Twitter @ShahidAbbasy.Read more
This article will tell you a true story about a startup led by a small team of enthusiasts.
Bandlink is a service that allows musicians to quickly and conveniently upload and organize information about their upcoming concerts and performances, release or create a full-fledged website, without attracting developers.
To date, Bandlink has already helped 10 thousand of musicians to share important information with their fans, which has provided us with almost 1.5 million visitors. Unfortunately, before creating Bandlink as it is now, we were destined to make the same mistakes other new teams made. And some teams are even making these mistakes right now. We want to share our story with all creators of digital products because this certainly is a useful experience.
How It All Began
The history of Bandlink begins with its creators’ sincere love for music and the desire to devote as much time to it as possible. It was decided to develop the product for those who shared our interests – people with hearts full of music, eager to follow their favorite artists. We chose a name for the service – “Bandtraq”, decided what features we want to see in it, conducted a survey of potential users and began the developing. From our point of view, Bandtraq was supposed to be a platform where all the information published by a musician was conveniently organized and categorized. The idea to provide information about upcoming concerts, new tweets, and releases in one place seemed beautiful to us.
We spent a lot of effort on development, and in our opinion we made a good product – Bandtraq worked perfectly, but, unfortunately, was not getting popular. The increase in amount of unique users and new registrations was very little. We conducted a number of promotional activities, but still did not receive the increase we were looking for. We found ourselves in a situation where we spent half a year developing a good-quality product that was interesting only to a very little group of people.
Our forces were running out, but we tried to realize the mistakes that were made. This realization allowed us to carry on developing a good and useful product.
The main problem was that after the decision to create Bandtraq, we did not pay enough attention to the practice of classical UX research. At the time of creating Bandtraq, we had only had a general idea of our target audience and its needs. Also, during the development period a competitive offer appeared on the market – it was basically duplicating our service functionality for free. This fact served as a basis for the subsequent problems associated with the Bandtraq monetization.
Looking back with the experience we already have, it is worth to mention that it is practically impossible to work with the target audience within the framework of the above-mentioned project (or other projects like this), even in the absence of competition. There are two main reasons for this:
- Lack of product involvement (Bandtraq practically was a wall filled with information blocks, where users could only share or view the source material)
- Lack of motivation to pay for a subscription (It was difficult to explain the benefits of our service to an ordinary user. ‘All this information can be found on the Internet for free – why would I pay?’)
After we analyzed the existing problems and looked at our product from the inside, we researched the market again and noticed something:
For 2018, the number of downloads of music releases from iTunes has decreased by 27%, and the sale of music albums on physical media has decreased by 41%. On the other hand, there was a growth in streaming services popularity. Today, streaming services occupy 75% of the music market, leaving only 25% to other ways of listening to music. Musicians regularly publish their releases at various platforms and services, such as Spotify and Apple Music. The number of streaming services is constantly growing, and this forces musicians to publish their work on as many services as possible. They understand that streaming services operate on a subscription system, and if a person has paid for a subscription on one service, he will not be able to listen to a song or an album until it appears on this service.
This makes musicians publish posts that have a really large amount of links to various streaming services. We have distinguished this ‘pain’ because of the analysis of our service. Studying this problem in more detail, we found several possible solutions. Bandtraq had led us to a market in which our technology and experience could successfully fit. Analyzing future competitors, we decided to develop a new product, using the previous technology stack as a base. We began with a UX research in order to test our hypothesis and evaluate the expediency of moving from B2C to B2B.
We have interviewed different musicians and other people that are connected with the music industry in one way or another. The purpose of the interviews was to test the hypothesis that was born during the period of our reflections on the work done. To skip ahead, our hypothesis was confirmed – almost every interviewee who had to publish releases complained about the inconvenience associated with social media publishing. We were also able to understand the problem deeper, as well as look at it from different angles.
«It is incredibly tedious to collect all the links to different websites. I tried to paste them into one post, so that people could find everything in one place, but it was rather difficult. It is possible on Facebook, but impossible on Instagram – there is a limitation to the amount of characters that can be put in an Instagram bio» Artyom, 22, cloud rap artist
During the interviews, a lot of musicians have marked Instagram as their top-priority platform, because the audience here is very active. However, it is practically impossible to include links to all streaming services there due to the fact that links can be published only in a profile description, and there is a character limit.
The knowledge about future users of our service received during the interviews proved to be priceless. We used the obtained data to create the Empathy Map in order to distinguish and work out each ‘pain’ of our future Clients. The clustering of problems obtained from the interviews allowed us to form the following points of interest:
Readability (for listeners)
- A lot of links (hard to find the right one),
- Long URLs (the posts are hard to read),
- No Instagram links (many people use Instagram as their only social network),
- Too many ticket services for one event (difficult to choose the most appropriate offer).
Time (for musicians)
- Time-consuming activities (a musician or a manager has to spend a lot of time to consolidate information),
- No Instagram links (impossible to publish the right amount of links in a profile due to the character limit),
- Confusion when publishing (while copying a link to the clipboard, the user may forget whether he had already copied a particular link or not – this is due to the large amount of links that need to be collected in one place),
- Lots of platforms (publishing on a large number of platforms is necessary for a musician, because fans use different platforms to listen to music – it is important to make the releases available everywhere),
- Impossible to maintain (publications with releases can not be organized into a unified system – this is a huge concern for managers),
- A lot of concerts (no convenient way to create and edit information regarding upcoming tours),
- Social networks publishing (posting the information in all the social networks takes a lot of time).
After seeing the ‘pains’ that our future users experience, we began to form the Personas of ideal Bandlink users. It was decided to conduct more ‘in-depth’ interviews with our key Personas – an Indie Artist and a Manager, at that time. Let us get acquainted!
Mark. 18 years old. Indie artist
This is Mark, he lives in Moscow. As a child, he had been studying at a music school for some time, but he left it because he did not see any perspective in learning how to play classical instruments. Despite the lack of music education, Mark continues to study music and publishes rap releases regularly. He has a small fan base, but it is not enough to provide him with sufficient income at the moment. Therefore, Mark has to do a part-time job to be able to buy new music equipment and pay the university tuition. Mark needs the university because his parents do not agree that he is being serious about working in music industry and that he is ready to devote his life to it. Despite the difficulties, his fan base (though not so big yet) instills him with hope that he can get a lot more popular.
- To get popular,
- To prove to his loved ones that music is a serious occupation,
- To be financially independent.
- Lack of funds sufficient for comfortable living,
- Slow fan base growth speed.
Alexey. 31 years old. Music manager
Alexey was born in St. Petersburg, but he currently lives and works in Moscow. He graduated from the university with a degree in law, but from the very beginning of his studies he could not imagine himself as a lawyer. Alexey is very passionate about music – he devoted a lot of his free time attending concerts of various bands that came to his city. Over time, Alexey’s musical taste became more demanding, however, concert organizers did not invite the musical groups that interested him to the city. After visiting a music festival in Europe, he had an idea to organize a concert of one of his favorite bands in his hometown. Alex took the first step to make music his profession. During his studies at the university, he successfully organized several concerts, earned some money and realized that he wants to continue doing this. The more concerts Alexey organized, the more he got acquainted with various musicians and music managers. Over time, work in the industry and new acquaintances provided him with the opportunity to supervise various musical groups. Alexey is fond of his work – he likes working with musicians and likes to be a part of an industry that inspires millions of people including himself.
- To increase the popularity of supervised artists (to increase his income),
- To have an opportunity to spend more time with his family and friends.
- Lack of free time,
- Inconvenient (spontaneous) working schedule.
Statement of work
By the time we ‘got acquainted’ with the ideal Personas of Bandlink, we began to understand how our product should look like. In order not to repeat the mistakes of Bandtraq, we decided not to develop the ideal version of our service right away, but to develop an MVP.
The minimum statement of work was as follows:
Bandlink on the outside – the page with all the links to a musician’s release. The page should load instantly, have a short link (to fit in Instagram bio) and a ‘Share’ button (to quickly copy the link to the clipboard or share it on social networks).
Bandlink on the inside – an intuitive dashboard that should allow a person that has no IT background to quickly create, edit and manage links. It is also necessary to make links to new releases appear on different platforms automatically, once the link to iTunes is made. This function should relieve the user from the pointless ‘copy-paste’ activities.
Information architecture development
In conditions of limited development funds, we could not allow any extra expenses. We decided to fix the requirements before proceeding to the product prototyping. For this, we used FlowMapp.
FlowMapp is a UX platform that helps to collect and organize product development requirements, and also allows you to manage a project throughout the whole process of development using an interactive sitemap.
Using FlowMapp, we have created two projects: Bandlink / Marketing and Bandlink / Dashboard.
Bandlink / Marketing includes all the pages, blog and other information pages of our service, which are designed to attract new users and to show the service documentation.
Bandlink / Dashboard is the service itself. It includes main functional features, dashboard and pages that allow to create new links. Using the dashboard, the user interacts with the product, researches how to solve that or another ‘pain’ of a particular Persona.
Take a look at the screenshot – you can see how intuitively the hierarchical structure is presented. FlowMapp allowed us to design an information architecture and look at the project from another point of view. Detailed information architecture allowed the designer and developers to visually assess the scale of the development from the very beginning, leading to appropriate time requirements.
Using FlowMapp, you can add blocks of information, files, links and comments inside every sitemap card. We have used those functions in order to see the context. The statement of work was always in the cards description, every card had a comments section where we discussed various relevant topics, and we always kept the archives with the content in attachments. We have also successfully organized the navigation through the hierarchical structure of sitemap on FlowMapp, based on prototypes made in Figma. The thing is, when the designer started to create the design, he used Figma as a prototyping tool, but to keep other team members from spending time studying the frame layout logic in his project, he added Main Link to the current frame in FlowMapp, thereby providing quick access to the current frame for the whole team.
After we finished the development of Bandlink’s navigation system, we have started to install labels on sitemap cards. This allowed us to quickly understand at what stage the development of a particular page was at.
Labels that were used during the course of development:
- Unique design,
- Feedback required.
It should also be noted that in the process of development the overall number of labels has increased, and labels became narrower:
- Text required,
- Pictures required.
We have used such labels on pages where only illustrations or text were required – everything else was finished.
FlowMapp allowed us to properly organize the workflow in which each participant could easily find the necessary information despite being in the office or at an outsource.
User Flow Development
Let us return to a stage of Bandlink development where we had the first version of the information architecture ready. In order to think over the experience of interaction with our product for each Persona and to understand the principles of our service better, we started designing User Flow using FlowMapp.
User Flow are finished user scenarios that are built based on the data obtained through conducted UX researches.
Over the course of User Flow development, we highlighted both the entry points for our Personas and their experience in interacting with our product. For this reason, we have developed a lot of User Flows, grouping them with particular Personas. The examples of User Flow are displayed here.
The development of User Flow provided us with better understand of how our service works, and most importantly, made it clear for our users. The next stage was prototyping and release, but we will tell you about these stages in another article.
Looking back, it is important to mention that the time we spent on researches had already paid off in early stages of product development. There is also a classic example of “Before” and “After” – the improvements are clear. Failure of Bandtraq and then integration of preliminary UX studies, followed by Bandlink’s dynamic growth. Despite the fact that Bandlink provides us with good results, we continue to explore the needs of its target audience. First Personas of Bandlink allowed us to develop an adequate subscription plan for our service.
Throughout the course of product development, we are now able to understand our audience deeper and to work out their every ‘pain’. The number of our service’s Personas is also rising and the service is changing along with the needs of users.
Of course, the process of development may be launched without using the above-mentioned frameworks like Persona. However, those useful tools greatly speed up and improve the process of development. This is also a good way to improve the teamwork – we have engaged programmers and designers to the process of Persona and User Flow development, which in turn helped them to better understand the product and needs of the audience and sped up the overall development process.Read more
- The Significance of UX Methodology
- Visual Sitemap
Reviewing a cool shot on Dribbble or a top case on Behance, a novice designer who is not familiar with the delicacy of web development may think that in order to become a professional and create successful projects single-handedly, it will be enough just to learn how to make beautiful pictures, and make some nice animations ‘here’ and ‘there’. They think that these simple actions will provide them with high income, and all the media resources will be interested in their opinion.
Only a small number of people can estimate the real amount of work that they will have to do before creating their “first artboard” on a new project. This article is about the unappreciated work that usually remains behind the scenes.
The Significance of UX Methodology
The development of a good product begins with the research work, and the first task of any designer on a new project is observation.
Observation is an underestimated skill that is neglected by many newcomers with an impostor syndrome. The lack of time evaluation skills, customer pressure and a tendency to generalize — all this drives them into a conditional ‘black wigwam’. There, the disorientation leads them to chaotic actions and inconsistent decisions, and the result is usually frustrating. To avoid such cases, it is necessary to understand that the product is created for the user. Therefore, the designer is required to understand his target audience. This simple conclusion is the key to understanding the significance of the basic UX Research concept. The UX planning tool helps the designer to determine user behavior and prepare the most intuitive and responsive interface. Nevertheless, the user experience research methodology implies a high number of tools that need to be applied depending on the project and budget you have.
Interview is one of the basic tools that allows you to understand the user needs. The UX interview is based on the sociological research practice and is verified by time. The significance of the interview results depends on the question – it is directly proportional to the number of interviewees and the representativeness of the sample. Interviews can be divided into two groups: “moderated” (polls) and “unmoderated” (questionnaires).
Moderated interviews can be classified into three types:
Classic – a regular interview, with specific questions and answers to them. In order for it to be useful, it is necessary to interview as many users as possible. The main benefit is to compare the answers received.
Disoriented – an interview in which the interviewer usually does not use questions prepared in advance, or tries to minimize their number. In this kind of interview, the interviewer sets the abstract frame and listens to the interviewee. Here is an advice – when conducting this type of interview, use a voice recorder to be as involved in the story as possible.
Action – this type of interview is defined as a contextual observation. One of the popular cases is the ‘Uber’ design team, whose specialists worked together with taxi drivers, consulting with their target audience and integrating the user experience into the development of the new interface.
Card Sorting is often carried out in the framework of moderated testing. In this type of testing, the user is presented with a set of cards with terms that he must catalog according to his subjective representation of the hierarchy. In result, we can obtain relevant data on the understanding of the hierarchy by the user and use the information obtained when creating a Visual Sitemap.
Tree Testing – a moderated testing, in which the top element of the Sitemap is provided to complete the task given to user. The user is asked to explain a particular action that he performs in the process of completing the task. Such testing allows you to check the logic of the site map hierarchy.
A/B Testing – the most popular survey in the UX study. A/B testing is necessary if you have two competitive solutions. The reason of A/B testing is to randomly provide each option to a different number of users, the results of such testing can serve as proof of an assumption in a disputable situation.
Guerrilla testing – one of the way to conduct testing on a free site, in a shopping center or cafe. Unconditional plus of such testing is minimal expenses. The downside is the minimal sample representativeness. For this reason, this methodology should be used for projects with a large user base.
A persona is a collective image of the user, which is formed by a set of researches. If you define a persona, you can control the expectations and needs of users, embodied in one fictitious profile.
There are three key parameters of ‘persona’ – user description, environment description and tasks description.
User description – key parameters of the user, his gender, age, occupation, goals, and more personal information are indicated.
Environment description – territorial factor and context of use, this column contains the place and time at which the user interacts with the product.
Tasks description – the tasks that need to be solved by the user.
The main purpose of the ‘Persona’ tool is to get to know and see the image of target audience. Persona identification affects the decisions throughout the development path. The positive effect of the persona is often proved in situations where the Client provides data on the target audience and asks for new functionality to be developed, but when conducting a study and compiling a Persona Card it becomes clear that the Client’s target audience is not as was stated, and it is necessary to develop the exact opposite of which the Client requested at the beginning.
Customer Journey Map
CJM is a way of determining the user needs at different stages of interaction with the product. CJM is formed on the basis of ‘Persona’ and allows you to think about the individual route of the user. By designing a CJM, you can determine the points at which the user will pick a product of your competitor instead of yours.
CJM is presented in the form of a table in which the ‘Customer Goals’, ‘Channels’, and ‘User Flow’ are reflected.
Please, see the following article in order to learn more about User Flow:
“Barriers” and “Ideas”. Filling each block at the corresponding stage of interaction with the product allows the designer to understand the user for whom he is designing it. When designing a CJM, it is important to maximize empathy at each stage of user interaction in order to try to understand his thoughts and emotions when interacting with the product. Nevertheless, the base on which CJM is built is the result of research of the target audience and the definition of a particular ‘Persona”. Otherwise, you can get an irrelevant user travel map.
A Visual Sitemap is a content navigation planning tool. Sitemap development requires an integrated approach. In order to be able to plan a valid map, it is necessary to conduct in-depth researches. When planning website navigation, the designer must see the product and its navigation hierarchy through the eyes of the user. This is the only way to create a Sitemap with the help of which there will be a possibility to correct the user’s path in future, providing him with the necessary information as quickly as possible.
In addition to the research work carried out by the UX specialist, it is important to take into account the semantic core clustering data provided by the SEO specialist when designing a Sitemap. The preparation of the semantic core and the use of analytical data for a website design – are the main topics of this article.
The direct purpose of the UX research methodology for the designer is to ensure that the users’ needs are understood and implemented. It is the need for awareness of the target audience that the designer requires after he begins to explore the interface patterns more thoroughly. The questions ‘Why does this UI element have a similar shape? Color? Or why is it located in this place, not in that?’ The designer opens a huge world of UX, where every design decision is justified and supported by research. In the frame of this article, we gave a superficial definition of a small list of tools that needs to be integrated into the workflow at the very beginning of the path of website development.Read more