Elevating the B2B SaaS Experience: A UI/UX Redesign for HR Platform
project type
B2B SaaS HR & Workforce Management Web Platform
Timeline
Overall: 7 Months
Research & Discovery: 2 months
Ideation & Design: 3 months
Dev Handoff & Launch: 2 months
team
UI/UX Designer
Product Owner
Business Analyst
Head of Engineering
7 Developers
2 QA Developers
My role
UI/UX Designer
Overview
HR Duo, a leading workforce management SaaS platform, aims to enhance the user experience (UX) and user interface (UI) of its web platform. This project focuses on improving accessibility, usability, and overall user satisfaction for a more efficient and engaging experience.
Problem
The current web platform struggles to meet the needs of users across various aspects:
Visually, the platform feels stuck in the past. Outdated UI elements and a lack of modern design aesthetics make it appear clunky and uninviting. This not only reduces user engagement but also creates a perception that the platform itself is outdated and potentially unreliable.
The platform's navigation menus can be a labyrinth. Complex structures and a convoluted information hierarchy make it difficult for users to find what they need quickly. This complexity adds unnecessary steps to simple tasks, leading to frustration and wasted time.
The layout struggles to adapt to different screen sizes. This leads to cluttered interfaces on smaller screens.
Solution
This project proposes a comprehensive redesign of the HR Duo web platform, focusing on creating a user-centric experience that empowers HR professionals and employees:
The visual appeal of the platform will undergo a significant refresh. A modern and aesthetically pleasing UI will be employed, prioritizing clarity, readability, and user interaction. This translates to a well-organized layout, clean typography, and a colour scheme that promotes focus and user comfort. Interactive elements, clear visual cues, and intuitive buttons will create a more engaging experience.
The navigation structure will be completely revamped, prioritizing user-friendliness and intuitive design. Clear and concise menus, strategically placed search bars, and breadcrumbs for easy backtracking will be implemented. Finding essential functionalities will become second nature, minimizing wasted time and fostering a sense of control.
Streamlining workflows for critical HR processes is a core focus. This could involve features like automated task lists with clear progress tracking, and easy access to relevant forms and documents. Imagine a world where onboarding new employees is a breeze, performance reviews are a collaborative and efficient process, and payroll processing is swift and effortless.
The redesigned platform will prioritize seamless responsiveness across all screen sizes. This ensures a smooth and consistent user experience, regardless of the device being used.
Benefits
By addressing these challenges, the redesigned HR Duo web platform will deliver a multitude of benefits:
A seamless and intuitive platform empowers HR professionals and employees to navigate tasks efficiently. Time wasted searching for functionalities is minimized, allowing users to focus on core HR activities.
A modern and visually appealing UI fosters a positive user experience, making the platform more engaging and encouraging users to actively utilize its functionalities.
A user-friendly platform streamlines HR processes for employees, leading to a more positive work experience and a sense of control over their HR information.
Streamlined workflows and intuitive UI design can minimize human error and improve data accuracy, potentially leading to cost savings for the organization.
My Role
I will be responsible for the entire design process, from user research to identify user needs and pain points, Information architecture development for optimal content organization, wireframing and prototyping for visual representation of the interface, creating a user-centric and visually appealing UI design.
Tools
Project Management
User Research
Information Architecture
User Research
Information Architecture, Wireframes, Prototypes, Design
Design Process
This is a breakdown for each stage of the UI/UX design process for the HR Duo web platform redesign.
01 /
Research & Discovery
Activities: User interviews, surveys, usability testing, competitor analysis.
Goal: Understand user needs, pain points, and current platform limitations.
02 /
Ideation
Activities: Brainstorming sessions, user persona development, creating user journey maps.
Goal: Generate creative solutions and define the overall design direction.
03 /
Design
Activities: Information architecture development, wireframing, prototyping, UI design (colours, typography, layout).
Goal: Translate ideas into a user-friendly and visually appealing interface.
04 /
Dev Handoff
Activities: Finalizing design assets, creating style guide, documentation for developers.
Goal: Ensure developers have a clear understanding of the design intent and specifications
05 /
Launch
Activities: Platform deployment, initial bug fixes, user onboarding.
Goal: Make the redesigned platform live for users.
06 /
Refection
Activities: Usage analytics review, user feedback gathering.
Goal: Evaluate the impact of the redesign and identify areas for potential improvement..
01
Discovery
User Research
Based on user interviews with HR professionals and employees, along with system ticket support analysis, I identified critical pain points with the web version of our SaaS platform
The current layout and organization of information might be causing frustration for users trying to find what they need.
Users are finding it difficult to interact with the platform effectively, leading to a drop in overall engagement.
Essential HR features like scheduling, leave management, and timesheets might be missing or not functioning optimally.
User Research
Based on user interviews with HR professionals and employees, along with DataDog platform and system ticket support analysis, I identified critical pain points with the web version of our SaaS platform:
The current layout and organization of information might be causing frustration for users trying to find what they need.
Users are finding it difficult to interact with the platform effectively, leading to a drop in overall engagement.
Essential HR features like scheduling, leave management, and timesheets might be missing or not functioning optimally.
PRODUCT ANALYTICS
Confidentiality Note: Due to a non-disclosure agreement (NDA), specific details and screenshots from the research phase cannot be disclosed. However, the following text utilizes anonymized data examples to illustrate the research process. Images are examples only taken from DataDog.com
I leveraged industry-leading analytics tools to gain deep insights into user behavior. This included tracking user adoption, conversion rates, key user actions, and user interaction with interface elements. These insights informed data-driven design decisions throughout the project.
Visualizing User Journeys: I employed a data visualization technique that effectively revealed user pathways within the application. This allowed for a clear understanding of the most common user journeys and the identification of critical paths.
I utilized a well-established analytical technique to pinpoint areas within user journeys that hindered user progress. This analysis helped identify potential bottlenecks and opportunities for improvement, ultimately leading to a smoother and more efficient user experience.
I employed an analytical approach to assess the frequency of user revisits to specific features or actions within the application. By analysing this data over time, valuable insights were gained regarding overall user engagement and satisfaction.
I incorporated a visual representation technique to effectively analyse user interactions within the application. This technique provided valuable insights into how users interacted with various elements, allowing for a deeper understanding of user behaviour.
Competitive Analysis
Analysis of existing HR Duo SaaS competitors to understand best practices and identify areas for differentiation.
User Research
Based on user interviews with HR professionals and employees, along with system ticket support analysis, I identified critical pain points with the web version of our SaaS platform
The current layout and organization of information might be causing frustration for users trying to find what they need.
Users are finding it difficult to interact with the platform effectively, leading to a drop in overall engagement.
Essential HR features like scheduling, leave management, and timesheets might be missing or not functioning optimally.
Design Consideration
The platform should be easy to navigate and understand, even for non-technical users.
Users should be able to easily complete common HR tasks, such as onboarding new employees, processing payroll, and managing benefits.
The platform should allow businesses to customize it to fit their specific needs and workflows.
Dashboards and reports should help users visualize and understand HR data.
The platform should integrate with other business software, such as accounting and payroll systems.
User Interacions
Employees should be able to access their information, update personal details, and request leave directly from the platform.
Managers should be able to approve or deny leave requests and other actions.
Users should be able to generate reports and analyse HR data.
The platform can facilitate communication between employees, HR managers, and other departments.
Define different user roles with varying access levels to specific functionalities.
Empathy Map
This empathy map dives into the world of HR professionals and employees using the HR Duo SaaS platform. By stepping into their shoes, we can understand their frustrations, needs, and desires. This will guide us in creating a web experience that truly empowers both HR and employees to get the most out of the platform.
02
Ideation
user Stories
This section explores the user stories that served as my guiding light throughout the design process. Understanding user needs through these stories allowed me to tailor the UI and UX to directly address user pain points and aspirations.
HR Professional
Story 1
As an HR professional, I need a web interface that is intuitive and user-friendly. This will allow me to efficiently manage tasks like timesheet approvals and vacation requests, even when working remotely. This streamlined experience will save me valuable time and improve my overall efficiency.
Story 2
As an HR professional, I need a web interface that provides easy access to important employee information and company policies. This will empower me to quickly and efficiently answer employee questions, improving overall service and reducing time spent searching for information.
Employee
Story 3
As an employee, I need a user-friendly web interface that allows me to easily access and manage my personal information, update my timesheet, and submit vacation leave requests directly within the platform. This will streamline the process, reduce reliance on emails and phone calls, and save me valuable time.
Story 4
As an employee, I need a user-friendly web interface that provides easy access to important company announcements and updates. This will help me stay informed and engaged with company news and activities, fostering a stronger sense of connection and promoting a more positive work environment.
Informatin Architecture
To design user-centric products, we needed user flows that allowed us to understand what our users needed in order to accomplish their goals.
User journey maps were developed to visualize the user's emotional journey while interacting with the platform. This helped identify potential pain points and opportunities to optimize the user experience for key tasks and workflows.
detailed site map was created to map out the platform's content structure and hierarchy. This ensured a clear and logical organization of information, facilitating efficient user navigation and content discovery
By analysing competitor platforms, industry standards were identified alongside potential areas for differentiation.
Balancing Confidentiality
While specific details about the user flows, site map, and journey maps cannot be shared due to confidentiality agreements (NDA), these crucial steps played a significant role in shaping the final design.
03
Design
UI Inspiration
For the HR Duo web platform, I crafted a user-centric and modern UI that prioritizes both aesthetics and usability. Industry leaders provided a foundation for best practices, particularly in information architecture and navigation patterns. This ensures a clear and efficient user experience for HR professionals navigating the platform's functionalities. Leveraging UI component libraries helped establish a consistent visual style, promoting a cohesive user interface. However, user research remained paramount. Insights from various sources, such as industry trends and competitor analysis, informed the overall design direction. This focus on user-centricity guarantees that the HR Duo web platform offers a visually appealing and intuitive experience for HR professionals.
Style Guide
Style guide that outlines typography, colours, buttons, and other UI elements for a consistent visual experience.
uI Iterations
I created different iterations for HR Duo to ensure all voices were reflected in the final design. One idea wasn't included in this example picture because we had to stay with a 3 columns grid of this version of UI/UX redesign.
PROTOTYPING & TESTING
During the prototype and test phase I went through several iterations, getting user feedback, including from a HR Manager, to make improvements in structure and content like simplifying how the manager could check employees roster, quick access to information & guidance or get to a booking a leave section/page with one click from dashboard.
04
Dev Handoff
Documentation
Based on user interviews with HR professionals and employees, along with system ticket support analysis, I identified critical pain points with the web version of our SaaS platform
All design elements, from icons and buttons to colour palettes and typography styles, were meticulously finalized for developer implementation.
Technical specifications and detailed documentation accompanied the design assets, providing developers with a clear understanding of the design intent and functionality requirements.
A comprehensive style guide served as the design bible for developers. This detailed document outlined design principles, component specifications, and usage guidelines, ensuring consistency across the platform.
Open communication was paramount during this phase.
Open communication was paramount during this phase. Regular meetings and discussions with developers facilitated a collaborative environment, where questions were addressed promptly, and potential roadblocks were identified and resolved proactively. The successful dev handoff ensured a seamless translation of design concepts into a functional and user-friendly platform.
05
Launch
The culmination of months of research, design, and collaboration arrived with the launch of the redesigned HR Duo platform. This wasn't just a technical feat; it was the moment our user-centric vision came to life. The launch process involved a multi-pronged approach:
Collaborating closely with developers ensured a smooth platform deployment, minimizing initial hiccups.
We addressed any immediate bugs that arose, prioritizing a positive user experience from the get-go.
Comprehensive user onboarding materials were created to guide employees through the new interface, ensuring a comfortable transition.
Witnessing employees navigate the platform with newfound ease was truly rewarding.
The intuitive design and streamlined workflows fostered a sense of empowerment, allowing users to focus on their core tasks. This successful launch marked not just the completion of a project, but the beginning of a continuous improvement cycle.
06
Reflection
The launch wasn't an ending, but rather a new beginning.
User feedback and data analysis remained paramount. Usage data revealed user behaviour patterns and identified any potential pain points within the new interface. Targeted surveys and interviews provided qualitative insights on user experience. This continuous learning cycle fuelled further refinement and ensured the HR Duo platform remained a user-centric success story.
These seven months were a testament to the power of user-cantered design. By prioritizing user needs at every stage, we delivered a platform that empowers HR professionals and employees, transforming the HR Duo experience.