Boosting the financial wellness for employees
Scope
Web app
Mobile responsive
Website
Design system
Role
Product designer
About
PayLik is a financial benefits management solution for companies & startups. It enables employers to simplify and automate the process of requesting a salary advance, automates the distribution of bonuses, expense reports, and other perks, providing employees with instant and secure access to their funds via a prepaid card.
Brought to the table :
✦ User flows
✦ Design system
✦ User Experience design
✦ Product strategy
✦ Design system
✦ UX UI design
✦ Prototyping & Rapid prototyping
Disclaimer: This project was conducted in French and Arabic. Most of the screenshots are in French . If you need additional context, feel free to reach out.
Problem
Employees and HR departments often face friction caused by delays and a lack of real-time synchronization when managing expenses, salary advances, and other financial aspects. These issues typically stem from slow or inconsistent processes, or even the absence of a defined process. This leads to employee frustration and operational inefficiencies for HR teams.
Goals
PayLik needed a Product designer who can bring their solution to life, not only helping out with the visual part, but by contributing to a comprehensive plan that aligns the product vision with business goals. This included reviewing the roadmap, prioritizing features, and suggesting new ones. Additionally, key objectives were to decrease onboarding time per user, reduce usability complaints, and ensure a mobile-first experience for employees.
As a fresh startup, their goal was also to create a robust and sustainable design system that would support scalable product development while maintaining a strong brand identity.
Challenges
This time it wasn’t about a retention problem, or lack of vision.. it was about a real world fundamental problem : time. We had a lot (I mean a looot!) on the table to build within a deadline that felt impossible at the beginning, we were compelled to adapt, sometimes skipping steps to stay on track.
Another major challenge was designing a coherent, user-friendly experience for two distinct user groups: Employees and HR teams. This required prioritizing the mobile view for employees and the web view for HR teams, while ensuring the app that required minimal effort for users to navigate and achieve their tasks.
Methodology
So how did we approach it? you ask. In short, a 1 week sprint was the key, I aligned with the development team to deliver a set of screens at the end of each week, so they can start coding while I'm working and reviewing the next screens with the stakeholders.
But before all that, I began by asking a lot of questions to figure out who is the app primarily for, how it would benefit them, and how it would align with business goals..
It's not the ideal way to do it, but given the tight deadline, I adapted by conducting very quick rounds of internal testing with people around me to test the usability from a 'non-tech' pov.
Unfortunately..
We didn’t spend as much time on ideation as we typically would before moving to the UI. Instead, we focused on getting the foundations right and did most of the brainstorming directly in the design phase.
An extensive design system
We knew we would be designing a large number of screens, so we needed to build a robust design system that is advanced enough that ensured consistency and scalability across all screens.
The Look & Feel we aimed for is a balanced level of friendliness and yet professional and trustworthy. We used round icons, smaller border radius of shapes and emphasis on the blue over yellow to create a more trustworthy and professional visual impression.
I only designed the most common components that we knew would be used consistently across most screens, such as buttons (with different sizes and styles), inputs, dropdowns, tab bars, navbar, sidebar, table rows, chips, etc..
Personalized yet consistent
Since HRs are also employees, each HR can switch seamlessly between the employee and HR interfaces with a single click. It was important to visually differentiate the feedback and cues for each role to ensure clarity and ease of navigation.
The home page
We wanted to figure out the best possible way to cover all the services we offer, while keeping it simple and accessible from the Home screen itself. To do this, I experimented with multiple variants to come up with the most effective solution.
Mobile optimized
Since most employees will use mobile as their primary device,I crafted the design to resemble a native mobile app experience rather than a standard responsive web view. I implemented a card-based design for data tables, ensuring users will access all informations without the need for horizontal scrolling
it wasn't expected!
Just like any project, you get questions on what you thought would be obvious for users.. After testing the flows, we found out interesting insights that we didn't expect..
One of the platform’s key functions is Expense Management. Here’s how it works:
1- The employee submits a Mission order (Ordre de Mission) to HR for initial approval.
2- Once approved, the employee can add their expenses and send them to HR for final approval.
3- After final approval, the employee becomes eligible for reimbursement.
From the interface, the employee can add the expenses separately and assign them to a mission order (Ordre de mission). They can then go to the ‘Ordre de Mission’ page, review the expenses, and send them to HR for approval via the Expenses tab.
Here is a quick video on how it looks like :
The feedback was : How do I send the expenses for approval ? For novice users, it wasn't obvious that it's from the 'Dépense' (Expense) tab, because in their mind it's part of the mission order (Ordre de mission) which, in a way, is true.
So, what's the solution?
We implemented a simple fix: To make it obvious right from the default tab: 'Ordre de mission', by adding a clear message at the top prompting employee to review, confirm and send their expenses to HR.
Speaking every user’s Language
As part of the UX product strategy, I suggested adding Arabic as a language to make the platform accessible to large companies with diverse teams. I know that many employees might not be comfortable with or proficient in the default French language.
And how it ended?
65% drop in usability-related complaints
60% to 90% in task completion rate
From 31m to 3m onboarding time per user
107% increase in monthly active users
On top of that, we boosted our delivery speed by 50%, completing the work of two sprints in one. This efficiency allowed us to meet the project deadline successfully.
Brahim stood out for his autonomy, responsiveness, and attention to detail. His dedication and ability to quickly refine designs made him invaluable to our team. It was a pleasure working with him, and I have no doubt he will continue to excel.
Othmane Bennani
Founder of Paylik
If time and scope were no object
I would :
Conduct a qualitative research with employees and HRs from various companies to gain insights about the needs & pain points.
Implement heatmaps to analyze user interactions to assess the areas of confusion and frequency of features usage.
Implement account creation flow from the website, and not manually by staff.
Do more testing with different personas.