Reflecting the human process and putting the youngsters at the centre of the interface.

Project

Administration

Year

2020

Role

UX/UI · lead

Disclaimer: In order not to cause harm to the client. I avoided sensible information in this debriefing, those information are only mine and may not reflect the client's view.

To the left, the new design. To the right, the former design, from 2000.

Project

Previously, a research work has been conducted (field study, personas, experience map, so on.).

Problematics

Keep the current users (about 5000 users) and attract new profiles thanks to a modern and friendly experience.
Before the interface was perceived as a surveillance tool and time consuming.
Propose accessible interfaces (WCAG).
Change the application mindset focusing on the human, through the young.

Limitations

My ignorance about WCAG.
To follow the technical guidelines, I had to use Material design from Google, wich is not totally compliant with WCAG.
Having access to the final users, due to covid limitations.

Final look from the first journeys that had to be sketched.

Solutions

Using a dashboard view, giving consistency (presentation and navigation) across all pages.
Make it simple, to make the journeys easier.
Concerning WCAG, I have asked for help to certified co-workers in order to learn more about accessibility.
I have learned things on navigation, contrast or readability.
An important item of my work was to put the young at the center of the website. What I did was to create a page where we could find all the information about each of them, with synthetic information. The same as been made for the referent following the children.
Test. We tested with 9 users on 9 specific journeys thanks to Marvel and live beta testing with 25 other users. Results were good for both methods. Concerning testing, a mark of 7,8 out of 10 for the new version (6,6 for the old one). As for the beta, the users recommend at 4 out of 5 the website to a co-worker.

To the left, a picture of the beta testing. To the right, a Marvel screenshot about tests.

Lessons

What was new to me was to meet the WCAG standards to create my interfaces. I browsed online and ask for help to my certified co-worker to learn more about it. It gave me the opportunity to grow and to change my vision about my work to include more users. I'll definitely use that on my next projects.

My second lesson was to discover new agile methods, such as PI planning. It helps me see clearly what I had to do in the next sprints. It was a good way to manage 30+ people on the project and give a clear vision to everyone.

From my viewpoint, integration was the major problem, there were no front-end developer meaning that the back-end developers had to do the front themselves, leading to a hazardous result.

Tools

Sketch: mockups.
Marvel: prototype and user tests.
Zeplin: front-end handover.

Deliverables

A journey in wireframe, others in UI; a UI kit; the user tests.

On the left, a picture of paper sketches. On the right, an extract of the UI kit.

Next project.

→ Industry

Revamping a management app about raw material supplies.