SWEETBAY YOGA WEBSITE REDESIGN
SWEETBAY YOGA WEBSITE REDESIGN
SWEETBAY YOGA WEBSITE REDESIGN
Stay in the Flow, a Renewed Online Experience
Stay in the Flow, a
Renewed User Experience
Stay in the Flow, a Renewed Online Experience
Driving online engagement through improved branding, accessibility, & studio updates.
Driving online engagement through improved branding, accessibility, & studio updates.
MY ROLE
MY ROLE
MY ROLE
UX Designer
UI Developer
Website Designer
Motion Graphic Designer
UX Designer
UI Developer
Website Designer
Motion Graphic Designer
UX Designer
UI Developer
Website Designer
Motion Graphic Designer
KEY ACTIVITIES
KEY ACTIVITIES
KEY ACTIVITIES
Stakeholder collaboration
Research & insights
Wireframing & Prototyping
Branding
Usability Testing
Website building
TOOLS
TOOLS
TOOLS
Figma
SurveyMonkey
WellnessLiving
Lottielab
Squarespace
CSS
Overview
Overview
Overview
Sweetbay Yoga is an Iyengar Yoga studio with a mission to provide an inclusive and supportive community for all practitioners. While Sweetbay does a great job at providing a welcoming environment at the studio, they are looking to improve the digital experience with a new website ahead of the studio’s re-opening.
Sweetbay Yoga is an Iyengar Yoga studio with a mission to provide an inclusive and supportive community for all practitioners. While Sweetbay does a great job at providing a welcoming environment at the studio, they are looking to improve the digital experience with a new website ahead of the studio’s re-opening.
THE OPPORTUNITY/GOAL
THE OPPORTUNITY/GOAL
THE OPPORTUNITY/GOAL
Rebrand & build a new website that is intuitive and accessible, with the goal to increase online growth & conversion rates.
Rebrand & build a new website that is intuitive and accessible, with the goal to increase online growth & conversion rates.
Rebrand & build a new website that is intuitive and accessible, with the goal to increase online growth & conversion rates.
Discovery & Research
Discovery & Research
Discovery & Research
Sweetbay's Current Site falls short in User Friendliness
Sweetbay's Current Site falls short in User Friendliness
Sweetbay's Current Site falls short in User Friendliness
A heuristic evaluation revealed learnability and memorability design issues impair user's ability to effectively navigate the website.
A heuristic evaluation revealed learnability and memorability design issues impair user's ability to effectively navigate the website.
A never-ending filter includes outdated classes and events.
Large font and inconsistent layout feels overwhelming.
Information is scattered throughout the site.
The Booking Experience has Glitches
The Booking Experience has Glitches
The Booking Experience has Glitches
When customers go to book a class under the schedule, the class booking widget causes a glitch with the site. It refreshes back to the top of the page every time a button is clicked.
When customers go to book a class under the schedule, the class booking widget causes a glitch with the site. It refreshes back to the top of the page every time a button is clicked.
Analytics show Inconsistent Traffic & Engagement
Analytics Show Inconsistent Traffic & Engagement
Analytics show Inconsistent Traffic & Engagement
Squarespace's analytics revealed steady website traffic with minimal growth in 2023. With high bounce (~67% for the home page) and conversion rates (30% for the "book a class now" button). This means users aren't spending much time on the site and successfully booking classes.
Squarespace's analytics revealed steady website traffic with minimal growth in 2023. With high bounce (~67% for the home page) and conversion rates (30% for the "book a class now" button). This means users aren't spending much time on the site and successfully booking classes.
Research Findings from Customer Interviews
Research Findings from Customer Interviews
Research Findings from Customer Interviews
6/8
participants felt lost while interacting with the site
participants felt lost while interacting with the site
participants felt lost while interacting with the site
Sometimes I'm not sure how to navigate the site & learn more about classes
— Interview participant 7
5/8
participants didn't know there was a mobile app
participants didn't know there was a mobile app
participants didn't know there was a mobile app
It would have been nice to know that there was an app, it must be more convenient!
— Interview participant 2
4/8
participants asked about updates regarding the new studio
participants asked about updates regarding the new studio
participants asked about updates regarding the new studio
I heard the new studio will be opening soon. Do you know anything about that?
— Interview participant 8
THE PROBLEM
THE PROBLEM
THE PROBLEM
Sweetbay customers are unsure what is the best platform to use & the website feels inconsistent. They need to stay up to date about the new studio & know how to book classes.
Sweetbay customers are unsure what is the best platform to use & the website feels inconsistent. They need to stay up to date about the new studio & know how to book classes.
Sweetbay customers are unsure what is the best platform to use & the website feels inconsistent. They need to stay up to date about the new studio & know how to book classes.
Design
Design
Design
Beginning the Design Process with new Navigation
Beginning the Design Process with new Navigation
Beginning the Design Process with new Navigation
Laying out the site map helped organize where content would live and how it could be accessed. Various modifications were made to the navigation.
Laying out the site map helped organize where content would live and how it could be accessed. Various modifications were made to the navigation.
Sketching initial Interface Concepts
Sketching initial Interface Concepts
Sketching initial Interface Concepts
The emphasis was on content and visual hierarchy. Keeping in mind customer research findings and taking inspiration from market research to redesign the pages.
The emphasis was on content and visual hierarchy. Keeping in mind customer research findings and taking inspiration from market research to redesign the pages.
Focusing on the Class Booking Experience
Focusing on the Class Booking Experience
Focusing on the Class Booking Experience
Booking a class is the main point of focus. I quickly designed the entire experience with a wireflow, from selecting a class on the schedule, to payment and booking confirmation.
Booking a class is the main point of focus. I quickly designed the entire experience with a wireflow, from selecting a class on the schedule, to payment and booking confirmation.
RE-FOCUS
RE-FOCUS
RE-FOCUS
Switching gears Away from the Booking Experience…
Switching gears Away from the Booking Experience…
Switching gears Away from the Booking Experience…
After learning that Sweetbay's booking management platform, Wellness Living, had limitations in customizing the booking experience, I had to shift my focus. This was a platform the founder was not looking to move away from.
After learning that Sweetbay's booking management platform, Wellness Living, had limitations in customizing the booking experience, I had to shift my focus. This was a platform the founder was not looking to move away from.
… to prioritize Functionality, Branding, & Accessibility
… to prioritize Functionality, Branding, & Accessibility
… to prioritize Functionality, Branding, & Accessibility
Lo-Fi to Hi-Fi Iterations Based on Feedback
Lo-Fi to Hi-Fi Iterations Based on Feedback
Lo-Fi to Hi-Fi Iterations Based on Feedback
Initial wireframes were shown to stakeholders to receive feedback, which helped guide iterations for the designs.
Initial wireframes were shown to stakeholders to receive feedback, which helped guide iterations for the designs.
New Branding, Colors & Typography
New Branding, Colors & Typography
New Branding, Colors & Typography
It was a priority for the new branding and design system to meet ADA/WCAG accessibility compliance. Being inclusive to all people, even those with vision impairment, was crucial for this redesign.
It was a priority for the new branding and design system to meet ADA/WCAG accessibility compliance. Being inclusive to all people, even those with vision impairment, was crucial for this redesign.
An Accessible & Interactive Design System
An Accessible & Interactive Design System
An Accessible & Interactive Design System
I love this part of the design process. From creating micro-interactions, to animations. This is where I can really blend motion design experience with UX.
Alt-Text for improved Accessibility
Alt-Text for improved Accessibility
Alt-Text for improved Accessibility
B.K.S. Iyengar’s book, “Light on Life: The Yoga Journey to Wholeness, Inner Peace, and Ultimate Freedom” (courtesy of my mom), was a useful reference for technical pose terms incorporated in the alt text. Alt text provides context with a short description of an image. This is helpful for people with disabilities, specifically those with low-vision or screen readers.
B.K.S. Iyengar’s book, “Light on Life: The Yoga Journey to Wholeness, Inner Peace, and Ultimate Freedom” (courtesy of my mom), was a useful reference for technical pose terms incorporated in the alt text. Alt text provides context with a short description of an image. This is helpful for people with disabilities, specifically those with low-vision or screen readers.
Website CSS Customization
Website CSS Customization
Website CSS Customization
As I built the Squarespace website, I added in CSS customizations to match the Figma prototype, achieving the desired look and feel.
As I built the Squarespace website, I added in CSS customizations to match the Figma prototype, achieving the desired look and feel.
Branded Motion Graphics
Branded Motion Graphics
Branded Motion Graphics
The last touch to the new website includes adding motion graphics and interactive elements! I am still learning on how to add these to the site, but this simple loading screen is a preview of how delightful motion design can be added to improve the customer experience.
The last touch to the new website includes adding motion graphics and interactive elements! I am still learning on how to add these to the site, but this simple loading screen is a preview of how delightful motion design can be added to improve the customer experience.
Learnings & Reflection
Learnings & Reflection
Learnings & Reflection
Stakeholder Collaboration & Adaptibility
Stakeholder Collaboration & Adaptibility
Stakeholder Collaboration & Adaptibility
I had a great time working alongside Sweetbay's Founder, Studio Manager, customers and teachers on this project! I learned the importance of stakeholder collaboration and how important it is to identify constraints before jumping into the process. Nevertheless, I was able to adapt to overcome any roadblocks.
If I could have changed anything, I would have done a mobile-first design approach, to ensure content layout was optimized for all devices. Overall, this project was a great learning experience, especially when it came to building the site. I will continue to update the Sweetbay site to meet the needs of the business and its customers.
I had a great time working alongside Sweetbay's Founder, Studio Manager, customers and teachers on this project! I learned the importance of stakeholder collaboration and how important it is to identify constraints before jumping into the process. Nevertheless, I was able to adapt to overcome any roadblocks.
If I could have changed anything, I would have done a mobile-first design approach, to ensure content layout was optimized for all devices. Overall, this project was a great learning experience, especially when it came to building the site. I will continue to update the Sweetbay site to meet the needs of the business and its customers.
Some Sweetbay students, family, and I outside the new studio's location.
Some Sweetbay students, family, and I outside the new studio's location.
