Background and objectives
I was hired by an IT services company to work as a UX/UI designer on the redesign of the IPBP (Institut Prévoyance Banque Populaire) member portal.
My role was to improve the user experience and standardise the visual identity of the existing member portal (including HR access and the administrative flow for pension claims). The expected deliverables were graphic mock-ups in Figma. I was the sole designer on the project and worked closely with the development team.
Research and ideation
The challenge
🎯 The goal was to simplify and streamline the user flow, and to standardise the visual identity, taking into account the main pain points raised by members:
- Difficulty creating an account
- Confusion between the different login details
- Unclear information about the type of services
- Difficulty viewing and downloading documents
🔎I also personally audited the current portal (with the help of AI) to identify potential issues, the possible causes of any pain points, and to suggest areas for improvement.
Target audience
The portal’s users are employees of the Banque Populaire group who are approaching retirement or are already retired, most of whom are not very comfortable with digital interfaces.
I created a persona profile, then drew up a diagram of an optimised user journey.
Solution
The pain points and my analysis of the existing portal revealed that the interface was too confusing for the target audience, that information was not sufficiently prioritised, and that the tasks required were too complex.
I therefore focused my redesign on simplifying navigation and reorganising the components and information, whilst ensuring visual consistency, a responsive design, and useful, intuitive features.
A few examples:
Home page (above):
- a tooltip next to the username to reduce cognitive load
- Logout button with icon, colour and text: 37% faster to spot (according to the Nielsen Norman Group)
- more obvious CTAs (‘voir le détail’), with a dedicated interaction colour
- indentation of sub-menu items to create a clearer visual hierarchy
- change to the order of items in the navigation menu, giving greater prominence to ‘My Documents’
- a better-structured and more balanced page
Documents page (above):
- a tab system on the desktop version (already available on the mobile version) to make the page less cluttered
- Clear filter labels for improved affordance
- addition of a category column corresponding to the filters
- a button to preview documents, rather than just download them, to give the user more control
- use of our interaction colour for clickable elements
Account creation was a pain point for users.
As I did not have the time or resources to carry out user testing to determine whether the difficulties in creating an account were due to a design or technical issue, I proposed optimising the screens (final mobile version shown above) to create a smoother experience:
- clearer input fields with labels + placeholders (recommended by NN/g and the Baymard Institute), instead of the existing floating labels
- clearer instructions and confirmation messages
- standardisation of the visual identity (particularly the colours used for interactions, borders and links)
I was asked to pay particular attention to the messaging page (above):
- a suitable makeover
- minimalist design (Nielsen’s 8th heuristic): the filtering system was not suited to the limited number of conversations anticipated, and the page should refresh automatically
- The inactive state of buttons is more effective for affordance than hiding them, as it indicates that the feature is only temporarily unavailable (Source: Smashing Magazine)
- the messaging page opens to the most recent conversation
The selection of screens shown here is not exhaustive. I also worked on the remaining pages for member and HR access, as well as the pension claim process, for which I followed a detailed set of specifications.
Conclusion
This project, which I carried out with a degree of autonomy, gave me an insight into the business logic of an administrative environment and its specific target audience.
Being the sole designer on the project and liaising with the developers encouraged me to be thorough in justifying my choices and to adapt my proposals to the actual technical constraints.
The nature of the mission was such that I was unable to carry out more in-depth user research; nevertheless, improving these existing interfaces was rewarding, and a real learning experience.
Project carried out for IPBP as part of an assignment with Scub. The data shown is fictitious and is for demonstration purposes only. The visuals are presented to illustrate my design work.
Écoworking