SugarcaneYoga.com
THE CHALLENGE
Improve the visual design and functionality of a private yoga instructor’s website
during COVID-19 stay-at-home orders.
RECOMMENDATION
In order to meet the needs of yoga practitioners, sugarcaneyoga.com should function more like a digital yoga studio rather than a gateway to classes and a calling card for consultations.
Click to view Usability Evaluation with Findings & Recommendation Report, multi-page pdf
METHOD & TOOLS
Directed Storytelling &
Laddering Research Interviews
Otter Transcribing App
Competitive Audit &
Comparative Inventory
Adobe InDesign
Heuristic Analysis
Adobe InDesign
Usability Testing
Zoom and Invision
Screen Flow Diagram
Sketch
Usability Evaluation with Findings
& Recommendation Report
Sketch and Adobe InDesign
Grayscale Wireframes
Sketch
Lo-Fidelity Prototype
Sketch and Invision
Hi-Fidelity Prototype
Sketch and Invision
Final Presentation
Keynote
RESEARCH & DISCOVERY
DIRECTED STORYTELLING AND LADDERING
RESEARCH INTERVIEWS
Notes and audio recordings were taken during research interviews with six research participants who currently have a regular fitness routine.
HEURISTIC ANALYSIS
The current Sugarcane Yoga website was scrutinized from all angles: branding look and feel, content, and the process of completing the purchase of a single yoga pass.
COMPETITIVE AUDIT & CONTENT INVENTORY
Sugarcane Yoga’s main navigation was compared against ten other personal trainer, and yoga studio websites.
MAIN NAVIGATION USABILITY TEST
A mid-fidelity prototype was built with changes to the main navigation showing some basic re-ordering of existing content. Usability testing was done with five participants to see where I could start eliminating steps, pages, and clicks needed to purchase Sugarcane Yoga passes.
THE THREE PAIN POINTS IDENTIFIED FOR
PROTOTYPED IMPROVEMENTS
12-STEP PURCHASE
Currently it takes more than 10 steps, from homepage to live zoom class link, to purchase a pass to attend a Sugarcane Yoga class.
LEAVING FOR PAYPAL
Financial transactions take users outside of sugarcaneyoga.com to PayPal making the purchasing experience feel even longer.
NEW CLIENT WAIVER
A waiver is emailed to new clients, who must sign it and then email it back, before attending their first yoga class.
PERSONAS
In order to fully empathize with a variety of users, four types of personas were developed that would each have unique perspectives on completing tasks on sugarcaneyoga.com.
NEW SCREEN FLOW DIAGRAM
The new main navigation is mapped out in the diagram below, shows the basic re-organization of content to eliminate redundancies and reflect added functionality to sugarcaneyoga.com.
THE FINAL PROTOTYPE
MAIN NAV: HOME
SUB NAV: BIO & TESTIMONIALS
I freshened up the visual design by updating the color palette to black and white with an accent shade of purple, making the website more engaging and accessible.
MAIN NAV: HOME
SUB NAV: CLASS DESCRIPTIONS
A handwritten font was chosen for “Sugarcane Yoga” in the headers to give a more customized and intimate feeling, bridging the gap between the digital and studio spaces.
MAIN NAV:
MENU OF CLASSES
SUB NAV:
LIVE ZOOM CLASS SCHEDULE
The main navigation has been whittled down to just three categories, supported by a sub-navigation bar for finding and viewing content more succinctly.
MAIN NAV:
MENU OF CLASSES
SUB NAV:
PRE-RECORDED CLASS LIBRARY
I was able to keep buying passes, requesting a consultation, and the shopping cart available at all times by framing each page of the site with those elements, which cut out a few steps in the purchasing process.
PROFILE DASHBOARD
All purchased passes, pre-recorded video content, and upcoming classes are organized for users in one handy location on their profile page.
THE WAIVER
The waiver is now on an overlay that pops up to be completed simultaneously while users sign up for and purchase passes for their first Sugarcane Yoga class.
I would like to thank Meagan Lass and Sugarcane Yoga for generously sharing all of the content I used for this project–all photography belongs to Sugarcane Yoga.