
efficiency through automation for hr appraisals
Redesigning HR Performance Appraisal with automated processes that enables HR teams to focus more on strategic initiatives and reduce time spent on manual work.


Company: hradvocate (owned by neudesic)
HRAdvocate is the leading cloud based SaaS Human Capital Management (HCM) platform for the middle market that enables organizations to streamline global HR processes and manage critical information to recruit, hire, retain and engage employees.
work done
Conceptual Design, Visual Design, and Interaction Design
Sketches, wireframe, whiteboard brainstorm, hi fi prototypes, animated micro-interactions, Invision clickable prototype
UX Research
User & Stakeholder Interviews, User Persona, Competitive Analysis, Accessibility Standards ADA, WCAG 2.0, Heuristics Evaluation
Design System, System Style Guide, and Design Toolkit
Collaborated with cross-functional team to get data and insights.
Strategy Vision, Ideation, Iteration Present to stakeholders and clients
User Testing and Validation
Launch product
overview
As a Lead UX Designer at HRadvocate, I led key Visual and UX Design of cloud based SaaS Enterprise HRMS Software which was inherited from V1 Legacy HCM software. I focused on the creation of over all user experience strategy, interaction design, user interface design and research artifacts, and ensured quality and timeliness of creative deliverables in collaboration with engineering, product, technical and business stakeholders.
Success Metrics
Finalist in the 2018 SaaS Awards Program for Best SaaS Product for HR.
Positioned as an Innovator in the NelsonHall 2018 Next Generation HCM Technology NEAT Evaluation.
High client satisfaction ratings for automating HR processes and reducing time spent on manual work.
platform
Responsive, Mobile First
Project timeframe
Sep 2017-December 2017
My Role
Lead UX Designer
Tools Used
Sketch, Invision, Zeplin, and Principle

design solution: before and after
Here is a snapshot of a complex problem and a simplified solution crafted with User Centered Design Principles
PROBLEM OVERVIEW
The legacy version of HR Performance Appraisal is built by engineers without any design direction. The processes are complex, unmanageable and time consuming.

DESIGN SOLUTION
As a solution, I redesigned the next generation of HRadvocate Performance Module helping HR teams shift towards more manageable and automated processes that enable HR to focus on more strategic initiatives and reduce time spent on manual work.

Project goal
To redesign HR Performance Appraisal with modern SaaS UI enhancing automation and simplifying processes that saves time for HR teams.
What is Performance Appraisal?
In 2015, HRAdvocate added Performance Module to it’s HCM Suite. The Performance Module is part of Employee Management Service (EMS) where the HR Administrator is the key user persona. The HR admin executes Ad- Hoc or Automated Performance Appraisal for the Manager and the Employee. Performance Appraisal is an ongoing process of communication between a supervisor and an employee that occurs throughout the year, in support of accomplishing the strategic objectives of the organization.

aligning user goals with business Goals
business goals
High client satisfaction ratings for its ability to deliver innovation to meet their future needs.
User goals
Reduce time and frustration in HR Performance Appraisal which has manual processes and complex UI to manage.
cross-functional team collaboration
The team consisted of senior executive stakeholders, data analytics, Product Managers, Front-End Engineers, Backend Engineers and QA.

stakeholder & User interviews
I interviewed stakeholders from diverse teams and users to understand V1 Legacy version of Performance and what they envisioned in the new SaaS version. Stakeholders included VP of Product, Director of Product, HR Director, QA Engineers, Backend Engineers, Front End Engineers and Data Analytics specialist. QA and Data Analyst provided me with the metrics which helped me understand how well the is working for current users.
I interviewed the current users of V1 Legacy version to understand their pain points and improvements needed in the new frature.
These interviews provided internal feedback, which I aligned it with user feedback, and prioritized design changes.
Persona
I created user persona to help define the target user along with its goals and pain points. These pain points are to be addressed in the design solution.
Competitive Analysis
I conducted competitive usability study, which helped me gain insight into user behaviors with a broad range of design options and measure product’s key performance indicators (KPI’s). Competitive analysis also helped me understand why and how users behave in certain ways. It helped me learn features that users like or don’t like and find opportunities to tackle unmet needs.

Team Brainstorming
I collaborated with Product Managers to brainstorm the solution.
Ideate
Conceptual sketches
Based on User Interview feedback and Business goals, I started to conceptualize my designs with sketches.
wireframe and hi fidelity mockup
accessibility & inclusion design
Design for Universal Access
Contrast and color
I applied Contrast and Color as per ADA guidelines for our users with visual disabilities, to perceive content on the page.
WCAG 2 “Contrast Ratio”
I applied WCAG 2.0 guidelines in the UI design for the successful contrast ratio and text size as per accessibility guidelines.
CREATING ACCESSIBLE TABLES & FORMS
Performance Appraisal Application UI Design consists of data tables and forms. I applied general table and form accessibility guidelines to my designs.
According to accessibility guidelines for data table, presence of Title, Header of column and rows helps screen readers with help of markup tags like <caption> and <th> . I ensured the accessibility guidelines for data tables were met in our markup with our frontend engineers.
Forms are logical to use: I designed forms that are easy to understand, complete, and submit for users with special needs. Instructions, cues, required form fields, and field formatting requirements are clearly identified to users. Error recovery is intuitive and descriptive.
Ensure Forms are Keyboard Accessible: Users who cannot use a mouse navigate web pages with the keyboard. We ensured our application forms can be understood and operated with the keyboard alone.
Associate Form Labels with Controls: I ensured the use of <label> tag in markup and ARIA labels (
aria-labelledby
andaria-label
) available in bootstrap. HRAdvocate SaaS platform is a responsive application which can be used in both Desktop and Mobile. I designed a responsive version for every module in HRAdvocate. As a UX Lead I led the team to use “Bootstrap” framework to pursue SaaS Responsive layout. Bootstrap supports Accessibility for control elements using ARIA labels as recommended by WAI-ARIA -Accessible Rich Internet Applications (ARIA) Working Group.
Offering Clients choice of colors (Accessibility Evaluated): We offered our clients two choices of UI colors, one dark and other light. Most popular choice was dark theme. Both themes were evaluated and built for Accessibility.

DESIGN SYSTEM
I created System Style Guide which leveraged UI patterns and code components needed to build products coherently across devices and modules.
DESIGN ITERATIONS
Iterative Design: I created multiple iterations of the solution design to refine it to a high level of user experience quality.
Iterative Design 1
Iterative Design 2
Iterative Design 3
Iterative Design 4
Before & After Design comparison
animated prototype

usability testing
Qualitative user testing was conducted using usertesting.com using the final interactive prototype. This helped me refine the final design solution before it went for development.
I tested and validated the designs early and often with hi fidelity interactive prototypes in InVision. My users included HR Director and HR Assistant. I monitored live User Testing. Advantage of early stage testing helped me make changes to the design and test new features. I conducted accessibility evaluation to make sure the application is in compliance with ADA best practice for Accessibility and WCAG 2.0 guidelines for Web and Mobile application in User Interface design and frontend development.
FINAL PRESENTATION of design solution
I presented iterations of my designs to the stakeholders regularly till we accomplished the final design solution. The stakeholders included Engineers both Backend and Frontend, VP of Product, Director of Product and Project Manager.

CHALLENGES
There were many design challenges in this project. Based on Heuristic Evaluation, the Legacy application had many deficiencies.
Consistency and Standards: Lack of UI conventions and existing standards misled users in what to expect and how to operate the interface. The system needed plenty of work around to achieve a user task. Users were given training to learn work around
Solution: Creating a Design System helped maintain Visual consistency across all modules and devices of HRAdvocate application. In new design, I have carefully designed the User Interface such that the use can accomplish multiple goals in a single screen with least amount of clicks.
User Control and Freedom: The user was not in control of the interaction, if user made a mistake there was no way to undo it clearly.
Solution for User Control and Freedom
Solution: I have included “Cancel” and “Save” buttons which gives user “Control” and “Freedom” over actions taken to undo them or just exit out easily using “x” icon. Also the UI feature allows user to remove a template incase it was created accidentally or now the user has change of mind.
Flexibility and Efficiency of use: Users had to be trained to use V1 Legacy version, most user interfaces were difficult to use for inexperienced users.
Solution: In V2, I have designed the User Interface such that it is more intuitive and most likely will drive the user to complete a task with ease. These User Interface have been user tested before developed.
Match Between the System and the Real World:The information was not delivered in a logical order. Information Architecture lacked structure.
Solution: I designed Information Architecture using Card Sorting method and applied it for Menus, Labeling Menu items so that users can easily find the information to complete the task, using Back-Next Buttons in Wizards. and designing logic in the task flow as well.
Visibility of System Status. There was no notifications for users’s actions leaving the user confused about the system’s task flow.
Solution: In my UI designs, I have provided the user with notifications at every action of the tasks. For example I have provided the user with “Confirmation” notification for adding a task or deleting a task.
Error Prevention: The V1 application lacked in checking for errors and presenting users with users with a confirmation dialog.
Solution: I have provided “*” for “Required” fields across the platform in all the forms where appropriate and informed the user with error message and toaster messages.
Help and Documentation: The V1 application lacked user assistance across the application.
Solution: The HRAdvocate HCM application has system wide help assistance via global search on any word or topic. Also, there are help icons across Performance Appraisal and other modules in HRAdvocate application.

UX DESIGN CONSTRAINTS
Along with SaaS design of HRAdvocate HCM application, the business also offered custom solutions of any HCM modules to fit the customers need whether SaaS or On Permises. As a Lead UX Designer, I was challenged to leverage a single universal design solution that would meet the needs of the customer without causing any design/technology debt.
UX SOLUTIONS
SaaS Performance Module was designed based on product style guide and consistency was ensured across all product features.
ADA Best Practice for Accessibility and WCAG 2.0 guidelines for Web applications both in design and front-end development were implemented.
Usability Heuristic principles and User Centered Design principles were applied in designing SaaS Performance Module.
Delivered on target time to be able to demo at upcoming convention.
LAUNCH, AWARDS & ACCOLADES
HRadvocate is a Finalist in the 2018 SaaS Awards Program for Best SaaS Product for HR or Recruitment
IRVINE, Calif., Aug. 9, 2018 /PRNewswire/ -- HRadvocate, the leading Recruiting and Human Capital Management (HCM) platform from Neudesic, is a finalist in the 2018 Software-as-a-Service Awards, created by the International Software Program which is in its third year of recognizing and celebrating innovation in software.
HRadvocate Positioned as an Innovator in the NelsonHall 2018 Next Generation HCM Technology NEAT Evaluation
IRVINE, Calif., July 17, 2018 /PRNewswire/ -- HRadvocate, the modernized Human Capital Management (HCM) platform, was identified as an "Innovator" in both the Mid-Large Market (upwards of 500 employees) and Small Market (with less than 500 employees), in a recently published NEAT evaluation of the leading cloud HCM technology providers, by NelsonHall, a global BPS and ITS analyst firm.
HRadvocate Modernizes As Software-as-a-Service, Streamlining Talent Management And HR Processes
CHICAGO, Oct. 4, 2016 /PRNewswire/ -- Today at the HR Technology® Conference & Exposition, Neudesic announced modernization of its HRadvocate HCM (Human Capital Management) solution designed to streamline global HR and talent management processes from hire to retire.