iam digital transformation customer experience user interface

Behind the scenes: how TrustBuilder’s new user interface was designed

Mieke Mynsberghe
Mar. 22, 2021
SHARE

One of the highlights in TrustBuilder.io Suite is the new user interface that gives security officers a better customer experience and enhances their productivity. To ensure maximum useability, TrustBuilder worked together with Mono – a Belgian design team that offers expertise designing digital products and services. With Mono founder and senior UI/UX designer Johan Ronsse, we take a look behind the scenes. 

 

UI Design blog

First of all, Johan, tell us about Mono. What is your mission in life?

johan ronsseJohan Ronsse: We started Mono because we are convinced there is a need for more quality in the design of digital products and services. Software design needs to take objective criteria into account such as user-friendliness, performance and speed. At Mono we look both at front-end and back-end design. User experience of both the end-user and the developer is key to us. Traditionally, the end-user interface has received a lot of attention, while the back end or the ‘back end of the back end’ has been neglected. The rationale behind that is that developers are technical people, so they can cope with a bit of complexity. But if you’re using a system on a daily basis, it’s still important to be as productive as possible. Over the last ten to twenty years, the expectations of the baseline quality of software have increased. The success of iOS and Android has made everyone expect more. That’s why more companies are now investing in the quality of the ‘back end of the back end’.

We don’t necessarily want to make things simpler. After all, software tackles very complex issues. But we want to make things as clear and user-friendly as possible. With any software, there is always a steep learning curve. As Bruce Tognazzini wrote in his ‘Apple’s Flatland Aesthetics’ essays, it’s good to have a learning curve if you want to remain sharp enough to tackle complex issues. But this should not be an excuse not to make software user-friendly.

What to you are the principles of a good user interface?

Johan Ronsse: The key principle is ‘affordance’. Affordances are properties of objects which show users the actions they can take. If you see something, you know what you can do with it. Let me give you an example: a door has a doorknob. You know you can use that knob to open the door. The same applies, for instance, to buttons in software. There is a tendency to make buttons look less like buttons all the time. Just compare how buttons were presented in Windows 95 with how they look in iOS or Android. There has been a huge evolution in user design over the last few years. In 2021 you need to find the balance between an interface that is clear enough, so you have the right affordance and an old-fashioned design. Human beings learn, and we will sometimes recognize something as a button, even if it doesn’t look like a button.

Affordance is the key quality in a user interface. That is also something we can influence as designers. As I said, there are other objective qualities such as speed or performance. That is something we can influence less. For instance, if you are looking at back-end calls, that is not the domain of a designer. We need to make sure the design is clear and understandable. At Mono we always say that something looks useable if it looks good. Something good-looking is more appealing to start working with.

Striking the right balance

How did you start your project of redesigning the user interface of TrustBuilder?

Johan Ronsse: As a first step, we looked at the existing interface and assessed how it was used. It’s important to create a new user experience, while also thinking about the people who are used to the existing interface. You need to strike a balance for both first-time users and experienced users. You don’t want to throw out all the existing concepts. The software already had a history and many concepts of the user interface are still valid. So you will want to keep those. In the case of TrustBuilder, we found concepts such as user attributes, scopes, access flow,… We needed to translate these concepts to the new user interface. So while keeping the concepts, you still want to offer a new user experience. Sometimes we also look at the processes themselves, for instance to make filling out forms more user-friendly or providing defaults that allow the security officer to work more efficiently.

Challenging the logic

How much of an IAM specialist have you become in working with TrustBuilder?

Johan Ronsse: As designers we always need to become mini-experts in the domain that we are working in. That’s why we started the work for TrustBuilder by taking a two-day crash course on how TrustBuilder works. To make a good design for an IAM system you need to understand two-factor authentication is, multi-factor authentication, how access flows are built,… We need to study the domain, but remain naïve enough to make a proposal that challenges the existing logic. We are fortunate to look at the domain with the open view of someone who is not a specialist.

It must be quite fascinating to see where functionality and design meet?

Johan Ronsse: We go deeper than just the look of things. We typically work with user stories. “As a TrustBuilder administrator, I want to set up a new access flow”, is an example of such a user story. By asking these questions, we try to get an insight into how things work, and we try to make these functionalities clear by drawing them. In doing that, we raise the question of how and why things happen. User stories are a key element in developing software features. And we use these stories to design the feature. That is where development and design meet.

The importance of prototyping

How did you assess the existing interface when you started working on TrustBuilder?

Johan Ronsse: I think we found a number of impressive elements that were a little outdated. So for a lot of features, all we needed to do was modernize the features. For other features, we challenged the way of working and the process.

We build a design system and offer a kind of Lego kit for the developers. As they further develop the software, they can use a number of patterns that we’ve designed. That way, they don’t need to come back to us for every new feature. These patterns apply, for instance, to building a list, showing a form, how do I delete something from the system,… Once these patterns are defined, the developers can easily reuse them. Your developers can always consult the style guide that we’ve created, which contains all the patterns and the code of the patterns that the developers can reuse.

Looking back at redesigning the TrustBuilder user interface, what are you most proud of?

Johan Ronsse: What differentiates Mono is that we always go very far in prototyping. We delivered a prototype that contains all the pages we designed, both in a drawing program and in the form of html css pages. The access flow editor is really cool. It’s interactive, you can move it, zoom in and out. We were very pleased with the level of interactivity that we created. 

Interested in discovering our new look & feel? Check out our demo.

Marketing technologist

Related articles

TB-phone-as-token-overview

TrustBuilder and nextAuth form partnership for mobile authentication

TrustBuilder and nextAuth announced an OEM partnership, which enables TrustBuilder to embed the nextAuth software into ...

Read more
TrustBuilder announces TrustBuilder.io Suite

TrustBuilder announces TrustBuilder.io Suite

With TrustBuilder.io Suite, Identity and Access Management (IAM) specialist TrustBuilder announces a significant ...

Read more
Monizze takes part in TrustBuilder.io marketplace

Monizze joins growing TrustBuilder.io marketplace

Monizze, issuer of electronic meal, eco, gift, sport/culture and consumption vouchers, has joined the ranks of Service ...

Read more

Ready for a demo?

Book a demo
trustbuilder-demo