top of page

Weploy Talent Payroll

Device3.png

PRODUCT OVERVIEW

The financial industry is known for leading in tech, but it's just hype.

Phat Trang, President of Weploy, had a new vision for the Financing needs of small business owners: an MVP product feature that would serve ONLY for payroll.

As businesses went through the COVID-19 pandemic, it became clear to some that they would need cash flow assistance in the payroll space. Phat set out to create a custom web app that will allow Weploy talents to apply for and receive payroll funding with ZERO FRICTION.

PRODUCT PROBLEM

When the Weploy operation members checked talents' timesheets, they were prone to making mistakes such as documenting overlapping time, using insufficient Overtime hours, and timesheets were sometimes difficult to process because their handwriting was illegible. This led to inaccurate payroll processing, delays, and increased dissatisfaction among the talents, and payroll administrators. The Weploy company is looking for a way to improve its timesheet submission and approval management process to reduce timesheet errors, minimize overtime work for employees, and process payroll on time.

CHALLENGE

How can I make a mobile app that would make it easier for Weploy Operation members to cross-check talents' salaries quickly, minimize edit overtime hours, and process payroll on schedule?

SCHEDULE

Kickoff in July 2023
Release in Early Novemmber 2023

BASIC INFO

My Role
  • Produce designer

  • Researcher

Platfrom
  • Weploy Webadmin

  • Weploy talent mobile application

Duration
  • 3 months

  • UX research - 1 month

  • UI  refinement - 1 month

  • Development - 1 months

My Task
  • Develop concepts

  • Conduct surveys and interviews

  • Create low and high-fidelity wireframes

  • Design a working prototype

  • Conduct usability testing

THE BEGINNING

I approached this project using the Double Diamond methodology: Discover, Define, Develop, and Deliver. It is a design model designers used to solve problems throughout their creative process.

01B-Double-Diamond.jpeg

DISCOVER PHASE

I started collecting more insights to further enhance my understanding of the challenge and user needs. Below you can see an overview of the activities I undertook. By conducting user research and usability testing, the I gained valuable insights into user expectations and preferences that was shared with my collaborating developer.

Market Research:

As this was a new product, our team conducted extensive research on the financial markets. We gather information about what others in the space are doing and what they are doing wrong!

Reaserch.png

Based on the Weploy’s needs and  competitors’ analysis, I have decided to implement the following features for the app & web admin:

  • Feature create and accept payroll for Operation team members to greatly reduce human resources.

  • Feature cross-check and approve payroll for Finance team members to send to talent on time.

  • Real-time push notifications to remind talent to approve their payslip on time.

  • Efficient design that enables users to input less data; enter once, saved forever (except if the user clears the cache)

  • Designate multiple rates for employees that provide different services or work at a different unit

Surveys and Interviews:

To create an effective user experience, I have gathered some data and insights from the Weploy company by conducting surveys and interviews with their Weploy talents. With a sample size of 200 survey participants along with 3 interviews, I was able to discover and identify some insights on the talents’ backgrounds and what their pain points were when submitting, approving, or processing timesheets.

03-Surveys-B.png

According to the surveys, there is a wide range of demographics from gender, age, and educational backgrounds. To ensure that the app is optimized for a wide range of users, the goal is to create user-friendly designs that are intuitive and require minimal effort to use. In addition, the design must also be accessible because the ABC Company may have employees with cognitive deficiencies such as color blindness. 

Persona

To gain a deeper understanding of the talents at Weploy Company, I needed to interview full-time talents. That way I would be able to uncover what their pain points were from their perspectives. Also, I interviewed the Operation team leader, who would be approving talents’ timesheets, and a Financial team leader who would be processing the talents' payslips.

Persona.png

DEFINE PHASE

Define.png

Gathering insights

  • Talents have difficulty understanding what part of their salary is commission.

  • Talents have difficulty understanding how much commission each project generates.

  • Operation staff spends a lot of time copying and pasting from the accounting system to Excel.

  • Operation staff spend a long time identifying talent's errors or hours left unregistered.

  • Talents who have not registered any hours in a specific month disappear from the list in the accounting system which makes it challenging for the admin to pick up.

Value proposition

Payslip helps the Weploy talents save time and reduce financial uncertainty by providing a clear overview of their predicted monthly salary details. Furthermore, it eases the workflows of admins’ by alerting them when hours have not been registered and enabling data transfer.

How might we

  • Design a system that create a system that saves time and reduces financial uncertainty for employees?

  • Design a system that eases the workflows of admins’ by alerting them when hours have not been registered and enabling data transfer?

DEVELOP PHASE

Cross-functional diagram

We have carefully crafted the user onboarding and the user flows, so the customer will feel secure and not get annoyed with all the steps. This approach took some deep thought and time to develop - Payro wanted to really differentiate their product with seamless and simple UX.

Cross-Functional_Diagram.drawio.png

After the UX project was completed, we delivered a robust and scalable Figma Design system. The Payro development team coded the entire, detailed design with perfection, and they really enjoyed the detail of the UX/UI design provided by Intent!

Information Architecture

To develop the structure of the Weploy Payroll dashboard and talent mobile application, I have also conducted a card sorting exercise with the product manager and tech lead. In a card sorting exercise, the participants are given topics to organize them in a way that make sense to them. After organizing the topics, I was able to identify and define the common content hierarchical patterns and establish an optimal structure for the information architecture of the app and dashboard.

IA.png

Ideate

After identifying what the needs and pain points of the users were, I would create low and high-fidelity wireframes to layout out the content structure. In addition, I must consider the different user types such as non-managerial employees and managers. Therefore, it would require a different dashboard screen for accessing specific functions or features.

REDEFINING PROBLEMS

We redefined the problem statements after the research and started working on solutions.

I created concepts, wireframes, and clickable Prototypes and conducted Usability Testing for all the platforms. Hi-Fi wireframes were discussed later between the Product Designers and the Product owner.

​Problem #1: Introduce a Payroll feature for Weploy Operation Team Members

The operations team, financial team, and talents had three main fears, which we addressed as follows

Fear 1: Cross-check talent check-in/checkout information costs a great amount of effort but human mistakes often occur 
We assured them that the system was designed to help them, not replace them. To prove this, we involved them in design validation. Once they realized the value of the system and that they had a say in its development, they began to cooperate.

 

Fear 2 - The process from payslip verification to transfer salary costs many days and often delay
This was a critical concern. We decided to add guided flows to prevent errors from happening in the first place. This made them feel in control of their work and reduced their anxiety.

 

Fear 3 - Talents always need to check their salary regularly but they do not have any place to check
After the interview, Weploy discovered that the need to check their previous salary is extremely important to talents because talents work lots of shifts and various jobs, and each job has a different base price and reward scheme. Thus, the need to cross-check previous payslips is required

Second, 

UserCaseDiagram.png
Wirefram1.png

​Problem #2: Introduce Payroll Feature For Financial team

The financial team was wasting time waiting Excel file of the operation team, and CEO confirmation. What we needed was a way to make information flow seamlessly across all internal stakeholders.

I carefully created an end-to-end workflow and mapped information and notifications to each user group. This ensured that everyone had the information they needed, when they needed it, right on their dashboards.

This helped developers and business analysts build a robust notification system, which saved everyone a lot of time and frustration.

​Problem #3: Introduce Payroll Feature to Talent Application

The need to have a payslip was proven in the interview. Thus, product owner and designers have to create user flow, and high-fidelity wireframes to match the crucial need. Then, the product brainstorming occurred between the development team and the product team to discuss the technical feasibility and finalize the MVP version of the feature

UserCaseDiagram.png
IMG_3500 1.png

DELIVER PHASE

User flow: Operation team manage payroll

User flow: Finance leader manage payroll

User flow: Payslip of a talent on their mobile app

Weploy Styleguide

DEMO & TESTING

Two types of user testing were conducted.

 

A focus group discussion with management where initial wireframes were reviewed and we discussed the need for tracking of talents' hours, filtering, data export, and the company's overview of cash flow. The goal of this test was to understand how the payroll feature might ease workflows.


I tested the wireframes in person one-on-one with a few talents where the goal was to identify if the flow to receive payslips are intuitive, the navigation is user-friendly and the overall user experience was satisfying.

OUTCOME & BUSINESS IMPACT

  1. We successfully reduced the number of talent complaints concerning checking previous payslips
  2. Digitizing all transfer salary workflows instantly improved the Efficiency
  3. Semi-automation reduced operations costs due to maximum resource utilization
  4. Discontinue cooperation with Mobifone e-contract reduce the loss of data and saving money
  5. Partner Support calls reduced by ~50% because they do not have to explain the salary to talents
  6. Transparency minimized the risk of losses for the talents

LOOKING BACK

The Weploy Payroll app project allowed me to apply my UX/UI knowledge, techniques, and studies to practice. It was a challenging but satisfying project to work on because I was able to bring my ideas to fruition, Along the way, I learned many things from this project such as conducting surveys and usability testing, creating prototypes, and much more.

I also feel that I can improve on this project if time restrictions were not a constraint for example: include onboard screens as a tutorial to teach first-time users how to navigate and use the app, and the ability to shadow talents to observe and document their day-to-day work.

Overall, this project reinforced my obsession with creating impactful user experiences. Since this is just the start of my life as a user experience designer, I still have a long journey ahead of me but I look forward to the challenges that come my way

Thanks for reading!

Next

KILO ONLINE PAYMENT

E-commerce multi flatform

bottom of page