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
+ Visual design
+ Prototyping & Rapid prototyping
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 UX designer who can bring their solution to life, but not only helping out with the visual part, but also contribute to creating a comprehensive planning to align the product vision with business goals, helping out with reviewing the roadmap, prioritizing features and suggesting new ones.
As a fresh startup, their goal was also to create a robust and sustainable design system that would allow scalable in product development while reflecting their brand identity.
Challenges
This time it wasn’t about a retention problem, or lacking 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 UX 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 an ‘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 an '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 '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?
+200
UI screens
+50
UI components
+50%
Delivery rate optimization
:D
Satisfied client
Of course, it could be better!
If time and and scope were no object, I would love to :
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.
