Stryd Membership

CLIENT
Stryd, 2021

ROLE
Product Design, UX/UI Design, Illustration

PLATFORM
Native apps (iOS and Android), Web (desktop and mobile)

TEAM
Stryd software team members, marketing team members

Stryd launched a subscription-based software service in conjunction with their existing Stryd running pod. This announcement included new features, a low introductory cost, features retained for previous users, and a new lower pod cost with a membership commitment.

I helped design both the native app and web membership tiers, new purchase flows, and a marketing landing page as well as promotional graphics. In tandom with our Lead Product Designer and platform software engineers, we mapped out the purchase flow both in-app and on the web, as well as the features that will be locked depending on your membership tier. Company leadership decided on the cost and offering specifics and I worked with marketing to support promotional mocks and graphics.

THE CHALLENGE

While this was one overall project, there were multiple platforms and platform-specific considerations. In addition, we announced that we would move to a membership / subscription based model in the fall in six months time—spring 2021. We therefore decided to launch the beginning of April, and while communicating this to users for transparency we also had to stick to this deadline, which included needing marketing copy for translations, submitting the apps for approval in the app stores, as well as transitioning our storefront off of Shopify.

THE APPROACH

I began by mapping out all of the different touchpoints across both the web and in-app experiences, meeting with the lead engineers from each platform and working with my lead designer to make sure we were taking everything into consideration. Once this was confirmed, I moved into low fidelity wireframes, re-using our standard components and modals across both platforms.

On the web, moving off of Shopify meant we had an entirely new canvas for the storefront, but we had our pre-existing external marketing website to take into consideration brand wise. The lead designer started the overall wireframe for the web pages, and I worked with the lead front-end web engineer to make changes and work through logistics with the wireframes. I moved into lowfi designs, continued to check in with all-stakeholders, and moved to the final hifi designs, leaving the images for the cart items towards the end.

On mobile, I moved from wireframes to lowfi designs by meeting consistently with the lead mobile engineer and lead product designer. We wanted to include a screen that takes you into the purchase flow as well as dismissible banners. From there, we made a carousel outlining and visualizing the benefits of the paid membership, as well as a table with the specific features that are included. There were two flows depending on if you are a new member or current member, and we also had to design what the locked features look like and consistently message what you’re missing if you go the free “data only” route.

The feature table showed feature availability based on your tier (previous members, called ‘pioneers’, have continued access to certain features, and there is a free month preview for the first month). The illustrations and table used on mobile were also included across marketing and customer service communications and the external marketing website landing page.