About this project
Bravo Suite Smart HR Tool
The ultimate HR tool centralizes talent management activities for your business.
Project overview
A quick brief about this project
My Role
UX/UI Designer - Research & Analysis, Design System Development, Visual Design, Prototyping
Design Team Members
Linh Nguyen (me) - UX/UI Designer
Truc Ly - (Former) UX/UI Designer
Industry
Human Resource and Talents Management
Project Timeline
Continuously developed and maintained for over a decade
My dedication time
1 year and 4 months, starting from January 2023
Overview
Bravo Suite is an all-in-one HR tool, streamlining talent and employee management activities. From recruitment to performance management, it offers customizable features tailored to meet any organization's needs, empowering businesses to optimize processes and drive success.
What I actually did in the project
I collaborated with our Design Lead, Mr. Quang to maintain and enhance the functionality of our web application. Working within a Scrum framework alongside our Project Owner, BAs, and developers, we conducted research, analysis, design, testing, and feature releases to improve any HR management processes.
I contributed to essential features in the company management app, such as Performance Review and 1-on-1 check-ins, as well as the employee app, including Employee Timesheet and Employee Self Evaluate.
Continuously refining the design system and components, I aim to elevate not only the project's overall usability but also to challenge and enhance my own skills. Working closely with our Design Lead and collaborating with team members has been a valuable learning experience.
The Problem
The obstacles we encountered during this project
Problem Statement
Despite its decade-long development, Bravo Suite suffers from outdated design systems and themes, hindering usability and failing to meet current market demands. Incomplete development and insufficient analysis of essential functions make the reuse of old feature flows impractical.
Outdated design, present obstacles to user engagement and efficiency
Incomplete development & Insufficient analysis, led to gaps in functionality and usability, as critical features remain underdeveloped
Outmoded product's orientation, failing to align with current market demands and struggles to maintain its competitive edge
We encountered many challenges…
Challenges with development process
The team faced immense pressure as the company sought to expedite the rollout of new features. Our product owner orchestrated plans for an accelerated launch within a tight timeframe. However, navigating the complexity of our product, alongside its numerous features, proved challenging in analysis, especially given the market's unique intricacies. Despite the product's established presence in the market, crafting distinctive features compared to competitors posed additional hurdles, especially given their entrenched positions.
This also puts extreme pressure on the design team by having to keep up with the team's progress and working in a scrum model with insufficient resources.
Challenges with streamlining the design process
When we received the files from the previous designer, there was no clear design system due to the use of a different design software. We invested significant time in organizing and restructuring the existing designs, then implemented a new design system to ensure consistency and coherence.
Research Summary
An all-in-one application for HR management
User Research & User Persona
A smart HR management tool should address user goals, pain points, and expectations to effectively support HR managers in achieving organizational objectives and fostering a positive employee experience.
A HR Manager Persona Profile
An Employee Persona Profile
A Candidate Persona Profile
Design foundation
Setting the design foundation
Design System
Over 40+ components designed
These are a few of my custom components created to reuse throughout the application. Additionally, many other components were designed to seamlessly fit each functional tab, ensuring a cohesive and efficient user experience.
Bravo Design Components
Layouts & Application Theme
The new app layout
Bravo Responsive Layout
Application Theme Redesign
We revamped the application theme to align with modern design trends, transforming the outdated theme inherited from the previous designer. The dark header was replaced with a lighter, more readable one, featuring enhanced functionality and intuitive button tabs.
To ensure a cohesive and efficient design, we incorporated auto layout and reusable components throughout the system.
Company Application Theme Redesign
Bravo company app theme
Employee Application Theme Redesign
Bravo employee app theme
Featured Functions
Some of the main features I designed and implemented
Timesheet Management
This was one of the first major features I developed, under the guidance of Mr. Quang. Our timesheet management function is designed to streamline the process of tracking and verifying employee working hours and attendance.
Company Application
Mr. Quang leaded this section's redesign with the goal of making timesheets and any anomalies or leave cases more visually appealing and easier to manage. He boldly reworked the entire old design, creating a cleaner and more user-friendly interface.
Company Timesheet Management
Employee Application
I was tasked with redesigning the employee timesheets. To differentiate this feature in a crowded market, I added engaging elements and color to make the timesheets not only more interesting but also motivational and personalized for each employee.
I created a detailed document outlining the User Research and Design Process for the Employee Timesheet. Click the button below to explore more.
Employee Timesheet Management
Creating Unique Timesheet Cards
I designed distinct cards featuring hand-drawn vector images for different scenarios in the timesheet, adding a personalized and creative touch to each case.
Employee Timesheet Cards
30+ designed screens
Employee Timesheet Management
1-on-1 Check-in
Our 1-on-1 Check-In management function simplifies regular check-ins between managers and employees, providing HR with a comprehensive dashboard to monitor these interactions.
This function enhances performance reviews, supports employee development, and strengthens manager-employee relationships, ensuring continuous feedback and overall process improvement.
Company Application
Check-in main page
The main page of the 1-on-1 check-in function features an overview dashboard and a list of team members that displays their upcoming and last check-in details, including date, time, and frequency. The dashboard shows the percentage of completed check-ins, employees with scheduled check-ins, and the total number of check-ins per manager.
Bravo 1-on-1 check-ins
The process of scheduling a new check-in
Managers can schedule new check-ins by clicking "Schedule New Check-In" button. They can select the participant, set the date, time, and frequency, and pre-script the shared agenda for better preparation.
Bravo 1-on-1 check-ins
Check-in Details Page
The check-in details page features two responsive sidebars, optimized for 1920 pixels screens wide and above. For 1440 pixels and smaller screens, one sidebar displayed at a time is preferred.
Bravo 1-on-1 check-ins details page
Left Sidebar: This contains a list of 1-on-1 check-ins, highlighting the currently selected session. Each entry displays its check-in date, time, and latest update.
Upcoming Check-ins
Managers can schedule multiple upcoming check-ins, each distinguished by its date, time, and frequency.
Past Check-ins
This feature includes a list of past check-ins. Users can edit any previous check-in until it has been finalized and wrapped up.
Check-ins Search
A search bar is included to quickly locate specific check-ins, making it easier to navigate through extensive lists.
Right Sidebar: This optional Quick View allows users to review and compare their check-in history with the current session for easy reference.
Quick View any Past Check-ins
Users can choose any past check-ins from a drop-down list, with each selection displaying its basic information for a quick overview.
Employee Application
The check-in page UI on the employee app is similar to the company app, featuring a detailed check-in section in the center and two responsive side panels with the same functions. However, employees cannot schedule new check-ins; they can only participate in those scheduled by their manager.
Employee Timesheet Management
Other screen quick show case
Multiple additional screens were designed to support all flow processes and scenarios. These include scheduling new check-ins, editing existing and upcoming check-in dates and times, wrapping up a check-in, and more.
Employee Timesheet Management
Performance Review
The Performance Review Management function streamlines comprehensive evaluations for managers and employees while providing HR with insightful overview dashboards. This feature not only improves the quality and effectiveness of performance reviews but also fosters a culture of continuous improvement and professional development.
Company Application
Performance Review main page
The main page of the Performance Review feature includes a list of review items categorized into four stages: Active, Upcoming, Draft, and Closed. Each item displays the review period and tracks the evaluation process, encompassing Self-Evaluation, Manager Evaluation, and Final Evaluation stages.
To ensure mobile responsiveness, we first came up with a card layout. Illustrative elements were added to enhance interactivity and engagement.
Performance Review main page card layout design
However, the initial card layout didn't meet stakeholder expectations and failed to display the entire list in one view. We revised the design to a four-table list, categorizing items and displaying up to five items per table. This change ensured all elements were fully viewable and aligned with stakeholder requirements.
Performance Review main page final design
The process of creating a new Performance Review
This process included 4 steps that is Setting up Review Information, Review Milestone, Assign Participants and Review Summary.
Creating a new Performance Review Process
Performance Review Detail Page
Each Performance Review has its own detailed page displaying key settings such as status, start and end dates, number of participants, review template, and the progress of the three evaluation stages. A list of participants with their review sections is displayed below. Managers can view the status of any employee’s review and resolve any incomplete evaluations.
Employee Performance Review Detail Page
Clicking on an employee's evaluation line opens the Evaluation Detail Page for that specific employee. At the top, it displays the employee's information and their review sections. The evaluated review template, set during the Performance Review creation, is shown below. A responsive right sidebar allows users to track necessary information or close it to expand the template space.
Performance Review detail page
Employee Application
The performance review feature in the employee application closely mirrors the company's management application, with a key difference: the comprehensive list of employee performance reviews is divided and displayed based only two status that is active or closed with the ones active on top.
Employee Timesheet Management
Other screen quick show case
During implementation, numerous adjustments and input from BAs and stakeholders shaped the feature. Since it was designed to evaluate employees at my company, further refining for the entire flow design was essential, demanding significant time and resources.
Employee Timesheet Management
Retrospective
Collaboration with Stakeholders and Development Team
The Bravo Suite Smart HR Management project was an invaluable experience that allowed for close collaboration with stakeholders and the development team. This direct interaction enabled me to align the design vision with both business goals and technical feasibility, ensuring a seamless integration of user needs and organizational objectives. Through iterative feedback and continuous communication, I was able to develop a robust, user-friendly HR management system that exceeded the expectations of all parties involved. This collaboration deepened my understanding of project requirements and challenges, ultimately leading to a successful product launch.