0%
100%

MyYogaWorks

Client:
MyYogaWorks
Year:
2018
Project type:
Website and brand redesign (pro bono)
Project duration:
3 weeks
Role:
UX Designer, UX Researcher
Contributors:
2 UX Designers, 1 UX Researcher/Designer
Tools used:
Index cards, Sketch app, InVision,
Visit Project:
Link

Overview

MyYogaWorks is a premium online yoga subscription business based in LA that offers 1,000+ classes users can access anytime, anywhere. We redesigned their online touch points with the goal of increasing long-term subscribers.

Challenge

MyYogaWorks was seeing customers either canceling or not converting at the end of their free trials. How might we reduce the churn rate and increase new trial subscriptions? 

How might we convey the personality at the core of MyYogaWorks to create an emotional connection with subscribers? How could we sell the MyYogaWorks experience from the homepage?

This tied into our design challenge of reimagining the conversion funnel, from homepage, to subscription sign-up, to dashboard.

How could we redesign this flow to create a personal connection through design and convey a fun, light-hearted personality, while giving visitors the pragmatic details they needed to feel secure subscribing and see MyYogaWorks as offering a great value?

Discover

MyYogaWorks had already done their own in-house research. They gave us access to these results but we wanted to validate their findings and get updated data with our own research. They also shared that they had clear goals in engaging us to redesign their user experience.

Design goals

  1. Rebrand MyYogaWorks as fun and relatable
  2. Redesign the homepage conversion funnel to create a greater emotional connection and increase conversion and retention

Heuristic evaluation

We began our discovery with a Heuristic Evaluation.

Key takeaways

  • Ghost button was being used for subscribe option which meant potential subscribers were missing it
  • Different styles were being used for the same call to action

Competitive & comparative analysis

I followed up with a competitive and comparative analysis.

Key takeaways

  • Competitors leveraged greater personalization and delightful illustrations in their experiences

Empathy map

Before and during user interviews, we empathy mapped as a team to align ourselves on the user, and to synthesize prior user research MyYogaWorks provided for us.

User empathy map

Key takeaways

  • Our users were busy and didn't have time to attend studio classes or deal with parking
  • They were mostly female, intermediate in experience level, and many were new moms
  • Because MyYogaWorks wanted to target a fresh audience, a number of our demographic would be new to yoga

User interviews & surveys

I worked on survey questionnaires that MyYogaWorks distributed to their user base. 

Summary of survey results

I also attended a "Mommy & Me Yoga & Fitness by the Sea" class, at Santa Monica’s Palisades Park to interview yogi moms in person.

‍"Mommy & Me Yoga & Fitness by the Sea" class

Define

The feedback we received from our surveys and interviews yielded a wealth of data we affinity mapped.

Affinity map

We affinity-mapped as a team and filled most of a 12x12 wall with our findings.

A very small sample of our affinity map
A summary of our initial synthesis

Key takeaways

  • MyYogaWorks users craved greater personalization in their class selection, profile and homepage layout
  • They also wanted help reaching their goals through scheduling and accountability measures

User personas

From our affinity mapping, we created three user personas: Maya the New Mom, Penny the Practictioner and Yisell the New Yogi. Yisell's user persona was my contribution.

User persona for Yisell the New Yogi

I dived into what Yisell's journey would be like as she interfaced with MyYogaWorks.

Yisell's journey

Key takeaways

  • What users wanted amounted to a partnership, with MyYogaWorks ushering them along on their fitness journey
  • MyYogaWorks could do this through branding that spoke to the reality of their users' experience, helpful features like reminders, easy-to-understand yoga and class info, and greater personalization options

Feature prioritization

We categorized feature ideas we sourced from our research according to how impactful and expected they were. 

For our three-week sprint, we mainly focused on features that were expected and high-impact.

However, we did manage to include some unexpected features, such as dashboard customization, yoga prop icons, and accessing journeys from the dashboard, that we thought would address some of the issues surfaced in research.

Feature prioritization matrix

As a final step in our definition phase, I wanted to map the existing MyYogaWorks user flow so we could visualize the paths users took through the MyYogaWorks website.

MyYogaWorks user flow

Key takeaways

  • Users only navigated through the homepage, login and onboarding flows once
  • Because cookies ensured users stayed logged in, it didn't make sense to call-out the login button over the subscribe button

Develop

We'd made our discoveries and narrowed in the pieces of our solution, it was time to start developing it into a cohesive experience.

Design studio

With our feature prioritization matrix, we came together to run a design studio exercise and turn our favorite features into sketches of key screens.

My team, in this room, filling it with sketches

Wireframing

We split up our wireframing work among the team. I thought the onboarding process was key, so I worked on onboarding screens. Onboarding is an important flow, that's often overlooked, and I thought it was a feature that needed to be expanded to foster that emotional connection with the MyYogaWorks convert. 

However, because we were running short on time and my team members felt the onboarding would be straight-forward, it hadn't been part of our initial design studio process, and I struggled to capture my team's consensus on my wireframes.

I finally requested the help of the team to do a mini design studio just for the onboarding flow. 

Quickie design studio sketches

They spring-boarded off my initial ideas and added their own contributions that enabled me to build wireframes we all gave the thumbs-up to.

Visual design

For our rebranding, we started by creating a new style guide that included sans-serif fonts, soft edges, and pops of color, particularly in experience-level markers. We decided to move away from the black buttons MyYogaWorks was using.

We also wanted to update the copy to emphasize the convenience of MyYogaWorks, reiterate what the user was getting and how it works, as well as being encouraging in our word choice. We particularly wanted to create a real, personable voice for MyYogaWorks.

Finally, as part of our visual design, we wanted to introduce design trends like illustration mixed with photography, colorful gradients, mixed patterns, and vivid color palettes.

I created the following illustrated photo composite for the onboarding flow.

Onboarding illustrated photo asset I created

Deliver

As we neared the end of our sprint, we wanted to get and implement user feedback before presenting our prototype to our key stakeholders.

Usability testing

We all individually participated in usability testing. Some feedback I heard first-hand included positive reception to the free-trial expiry calendar reminder seen during onboarding, and excitement at personalization options.

Collectively, users mentioned wanting:

  • An option to skip certain onboarding screens
  • Class length prominently displayed on each class video
  • A clear idea of what they were getting from the homepage
  • To be reminded through the sign up process of the value of what they were getting

Prototype

With our prototype, we wanted to offer personalization to create a sense of investment in the practice and product. We employed a colorful palette and playful copy to convey MyYogaWorks personality and create an emotional connection with subscribers. Using the same playful tone, we emphasized the convenience and value of MyYogaWorks.

 

Next steps

  • More testing iterations to get feedback on copy and visual design, beyond just basic usability
  • Visual design iteration for greater cohesion in design vision
  • Opportunity to develop the Journey series and some other unexpected features (including gamification elements) to differentiate the MyYogaWorks brand further from competitors
  • Treating video titles and descriptions with lean content rewrites so they are simple and meaningful to users
  • Being upfront about time and props needed

See my other work

Blizzard | MLG

I assisted MLG with the redesign of key product experiences and features.

The Commune (@Medium)

I participated in the 2018 SOLA/HACK design hackathon for South LA.

Bird Tour

We integrated a new self-guided tour feature into the existing Bird app.