Payroll App
to manage, organize, and automate
the employer and employee
payment process
Case Study
My Role: Research, UX Designer
Project Time: 3 weeks
Strategy Kickoff
​The goal is to enhance the payroll apps that are already on the market by addressing user's needs, without focusing on developing a perfect solution, but to make decisions based on user's interviews.
​Target Groups
small businesses both employees’ & employers’ interface
Impact
Inclusivity – affordable, accessibility options
Voice
Simple, user friendly, helpful in completing payroll tasks
Personas
Jamal
is a successful tailor in the gay community. He can hire 10 employees to help with the daily workload. Although he is a successful designer, the business demands do not come as easily to him. He wants to streamline the business side so it is enjoyable also.
Julie
loves being there for her children. She grew up sewing with her grandmother and is happy to be able to help financially provide for the family through this skill. In her busy world. with children she does not have time to plan her days off or remember how many hours she worked.
User Journey
Initial Research
In order to empathize with the different types of users, I conducted interviews of both employees and employers. These served as a starting point to reflect on the needs and challenges of the user and created ideas for solutions to enhance the payroll app experience.
Pain Points
-
User unfriendly - apps offer too much
-
Technology unsavvy - app should be simple
-
Costly - target customer wants low cost
-
Tax information - provide tax support
Competitive Audit
Wireframing
By prioritizing ideas in terms of efficiency (“How can I make the processes within the products or services more efficient?”) and awareness (“What can I do to make it more accessible?”), I quickly developed a roadmap with the next steps,– I believe that strong organization is more likely to create strong products and services.
Main Task Flow Map
Paper Wireframe
Employer User Task: Approve and Submit Hours
iteration - titles
iteration - edit button
The main flow for the employer starts with the homepage showing what their employees have submitted for review. This simplifies the app by presenting the main purpose directly. The employer clicks on the task they want to review, reviews the information submitted on the next page and has the option to submit the information to payroll. During testing two iterations were noted 1. this page confused users because there was not a title 2. if information is to be reviewed, mistakes are to be expected therefore an edit option is necessary. Both iterations were made to the wireframes.
Mockups
To ensure an intuitive understanding of the app flow, I tested the wireframes on potential users by giving them relevant tasks to complete, such as "Please submit your hours for payroll?" Based on the test results, I changed the flow of some tasks to a more instinctive click path, added elements that were missing for users to successfully complete a task, and also changed visual style components to give a hierarchal page effect. The wireframes were adjusted to create a mockup for testing.
Added - Undo Submitted Button, eliminating undo subpage
Added - Add Employee Button
Added - Container Lines
Challenges Learning Figma
1. Figuring out how to organize elements within a frame selection to enable vertical scrolling.
2. Placing frame selection with clip content so vertical scrolling does not overlap title.
Usability Study
To help me understand how app users navigate and what factors influence their decision, I've arranged face-to-face meetings and recorded them, to watch the testers while using the app. I gave them assignments and asked them to think aloud. Due to testing the product multiple times during the entire process, hardly any revisions were required. Instead, users expressed their joy in how features exceeded their expectations. Since I am not versed in the technical details of being a business owner, I also gained valuable information on missing elements that users needed for the app to successfully meet their needs. These adjustments were made accordingly.
Ryan Stewart
Employer
Watch Ryan's excitement, recorded on video, over different elements that exceeded his expectation. He also explains iterations that need to be made based on government standards.
Ingrid Triple
Employee
See Ingrid's thought process through screen recording, as she completes the tasks I ask her to do. She also gives thoughtful insights, based on her experience, on enhancing the experience.
High-Fidelity Prototype
Next Steps
After the testing, I began to question the cost scope of the app because a few of the users' desires for the app are only appropriately considered once a cost analysis is set. They were asking for very personalized changes.
I would also like to think through how the app would work with a website because some of the options that users wanted seemed to be better for a website, enabling the app to stay simple and focused on the payroll tasks most often used.
