UX Case Study – Renault Digital

Performance Analysis Dashboard (Panda)

Client : Renault Digital

----------

Introduction

This project is by far the most technical project I have worked on. What you see on this page is two years of working on this product. It was a blast to work on it. I hope you like the story of the making of Panda !

I have arrived in Renault Digital when the company was just created, in March 2017.
Renault Digital is
a joint-venture between Renault and the Boston Consulting Group.

titre-journal-renault-digital-bcgtitre-journal-renault-digital-bcg

----------

"Pour rester innovantes, les entreprises cherchent l'inspiration en s'entourant de start-uppers et en adoptant leurs techniques de créativité. Les grands groupes ont besoin d'air pour innover.

En marge de son technocentre de Guyancourt, Renault a ainsi inauguré à Boulogne un laboratoire cocrée avec le Boston Consulting Group (BCG) et baptisé Renault Digital. Dans cette ruche à la culture hybride, 25% de salariés maison bossent en rotation avec 25% de start-uppeurs et 50% de free-lances : on y confronte ses idées, on débat, on enrichit ses connaissances et on invente le travail de demain."

www.capital.fr, "Ces grands groupes qui cultivent l'esprit Start-Up"

----------

Recruited by the BCG, I was in charge of the UX and UI Design of the Performance Analysis Dashboard. A dashboard which will be used by all Renault teams, Agile and non Agile, first in France, then around the world.

So what's the Performance Analysis Dashboard ?

The Performance ANalysis DAshboard (later named Panda) allows people from Renault and Renault Digital companies to monitor, edit, analyze, compare, update every single projects of Renault in terms of performance, financials and agile aspects.

----------

Users and Using Context

Panda is a gigantic holder of informations. It is meant to be used by a lot of different type of users in Renault Digital and Renault.

Each user can 
use, collect and provide informations on the web app in a different way, for different matters and objectives.

Top Direction, Product Owners, Agile Coaches, Human Resources, Product Managers … Depending on your role, Panda will be used differently and serve a different purpose.

----------

Let's talk about the different steps of the project !

 

 

case-study-framing-part-ux-designcase-study-framing-part-ux-design

The personae

We firstly defined together the personae. Since there will be a lot of different use of Pandas, we had to define the exact goals and roles of each user. We created 5 : 

1° Patricia, Top Management : wants to have a quick access to all Renault Digital Projects Data, so that she can take decisions based on a better understanding of the current status.

2° Bertrand, Function Control Tower : wants to enable his colleagues to effectively update their project data reporting, so that he can have the latest version accessible for steering commitees.

3° Romain, Product Owner/Product Manager : wants to have an easy to use interface to update his project reporting, so that he can focus his time on his project development. 

4° Alice, Central / Function Controller : wants to have all the Renault financials data up to date in one single place, so that she can have a clear view and understanding of the costs and values of each project or function.

5° Elise, Workload Entry Manager : wants to easily generate an extract of the current worload entry of all RD projects, so that she can communicate more efficiently with POs / PMs and other stakeholders.

Alright, we have our personae ! Now let's see how they will interact with the product by creating a story map.

----------

 

The Story Mapping

During several workshops, we start to work on the story mapping of Panda, to have a better vision and understanding of the features to work and implement. 

We start to prioritize features and pages to be worked for the MVP.

----------

 

The challenge

Basically, all the information and data Panda will hold is already there in Renault and Renault Digital. But this information is spread via a thousand differents PDF, excels, powerpoints, slides, emails, google docs... It's a mess. 

The whole point is to unify all those documents in one place. Make the process of accessing and understanding
of this data easy, without a heavy cognitive load on the users. 

Before taking the pen to start drawing and doing wireframes, my goal is to understand how users interact with the data provided. Take a look at all those files that users have to read and access to, and check how the information is displayed by those files.

As you can see below, there is a LOT of data. Of different data, with different meanings and uses. The goal is to unify the access of this information. The goal is to make it less messy, more accessible, more user friendly. But how ? 

----------

So let's take a look at what we have so far ...

 

renault-digital-panda-first-documents-blurredrenault-digital-panda-first-documents-blurred

Not exactly user-friendly or aesthetically pleasing, isn't it ? 

Well... challenge accepted ! 

Being in charge of both the User Experience and the User Interface of this product, I have two main goals.

1° Make this product easy and enjoyable to use. Let's make the access to this data effortless. Let's try to make a product so user-friendly, people actually enjoy using it !

2° Make this product BEAUTIFUL. Let it be a pride for Renault Digital. Let's transform what was first only excels and spreadsheet, into a kickass dashboard. Let's show people that data can be beautiful ! 

On to the wireframes.

wireframes-and-mockups-renault-digitalwireframes-and-mockups-renault-digital

The homepage

Regardless of the user and its role in Renault Digital, the homepage is the gate before you reach your personal objective in the product. Therefore, it has to provide global and concise informations about Renault Digital, and be useful for everyone.

I already have the KPIs and metrics I need to put in the page. It's now time to think about an efficient way to regroup the same type of informations, and to make it both UX and UI friendly.

I start to draw some ideas.

ux-design-wireframes-homepage-panda-dashboard-renault-digitalux-design-wireframes-homepage-panda-dashboard-renault-digital

With the team, we quickly agree on the third wireframe that you see above. We try different solutions and pass it around our users and stakeholders ; this version, amongst three others, is the favorite one. We start with option 3. 

We need to work fast and be able to present our work to the stakeholders and top direction of Renault Digital in the best possible way. 

Renault Digital being a whole new company, a lot of projects are being launched simultaneously (25 at the beginning). Some will continue, some will be stopped in steering committees. The best ones will prevail.

----------

The opportunity

We need to impress the Top Direction right from the beginning. Since we all agreed to the structure of the homepage for our MVP, I decide to work directly on high quality mock ups, choosing fonts, colors, icons, general art direction. I work relatively fast, so moving from low-fi wireframes to high fidelity is not a problem. 

Here is the opportunity : Renault Digital being a new entity, there is no definite UI Design or Design System created yet. Plus, there is no Head of UX and UI Design yet in the company (he will arrive a month and a half later, and meanwhile, there is a lot to do), meaning designers like me have no definite decision to follow or apply.

It means that I have two options. 

Take as less risk as possible, and keep the general design of Renault in terms of UI. Colors, fonts, icons. Pick elements at the Renault Design library and start from this. 

Create a whole new identity for the product. Since Renault Digital is a whole new company, why not innovate and differentiate our product ? 

After talking about those options with the team, we choose option 2. Let's add a bit of spice in our project !

----------

This is the MVP version of the homepage after a quick work on the mock ups.

This homepage is designed in 2 weeks notice after the start of the project (UX + UI)

All the Project Names and Numbers / Results have been modified due to non disclosure agreement

Panda-Dashboard-Homepage-Renault-Digital-blurredPanda-Dashboard-Homepage-Renault-Digital-blurred

The team and stakeholders of the project are ok with this first version. We have something organized, clear and modern.

Instead of going for the yellow Renault's color, we go for a smoother blue. Also, depending on the status of the project, we establish a color code, which will be useful for other pages in the near future.

ux-ui-design-wireframes-mock-ups-renault-digital-blurredux-ui-design-wireframes-mock-ups-renault-digital-blurred

The other pages needed for the MVP

For the launch of the MVP, we will need 4 other pages :

1° The Login / Sign up Page

2° The Edit Profile Page

3° The Digital Performance Dashboard Page. A critical page of Panda ; this is where all the financials and governance aspects of each project of Renault DIgital will be displayed. 

4° The MTP Dashboard Page. The analysis of the Value and Cost of each department in Renault Digital ; Sales, Engineering, etc.

 

1° The Login / Sign up Page

Renault-Digital-UX-case-study-login-pageRenault-Digital-UX-case-study-login-page

2° The Edit Profile Page

Manage-profile-page-renault-digitalManage-profile-page-renault-digital

3° The Digital Performance Dashboard Page

This is one of the most important pages of the product. 

The DPD allows you to have a look at every Renault Digital Projects. It allows you to know when each project have started, who is in charge, what stage the project is in. Basically all the details you need to know about. It also allows you to take a look at how much it costs and how much value the project is estimated to have in the near future.

There is not much choice here but to have a spreadsheet for this data. Let's try to make it as clear as possible within the time frame we have.

For a quick find of what the user is searching for, we also work on a filter modal.

Digital-Performance-Dashboard-UX-wireframeDigital-Performance-Dashboard-UX-wireframe
Digital-Performance-Dashboard-Renault-Digital-blurredDigital-Performance-Dashboard-Renault-Digital-blurred
Renault-Digital-Performance-Dashboard-UX-design-blurredRenault-Digital-Performance-Dashboard-UX-design-blurred
Renault-Digital-Performance-dashboard-filer-modalRenault-Digital-Performance-dashboard-filer-modal

4° The MTP Dashboard

renault-digital-MTP-Dashboard-blurredrenault-digital-MTP-Dashboard-blurred

Alright, we have our pages. Quick user testings and feedbacks let us know we are heading in the right direction. We are getting ready for the launch of the MVP. 

----------

Remember the opportunity for this project ?

In May 2017, the Head of UX and UI Design has arrived in Renault Digital. Now is the time to know if it was a good idea to take the risk to create something completely new in terms of UX and UI.

We are the most advanced project in all Renault Digital. While all the projects are still either working on the wireframes or low fidelity mock ups, we already have high fidelity ones. The Head of Design passes in every office to check the work already done. When he arrives in ours, we have all our mockups, wireframes displayed on a board. 

The Head of Design validates my mock ups and art direction !

From now on, I am free to continue designing my own design system and graphic chart. Even better, the project will be shown and used in Renault Digital as an example for other projects, in terms of UX and UI Design. Bingo ! Our strategy paid off !

I quickly create a design system for our web app :

Renault-Digital-UI-elements-by-lucas-lengagneRenault-Digital-UI-elements-by-lucas-lengagne

We have our MVP pages, the tech team coded and deployed it. It's time to test our users and gather feedback from them !

user-testing-coveruser-testing-cover

Testing Method

We tested approximatively 30% of our current users in order to have realistic results. The test was one hour long for each user. I also recorded every test with a camera and microphone. Here were the steps of this test : 

Introduction to Panda

2° Use Case Scenarios (where we ask the users to do specific tasks in the product and evaluate how they do it) and/or Open Discovery of the product

3° DEEP and SUS UX Surveys at the end of the session (see examples below)

4° Debrief with the user

5° End of the test

----------

Objectives and Goals

 Gather feedback

Discuss about actual features and way to improve them if needed

Locate possible bugs and fix them quickly with the dev team

Quantify, rate and evaluate the user satisfaction

The results were to be presented in the next Panda Steering Committee, in front of the Top Direction of Renault Digital.

----------

Focus on the UX Usability Scales Surveys and Results

Those Two UX Surveys are extremely efficient to quantify and rate precisely the user satisfaction. Once analyzed, the results provided allows you to see how much the product is appreciated, and in which aspects it needs improvements.

DEEP (Design-oriented Evaluation of Perceived Usability) - Inventors : Yang, Linder & Bolchini, 2012

SUS (System Usability Scale) - Inventor : Brooke, 1996 (and still effective !)

Here are the two tests below, and how much Panda scored.

DEEP-and-SUS-UX-testsDEEP-and-SUS-UX-tests
UX-tests-DEEP-and-SUS-renault-digitalUX-tests-DEEP-and-SUS-renault-digital

Results' Meaning (DEEP & SUS)

For the DEEP Results, every score equal or under 3 means this specific part needs improvement. We scored higher than 3.50 for every aspect of the product, which is a excellent indicator of the user satisfaction.

For the SUS Results, Jeff Sauro established the average score of the test at 68/100. A product is considered poorly designed for a score around 39/100, good for 73/100, and excellent starting from 86/100.

For the first version of our product, we scored 82.5/100, which grants the status "Close to excellence". For a MVP, this is beyond expectations !

----------

I also made a keyword cloud based on what our users said in face to face interviews, so that we can analyze recurring feedbacks and feelings about Panda. I also wrote down the main ideas of future features we had so that we can work on it and improve our product for the V1.

keyword-cloud-ux-testkeyword-cloud-ux-test

What's next ?

Our MVP is out, feedbacks are great, everything's good ! 

For the next steps, we focus on continuous improvement of the product, and creating new pages.

Step-IV-next-UX-pages-renault-digitalStep-IV-next-UX-pages-renault-digital

The Project Dashboard page

Definitely one of my favorite !

The Project Dashboard page is the dedicated page of each single project ; You have access to all the details of the project you are looking for ; The team running it, financials aspects, KPIs, Roadblocks, Main Achievements of the project ... 

This is the page where we can get a bit funky and creative in terms of UI, because we have to incorporate a lot of icons and the page is quite graphic in itself.

The first UX drafts : 

Renault-digital-panda-project-dashboard-wireframes-minRenault-digital-panda-project-dashboard-wireframes-min

The high fidelity mock ups (here is one of the definite version, I will show you the continuous improvement made on this page and the other ones a bit further down) :

Project-Dashboard-blurredProject-Dashboard-blurred

As said above, here we can get a bit creative with the icons. I create the followings for this page : 

Icon-design-Renault-Digital-Panda-DashboardIcon-design-Renault-Digital-Panda-Dashboard

There are also some modals on this page : 

ux-design-renault-digital-project-dashboard-modals-minux-design-renault-digital-project-dashboard-modals-min

The Find a Project Window Page

Panda-dashoard-ux-find-a-project-results-blurredPanda-dashoard-ux-find-a-project-results-blurred

The Portfolio Review Page

Portfolio-review-blurredPortfolio-review-blurred

The RD Management Dashboard

RD-Management-blurredRD-Management-blurred

The Project Dashboard for Steering Committees

Project-dashboard-ux-design-blurredProject-dashboard-ux-design-blurred
etape-5-continuous-improvement-ux-designetape-5-continuous-improvement-ux-design

The Digital Performance Dashboard improvement

At the beginning of this case study, I have told you about the critical importance of this page. Indeed, the DPD allow the user to have a look at every single Renault Digital Projects, in terms of financial aspects. Some of our users, the Control Towers, have to edit it every month.

They manage a LOT of projects. They deal with a LOT of numbers. It can be confusing and be a heavy duty. It was already the case with their previous way to edit it (remember the thousand excel files I was talking about ? here they are). The least we can do is make their labor easier, and try to build a page as efficient as possible. 

The current pain points

We get feedbacks from some users about the number of projects displayed on the DPD ; Indeed, at 100% size in their Internet browser, there is not enough projects displayed. It needs improvements.

At the time, some users see the DPD like this : 

DPD-MVP-versionDPD-MVP-version

The page clearly need to have more projects displayed. Not only that, it also need features that will make the editing and searching of projects easier.

We had some ideas for a while and some features in mind, we just needed time to actually work on it after the launch of the MVP.

I start to think about features and UX improvements we could develop for the DPD. I create quick wireframes and animated GIFs of those proposals, to show to the Panda Team in UX Workshops.

Together, we will choose which options should be presented to the users, which options are doable in a short amount of time, and which options should be stepped aside.

----------

Option 1 : Searchable Columns

So far, in order to find their project, users need to sort the results by project names, or functions.

There is a much quicker way to access directly a project you're interested in ; have a research placeholder on top of each column.

Option 2 : Customizable Columns

Depending on your user profile, some columns informations displayed are of no use for you. You don't need to edit them, and/or you have no interest taking a look at them.

In that case, why not allow the user to only display the columns he wants ? Hide the columns not needed, and keep the most important ones.

Option 3 : Visible and deletable filters

Once you chose your filter options on the Customize Display modal, say you want to quickly delete a filter. Instead of going back to the modal, why not allow the user to quickly suppress it right above the DPD spreadsheet ?

Option 4 : Quick view of a project

What if by clicking on a project, you access to a modal where all the informations you need (to edit or visualize) are right away available ?

Option 5 : Multi modal

Based on option 4, by clicking on several projects, you see several modal of each project selected.

Option 6 : Inline Editing

Pretty self explanatory. Highlight the content when you hover it.

Option 7 : Display density

The user can choose how many projects he wants to see displayed on the page. 

----------

We organize a UX workshop with the Panda Team to decide which options to keep.

We choose to keep 4 features : the searchable columns, the customize columns, the quick view of a project and the display density.

Renault-Digital-solutions-kept-digital-dashboard-minRenault-Digital-solutions-kept-digital-dashboard-min

I schedule face to face interviews with our main users of the DPD page, the Function controllers.

First step of the meeting will include some shadowing, to see how they interact with the product ; second step is to introduce them the features we worked with the Team, and see which ones they like.

With those interviews and the users feedbacks, we quickly realize that the feature "quick view of a project" is a waste of time for our users. Indeed, they sometimes have to enter a lot of data on different projects simultaneously. They don't need to open a modal of a single project, they need to have a global view of everything, all the time.

Thanks to the interviews, we now know we were heading in the wrong direction with this one. The other 3 features are validated by everyone.

Here is the final version of the DPD, with the new features included in the page :

Performance-Dashboard-with-customize-displayPerformance-Dashboard-with-customize-display

Users now can quickly find their project with researches bars on top of each columns ;

they have a customize display modal that allow them to filter results with precise settings;

they also have a lot more projects displayed at the same time, with 3 different display options.

It's been quite an improvement since the MVP version !

Renault-digital-panda-performance-dashboardRenault-digital-panda-performance-dashboard

The "Add a Favorite" feature

While we were running some UX interviews to gather feedback, and asking for improvements the users would like to have, we have noticed a recurring need.

Every single one of our users have their own project(s) they care about. Whatever the page they need to go to, most of them need to find specific projects right away. In that case, why not work on a "favorite projects" feature ?

This feature would have to be available in every pages ; whatever your user profile and the page you spend most of your time on, this feature would be exactly where you would need it to be. 

This is how we expressed our user needs in wireframes and mock ups :

Project-Dashboard-UX-draftsProject-Dashboard-UX-drafts

On the Homepage

digital-projects-ux-drafts-ui-wireframesdigital-projects-ux-drafts-ui-wireframes

On the Project Dashboard

Project-Dashboard-UX-wireframes-UI-mockup-blurredProject-Dashboard-UX-wireframes-UI-mockup-blurred

When you add a new project in Panda

Add-a-new-project-UX-wireframes-UI-mockupAdd-a-new-project-UX-wireframes-UI-mockup

In the Portfolio Review

Performance-dashboard-ux-wireframes-ui-mockupPerformance-dashboard-ux-wireframes-ui-mockup

Other continuous improvements types and methods

We also enhanced the web app on the UI side, version by version. Either it was a personal/team decision or driven by user feedbacks, the goal was to craft a better product every day passing.

The perfect example in the homepage, which you will see on the final designs section below.

panda-renault-digital-final-design-partpanda-renault-digital-final-design-part

In 2 years of work, Panda improved a lot. Here are the Final Designs, along with some first versions / final versions comparisons. 

Bonus content : I have also added some screenshots of our Zeplin, just so you can see how many different versions we worked on for every single pages. Yes, there are a lot

----------

The Homepage

Panda-Dashboard-UX-design-final-homepagePanda-Dashboard-UX-design-final-homepage

The first versions / The final version on the right

Panda-dashboard-final-designs-homepage-blurredPanda-dashboard-final-designs-homepage-blurred

The Project Dashboard

The first version / The final version

Panda-dashboard-final-designs-project-dashboard-ux-blurredPanda-dashboard-final-designs-project-dashboard-ux-blurred

The Digital Performance Dashboard

Performance-Dashboard-with-customize-displayPerformance-Dashboard-with-customize-display

The first version / The final version

Panda-dashboard-final-designs-DPDPanda-dashboard-final-designs-DPD

The Simplified Project Dashboard and Project Dashboard for Steering Committees

Panda-dashboard-final-designs-simplified-project-dashboardsPanda-dashboard-final-designs-simplified-project-dashboards

Other pages which didn't change a lot through time : 

Panda-dashboard-final-designs-last-pagesPanda-dashboard-final-designs-last-pages

On to the last part of this case study, the conclusion.

last-part-the-conclusionlast-part-the-conclusion

Thoughts, results and lessons learned

During those two years working on this project, I have learned so much. As I said earlier, this was by far the most technical project I have worked on. I am really proud of what we accomplished. 

Panda was first developed for Renault Digital Europe. Then, it got bigger.

Panda is now used in 4 continents and 19 countries. The app was also bought by Nissan.

I had the chance to work with an amazing team, which made Panda possible. If you are reading this, thanks to all of you guys. 

I have learned that no matter the size of the company and the limitations one think it could have, if you are bold enough to push your ideas, and can back it up with logic and creativity, it can work.

I have remembered that no matter how good an idea or feature can look, it will always be the user who is the final judge on that, not you.

And so, so much more. This was an awesome project and I feel lucky I was a part of it. 

This is what the persons I have worked with/for have to say about my work.

----------

"Rarement nous aurons eu un élément aussi complet dans son domaine que Lucas. C'est une véritable licorne UX. Il a été en charge du projet PANDA (outil de pilotage et performance projets) chez Renault Digital, de sa création (phase de framing) jusqu’au suivi du projet en V1, V2 …. Lucas était en Lead de l’UX et UI du projet, en maîtrisant parfaitement ces deux domaines.

De l’aide à l’élaboration des personas, user stories, à la construction des wireframes, architecture de l’information, des maquettes HD en passant par la création de la direction artistique de l’application, de sa charte graphique et de tous ses composants graphiques (icônes, logos, boutons de navigation…), puis de leurs optimisations au rythme des versions. Lucas a également réalisé l’entièreté des tests utilisateurs aux étapes clés du projet en instaurant des best practices UX au sein de Renault Digital (questionnaires DEEP & SUS, enregistrements vidéo et audio des users, nuage de mots, questionnaires à complétion de phrases …), ateliers UX avec l’équipe Panda, analyses quantitative et qualitative … Il est un véritable UX/UI Designer au sens propre du terme.

Il maîtrise parfaitement son sujet et
a fait de l’application Panda une app référence dans tout Renault Digital France, puis à l’international. Il est à noter que parmi tous les projets Renault Digital, le projet Panda a été le seul à se distinguer par sa charte graphique différenciante par rapport à la charte graphique standard de Renault. L’UX et l’UI de Panda, et par extension de Lucas étant retenues et montrées en exemple pour représenter l’innovation de cette nouvelle structure qu’est Renault Digital.

Lucas fut donc encouragé et libre de créer sa propre identité graphique et sa propre UX pour ce projet, ce qui est à retenir pour une entreprise de cette envergure.

Lucas a un sens aigu du client, dévoué, pro. Il est force de proposition et challenge le client tout en étant à l’écoute. Je le recommande sans hésitation."

Esra Soner
General Manager, Head of Digital Performance @ Renault Group

----------

"I have worked with Lucas for more than a year while he was UX at Renault Digital. He is one of the rare UX designer able to have a perfect skills split between :

- Strategic vision for the product, with long term perspective

- Hands on tactical skills going to meet customers to seek the real pains and how to remove them

- A great
UI eye and talent to design options the developers can integrate.

Moreover, he is very fun, always ready to socialize, though not to long to go back to work.

Stéphane Wojewoda
Agile Coach @ Renault Digital

----------

And that's it ! If you have made it this far, thanks for reading.

Long live Panda !

Renault-digital-panda-teamRenault-digital-panda-team

© Lucas Lengagne. All rights reserved.