Green Gopher
UX/UI Design
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.
The Problem
When I was approached to work on this project, a basic version of the product already existed but with limited capabilities; users could adjust a series of filters to see average salaries 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’ existing 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. The specific requirements are outlined below.
Basic Functionality Requirements
o Lookups: Ability to query data by different parameters such as person name, position, company, industry, region, size, etc.
o 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.)
App Integration Requirement
o Ability to connect existing payroll apps from various providers.
o The ingested data can be used for continuous auto benchmarking of the employee population, report generation, and qualitative insights such as retention risk modeling.
Analytics Requirements
o Ability to generate customizable dynamic reports based on the payroll data.
o 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.
o 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.
Wireframing
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 prototypes, 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. Instead, the feature was moved to the left navigation as a slide-out chat window that could be activated on any page when needed.
UI Styling
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.
Prototypes
