Green Gopher
UX/UI Design | Enterprise SaaS
Dynamic salary benchmarking and HR data in one place
Green Gopher is an enterprise level salary benchmarking tool for HR professionals in the non-profit and association sectors. While it started as simple salary and revenue trends viewer, the stakeholders had a vision of how it could become much more powerful.
Project Overview
Objectives
Take an existing salary and revenue tool and reimagine it’s capabilities based on the stakeholders’ vision.
Use the prototypes as a selling tool to garner customer interest and in turn justify a larger investment from the parent company.
What I Did
Designed a new SaaS tool using the existing base product as a starting point.
Researched users and industry, developed wireframes and high-fidelity mockups for user tests, and provided detailed walkthroughs for developers.
Results
Stakeholders were able to package the new product into an enterprise version of the original and market it to HR professionals in the association space.
Defining the Problem
A basic version of the product already existed but with limited capabilities. Users could adjust a series of filters to see average salaries and revenue trends in the non-profit sector based on things like experience level, metro area and industry, but there wasn’t much use for the product outside seeing these simple comparisons.
The product owners had a vision to build on the existing capabilities by integrating actual user data from the HR administrators’ software suites. Then Green Gopher could provide a birds-eye view approach of the entire organization’s personnel and finances, while offering the users the ability to automatically generate dynamic reports and forecast salary predictions.
Screenshot of previous version
Product Requirements
Lookups and Comparisons
Lookups: Ability to query data by different parameters such as person name, position, company, industry, region, size, etc.
Comparisons: In addition to looking up data, we want to be able to see how a given data selection compares against another selection of criteria (e.g., look up a person and compare compensation across position, look up a company and compare across industry and region, etc.)
HR App Integration
Ability to connect existing payroll apps from various providers.
The ingested data can be used for continuous auto benchmarking of the employee population, report generation, and qualitative insights such as retention risk modeling.
Dynamic Analytics
Ability to generate customizable dynamic reports based on the payroll data.
Predictive analytics: If additional information about individuals is provided through integrations or by uploading the data manually, ability to display predicted salary, retention risk, etc.
Conversational interaction: Include a chat interface where the user can query on-screen data in natural language.
Organizing the User Experience
After completing some initial consumer and market research, the next step was to determine how the new functionalities of the product would integrate with the existing capabilities. I visualized this through a user flow diagram that illustrated the different paths a user might take within the application.
This allowed us to see how the existing features (i.e. reviewing existing data outside the user’s organization) could live under an “explore” tab, and would ultimately become secondary to the new features. However, the data provided in the existing database would still be relevant on the backend to provide comparisons to the user’s organization data.
UI System Development
Green Gopher already had some basic branding and UI styling in place when I began working on the project. In order to not abandon any existing brand equity, I kept the overall color scheme of the product/brand but made slight adjustments for better visual hierarchy and accessibility.
I introduced a bright orange CTA color to differentiate from all the greens in the existing brand, as well as accent colors for different labels. I implemented soft angles wherever possible and bright color palette to give the product a sense of being friendly and approachable.
Early Tests with Wireframes
Once the user flow was approved, I began constructing low-fidelity wireframes to visualize the experience and begin some preliminary user testing. Overall the experience didn’t change too drastically from this stage to high-fidelity screens, except for rethinking how the chat interface would be integrated.
Initially the stakeholders had desired for the GopherAI chat to always be visible in the right rail, but ultimately users felt this was too “pushy” of an approach and impacted visibility of the data. Instead, the feature was moved to the left navigation as a slide-out rail that could be activated on any page when needed.
High-Fidelity Screens
Two sets of controls would be needed for the new comparison functionality: one to control what parts of the user’s data are shown (for example, employees at their organization that fall into a certain salary range) and a set of controls for what the user is comparing that data against.
The solution that worked best with users was to have the primary controls along the top of the module and the “compare against” as it’s own contained set of controls.
Dynamic Report Generation
Reports were a major new feature, and one that involved a couple rounds of testing with users to find the best solution. A previous version tested involved splitting the report generation process into 3 sliding screens in an attempt to reduce the amount of content presented at one time. However, dividing the process into multiple pages added more perceived time and effort to users.
The final solution involves completing a 3-step process of what sections to include in the report, what data should be analyzed, and what comparisons to include. Having the steps presented in one page rather than as a segmented process reduced perceived time and effort to initiate a report.
Users can then edit the report dynamically by either adjusting the controls or interacting with the agentic AI (shown below).
Results
Stakeholders were able to package the new product into an enterprise version of the original and market it to HR professionals in the association space.
Created with Brightfind Inc.