UX CALENDAR – DECEMBER 21 – Userflow, the right tool to gain height in an already mature product.

During one of my missions as a UX/UI designer, I found myself in charge of a perimeter of an already mature banking application. Whether related to functionality or UI, the journeys were advanced and already numerous.

The system design, sufficiently rich, diversified and structured, makes it possible to quickly prototype new high-fidelity courses without having to go through Mid-Fi wireframes. The implementation of a system design makes it possible to reduce development costs and to keep the general consistency of the product. This consistency has a significant advantage for the user because it allows him to find himself on familiar ground and to easily associate visual patterns with functionality or a way of organizing information.

Only then, as a designer (guarantor of the user experience) we quickly find ourselves having to create, manage and update countless prototypes and screens that are very similar but which respond to different use cases. Navigating through the screens and projects in progress then becomes a real challenge.

My objective through this article and to share with you the tool that allowed me to put order in this tangle of paths and maintain a global vision. The implementation of Userflows gave me the necessary help for the creation, updating, organization and communication of the different paths within the teams. And here's how...

#1 WIREFRAMES / PROTOTYPES AND THEIR LIMITATIONS

Creating wireframes and prototyping have major and immediate benefits. They allow us to quickly test our screens and quite early in the project. The objective of a prototype is to make specific use cases tangible. Thus, they make it possible to live the user experience, they become a medium of exchange during the test phases.

If you are already at an advanced stage of your Design System, creating high-fidelity prototypes can be extremely fast. They are also essential tools to convince a client by allowing him to project himself.

As we have seen above, prototypes have a key role in user experience design. However, they allow to have, at the moment T, only a screen by screen vision and within the framework defined by our use case. From an organizational point of view, it is difficult to understand the place of a particular screen in the middle of the general workflow. Above all, as we delve deeper into the development, the product becomes more complex, we realize that we have to deal with many scenarios, not initially taken into account.

Indeed the prototypes produced generally represent nominal cases and often the “Happy path” but what about the other cases?

For example :

  • How should I show that a button can refer to different screens depending on the status of the user?
  • Should I prototype these two versions to visualize and test the user experience of these two ramifications?
  • How should I integrate error cases into my prototypes such as loss of connection, server problem? Should I make a dedicated prototype?
  • How can I represent the triggers for these error messages in my prototype?
  • Should I create versions according to the status of users (profile memorized / not memorized / Enrolled / Not enrolled)?
  • If the user is already enrolled in a feature or if he has not finalized his subscription process, do I have to skip certain steps depending on the situation of a user?

The role of a designer is to foresee all these cases and to provide ergonomic solutions. But all these different cases are alternative scenarios that combined together can lead to very many possibilities. Is it possible to create prototypes to respond to all these scenarios? Assuming that the product has a budget and the time necessary for the declination of all these screens, what problems can the prototypes raise?

  • The difficulty of keeping all these screen variants up to date, especially within a rapidly evolving system design.
  • The difficulty in evaluating the impacts that the modification of a screen may have on the rest of the courses having this screen in common.
  • The time allocated to creating screens, organizing them and sharing them with developers / POs.
  • The difficulty for an external speaker to find so many versions.

We realize that using prototypes as a communication and management tool is no longer enough. It comes to a certain limit if we want to respond to all the different cases.

Considering a macro approach will make it easier to navigate this maze of possibilities.

#2 THE INTEREST OF USERFLOWS

As we have seen above, the more complex a system becomes, the more difficult it is to understand/organize/maintain the product as a whole by the sole use of prototypes. Where does the usefulness of coupling this tool with a Userflow come from?

The Userflow makes it possible to illustrate the movements through a system, it shows which steps the user will have to go through to achieve his objective. Next are the level of details we can integrate the user decisions and the paths that result from them. It is also interesting to integrate the technical constraints which can be decisive in the flow of the product. When used at the right time in projects, Userflows can both increase the speed of iteration formation and improve communication within the product team.

Just like Wireframes, Userflows can be presented with different levels of detail :

  • The more rudimentary the Userflow, the more your approach will be focused on the steps that will meet the main needs and objectives of the users. This level of detail is very interesting because it gives an overall idea of ​​the different stages and the number of screens that will have to be prototyped. This makes it possible to return to the global function without dwelling on the details.
  • The higher the level of detail, the more you can integrate finite elements of interfaces, technical elements or user decisions. By reaching this level of detail you will then be able to have a detailed vision of the different branches allowing you to reach the user's objective.

Here are some major benefits of using Userflow :

  • The advantage of using this medium from the start of the design is to be able to "map" the routes in a macro way, but above all to be able to change them accordingly. It is also interesting to see your Userflow as a living and evolving work tool. It goes hand in hand with technical constraints, business developments and user needs.
  • Conversely, it is difficult to develop certain screens without the support of this tool because we do not realize the impact that this can have on other use cases having this screen in common. Indeed, by using it you will be able to view the ramifications at a glance and therefore all the screens that are likely to be impacted. This makes it possible, for example, to develop this screen by taking into account all possible scenarios, thus avoiding duplication and reducing development costs. On the other hand, if the usage is too different from what the user or business demands expect, it is possible to deviate and create a new version with full knowledge of the facts.
  • On a prototype, it is difficult to integrate the technical constraints which can have a very strong impact on the final user experience: Waiting time / Server calls / Security checks. Mapping this type of information can already give good clues about where potentially there may be errors or delays. This makes it possible, for example, to provide “Shimmerings” to make the user wait or to prepare error cases with contextual, humorous or slightly emotional messages.
  • This also makes it possible to present the different courses in a macro way to the different interlocutors of the project. For example, it is an asset for the Data team to have this type of representation. This allows him to visualize the different branches and user decisions and to be able to develop the "Tagging Plan" accordingly.

#3 Example tool:

In this part, I would like to introduce you to the collaborative Userflow creation tool that I particularly appreciate: Whimsical.

Most :

  • Getting started is extremely simple even for someone who has never used similar tools.
  • It is very easy to modify an existing “complex” Userflow without undoing everything and spending too much time on it.
  • The possibilities of customization are not very numerous but simple, aesthetic and well done to meet all the main needs without getting lost in complexity.
  • Do you want to facilitate the work and communication process between developers and your design team? You will be able to take advantage of this collaborative tool allowing several people to work on the same file at the same time. You can comment, tag collaborators on specific elements of the document.
  • This tool also allows you to integrate links and images (Like interfaces to Userflows). It is however regrettable that it is impossible.
  • This software also integrates other tools which are not the subject of this article but which remain real assets (Mindmap, Sticky Notes, Wireframe).
  • The price is reasonable: Free for reviewers and 10€/month for publishers.

The lessers :

  • Too bad we can't have previews of the artboards of Invision, Sketch or Figma which would allow the update of a real Wireflow automatically.
  • The free version offers only one collaborative work plan.

 

See you tomorrow for new surprises in our UX-Republic Advent calendar!

 

Clement Guillot, UX-UI Designer @UX-Republic

 

 

 

Great hidden word game!
A hidden word has slipped into the text but has nothing to do with it. Yet this word is important to us. If, on the day of publication, you find it and post this article on Twitter first with the hashtag #CalendrierUXRepublic and the hidden word, you win a set of UX-Cards or a Set of Zoning Cards. Be careful, you can only win once... then you have to give others a chance 😉!