.png)
During my Product Design internship at Pave, I was assigned to tackle the most pressing problems at Pave.
Project 1: Working on the Benchmarking team, I revamped the visual library (that would eventually be used across all platforms) to guide users how to access free Benchmarking data after integrating their HR systems.
Project 2: Working on the Comp Plan team, I designed an onboarding user flow and modal prototype that familiarizes and educates users how to use the product before entering Pave's empty compensation planner.
Both of these projects enhance user delight and transparency across multiple products, specifically during the onboarding stages.
Role
Product Designer
Project Duration
2 months
Tools
Figjam/Figma
Team
Kate Butterfield, Manager
Pave's mission is to build the world's best compensation tools and easily accessible market data so companies can plan, communicate, and benchmark in real-time. On a larger scaled vision, they want to make compensation rooted in fairness and transparency.
One of Pave's main goal in Q3 was to add moments of delight by revamping the user interface of their product to ensure they are not only meeting user needs but leave them satisfied when completing complex tasks.
During my projects, I put Pave's mission and goals in the core of my work to help build a brighter future in the world of compensation.
The success of the Benchmarking product launch largely depends on the number of integrations completed. As of right now less than 50% of sign-ups integrate their HR systems, and without integrations, we have no data. Without data, we have no product.
We hypothesize one quick way to funnel improvements in driving more Benchmark integrations is by significantly revamping the email campaigns to better communicate Benchmarking’s value and gain trust early from users when integrating their HR systems.
We performed an A/B test on Customer.io comparing the success rates of engagement from the original onboarding Benchmark email to the newly designed email. The newly designed email was a success with a 5% increase in converting Benchmark users to integrate their HR systems.
Goal 1
Trust building
Build trust early on, before users enter our product
Goal 2
Clarity
Build clearer action-oriented steps that improve the onboarding process
Goal 3
Delight
Add user delight with visuals that promote value in our product
Goal 4
Scalability
Kick-off an email campaign that up-levels our use of branding across all Pave's platforms
To observe how users currently use the Benchmark product, I analyzed about 10 Log Rockets and noticed a few patterns of unsuccessful attempts of users not integrating their HR systems after signing up.
With Log Rockets alone, there is no clear answer why users didn't proceed with adding their HR integration. In this early research stage, my best assumption is they didn't realize they needed to add their integration to access data after signing up.
To compare Pave's Benchmark product and onboarding process, I looked through a couple of our competitors. One stood out which was called Welcome. Their product itself is oversimplified, but they had purposeful UX design during their onboarding process that was noteworthy.
Welcome's use of consistent visual language and clear walk-thru tutorials from their email down to their product make it easy and intuitive for users to follow through from signing up to integrating HR systems.
To connect the dots of my understanding of the company, products, and users, I led seven 1-1 meetings with project managers, engineers, a data scientist, researcher, and salesperson. This was an exciting opportunity to learn all the learning parts of Benchmarking (from research & development to go-to-market.) I had a few important takeaways that helped me understand possible user pain points.
It was becoming clear to me that the onboarding process from signing up to integrating their HR systems to their first Benchmarking data search is quite lengthy and not effective.
How might we build a clearer onboarding process that better funnels more users to integrate their HR systems?
One of the solutions I advocated for was adding an interactive (teaser) demo where a user can interact with an example Benchmarking data spreadsheet to play with the features and recognize the value of the product before having to add their HR integration systems.
Another is creating a modal for user education explaining clearly what is necessary in next steps: who should be involved, how much time this might take, etc.
My manager decided that revamping Benchmark's email campaign was a good kick-off to this project that would be quick and impactful for all of Pave.
To start off, I first gathered inspiration of product illustrations, looking for styles that could pair well with Pave's branding.
Then, I took screenshots of Pave's website to recreate that would complement the email campaign content.
Finally, I created a few quick lo-fi wireframes to visualize these screenshot recreation, skeleton-inspired icons to share for feedback.
After sharing for feedback, the next main task of Project 1 was ideating about 50 boards of new icons and headers.
During the ideation stage, I was keen on using Pave's design system to mimic Pave's products, while also visually exaggerating features to complement the action-oriented content that walks them through how to access Benchmark data. This is in hopes of converting more sign-ups to integrate their HR systems right after signing up (a step before entering the product.)
I played around with different styles of layout, color, and typography.
Building this library was exciting because it was a start of modernizing Pave's design system across all platforms.
.png)
Email headers were oversized (too long and bulky) and not interesting (only has the logo placed on a dark background)
Icons looked like stock photos that did not match Pave's brand well and not helpful in supporting the email content
No clear steps on how to access data (not stating that integration is a necessary next step)
The email is poorly designed (padding isn't even and buttons are large, overall not following a design system), which makes the email seem untrustworthy.
.gif)
Headers emphasize Benchmark's value by showing a preview of free product features
Icons enhance the clarity of the email and familiarizes users what to expect for onboarding
Clearly shows setting up integrations is essential and easy when getting started with Benchmark product
Builds trust by leveraging Pave's design systems and keeping a consistent visual language from email to in-product.
.png)
.png)
.png)
To finalize this product, I brought over the assets from Figma into Customer.io. I worked with Claudia, the growth director, who revised new content. She performed an A/B test comparing the success rates of engagement from the original email to the newly designed email.
Results showed there was a 5% increase conversation rate of those who integrated their HR systems through the newly designed email campaign. There are various factors that affect this outcome, so it is difficult to attribute this conversion rate strictly to the design.
For this project's ultimate goal of converting more users to integrate their HR systems after signing up, this first ship was successful in a small incremental way. In a larger scheme at Pave, this project was the first step in creating brand assets that feel more modern/in line with Pave's products, as well as changing the content to be more action-oriented, which relates to Pave's Q3 goal.
When an HR admin lands on an empty compensation planner, they lack direction on what to do first when some features may not make much sense to a first-time user, like Pave’s use of employee eligibility. (Currently, this becomes one of IM’s many responsibilities to ensure the admin is prepared for what they should expect before using the product.)
Build an onboard flow that familiarizes admins what to expect before landing on an empty compensation planner that will ease their experience by breaking down essential bits of the UI and contributing valuable moments of delight.
The success would be measured by how much we might have lightened the load on IM's in explaining the features of product and how well customers understood and became excited for these features.
Goal 1
Familirize
Ease HR admin's experience by adding an educational module before entering product
Goal 2
Delight
Add moments of delight through visuals, upleveling the UI
A tricky problem I was thinking largely about was how could I design an educational modal explaining what "employee eligibility" means and how it is applied in our UI, that users find valuable and delightful (in contrast, not adding friction to their ultimate goal.)
I created 3 lo-fi wireframes on Figjam to start exploring different layouts of visuals/interactions to explain employee eligibility.
I first created an interactive card layout where the user goes through each eligibility type on the left side, then shows an example, explanation, and UI preview on the right side.
Another type of exploration was a static version, where a user does not need to click through each eligibility type. All of the information was on the page, but seemed like a lot of information to take in all at once.
We started playing around with how we can add this "multi-switch" button component as part of the interaction to better match our design system.
Then, we explored what a horizontal divider would look like instead of a half-divided vertical page because it followed the format of the next page of the onboarding flow.
Lastly, we decided the timeline layout had the best use of space showing the right amount of information on the screen that users would find valuable to compare and contrast the UI's and definitions through this user flow.
Fun header to add a moment of delight in our product (newly created in our design system)
Clearly defines the differences of each type of employee eligibility and previews the UI of their use cases
Ability to compare and contrast ineligible and eligible employees by hitting either next or previous
Leveraging Pave's design systems by keeping a consistent visual language while adding new icons
What I found most interesting while doing both Project 1 and Project 2 is that I was designing for two different onboarding experiences with different intent-level of customers, even though they come from the same company, different products.
In Project 1, since the Benchmarking tool was free for anyone, we had low-intent users. When building this onboarding process, we wanted to eliminate as much fluff that could lead to drop-offs and show value of Benchmark's tool right away. We stayed away from an introductory module that would create a longer onboarding process.
In contrast in Project 2, since the Compensation Plan tool is part of the SAAS suite, we had high-intent users. In this onboarding process, it was beneficial for us to create an introductory module that eased user's experience when jumping into the product, even though this led to a longer onboarding process. Instead, we hope it creates a moment of delight in the midst of tackling the user's tasks when they use the product.
One of the challenges I faced during my internship was when I was practicing on framing how each ideation was bringing us closer to solving the problem. I learned how to better communicate why I was ideating versus merely what I was ideating.
Another challenge in this internship was shifting gears into one project to another. The two product teams were vastly different, and each design process had a different approach, but I found much growth learning different perspectives of approaching a problem.
I loved taking on the complexity of this fast-growing start-up and all its different products. Stakeholder meetings were so valuable in driving design solutions because I learned how the products evolved, where the product has been successful, and where there are pitfalls to solve for. I learned how to use a design system and carefully crafting my work around it. Pave's design team is so talented and generous with sharing their experience, I was thrilled to be mentored here.
.png)
.png)
