Starting UX design – User Flow and Interactive Prototypes

UX Design is a highly complex process. In order for the design of websites and applications to bring the expected results, a number of factors should be considered besides the appearance itself. 

Table of contents

1. Focus on the User
2. Why is it worth taking your time designing User Flow and prototyping?
   – What is the User Flow?
   – Design with the User in mind
   – User Flow for e-commerce
   – The purpose of early adjustments
3. Interactive prototypes in UX Design
4. Differences between User flow and Interactive prototype
5. 6 popular prototyping tools
   – SKETCH
   – INVISION
   – CRAFT
   – ADOBE XD
   – UXPIN
   – MARVEL
6. Why is it worth taking your time designing User Flow and prototyping?
7. Prototyping process
   – Links
   – Gestures & Transitions
   – Preview
8. Summary

For those thirsty for knowledge, we recommend the article: UX / UI Design – the make or break of mobile apps.

Focus on the User

The main concern is the User’s “feel” of the product – the impression of smooth, comfortable and intuitive interaction with the application. There are many ways of creating a perfectly useful, and more importantly- usable solution for customers. 

The following article focuses on visualizing the path a User follows when interacting with the product (apps or websites).

Why is it worth taking your time designing User Flow and prototyping?

What is the User Flow?

User Flow is a map that visualizes the entire path a User must travel to perform certain tasks. Put simply, it moves the User from the entry point, through a series of steps, to a final action – eg. a purchase of a product. You could say this path is the basis of the design process. Understanding the needs of Users is necessary to build a product that meets their expectations.

Design with the User in mind 

When designing a User Flow, one should always keep the following questions in mind:

• What is important for the User and what factors influence their decision to continue using the product?
• What additional information will the User need to complete a task?
• Are there any obstacles in the User’s way?

And most importantly:

• What is the User trying to achieve?

When answering these questions, I will give tips on what content and navigation links individual subpages should contain. If the User’s basic purpose is to browse a large number of different products, your website or screen will present a completely different design and functionality than if the main purpose was to buy the selected product and move on.

User Flow for e-commerce

User Flow can take many different forms depending on the site or application you design. A simplified, typical User Flow for an e-commerce website might look like this:

• The User begins his journey on the home page,
• On the home page, the User clicks the category icon,
• On the category page, they click a chosen product,
• On the product page the User adds the item to the shopping cart,
• On the cart page they click the checkout icon,
• On the checkout page they pay for the product, provides shipping address, etc.

This is a largely simplified version of a User’s path. Actually, the User could go back to choosing a category, add several products to the basket or use the navigation to search for products, or cancel the purchase. Due to the fact that there are so many different paths Users can adopt, User Flow is often modeled as “flow diagrams” with nodes for each of the main navigation paths.

The purpose of early adjustments

The aim of a more detailed User Flow analysis is to identify areas for improvement. If after analyzing our e-commerce website we find out that a large number of customers cease to act beyond the shopping cart stage and fail to make a purchase, we need to find out why this is happening. Once the issue is identified, we can start analyzing and addressing it. It’s good to test various ideas at this stage to determine which changes will have a positive effect on your User Flow.

Interactive prototypes in UX Design

Creating prototypes should start with wireframes. When we start creating the User Flow they will help us visualize the basic structure of the website/mobile app, before we start adding visual design and content. Already at this point we must take into account Users’ needs and possible paths they will take to fulfill them. Wireframing is nothing more than a way to design a website or an application on a structural level, without worrying too much (for now) about the final appearance of the product. We can do this easily by sketching on paper or using software like Sketch, Adobe XD, Proto.io and many others.

Differences between User flow and Interactive prototype

Once our User Flow and mock-ups are created, we can move on to the next stage of design – creating an interactive prototype. At this point, we can start adding the actual content that our final product will have. Unlike wireframes, prototypes are usually of high quality (high-fidelity), which allows the User to actually test the interface and interactions of the product. Tests carried out on the prototype allow savings in time and effort at an early stage of design.

What is the difference between these two design stages? Wireframes are our base, a simple sketch of what we are building. Conversely, an interactive prototype is a more elaborate version of the designed product, containing key elements, and clickable buttons to show step-by-step how the User will achieve his intended goal. The prototypes allow to verify whether the User Flow and wireframes make sense. Most of the corrections are made at these initial stages to avoid complicated changes later.

6 popular prototyping tools

Here’s a few popularly used design tools. The market offers a wide variety of them with new ones popping up all the time.

SKETCH

A vector graphics editor for the MacOS system, used to design screens and digital products. It is known for being a simpler tool for creating projects and prototyping than Adobe Photoshop.

INVISION

lets you upload project files created in Sketch or Photoshop and add animations, gestures and transitions to transform static screens into clickable, interactive prototypes. It also allows you to simplify the process of adding comments, allowing clients or team members to provide feedback directly.

CRAFT 

This is a plug-in for Sketch and Photoshop which simplifies the design process. It is a “bridge” connecting the graphic software with the InVision tool. It allows you to set the interaction between individual screens of our product and allows direct export of artboards from the graphics program to InVision.

ADOBE XD

This program needs no introductions owing to Adobe’s intensive marketing efforts. An unquestionable advantage of XD is that it works on both Mac and Windows 10. Additionally, if you buy a CC package, XD is included.

UXPIN

A web application created by Polish developers. It is and extensive design and prototyping tool. Quite recently, it has been expanded with “systems” – a tool that supports the management of design systems. UXPin does not have a free version. If you do not mind web-based online tool, then UXPin is really a solid solution.

MARVEL

One of the most convenient tools for prototyping, similar to Invision in ways of creating views in the program (eg graphic), transferring them to Marvel and interconnecting them accordingly. The interface is easy to use and I believe that you can learn it pretty much on the go.

Marvel is a web application, so again, regardless of your system, you only need a browser and the Internet. It also has a free version with a limit to the number of prototypes we can create.

Why is it worth taking your time designing User Flow and prototyping?

We already know that wireframes and prototypes allow us to determine if our User flow is correct and makes sense. Often, it turns out that some mock-ups are missing, or the User’s path has issues. Making corrections at an early stage is not only normal but also desirable – we save time and avoid fixing major mistakes in the final stages of the project.

We also know that prototypes allow for direct testing with Users or clients, which gives us the opportunity to avoid generating additional costs. Prototyping also supports the work of app developers. Once they get clickable screens, it is much easier for them to understand the meaning of actions and the idea behind the product, and thus the whole team’s work is greatly improved.

Prototyping process

To start the prototyping process, we export our sketched wireframes to Sketch (or another tool of choice). We create the artboards on which we will be preparing our mockups. Work on artboards is essential to create links (connections between screens) and hotspots (clickable points of navigations between screens).

Let’s assume that we already have beautifully designed screens in Sketch. We are now ready to put together our first prototype. In the past, Users had to synchronize with InVision and go into build mode in the browser. Currently, thanks to the Craft plugin, we can prototype directly in Sketch. After synchronizing the finished result with InVision, we can test and share our project with others.

Links

We start by adding links for switching between screens / subpages. The link will connect the layer of our artboard on which we are to perform the action, e.g. a click, with the target layer. What’s important, we can add a link from any layer inside an artboard with any other artboard. After establishing the connection, we can add special, animated prototyping properties such as transitions and gestures.

Adding / Preview

Gestures & Transitions

A dialog box will appear on the screen where we deciding what type of gesture the link runs and what transition we want to use for the animation of switching from the initial screen to the final area. Both mobile and web/desktop projects have their own properties to choose from. For example, if we design a desktop version of the prototype, we would choose a click instead of tap or double tap as a gesture. The following videos show examples for a mobile application.

Gestures: Adding / Preview
Transitions: Adding 1 / Adding 2   

1. Instant  Preview
2. Dissolve Preview
3. Push Right Preview
4. Push Left Preview
5. Slide Right Preview
6. Slide Left Preview
7. Slide Up Preview
8. Slide Down Preview
9. Flip Right Preview
10. Flip Left Preview
11. Flow Preview
12. Pop Preview
13. Slide Dissolve Preview

Preview

When our prototype is ready, we can now make sure the User Flow makes sense and the transitions work properly. We can review the prototype directly in Sketch, on Sketch Cloud, or on iOS devices and share prototypes with clients and colleagues.

Another option is to synchronize the project with InVision. We can then open our prototype directly in the browser’s tab and make various interactions, such as browsing, checking, commenting and sharing.

Summary

User flow is an essential part of the UX. It describes the steps Users take to access functions or to perform tasks in an application. No matter if we are building a simple or extremely complex project – every click or shift is part of the User Flow and should make sense.

Users should be able to correctly interpret our application at the first contact, without much effort spent on figuring out  how it works. Creating a proper User Flow positively influences every stage of the development project, and when done right, improves it. Good communication with programmers and other team members is the key to creating truly amazing project. Communication with the clients becomes easier as well, as all feedback/discussions and testing of functions is made easily available and shareable.