UI Design
Design Systems
Prototyping
Usability Testing
Product Thinking
Skye HR
A technology software platform that humanizes the HR process workflow of restructuring a workforce.
As a UI/UX Designer on this client's project (name withheld to protect NDA), I was brought onto the project to create a new design system and refresh the legacy designs from a different vendor. Although this was meant to be a 7 month long engagement, the project was unfortunately paused early due to budgetary concerns on the client end. During the one month time period, I was one of three designers on a team of 10, working alongside a project manager, front-end and back-end developers, and a QA engineer.
Our core team and client stakeholders called twice a week where we actively communicated project requirements, and presented new designs and updates. Internally, we worked in two-week sprints where I checked in with software and QA engineers to identify any limitations within design-developer handoff and validate design bug checks. I also received and gave creative feedback from daily design synch-ups with the internal Lextech design team.
Organizational changes within a company — whether that be restructuring, layoffs, or mergers acquisitions — can be a daunting undertaking. From issues like eliminating bias, to ensuring confidentiality, to avoiding regrettable turnover, it’s not a process that is easily approached. Endless meetings, roadblocks, and spreadsheet iterations that stem from the manual process can turn into costly mistakes and significant delays. Is there a solution that can re-imagine this human-work experience for HR personnel?
Though our initial problem statement was quite broad, our team was able to brainstorm with the client steering committee to prioritize three guiding principles to help us understand what re-imagining the existing HR workflow really looked like:
Measured by: Time to complete a project, increased quality, and reduced risk/errors.
Measured by: Accessibility, diversity & inclusion, empathy towards employees in the process.
Measured by: Training required, hours of consultation or support.
%20Selecting%20Talent.png)
My main area of ownership was creating the multi-step process of New Project Set-Up. Conceptually, I knew projects were created either for a "Distribution" process where talent reviewers evaluate roles, and "Evaluation & Selection" process where reviewers evaluate individual employees, then review talent to role mismatches. I began with sketching initial ideas and concepts with the very broad requirements. With the goal of Automation in mind, I wanted to create a streamlined flow so users can quickly select their project type, and assign employees and talent reviewers/approvers into a pool.
1.1 Table Grid Exploration
1.2 Card View Exploration
1.3 Org Chart w/ Pop-Up Exploration
It was through the sketching process that I was able to discover further questions on the seemingly simple set-up process. Through client discussions on the new project flow, our team was able to define the responsibilities of many different user roles and create specific user use cases to reference. I realized our design had to accommodate for a multitude of user responsibilities, as well as a user hand-off partway through while still maintaining understanding and ease on all ends. A task flow helped me better understand the changing user needs and restrictions based on role.
For security purposes with the varying levels of access a type user would have to confidential information, project set-up was split up into "super admin" tasks and "project admin" tasks.
One major responsibility of our users is effectively identifying critical talent and roles, and matching talent to roles. This process often starts with making sure the right employees are in the right projects and users are correctly assigned to review talent. We recruited HR employees to participate in our testing session to see whether the New Project Set Up flow improved automation. We had them perform a series of tasks and share their experiences.
"I'm confused by the assign talent to users button...I thought I already did that step?"
-Participant 2
%20Selecting%20Talent%20OLD.png)
%20Selecting%20Talent%20NEW.png)
To overflow scrolling, we placed our employee grid on the bottom of our screen. However, this led to confusion as to the order in which to assign talent
To create a more logical step-by-step flow, we placed the employee grid on the top. Users can select talent first, and then assign to roles underneath.
Internally, our team ranked usability scores with a 1-5 rating from 1 showing a user really struggling to complete the task, to 5 being a user completing it effortlessly. Our overall scores for the tasks ranged in a 4-5 area, showing that users were able to quickly find and access the information they needed without much difficulty. We made some design changes to solidify the wayfinding of the process, optimizing automation in creating a new project.
This first flow showcases how the Super Admin would begin to set up a new project. As the Super Admin role entails, they have the ability to see all employee information from the master employee data file, and will select a smaller pool to be placed in the project. They assign a Project Admin to be the lead on that project and finish completing the more nitty gritty details like assigning individual talent reviewers and approvers to more specific groups of employees.
Our second goal was to make the stressful process of cutting down a workforce or reviewing employees to be as human-focused as possible. We wanted the users who were going through the Skye exercises and segmenting the workforce to be cognizant about the real people within their talent pool they're reviewing, and treat them with empathy.
After sourcing and presenting various illustration packs to our client, one was selected that would provide our team the flexibility to create a variety of diverse characters. We hoped that by customizing and stylizing these humanic illustrations, we could visually represent the type of collaborative and human-centered work that Skye users would be accomplishing.
Another focus throughout our designs was ensuring that the way our system refers to and describes talent was as human-centered as possible. Here in our table filters, we changed the verbiage of "rows" to "employees" so users don't just view their talent as numbers or disposable rows — they see individual employees instead.
One of the key components for our design team's 'definition of done' was ensuring all our designs passed AA Compliance for Web Content Accessibility Guidelines (WCAG). For us, this looked like accounting for many types of users, including visually and physically impaired users. Some of our solutions included screen reading, allowing for keyboard navigation through tables, and using rems instead of pixels for scalable font sizes to meet success criteria.
We collaborated with our developers to ensure the design break points and responsiveness were accounted for, and we always checked the Contrast plugin to ensure we passed AA compliance.
Read the full research document on text accessibility options through rems and ems here.
A look at the auto layout constraints we implemented in our designs so it's easily scalable and responsive.
Our set grid system that changes depending on user's page width. Our design team set the pixel where the grid system would shift to the next breakpoint down.
Giving users an overview for what step of the process they're in.
Focus on making the actual workflow experience a self-guided experience.
Our third goal was to reduce the amount of client training for first-timers using the Skye platform. For this, we focused on creating easy to follow informational pages that would walk each user through the rating process before they're about to begin. Whether that be the "Distribution" segment or the "Evaluation & Assessment", users would receive a refresh walkthrough and re-align on guiding principles or what metrics may qualify an employee as an "A" vs a "B" player. These pages ultimately would save our client hours in training and consultation time while giving users all the information they need.
One of the key aspects of this project was designing with scalability in mind. Using atomic design principles, our design team created a custom design system from scratch to ensure consistency across our design team. Having a solid, repeatable method for building and maintaining pages was key, especially with multiple designers working on different assets. Our focus was ensuring that future designers and engineers could jump into the files and implement without needing much input.
Although our client had to cut this project short due to unforeseen circumstances, our team had a fruitful 4 weeks of developing the foundations for Skye's future development. I quickly learned the importance of flexibility and how to stay quick on your feet within a changing project scope, especially while working in such a cross-functional team.
A good designer can create a strong user experience, a great designer can articulate to their stakeholders and engineers what makes it great, and why it's worth development time to implement. I really learned the importance of being able to communicate design decisions to our non-design client stakeholders and advocating for the UX Process along the way. Our many client discussions helped all parties align and redefine Skye's goals while also considering many edge case scenarios that helped shape the best overall user experience.
As our client takes the time to make the adjustment and changes they need to better support the development of Skye, we all have the hope that we could continue development in the future as partners. In our ramp-down period we focused on ensuring on clear documentation and cleaning up our design system so whichever designers pick up the project next have the full resources to continue in full steam.
