Industry

Saas Tools
Office Management

Experties

Research
Design
Usability Test

Roles

UX
UI
Strategy

Tools

Miro
Figma

Redesigning a complex system for a better usability.

An effortless contract modification experience through clear and predictable features with a minimal and consistent UI design.

What's it about?

projo is a complex management software that enables customers to manage most of their office-related tasks, from Office management to HR management as well as project management.
In this project, I needed to improve the usability of the contracts editor.

My role?

I defined our the design strategy with our CEO and executed the whole design process in close consultancy with our product manager and customer success team.

Why this?

In this complex system, contracts are the single source of truth and their clarity and correctness define every other aspect of office management.

What does our UI analysis tell us?

Our interface suffers from some fundamental design problems that have a direct impact on users’ ability to get their job done.
Our users are creative architects and artists and demand better aesthetics and visual consistency.

Wrong visual hierarchy leads to discoverability problems.

The editor buttons are placed at the bottom of the page. This makes it hard to find them, specially if the table is a long one.

Inaccurate information and disinformation causes disorientation.

These detected mistakes, although rare, are still extremely alarming for our users' experience.

Visual inconsistencies that prevent the easy recognition.

Some functions have different looks in different views. for instance, the time-based billing in one view is a text and in another view an icon. This leads to confusion in recognition.

Users infoxication due to extreme information overload in the page.

the contract editor has multiple functions that if all activated lead to an interface with a cluttered interface and overwhelming number of buttons at once.

Misleading UI elements and patterns.

Some buttons should not be there and some call to action buttons that are unnecessary. These elements lead to confusion and even errors.

Visibility of elements reduces accessibility.

Some text sizes or weights are not big enough to assure user accessibility. In addition, some icons are also not visible and informative enough.

What did we learn from the users about the editor?

The contract editor on the one hand has to assure security to protect its sensible data against any unintended or accidental modification. On the other hand, it has to deal also with the complexity of offering numerous modification features to the users.

Contracts contain sensitive data and their accuracy is decisive for the office management success. As a result, only permitted users to have the access to contract editor and modification rights.

Who were the users i decided to interview?

I interviewed five users from five different customers and roles.

Why this wide range of  interviewees?

This wide range of user types is because contract editor is used by users with different roles such as CEO, accountants, and also project managers.

We’ve got fundamental problems here!

The contract editor’s design was based on the emphasis on security alone while overlooking the usability of the editor’s features.

As a result, besides the UI Design problems, the users' pain points originated from fundamental structural problems that lead to additional visual and functional problems as well, which altogether deliver a bad user experience.

Different looking contract and editor

The contract editor table looks different from the contracts table itself, causing users disorientation.

Too many different UI elements

The features use a wide variety of UI elements for the tasks, such as dropdown, checkbox, input, etc. That’s overwhelming!

Unexpected performance

Some features also do not perform as the users expected which is frustrating even for experienced users.

Tedious initiation

In order to use the editor features, the users have to first activate them, one by one, each time! That’s tedious!

Cluttered interface

The editor’s table cluttered with many buttons cause further confusion.

Features pop up and vanish in different places

Each feature's controller- based on its active or inactive -status appears and disappears on the table and in different positions! It's frustrating!

Deliver

Simplification is our salvation.

This combination of required security and numerous features makes the editor a complex system. We need to find a balance between contracts data protection and a user friendly editing process which enables the users to have an effortless contract modification experience.

Deliver Trust A clear editor’s status with the Lock/Unlock button

The easily recognizable lock/unlock button in a dominant position at the top right of the contract table is a strong visual cue that keeps the users informed if they are in the contract read-only or editing mode.

Eliminate Disorientation :  Same table for both the contract and its editor

Now that users are constantly aware of the system status, we can forget about separate and different looking contract and editor tables and perform the modification directly on the contract table.

Deliver agility : All editor's features are available and active.

Thanks to the clear editor’s mode status, we can now give the users also immediate access to all editor features. So no need to initiate features.
They are also able to select and modify multiple rows of the table data.

Reduce Learning : All features under the same button and perform at the same place

The similarity of features controllers in form of buttons, their fixed and logical position, as well as the similarity in their performance reduces the users' struggle to understand and learn how the features work. As a result, we avoid too many different UI elements, a cluttered interface, and features that pop up and vanish in different positions.

Design evolution

Here are the design concepts which their evolution and merge lead to the final optimized solution.

Design Option One

Design Option Two

The Combi Solution

Converged both designs to obtain the optimal solution

What has been the outcome?

During the prototype test, we received very positive feedback about the clarity and efficiency of the new design.
The partial implementation of the new design in the first phase has also obtained overwhelming satisfaction from the users.

What’s next?

Implementation of the rest of the design based on our users' feedback.

Get in touchExplore more