💡 Methodology used:
Double Diamond (Design Thinking)
FOCUSED (Discovery Discipline)
👥 Project team: 1 Product Manager, 1 Product Designer (me), 4 Developers (front & back), 1 Dev UI
⏱️ Time spent on the feature (SHAPE UP):
1 Run / 6 Weeks / Discovery
1 Run / 6 Weeks / Delivery + Discovery
The general idea of the project came up from a Startup Weekend.
ℹ About Payroll Assistant : This software allows user to send data to their pay software (ex. Silae) to then build the paybill.
Silae API connector option needs to be more appealing and central to the product.
→ Introducing a reliable feature in this software to enhance compatibility and synergy with other products.
Every month, the payroll manager must review the pay bills, a task often done manually. It’s a lengthy process, highly prone to errors, especially on a document where no mistakes are allowed. Pagga Check was built to ensure that no pay bill is sent with errors, helping admins guarantee flawless work.
→ The primary challenge of this project was managing its technical complexity, particularly due to the handling of sensitive data.
→ Another difficulty was articulating the features in language that would be familiar and clear to administrators.
Payroll Assistant clients + Silae - Reduce risk of churn.
Payroll Assistant clients + Silae - Satisfaction & Retention → Bring more delightful features to the initial experience.
Payroll Assistant clients (X Silae) - Increase the number of subscribers to the Silae connector option. → Make the Silae API option more appealing.
Lucca clients - Boost software package sales: Lucca HR Suite → Improve connection between softwares.
New clients - Increase Payroll Assistant MRR → Make the Silae API option more appealing.
Reviewing pay bills is currently a time-consuming manual task with a significant risk of errors.
Competitor Research
Identifying similar solutions in the market.
HR tech companies (e.g., Payfit, etc.)
Focus on making pay bills more readable and intuitive.
File management platforms (e.g., Dropbox, Google Drive, etc.)
Provide efficient methods for reviewing, sorting, and filtering large volumes of files.
User Interviews
Gaining insights into user needs, motivations, and pain points / Qualitative & Observative research following Interview Guide
How do they currently work?
They review pay bills under high pressure due to deadlines, performing the task manually without any digital tools to help streamline the process or increase their confidence in completing it.
Why isn’t this the ideal way to work?
The process is lengthy and prone to errors, particularly with sensitive user data.
What could be improved?
The security of the process, as well as its flexibility to align with their preferred workflows.
→ External team involved: Admin team at Lucca
→ Users involved: Admin clients of Lucca
Survey
The general behaviour when verifying bills. / Quantitative & Compormental Research
80% of the target audience doesn’t use any tool to check the pay bills.
90% of them feel high pressure when the have to start this task.
70% cancel their calls in order to be focus on the task.
60% need to use 2 screens to compare data.
40% of them prefer to print the pay bill before reviewing it, even though it makes the process longer.
→ Population : 20 answers.
→ Administration mode: Survey / Typeform
Personas
Several personas using the product.
HR Admin Manager
Validate final review
Send the paybill to the pay system
Double check paybill review
HR Admins
Review the paybill
Send paybill review resume to HR Manager
User Journey
Mapping the user journey for the future app.
What interactions with the task are pain points?
Users often need to revisit the same pay bill to ensure nothing has been overlooked.
They need to cancel their over task to focus on this one.
They get lost in the the paybill as they review too much at the same time.
HR Manager needs to double check the paybill review and it brings confusion to the process.
What opportunities could offer relief and positive solutions for users?
Enabling smooth navigation between pay bills to make the process more seamless and efficient.
🔸 → First use case :
”As an HR admin, I want to verify my collaborators’ payslips.
It’s important that the process is highly reliable and efficient.
However, since this task is long and stressful, I need to focus and work without distractions.”
→ Deliverables: Research Repository (cross research, insights)
→ Team collaboration: Close coordination with the PM + Operational teams.
→ Tools used: Figjam / Typeform / Notion
💡 Features are listed and prioritized so that each slot can be implemented step by step : according to user primary needs.
🔹 Use cases :
Want to double check the paybill and be aware of potential errors.
Want to quickly check the paybill and send correct data to paybill manager.
Want to guarantee collaborators will receive paybill with no error.
Feature Scoping
Wireflows.
Map user interactions with the product.
From receiving the email to the final sending of pay bills to the accountants.
Feature Prioritization
Moscow MVP planning and feature listing.
Card Sorting / Sort features by categories.
In a workshop, features are categorized to identify what is essential, secondary, or unnecessary.
Story map / Features listing
List features with their intended functionality and the needs they address.
Example: Commenting on pay bills - to identify / correct errors for future reference.
User stories / Plan MVP and other phases
Features are prioritized and grouped into the MVP and subsequent phases.
User flow / Micro flows
Defining feature behaviours and interactions.
Translate user stories and features into interactions.
Simplify the flow as much as possible.
Anticipate potential challenges in the user flow, both from a usability and technical perspective.
→ Team collaboration: Close coordination with Product Managers and Developers.
→ Tools used: Figjam / Notion
💡 Components & features behaviour are detailed in the prototype.
🔹 App main features are:
Reviewing a paybill → Combining flexibility and efficiency.
Checking alerts → With automated processes and precise data display.
Follow review status → To boost confidence and motivation until completion.
Commenting → To improve collaboration and cut down on errors.
Wireframing
Test, Learn, and Validate.
Quickly design the app’s structure, incorporating proposed solutions and features.
Test the solution with a clickable prototype, involving clients and the admin team at Lucca.
→ Once the product’s main content and structure are validated, UI development can begin.
UX Writing
Ensure Consistency and Relevance.
Present the project to the UX Writer.
List and categorize the wording used throughout the app.
Conduct workshops with external teams to refine and select the best wording.
Final review and adjustments.
UI Benchmarking
Innovate and Reuse.
Explore whether any Lucca software uses similar features.
Collaborate with designers and developers who may have worked on similar screens.
Research other products with comparable core components (e.g., Drive, Dropbox).
Focus on file management functionality.
UI Prototyping & Flows
Develop and Illustrate. Create high-fidelity screens showcasing feature behaviors.
Develop UI concepts that align with user needs :
ex. emphasizing on alerts and process tracking using semantic colour, it will help them feel motivated to end the task.
ex. flawless navigation to ensure flexibility and efficiency in the process.
Interaction Design: Guiding the user through the workflow completion by using content, animation, and clear system status transparency.
Visual Design: Apply Lucca’s Design System to develop components.
User Testing
Preparing Scenarios, Scripts, and Interviews.
Preparation: Select features and design test scenarios.
Example script: “It’s January 20th, and you’re about to start the pay bill task using a digital tool. We’ll observe how you interact with the tool without providing guidance. Occasionally, we’ll ask questions about how you feel and what you’re thinking.”
→ Compile a list of features to be tested.
Execution: Conduct tests using the script, take notes, ask open-ended questions, and observe user reactions.
Sample questions: “What does this screen communicate to you? What do you need to do here? What do you think will happen if you click this button?”
Post-Test Interviews: Ask users about their experience with the app.
Example questions: “What was challenging? What would you improve or add?”
→ Collect all feedback in Notion for analysis.
→ Prioritize changes in collaboration with PMs et Developers.
💡 Figma Comments feature is used to review the prototype and adjust flows and components.
💡 Beta testers will be the first users of the implemented app, before it is commercialized.
Team Presentation
Final review of the Project to Team Members and Designers at Lucca
Design Reviews: Present key screens using FigJam for collaborative feedback.
Feedback is added using post-its, covering what works well, what’s unclear, any deviations from the design system, and any questions or suggestions.
Product Team Presentation: Present every flow to the Product Team using a clickable prototype or categorized screens.
→ Team members can ask questions or share suggestions during the session.
Flow Adjustments
Clarifying and Aligning with the Design System
Missing Flows: Add any flows that are absent based on user stories.
Component Behavior: Refine and clarify behaviors that aren’t fully understood.→ PMs, developers, and UI developers review flows using Figma’s comment feature.
Accessibility and Component Check
Ensuring Alignment with the Design System
Accessibility: Verify accessibility for all components.
Design System Compliance: Ensure all components align with the developer’s design system.
→ Collaborate closely with UI developers to resolve any issues.
→ It is Ready to dev ✅ : Final prototype is delivered to the Development Team
Pre production test
Ensure product quality, with no bugs or errors.
Carefully test the feature following each use case.
List and prioritize potential bugs.
Generate ticketing on Github to the development team.
Beta test
a small amount of clients will be the first users of the app.
Onboarding with the users
Organize beta test calls to collect feedbacks
Observe user behaviour using the product
List features to improve
→ Team collaboration: Close coordination with Developers to ensure quality of the product through implementaion.
Lucca clients integrating with the Silae API now have access to automated pay bill verification, included at no extra cost.
✅ Initial users are pleased with the app’s MVP, feel confident using it, and are eager for additional features.
✅ From a business perspective, this new module strengthens the Silae API, making it more appealing. As a result, more clients are adopting the connector integration option.
✅ Also as this feature is directly connected to other softwares’ data, clients may want to buy several softwares to ensure efficiency of the verification process.
The next goal is to provide more types of alerts, associated with additional Lucca software.
The app provides a solid foundation for clients, but they will require a more personalized platform in the future to meet their specific needs (integrations, collaborator data, etc.).
Pay bills are grouped together from the “Silae” pay API and marked as ready to be analyzed or not. It’s important to inform the user about the status of the pay bills’ data, so they can verify whether it is ready to be used by the software.
Pay bills are analyzed and prepared for review.
It’s important to explain to the user what data the app analyzes so they can understand how the information is used through the API and other Lucca software systems.
Through the fast checking screen, the user can view all individuals related to the pay bills, identify any errors in their data through alerts, checking comments, and easily navigate between them. For larger companies and teams, filters and sorting options can be used to streamline the list.
Since this task may take place over multiple sessions, users have the option to save their progress and return to it later.
It’s also crucial to keep users informed of their progress, ensuring they feel motivated to complete the task.
Alerts can be reviewed from the list via a popover, which will indicate if there are discrepancies between the pay bills and the original personal data, helping to prevent errors.
The checking task is sometimes done collaboratively, with the commenting tool used to notify the responsible person about any incorrect data that needs to be changed before sending the pay bills to the accountants.
Checking bill by bill allows the user to focus on an individual’s personal data and review details for any errors.
It also enables the user to compare data across incorrect pay bills through direct previews.
It’s crucial to inform the user when they have completed the process, confirming that everything went smoothly and reassuring them that they can now confidently send accurate pay bills to their accountants.
I reply within a day.
