The UX design story behind Shopify’s Flex Comp tool
How we used an adaptive design mindset to build a complex internal tool
In August 2022, Shopify launched Shopify Flex Comp, our new approach totf compensation that puts product thinking at the forefront of how Shopify employees (a.k.a Shopifolk) get paid. It’s a bold and ambitious project that has the potential to rewrite the story of compensation in our industry.
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 — we now have Shop Cash, etc. — and we needed to create a flexible design model/platform we could build upon,
Designed by a small (but mighty) team and shipped in four months, the tool had to work for thousands of employees in multiple countries with differing currencies and legal frameworks.
Designing such a complex tool with this timeline required the design team to adopt a different approach and mindset to succeed. Maintaining an adaptive mindset, dealing with shifting variables, collaborating with teams across a variety of disciplines, and distilling complex legal/financial requirements into an easy-to-use design were some of the unique challenges we encountered during the process.
As a staff product designer at Shopify, I led the design efforts on this project. Here is the story of how we approached the UX behind Shopify’s Flex Comp tool and the main challenges we faced throughout the design journey.
Building the plane while flying it
Over four months, we built the plane as we flew it.
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 material and employee documentation;
And the list goes on…🥵
Concurrently, other teams across Shopify (legal, finance, engineering, support, HR, accessibility) were figuring out details in their respective domains. Legal, financial and technical variables shifted every day, making the project, at times, challenging and frustrating.
How did the design team manage to stay the course during this wild adventure?
Adaptable mindset is key
In order for this project to be a success, we realized early on that we had to adopt a solid adaptability mindset. We had to start designing without final requirements and knowing variables could change. We had to present designs to leadership that were not fully fleshed out, and that was okay. Lots of design exploration would be thrown away and that was also okay.
‘’Change is inevitable.’’ And that couldn’t be more true. The ability to adapt when change inevitably comes along is a critical skill in the workplace. Having an adaptive mindset allows you to look clearly at a scenario and make the necessary adjustments to continue moving forward.
Beth Hendricks
The high-confidence scenario
What does the 80% use case scenario look like? And what are the many edge cases we need to design for?
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.
Working in close collaboration with the finance team, we developed a user profile that would represent the most common scenarios for our new allocation system. That exercise allowed us to define some user tasks we could start working with because they would be needed for most users:
- Compare your current allocations preferences with your new allocation profile
- Select your allocation split between salary and equity
- Select your equity split between RSUs and options
- Review your summary
- Submit your preferences
- Get easy access to support and other documentation for extra questions
So let’s start by designing for that scenario and stress test our options with the edge cases.
That exercise allowed us to identify the high-confidence flows so we could start sketching ideas and share them with each discipline’s experts.
Active collaboration > Async feedback
Once we had our map of high-confidence UI blocks, we put cross-discipline collaboration rituals in place. Twice a week, we had sessions where we presented our strongest UX options to a group of leaders from each discipline (legal, finance, talent, engineering). We asked questions and explained the rationale behind our UX approach to decision-makers from each discipline. It was an excellent way also to understand why certain things couldn’t work, and collectively work through solutions.
Those collaborative sessions were extremely powerful for many reasons:
- Multiple disciplines stayed aligned on a unified user experience vision
- We adapted the UI quickly according to changing requirements
- We minimized risks of over-designing for solutions that wouldn’t work
- Engineers could assess the technical feasibility of the proposed solution and identify risks and opportunities for things that might not seem easy intuitively
- The front-end engineers could start prototyping quickly so we could test and feel the experience as we designed it.
- We avoided communicating feedback, rationale and ideas over long Slack threads and emails, saving energy and time.
Of course, we were the ones doing the things in Figma, but keeping other disciplines involved in our design process was a key part of our design efficiency for the Flex Comp project.
Designing a system of clarity
It’s incredibly simple for an employee onboarding into the new comp system to adjust their total rewards allocation by dragging a slider to the right or left. But for the UX team designing this one-of-a-kind tool — achieving that outcome — was anything but easy. So let’s cover the complexity hidden behind that easy-to-use UI.
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 thought: We’ve got to make this simple.
We wanted to minimize the stress related to employees’ allocation decisions and help them feel in control of their choices. The Shopify Flex Comp system is a positive tool that brings agency to our people. When designing a system in close collaboration with financial and legal experts, it’s easy to assume that your users understand economic concepts.
But the psychological aspect of being able to see your total comp as one number ended up being more powerful than first anticipated
Unpacking complexity
When you buy a new piece of furniture and you want to assemble it, it always comes with an instruction manual, which explains the parts and their functions. There is a step-by-step guide that helps you carry out the task successfully.
The instructions are not printed directly on the pieces to be assembled. Why? That would be high in cognitive load and result in a higher risk of user errors and sentiment of frustration. (Someone who always hates having to read the manual 🫣.)
By using a furniture assembly analogy, we defined more precise goals and outcomes for the two main facets of this new system:
- Flex comp UI: Users make their selection and submit their preferences — the action-oriented part.
- 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.
But both facets were equally crucial. With furniture, stakes are low. If you’ve assembled furniture enough times, you can probably succeed without the manual. And if you screw up, you just take it apart and try again. There’s no redo for comp. Once made, employees’ choices are locked in until the next election window. The choices employees make using the tool directly impact livelihood, so it’s critical they understand it the first time through. Having tooltips that quickly link to the theory of the practice part sets up users to make more informed decisions.
With that intentional segmentation, we were able to design a more focused UI and minimize the extraneous cognitive load that could accompany this new employee experience.
People can’t keep much information in their short-term memory. This is especially true when they’re bombarded with multiple abstract or unusual pieces of data in rapid succession. Nielsen Norman Group
The sliders recipe
There are 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.
How we minimized error states
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. (And who likes to be yelled at by a UI?!)
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.
Good error messages are important, but the best designs carefully prevent problems from occurring in the first place, so let’s focus on the concept that eliminates error-prone conditions.
Our final approach means the user is always in a valid state, resulting in a more positive and delightful experience.
The right balance between 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).
If you look at our 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.
Throughout each stage of the process, we kept one very important element in mind: Our launch date. That date helped us stay focused on the essential parts of V1, and it also helped us to make the right decisions quickly.
At the end of this design adventure, we were tired but confident in our solution. We trusted our process and could check all the boxes on our design launch requirements list:
- Is it easy to use? ✔️
- Is it accessible? ✔️
- Is it compliant with regional regulatory differences?✔️
- Does it look good? ✔️
Ship it! 🚀
Shopify Flex comp had an opt-in rate of 92% in the first opt-in window. It’s 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.
Looking back on this adventure, some key elements made all the difference in my opinion.
Accepting from the start that this project would not feel like a long, calm river journey was very important. With this attitude and mindset, we stayed focused on our primary objectives while keeping up a productive team spirit despite the multiple changes and an aggressive timeline.
UX designers are the ones bringing 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. It takes a lot of energy and motivation to push on team in which UX designers are the minority, but it’s so important. Being strong advocates for users’ interest, needs and experiences throughout the creation and development process were key to the success of Flex Comp.
Thank you for letting me share this beautiful journey with you. I hope you enjoyed the read. If you feel like talking, connecting, feel free to reach out here.
