Add Employee — Onboarding UI Design
This design was inspired by real work I did as part of a project for my company
Timeline
4 weeks
My role
UX Designer, UI Designer
Tools used
Figma, Figjam, Pen and book
Project Context
While the data shown here is fully fictional for confidentiality, the flow, structure, and thinking behind it closely reflect the original design, which is currently under development.
The goal was to help HR teams add new employee information in a clean, structured way — reducing friction and keeping records accurate from the very first step.
The problem was clear: HR teams often handle a large number of employee records, and the onboarding process can easily become overwhelming when important information is scattered or unorganized.
I took the design brief I was working with at my company and crafted a solution that arranges the employee data flow into clear, distinct sections — keeping the process smooth, efficient, and scalable.
I also explored and referenced design patterns from leading HR and SaaS tools in the industry to ensure the experience felt familiar and intuitive for end users, while still aligning with our product’s visual identity.
Solution
The final flow was divided into well-organized sections:
Personal Details Section
Job Information Section
Payroll & Benefits Section
Access & Security Section
Design Highlights
Logical sectioning reduces cognitive load during data entry
Consistent grid and spacing create a clear visual hierarchy
Field validation ensures completeness and accuracy
The flow is designed to scale as more fields or modules are added in the future
Design Decisions
All Screens
Reflection
This design was directly shaped by real-world scenarios I encountered in my role. It closely resembles the original design, which is now progressing through development. Sharing this reworked version here was a way to highlight both the thinking behind it and the attention to real product constraints that shaped it.
Next steps
Usability testing and iterating on the feedback
With the core design flow in place, the next phase will focus on:
Usability Testing — validating the design with real users to ensure the flow feels intuitive and efficient in practical scenarios.
Iterating on Feedback — refining the interaction patterns, adjusting layouts, and enhancing clarity based on user insights to make the experience even smoother.
This will help ensure the design not only looks clean but performs well in real-world usage.
Takeaways
Designing every step and state and planning ahead
This project taught me the importance of designing not just for what the user sees, but also for what happens behind the scenes. I learned to think ahead and consider every possible scenario — from how data is entered and validated, to how it’s displayed and maintained for future use.
Designing this flow involved balancing both the user-facing experience and the backend structure, making sure the system could handle real-world edge cases while keeping the interface clear, organized, and easy to use.
