vendredi
Duration
2 weeks
Team
The Design Crew Product Design
Role
UI Design, UX Design, User Research, Usability Testing
Tools
Figma but also a lot of FigJam & Google Meet
2 weeks
The Design Crew Product Design
UI Design, UX Design, User Research, Usability Testing
Figma but also a lot of FigJam & Google Meet
Vendredi is a Corporate Social Responsability platform that connects companies, employees and associations together. Their goal is to raise awareness about social and environmental issues, to support associations and to act for Internal Business Transitions.
More specifically, Vendredi allows employees to dedicate time for solidarity actions. Companies assign their employees a certain amount of days, called “Crédit solidaire”, so they can use them on their working time.
☝️
Please note that the term “Crédit solidaire” could be translated as “solidarity credit” but here, it is not used in a microfinance context. The “solidarity credit” of Vendredi only refers to an amount of time dedicated to solidarity actions.
Vendredi wanted to challenge their application to a mission flow, because 25% of employee users started an application without validating it (or cancelling it).
Their goal here is to convert this application flow to a mission pending to 5%.
By checking their resources, we noticed that there were several frictional points throughout the application flow
Because we were lacking visibility on their test protocol, we chose to double check those resources by leading user tests on their existing platform. As a matter of fact, we could distinguish very precisely what were the critical points of the application flow.
users mistook level informations because choosing dates through the application flow is repetitive and ambiguous
users aren’t convinced on what their application status is because the guidance is either lacking or misleading
users feel like the application process is non-intuitive because they didn’t recognize standardized behaviours
users are questioning Vendredi’s function and added value because they don’t feel supported by the platform
To clarify the steps for employee users, we needed to explicit all the steps for each actor.
It was important to have a clear perception of the actual role and the role each must have during the process. So we shed light on what the association, the manager, the employee and the platform Vendredi needed to do or to have, for everyone to go easily through the process. To sum up, we needed an explicit process for each one of them.
Of course, we didn't forget that the main problem remained in the fact that the employee user wouldn't go back to the application process to "Finish the mission". Why ? Because they couldn't see why they needed to do that. What was the reward for them ?
In the end, we could notice that Vendredi missed a big part in its role. How to incite the employee user to come back on the platform and to "Put an end to the mission" when they actually accomplished it in real life ?
We realized that the actual application process depended mainly on the employee user, because all the interactions simultaneously relied on them. Thus we decided to focus on changing this multidirectional flow to a linear one.
To ideate, we chose 4 great subjects to respect so we could design the right solution :
optimize organization
engaging communication
engaging employees
explicit informations
To get to that linear flow, we chose to work on well-known patterns such as : timeline, dashboard and global wording for CTA and status.
To have a better look on the order status, Asos and La Poste have a bar that is fully fullfilled when the order is finished. As a result you can clearly see if your order reached the end or not.
In other words, you are informed in a blink of an eye if the platform completed its part.
We also had a look on Doctolib’s timeline. This one is interesting because it indicates if the user has completed all the steps to get an appointment.
There is, as well, a warning message before the last step to remind the user that the appointment is not completed yet.
In the end, the user has a timeline / status bar fully completed and a clear message that confirms their appointment is booked.
Therefore, you have several indicators to inform that you have finished the process. There is no place for any confusion.
We explored a bunch of platforms to build a proper dashboard.
Welcome to the jungle has a simple and clean dashboard that is composed of a main menu with sub-menus. That way, you can easily have your applications organized, with all their different status. Besides, your favorite jobs, contents, events and also your account informations.
In another context, Amazon gives the opportunity to view all of your orders, organized by their status.
You can as-well, see more details, or make several actions such as reviewing the product, or the seller, on each order.
We also took a look on the administrator side of Vendredi, so we could find inspiration for the UI design. We, indeed, discovered a pattern that could be used for the timeline. And on top of that, we took inspiration of the side menu.
In the end, we checked the appointment page of Doctolib because we realized that the distinction between the appointments to come and the past ones was kind of compelling. It was something interesting to explore for the application section of the dashboard : how to efficiently enlighten the missions that are coming and put the past missions in the background.
But also, how to present the section when there is no mission to come at all. We noticed there was a CTA on that "empty" page, which was very engaging.
We compared a few websites on their wording for CTA and different status.
Here you can see a glimpse of Smartrecruiters and JeVeuxAider.gouv.fr and their CTA.
We noticed that they chose first-person sentences to give more impact on their primary button.
Because we couldn't simulate orders, we took inspiration on the dashboard's sections that we studied previously to define our application status more accurately, wether it was a changing in wording or in colours.
As a reminder, our main objective is to build a linear flow for the employee user by reducing the information density and enhancing the application to a mission process.
So we focused on working 3 main pages
The mission : it's the entry level, where the employee collects all the informations on a mission to actually applicate. Here, the employee can choose their availability dates and the nature of their solidarity time (personal time or working time)
The chat : it's the subscription part, where the employee can chat with the association. Here, the employee receives all the specific informations about the mission, their manager's validation, the association's validation. Besides they can also see where they're at in the process, or how much solidarity credit he has left.
The dashboard : it's the data centralization, where the employee can find all their applications organized by status, their favorite solidarity actions and their profile informations.
For the user to achieve the mission and to make sure they discover all the features, we gave them 3 tasks to fulfill and we made sure to see if they reach 3 main goals.
We tested this first prototype with 6 users and we met a certain degree of success...
It's very clear, the dashboard is extremely simple. It is visually easy to read, in fact you don't even have to actually read.
Naseem, 27 yo, about the dashboard
users understood the role of each actor throughout the application process.
users appreciated the clarity of the application process.
users understood the difference between applicating to a mission and achieving the mission.
But on top of that, we also learned a few things that still were a work in progress !
Oulaa…There's too much information, we don't know where to look… It's kind of destabilizing in the first place… so we don't really know what to do.
Alice, 32 yo, about the chat
users feel like they must write a cover letter for volunteering.
users are disturbed by the chat because there is too much information.
users don't have the reflex to go to the chat to click on "Finish the mission" because it doesn't fit within their usual habits or practices.
Drawing on these reflections, we could see what needed to be done for the second version of our prototype. We were aiming 2 things :
to reinforce the link between the chat and the dashboard
to clearly distinguish the role of each of those spaces
We directly had an idea of what patterns we wanted to recreate.
So we got back to La Poste, to get more inspiration of their "See more details" pattern. Indeed we could see there was a status bar on the first design, that was enhanced with a more precise timeline within the second design.
And we also checked the Wordpress admnistrator panel, which has a "Reducing menu" pattern. We felt like it could be the right solution for the user to not feel overwhelmed by the chat panel, but also to give them the choice to check those essential informations.
.gif)
We could challenge the message to the association part, so it doesn't feel like a cover letter for volunteering.
We could dig even more in the user research part, by interrogating other actors such as the manager or the association.
