Hemea

Back-office B2B

Context
The platform was built bit by bit, the modules being added gradually without UX/UI work. Following the arrival of future features and considering the already present complexity, it was necessary to rationalize and operate a redesign in preparation to the addition of these new blocks.

▶ Timing

March 2020

▶ Role

Lead UX/UI Designer

▶ Partners in crime

Pierre-Olivier Fleckenstein
Project owner

1.Research

The users

They are professionals with specific functional needs.
Their use of the platform is almost exclusively on Desktop.
The majority are used to using complex technical interfaces, but with an help available easily and quickly as it remains a work tool.

The platform and tools

Here is a simplified diagram showing the different Hemea's spaces. Highlighted you will find the portions concerned by this project.

The different spaces


B2C Website : public site, aimed for individuals.

The purchasing center : platform for professionals including benefits, promotions for insurance, purchase of materials, ...

Quotation software : tool for creating, managing and sending quotes for professionals. I was able to work on its redesign before this project.

Dashboard : home page linking all the platform tools.

Projects / Clients : pages for creating and managing construction sites.

Certification : Hemea allows professionals to become “Hemea certified”, they will then be offered projects acquired via the B2C website.

Informations : page dedicated to all the company's information, necessary in particular for the creation of quotes, invoices and the payment process.

Invoices : space dedicated for the professional's invoices.

User research, workflows, tree structure

Census, review of user journeys, reading of all available user feedback, interviews with the different business owners and teams.

←

Identification and cross-checking of messages received via the help chat aimed at professionals.


→

Diagram showing the tree structure and user journeys.

2.Existing's analysis

UX/UI audit of the 2 most critical pages: the dashboard and the project/client page.

Dashboard

There is a lot of information missing on this page, the user should be able to directly find what they are most often looking for (summary of their current quotes, pending actions, upcoming appointments, help available).

The page is not personalized at all, it should display identification information of the company as well as its hemea status (certification and membership in the Pro Club) .

There is currently no real hierarchy between blocks and components.

The placement of the account information link at the bottom left is not intuitive.


☝️ Please note: professionals receive initial training before accessing this platform, so it will not be necessary to include extensive onboarding.

Project page

Following user feedback, a confusion between clients and projects was noted. The sidebar displaying the name and address of the client while the page is intended for the management of a project (construction site).

The right column requires a second click to obtain crucial information on the project, it would be better to display it directly.

There is no link to return to the Dashboard.

Here too identification information of the project is missing, such as a title for example.

Differences in spacing impairs readability.

Overall the design is a bit “cold”. In view of the project it will be preferable to keep a simple UI but adding touches of color and/or illustrations to make the whole more attractive.

3.Wireframes

Work on placement, ergonomics and prioritization of information.

Dashboard


Creation of a new hierarchy, from top to bottom:

→ Breadcrumbs and link to account information,

→ Identification and status informations,

→ Push of Hemea's various offers (directly linked to the status of the company),

→ List of pending or upcoming events / actions, classified in chronological order,

→ Hemea advantages (purchasing center and benefits for works councils),

→ Support and FAQ,

→ Legal informations.

Project page


Left column :

→ Changed and moved the “+” icon to a new client creation button to make it more visible.

→ Distinction between client and construction site by adding a client “folder” grouping together the different construction sites inside, unfolding with a click. Once entered in this drop-down list, display of a “New project” button.


Center column :

→ Breadcrumbs to return to the Dashboard.

→ Addition of a title to each block for easier readability.

→ Immediate display of the invoice block.


Right column :

→ Change of the button block with an anchor summary (the page can reach a great height during and after the project).

→ Display of the necessary information about the construction site (customer contact and addresses).

4.Conception

Iteration then creation of final mock-ups and their variations.

☝️ Please note: As the client/project distinction requires specific development, it was decided to exclude it for a first batch, the functionality will be added in a future launch.

Dashboard

After iteration, I added to the models the “digital toolbox” block (name of the quote and invoice software) including:

→ For a professional who is not a member of the Pro Club: a 14-day free trial information and incentive block.

→ For a new professional and member: a CTA to create their first project.

→ For a professional with construction sites and member: the table of their current quotes and invoices.

Dashboard of a new professional, neither certified nor member of the Pro Club.

Dashboard of a new professional, member of the Pro Club.

Dashboard of a professional who already has projects, labeled with the trial version of Club Pro.

Dashboard of a professional who already has projects, is certified, is a member of the Pro Club and has proposals for Hemea projects.

Project page

Project just created.

Project in progress, including a signed estimate but no invoice or additional work yet.

Project in progress, with additional work and signed invoice.

Client project brought by Hemea. Display of the Hemea project manager and additional information.

What's next ?

As part of a global harmonization and rationalization project, the next elements to be processed will be prioritized and then processed (colors, notifications, table components, page templates, etc.).

← Previous project Next project →