Defining the Problem and Designing a Solution
Flex Comp gives employees agency over their pay. Until today, the standard way for growth companies to pay employees has been an inflexible, unpredictable mix of cash and equity that takes agency away from employees and rewards them based on the market’s whims.
Our new system lets employees choose exactly how they want to allocate their total reward — between salary, Restricted Stock Units (RSUs), and Stock Options — and adjust their preferences as their lives change.Salary, stock options, RSUs are the starting point for options and we needed to create a flexible design model/platform we could continually build upon.
On the design side we created user stories; mapped user scenarios and tasks; explored different concepts; wireframed the solutions (desktop and mobile); simplified the content architecture; created a new visual branding and UI language specific to the tool; tested our solutions with internal employees in different roles and seniority levels; tested our solutions with users with disabilities; tested the solutions with the different edges cases and multiple currencies; created visuals for training materials and employee documentation.
In the end our final product had to work for thousands of employees in multiple countries with differing currencies and legal frameworks.
Cross-Functional Collaboration with Finance
The new compensation system needed to work in dozens of locations around the globe with different financial regulations and laws. We knew that the experience needed to be modular because not all employees would have the same allocation profiles. Therefore we collaborated with our finance team to build user profiles and craft user stories.
Using User Profiles to Define User Tasks
That exercise allowed us to define some user tasks we could start working with because they would be needed for most users:
1. Compare your current allocations preferences with your new allocation profile.
2. Select your allocation split between salary and equity.
3. Select your equity split between RSUs and options.
4. Review your summary.
5. Submit your preferences.
6. Get easy access to support and other documentation for extra questions.
This allowed us to identify the high-confidence flows so we could start sketching ideas and share them with each discipline’s experts.
Unpacking the Hidden Complexity of Simple UI
The final product that employees use to adjust their total rewards allocation, dragging a slider to the right or left, allows for extremely simple onboarding. But designing this unique tool — and achieving that outcome — belies a surprising amount of complexity.
People have different levels of knowledge regarding financial concepts. When we received the financial documentation that explained the new system to employees, we saw concepts like “salary vs equity”, “RSUs vs options“, “% of X was impacting % of Y”. We immediately thought: Let's simplify this.
Designing with Learning in Mind
We then defined precise goals and outcomes for the two main facets of this new system:
Flex comp UI: Users make their selection and submit their preferences.
Internal documentation and support material: Users can dive deeply into each financial concept related to this new tool and the underlying logic.
We knew we could do a better job of adequately explaining notions in a dedicated surface rather than condensing it down to fit in the UI. With this intentional segmentation, we were able to design a more focused UI and minimize the extraneous cognitive load that could accompany this new employee experience.
Designing the UI (Sliders)
There were multiple interactive control options for numerical parameter selection: steppers, matrices, virtual knobs, sliders, text fields, and toggle, to name a few. Each can be appropriate depending on the context.
For the Flex Comp main control, we wanted the UI to naturally map the user data being modified and processed in the backend. We explored options with multiple sliders stacked with unique variables, and quickly realized the UI would have to handle and communicate too many error scenarios.
When tying multiple slider controls to one total value, we often ended up allocating too much or too little of each slider from the available total. That would result in an employee’s total allocation value being in a constant error state and the primary submission action on the page being blocked until they figure everything out.
Designing the UI (Sliders):
Balancing Exploration and Precision
With complex parameters, a balance must be set between these two notions:
Exploration: Allowing users to easily explore the effect of the control for the whole range of the parameter (in this case, by sliding the controller)
and
Precision: Enabling the user to precisely choose a specific value (in this case, by using the text fields).
On the slider blueprint above, you’ll notice that the middle part allows users to explore their options quickly and helps assimilate the relation between the UI control and how it impacts their financial data. On each extremity, you’ll see the text fields that let the user easily reach a precise number by typing or keyboard navigation. That combination of controls makes that component comply with W3C/WAI standards, which was an essential requirement for every element of design in this system. The guardrails also prevent the user from selecting values outside of their allocated limit. Each individual user’s scenario is unique and bounded by its own limit.
A Glance at Moving From Sketching to Wireframes
With these notions in mind I worked to sketch and iterate wireframes on Figma.
A Look at the Final Product
Following wireframing, we were able to move from User Testing our prototype, to the final product.
User Utilization and Adoption
Shopify Flex comp had an opt-in rate of 92% in the first opt-in window.
It’s currently being used by thousands of Shopify employees and available in dozens of countries in many different currencies. Some of the world’s largest companies are now reaching out for advice as they redesign their talent and compensation systems.
Conclusions and Immediate Takeaways
One of the greatest takeaways on this project was how essential it was to stay focused on our primary objectives (Is it easy to use? Is it accessible? Is it compliant with regional regulatory differences? Does it look good?) despite complex challenges and an aggressive timeline.
As a Product Designer it is essential to bring user empathy to the decision table. Explaining why X or Y decisions could harm the users’ experiences and ultimately affect user satisfaction with the product was key. Being strong advocates for users’ interest, needs and experiences throughout the creation and development process were essential to the success of Flex Comp.
