Customer 360

How I helped a team rethink the information architecture of its CRM tools.
Product Type
Type de produit
CRM
Landing page proposition
Proposition de page d'accueil
The search bar suggested on this landing page required a complete new version of the existing architecture of information to become feasible.
La barre de recherche proposée ici reflète un travail en profondeur de refonte de l'architecture d'information de 3 application distinctes qui doivent être fusionnées pour les utilisateurs.
Company / Organisation
Entreprise / Organisation
Air Liquide Asia and Pacific
Project delivered in
Livré en
December 2019
Achieved results
Résultats
  • The merge of three applications with a new information Architecture.
    Finding out how to merge three separated data structures was key to design a unified solution.
  • A revisited navigation principle
    The idea of a uniq access point for information came quickly but tuning it rightly took time.
  • The start of a design system
    Flows and screens where too numerous to be designed so I had to find another way to give a coherence between numerous views.
  • Design acculturation
    Flows and screens where too numerous to be designed so I had to find another way to give a coherence between numerous views.
Activities
Activités
  • Contextual research
  • User research
  • Information Architecture
  • User-flows
  • UI Design

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content2.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Case Study
Etude de cas
Reading time :
Temps de lecture :
5 minutes

Introduction

In June 2019 I went to work for three months in Singapore within a team of IT specialist that were part of the hub of big french industrial group. They were brewing internally most of the software they needed. They were the only regional hub of the company doing that rather than relying on shelf products. This peculiarity raised some interest in my office in Paris.

They had little design capabilities which initiated a collaboration. After a break and my return in Paris I continued to work for two month on the subject before handling it over. This is the tale of this project.

Find the right focus

The brief

The defined project I embarked on was requesting help on the merging of three existing tools to shape a new CRM platform.

Adjusting the approach

During the first week I conducted stakeholder interviews and a few user interviews of the existing platform. My first framing was attempting to push the perfect design project where we go and meet users, shape personas, roll out user scenarios and transform them onto low-fidelity mock-ups.

Such framing wasn’t taking in account the organisation I’m working for. There was very short deadlines and they needed to start developing new components very fast. These teams were little accustom to design methodologies and design deliverables thus this was also an opportunity to adjust my approach. This led to sketch first user-flows and rapidly test ideas with the team responsible for the development of the platform.

Thus I decided to build low-fidelity mock-ups that would ignite feedback and refine the core challenges we needed to solve before my departure.

A unique access point

The first core challenge that I identified was to converge and have a unique access point for the available information. In other words, we needed to force a single user-flow to access a specific information. This challenges implied to rethink a new search engine1 as well as a new information architecture.

No items found.
1
A mock-up describing what would look a dynamic search engine within the system.
1
A mock-up describing what would look a dynamic search engine within the system.

Rethink the information architecture

Manage complexity

After several weeks of work and different unsuccessful attempts to suggest a new information architecture. I made a proposition which generated a lot of feedback from the developer of the solution2. These developers where also taking part in the product ownership and where key levers to move forward the product. According to them I had simplified too much and my prioritisation was not suiting identified requirements. I suggested then that we work on a spreadsheet to decipher correctly the information architecture.

2
An unsuccessful attempt to simplify the information architecture and functionalities. This was a pivot in my way to approach the design challenge.

A solid base

Later in October when I was back in France, while collaborating with a Chinese colleague who helped me a lot I suggested the following new architecture3.  This new information architecture enable a clear and clean navigation throughout the contents and their pages.

This new information architecture unlocked the dead ends I was stuck in to propose a unifying layout for the product.

No items found.
3
The new architecture that unlocked many navigation issues within the searches and the envisioned functionality of the tool.
3
The new architecture that unlocked many navigation issues within the searches and the envisioned functionality of the tool.

A new navigation principle

Thanks to this new information architecture I managed to elaborate a new organisation of the tool and reassess its navigation principles. The following examples4 shows different state of the search user flow I described to give as much specification as possible to the development team.

No items found.
4
Here is a userflow going from entering the first character in the search bar up to displaying advanced research fields at the end.
4
Here is a userflow going from entering the first character in the search bar up to displaying advanced research fields at the end.

This new information architecture unlocked as well the fixation of a layout for the page presenting information about customers. The following example5 shows the project section of a prospect customer.

No items found.
5
The prospect customer page. Its structure, menus, visual elements and functionalities are similar in all the other pages.
5
The prospect customer page. Its structure, menus, visual elements and functionalities are similar in all the other pages.

The result

Thanks to my work, the teams in Singapore have been able to build their new CRM on a new base. My work resulted in :

  • A new information architecture.
  • A revisited navigation principle.
  • A new visual design suited for many use-cases though it can’t be considered as a design system work.
  • IT teams who participated a lot more in the design process of a new application.

These teams now see the importance of involving designers upfront when they want to build or improve a tool they are owning. Indeed a new designer was involved to follow up this project in 2020 to pursue the work I’ve been doing. Tests were conducted with users in Australia and met success according to my former manager.

To conclude this case study, I would like to share three interface explorations that ultimately became irrelevant in relation to the key issues we identified throughout the project.

No items found.
6
Three interface exploration aiming at accompanying sales representatives daily tasks.
6
Three interface exploration aiming at accompanying sales representatives daily tasks.