⬤

Tier selection

Product designer / design systems lead, Stash

In 2023, Stash wanted to update its tier selection screen to give customers a clearer understanding of the value of their subscription.

Customers were often selecting plans that may not be the right fit for them, while others were surprised to learn that Stash is a subscription service upon onboarding.

This project was a collaboration with two front-end teams: the design systems team and the universal features team, both of which I was a part of; as well as the VP of Product and other key stakeholders.

Fig. 1: The old tier selection screen.

We concepted various ways tier selection could be organized based on the designs of other subscription services and their users’ end goals.

Each of these concept highlighted the painpoints it aimed to solve and metrics by which to measure success.

Fig.2: (Concept 1)

By giving customers the ability to expand and read more about each benefit our plans have to offer, customers will gain better understanding of what they’re getting with their subscription.

Fig. 3: (Concept 2)

By highlighting unique Stash+ features, consolidating similarities between both plans, and offering a comparison chart view, users will be able to quickly compare each plan to assess which one meets their needs and financial goals.

Fig. 4: (Concept 3)

By presenting a comparison chart users will be able to quickly compare each plan to assess which one meets their needs and financial goals.

Fig. 5: (Concept 4)

By leveraging social proof (e.g. customer testimonials, stats that denote upside of Stash+, etc.), customers will gain more clarity on both the rationale and emotional value our plans provide.

These concepts were tested internally and with customers in interview settings using lo-fi prototypes.

This data was then summarized and used to pitch the direction we would go in to stakeholders.

Fig. 6: Each concept was designed and prototyped using lo-fi designs. Thanks to a regularly maintained design system, this process was relatively quick.

Fig. 7: A consolidated view of the data we gathered from customers. Customer interviews gave us the opportunity to learn how they were feeling as they navigated through each concept on both desktop and mobile. We learned that while comparing plans was an obvious choice, we needed to be careful about cognitive overload.

The winning concept was one that allowed customers to compare plans with a glance. The challenge was creating a screen that contained a lot of information without being overwhelming.

Fig.8: Early explorations, determining general page layout.

Fig. 9: Variations on the plan CTA.

Fig. 10: A/B testing to determine 2 variations we were caught between.

Fig. 11: During testing, we learned that some patterns established in our design system were ineffective, so revisions needed to be made. As the design systems lead, I contributed all new components and patterns within tier selection, each of which underwent its own iterative process.

Fig. 12: Final mobile flow.

Fig. 13: Final desktop flow.

The team and I tested for success by measuring the impact of the new designs against specified controls.

The new tier selection screen was initially split 50/50 across all platforms and then monitored against old designs. Over time, we gradually increased availability to reach statistical significance.

Unfortunately, I along with 25% of Stash’s employers were laid off in early 2024, halting my work. However, I am proud of the clear improvements we made to this screen and consequently Stash’s design system.