Product Design | yogajournal.com

Worked with Director of UX on yogajournal.com. Projects included analyzing user flows and display of information, and creating landing page mock ups.

Landing page mock up for initial site migration.

 

PROBLEM
How to efficiently display yoga pose sequences for user in order to prevent long scrolling. Yoga sequences involve a series of steps and photos which were displayed in a long list layout. 

TESTING
We tested a carousel of photos to prevent long scrolling. 

SOLUTION
Final decision was to create animated GIFS and short 15-sec yoga sequences with After Effects. This would allow user to see full yoga pose or sequence in one frame with no scrolling involved. 

PROBLEM
How to organize the navigation bar. In particular, we wanted to analyze the Pose Channel. We asked the question, “How many clicks does it take the user to get to a yoga pose?”

PROCESS
I analyzed the channel and sub-channel levels by writing down each step the user takes to get to a yoga pose. 

FINDINGS
I found that on average, the user clicks 2-3 times to get to a pose.

PROBLEM
How do we present the Yoga Pose Library photos for initial website launch. The photography is outdated and the colors clash with the Yoga Journal branding. How do we create a cohesive look and feel with outdated photos? 

TESTING
Tried desaturating all photos to create cohesiveness. Also tried adding a duo tone effect to photos with hover colors.

SOLUTION
All poses will be rephotographed and styled according to Yoga Journal and Outside’s brand guidelines while taking into account the website look and feel.   

Working with the Yoga Journal Design System

Previous
Previous

Case Study: Mobile App Design

Next
Next

Design Sprint: Website Redesign