top of page
PRODUCT DESIGN
BANDS COMPENSATION FEATURE

A B2B finance HR tool for a quick overview of employees’ pay spread, finding outliers, and keeping track of pay levels.

Bands
TEAM

Product Designer, 2 Project Managers, 2-4 Engineers

PROBLEM

Lack of easy to find insights of pay bands by HR teams and finance teams.

VALUE ADD

How might we enable HR teams to import into easily and manger their compensation bands, unlocking capabilities that will help them to pay their employees fairly, hire better, and retain their talent.

AUDIENCE

HR Users

HR professionals look at these numbers only twice a year. They will regularly use the product and want to be able to understand patterns for hiring, promotions, and raises.

Finance Users

Finance professionals regularly look at these numbers. They need this feature to gain big picture overview and also be able to find outliers and update data.

Business Stakeholders

High-Level Executives want to see this feature succeed, have time expectations, and see this feature fit well within the whole product.

GOALS

Empower users

Allow for configurability and key insights lost in spreadsheets.

Open up the doors to other compensation and finance features

Salary is a building block for other compensation features, and this feature will open the door to more.

Ease of use

Ability to update with limited hand-holding.

SCOPE

Data Scope

Salary bands for all employees, high control over user access, cover small & medium company sizes and allow for flexibility in terms of structural organization & customization

Time Scope

3-4 months

Working Scope

Agile Process

CONSTRAINTS

Time

Tight timeline for this new feature to set up other compensation features.

Resources

This feature needed to be built from scratch. We had changes in engineers and limited engineers.

Limited graph library, which takes longer to create visualizations.

Future Features

Need to set up this feature for future additions and other related features.

PROCESS
DISCOVERY

Understanding the problem space

ANALYSIS & DEFINE

Defining needs, wants, don’t wants, and scope

IDEATE & PROTOTYPE

Designing the solution

FEEDBACK & ITERATION

Find the holes and improve on the design

TESTING & HANDOFF

Supporting during development, to solve for technical issues

DISCOVERY

Empathy Research
Interviews were conducted with high-level executives, subject matter experts, and users to understand the needs

Empathy Research Pain Points
Salary bands are limited to a two-level hierarchical structure
It does not support attributes such as tenure, job type, geography, and job family
Lacks other aspects of compensation, such as variable and equity

Data Audit
I dived into the product to understand how salary information is currently displayed and collected

Data Audit Findings

Not connected to any other data, such as structure

Only can be seen in a table if available at all

Challenging to update

No structure; everything is just listed in a field

Competitive Analysis
Researched what other products were focused on to show this information, finding what they were missing and what they found important.

Competitive Analysis Findings

Many competitors have a visual representation

Limited customization

ANALYSIS & DEFINE

Statistical Analysis

Ranges with the possibility of outliers

Midpoints of ranges

Data is organized by organization structure with the ability to add location and other organizational buckets

Define Research Findings

Flexibility needs to fit different organization structures & band structures

Multi-session oriented, easy to tailor the experience and come in and out of the application

The big picture and small details, an ability to get both views

Requirements

Part of a larger ecosystem, salary is the first step in a larger compensation features goal

IDEATE & PROTOTYPE

Outline structure

Visualize the compensation structure and user needs

Screen Shot 2022-11-06 at 5.36.30 PM.png
Screen Shot 2022-11-06 at 5.36.21 PM.png

Wireframes & Prototypes

Create wireframes and prototypes of ways to show salary bands and the general flow of importing data

FEEDBACK & ITERATION

Internal Feedback

Shared wireframes, then updated prototypes to the UX team, project managers, engineers, and Executive stakeholders to stay within scope and get buy-in. UX Feedback on flow and organization allowed for clearer calls to action. Stakeholders required a solution to keep legacy data. We changed how we allowed legacy data to be saved and created a separate data structure.

User Feedback

Approving of visuals

They wanted clearer instructions on how to fill out the wizard to get data into the feature, so we added a visual to help clarify the instructions.

Iteration

Continually make updates & prepare for handoff.

TESTING & HANDOFF

Handoff with Engineers

Engineer feedback was brought on early on to mitigate technical limitations. Given the quick timeline, we had to pivot regularly and update past the handoff. Communication was critical in keeping everyone up to date and mitigate risk.

Testing

We released an Alpha version to a few customers to be able to make updates. This allowed us to find some bugs early on.

BUMPS IN THE ROAD

Change in scope

As we continued, it was clear that the original concept would not be built on time due to a lack of engineering resources, and we needed to pair down the feature.

Technical limitations

Limited graph library limited the number of charts we could show; I pushed for the main graph, which resonated with users, and is standard across competitors.

Misunderstanding of Stakeholder needs

Late in the project, a stakeholder informed us that the flexibility for the product to reflect benchmarking was not a want but a need.

PIVOTING

Change in scope

I worked with the project manager and engineers to evaluate user needs to determine priories for the build, finding a balance between time, technical limitations, and required functionality. We ended up adding back in an extra feature after pairing down.

Technical limitations
I pushed for the primary visual chart, which resonated strongly with users, and is standard across competitors. An engineer found an alternative library, and with some minor updates to the design, we could complete the feature as intended.

 

Technical limitations
I pushed for the primary visual chart, which resonated strongly with users, and is standard across competitors. An engineer found an alternative library, and with some minor updates to the design, we could complete the feature as intended.

OUTCOMES

We released an Alpha version on time; I was able to make some quick design updates to fix feedback from the Alpha release.

Released feature to all users a month after intended launch. We were able to release the feature before other compensation features needed to be developed, with all priority asks from Stakeholders and users.

Case study summary.jpg
REPORTING FEATURE

A B2B custom HR tool for an easy overview of any HR metrics.

Reporting
TEAM

Product Designer, 1 Project Manager, 5 Engineers

PROBLEM

HR professionals struggle to see the big picture of their company and access data beyond spreadsheets. Additionally, the product was customers least favorite but most important feature.

VALUE ADD

How might we enable VP and HR professionals to answer their big questions and put the power in their hands to create any report possible, to make their jobs more efficient, share information, and gain insights into business metrics.

AUDIENCE

HR and People Operations professionals who have questions about DEIB, employee distributions, and company metrics.

VPs who view this information in meetings to help them make business decisions.

GOALS

Empower users to answer their big company and employee questions. Allow for configurability to view critical insights, quickly and easily.

 

Bringing in accessibility and UX/UI standards to create a better experience for the users.

SCOPE

Data Scope

Employee and company metrics are already in the product. Cover small & medium company sizes and allow for flexibility in capabilities and metrics.

Time Scope

12 months (continual updates, 3 months for initial UI redesign)

Working Scope

Agile Process

PROCESS
DISCOVERY

Understanding the problem space, reviewed feeback and talked to users to gain insights into reporting needs.

ANALYSIS & DEFINE

Defining needs, wants, don’t wants, and scope. Users wanted it to be easier to use, need for clearer options, more chart options.

IDEATE & PROTOTYPE

Designing the solution, creating wireframes and high fediltiy prototypes for user testing.

FEEDBACK & ITERATION

Find the holes and improve on the design. Shown to customers, steakholders and UX designers for feedback. Alterations to design as needed. We also did A/B testing for prototypes to test out new ideas.

TESTING & HANDOFF

Supporting during development to solve technical issues. Discussions to get colors, find issues with REACT chart limitations, and update designs to fit, while keeping accessiblity and ux standards.

OUTCOMES

We were able to raise our ratings by multiple points. Users found the application easier to use.

Comparison of Gross National Income, Education, and Gender in Africa for the United Nations Development Program

This project was created for the United Nations Development Programme (UNDP). The visualization shows the gap in gross national income levels between males and females in Africa, sorted by country. It visualizes the mean years of schooling for males and females compared to their Gross National Incomes (GNI).

 

The Length of the blue and yellow lines shows the average years of school. The yellow lines represent the male average years of schooling and the blue lines represent the female average years of schooling. The distance between the lines shown by the arches represents the differences in mean income of males and females in each African Country. Move the mouse over the lines to get the exact information for each county.

The Future of Pharmacy: Well Bar
A Pop Up User Experience

Along with a team, I developed a future pharmacy concept based on user research. We held a survey, completed direct, interviews, intercept interviews, observational research, card sorting, prototyping, and a micro-pilot to collect pharmacy research, understand users and their needs, and test out pop up concepts.

Well Bar is a wellness pop-up shop that enables urban millennials seeking fun, personalized, and trustworthy wellness options to meet with a health specialist, sample flavors, and play to create a custom health mix, empowering them to remain healthy without pharmaceuticals.

Organizational Health
On-Boarding Reboot  for Delivering Innovation in Supportive Housing (DISH)

I worked with a team of MBA students. Our team set out with the objective of helping the non-profit, DISH, further infuse their core values within various processes and systems, in an attempt to facilitate organizational health and evolution. In order to do this, we went through an extensive Appreciate Inquiry and design process to derive the positive core of the organization. We then identified opportunity spaces for intervention with the goal of designing a system that was sustainable, easy to implement, and conducive to innovation. 

experience.jpg
Advanced Leadership Academy (ALA) Summer 2017 Hugh O'Brain Youth Leadership Organization Motion Graphic Video

This publication created for the Hugh O'Brian Youth Leadership Organization's (hoby.org) Advanced Leadership Academy. It was shared out on the HOBY international Instagram, Twitter, and Facebook Page.

All Original Artwork, Created in After Effects CC 2017

Data Visualization
Design Strategy
Motion Graphics

© 2023 by Justine Keller. Proudly created with Wix.com

bottom of page