When a business tool leaves the '90s and moves into SaaS

The first phase consists in properly framing the project and the goals to reach. The whole project, technical and design team is brought together to set the context of the engagement again, take stock of what is in place and the work already done. An important step for defining the short-term goals while taking into account the long-term ambitions: redesigning the entire business tool, offering the platform to other organisations… Key constraints are identified and kept in mind throughout the project:

• move from a desktop application to a browser-based SaaS solution
• make the learning curve of this new platform easier
• help people get on board with the change
• take into account the habits, the uses and the work environment

As part of an iterative approach, we first support CERFRANCE Poitou Charentes in the redesign of the loan module. A great challenge that rests on a good understanding of the context, of the end users and of the different challenges raised.

The redesign of a business tool calls for a thorough familiarisation phase to understand the processes and the broader work environment. To start, we run an observation phase directly in one of the CERFRANCE Poitou Charentes branches. The aim is to see with our own eyes the workspace, the equipment used and the day-to-day of the staff. In parallel, we run interviews with the end users. The conversations help us better understand the way the tools are used, the relational side with colleagues, the workaround strategies in place (for example, using Excel for certain calculations that aren’t done in the software). This feedback gives us first directions for the future design of the tool:

• centralise the information and improve asynchronous communication
• make data tables easier to read
• understand the working practices and the interaction between the different modules of the current tool…

This hands-on time is the chance to test what we observed with the staff and to better grasp the needs and constraints identified earlier with them.

The project team also provides us with access to the test version of the module reworked in SaaS form. The fact that this first proof of concept has already been developed helps us take stock of the technical foundation and makes it easier to collaborate with the developers when designing the mockups.

For each objective to reach, the project team identifies constraints and needs: for example the need to categorise the loan-entry form and have a step-by-step tracker.

From there, we list the features needed to reach those objectives (for example, setting up a loan-simulation screen to advise the customers (an advisory approach being essential in these engagements)).

With the journeys validated and the main screens prioritised, it’s time to move to the structure of these interfaces. We bring the project and technical team together again to discuss the composition of each screen. To fuel the debate, the screens of the current tool, of the MVP and new proposals are compared. We provide blocks of predefined components (search bar, form field, button, drop-down list, etc.) that the participants will be able to stick onto a screen template to create the interface. A playful exercise that makes it easy to step back on the composition of the different pages, to rank the features while keeping an eye on the navigation between the screens. This workshop allows the participants to align on the vision of the tool as a whole and to find concrete solutions that address the on-the-ground issues:

• rationalise the content to make reading and working on the screens easier
• guide the user to reduce the cognitive load
• reduce the back-and-forth between the different screens to gain in productivity

The prototype is refined with the project team and the end users, by improving the journeys, moving certain components and simplifying uses.

For instance, during the tests, users tell us they would like to access the repayment schedule created directly once the loan has been entered.

To meet the time constraint, development starts in parallel. The idea is to give them the first elements so they can move forward on the skeleton of the module and its components.

Designing the visual identity addresses several challenges:

• gain in readability and smooth out uses
• plan an identity that adapts across all the tool’s modules
• build an identity aligned with CERFRANCE Poitou Charentes while still able to move beyond its brand guidelines

Decisive choices that have a real impact on use. All the more so for a business tool that will be used daily. With that in mind, we run a thinking exercise on the colour palette to keep a link with the existing identity. Work that also covers the choice of typeface, improving readability in particular for data tables. This thinking builds on the user feedback gathered during the observation phase (the screen size and resolution, for example) and on the wireframes produced.

The visual identity is then embedded across the full set of screens. We pay particular attention to specific elements such as error messages, notifications, and whether the icons are easy to understand. We put in place a design system shared with the development teams. That lets them rationalise the process by letting them move forward in parallel on the integration.