Project Overview
Zura is an urban yoga studio in northern New Jersey specializing in hot yoga and fitness classes.
I consulted on a UI redesign of their responsive website that addressed improving navigation in the booking and checkout processes, adding new features that competitors offered, and creating stylistic continuity across the site’s core pages.
As a freelance consultant and sole designer, I led the entire design process using the design-thinking framework. This included user and market research, ideation, prototyping, and visual design.
Timeline
March 2023 -
April 2023
My Role
Lead Designer
My Contributions
UI and visual design
Hi-fidelity prototype
Generative and market research, including a competitive audit and user survey
Sitemaps
Personas and user journey maps
Tools Used
Figma
Adobe XD
Invision
Typeform
Photoshop
InDesign
Midjourney
Notion
Read about each phase of the project:
Zura's existing checkout and scheduling pages were functional, but a couple of issues kept these processes from feeling slick and seamless — a potential source of customer drop-off, leading to lower conversion rates and fewer class sales:
1. Navigation
Some pages were hard to navigate between, particularly if users changed their minds and needed to modify something they’d selected.
2. Inconsistent Visual Branding
Many highly important purchasing and scheduling pages felt aesthetically inconsistent with the modern, minimal, and sleek branding found in other areas of the site.
Finally, Zura had a couple of important constraints on the project. Zura uses the host ZingFit and is generally happy with the service, so the redesign needed to work within the ZingFit framework.
Zura also didn’t want a complete overhaul of the website’s appearance — rather, they wanted targeted, implementable tweaks. The overall structure and layout of the site, as well as branding and imagery, needed to remain essentially the same.
A Quick Sprint Using Design Thinking
This project had a tight timeline, and I had very limited access to the studio's internal metrics or customers, so the design process was abbreviated in certain areas.
I still followed the design thinking framework to learn about and empathize with the studio's users and to define the key areas to focus on redesigning. Then, I ideated on solutions and created a prototype to demonstrate the redesigned concept to the studio owners.
What I'd Do Differently
In an ideal world, I would have conducted more robust research that included talking to actual customers. I also would have loved the opportunity to do more testing with the prototype.
Due to the limited scope and resources of this project, my research phase began with market research using a competitive audit that evaluated the websites of Zura and three other competitors.
Preview of several pages within the comptetitve audit
I conducted my own brief usability test and heuristics evaluation, completing the booking and class checkout flows for each company while I filled out ascoring rubric for certain categories (e.g., class scheduling flow, class purchasing flow, navigation design styles).
This allowed me to collect some qualitative, firsthand experience with several pain points in each company’s process and gain familiarity with each scheduling software’s quirks and idiosyncrasies.
Pain Points
I identified the following pain points from my firsthand research:
01
No way to move backwards in the user flow or undo an action
02
Booking and checkout pages have different fonts, look visually out of date and different than the rest of the website
03
No dynamic navigation or changes to UI to show users whether or not they're logged into their account
04
Frequent requests to re-enter login information
05
Difficult to find User Profile page, and the page relies heavily on un-labeled icons that are small and not intuitive
06
Difficult to find where an upcoming reservation can be modified
07
Overall text is somewhat small
08
No way to export appointments to third-party calendar apps from the website
User Survey
I then conducted a user survey with the goal of understanding users’ habits and trends while booking fitness classes.
The main questions I wanted to answer were:
1.
Do users tend to book directly through a studio’s website, or do they prefer a single app that congregates many studio and class options into one central place (e.g. MindBody)?
2.
Do most users book on their mobile devices, or while they’re at a computer? In other words, what size screen are most users viewing the website on?
3.
How frequently are users completing a checkout flow? Is it every time they book, or do they maybe do it once a month to stock up on class packs?
4.
How many users take advantage of the ability to download a scheduled class into a third-party calendar app? Or is this an unnecessary feature/frill?
5.
What level of digital literacy are users bringing to the table? In other words, how well-versed are they in reservation and checkout flows?
I would focus equally on the desktop vs. mobile experience, but I wanted to get a sense of which version of the site the majority of users would interact with.
I also wanted to understand what expectations and familiarity with checkout flows users might arrive at the website with, as this could inform design decisions about navigation styles, types of CTAs, and the level of detail and instruction needed in user flow copy.
Research Insights
The research confirmed the user flow navigation and visual branding issues known from start of the project. But it also revealed the following new insights:
1. The existing site could benefit from a more user-friendly redesign of the account/profile page
2. The ability to export appointment information to third-party calendar apps is a popular feature that the majority (55%) of survey participants would enjoy
3. The majority of users (80%) book classes on a mobile device
4. Most users buy single classes at a time rather than maintain subscriptions
Four Key Design Tweaks
Based on the research insights, I knew the four areas to focus on redesigning would be:
01
Navigation improvement
02
Redesigning the user profile page
03
Adding an “export to calendar” feature
04
Creating cohesive branding
Personas and User Journeys
I wanted to demonstrate to the client why each of these areas needed a redesign, so I created personas and user journeys to represent the key user groups and pain points that emerged from the research. I'd also return to these as a tool to help me empathize with real customers later in the design process, especially while building the prototype.
Click on a persona to view it in full resolution.
I began exploring solutions using a combination of exercises. You can read about each in more detail by clicking on the headings below.
Because the redesign was focused on very targeted tweaks within an existing visual system and website layout, I did less visual exploration and instead reviewed UX flows and the more high-level information architecture (IA).
I did some sketching to quickly explore the user profile page in particular, and a few of the more polished wireframes served as a proof-of-concept for the client to help them visualize user flows. But I moved pretty quickly to high-fidelity mockups, which I found better communicated the proposed design changes to the client.
IA Mapping to Address Navigation
I created a sitemap to better visualize the information architecture and user flows. One of the key, needed changes revealed in the research was an indication of whether or not users were logged in to their accounts, so this was the first priority in the new sitemap.
This mapping process also helped identify pages that were redundant or missing from the current user flows.
Old Sitemap
✘ No indication of login status
Although the original navigation appears relatively simple, one key pain point is the lack of status change to indicate whether or not the user is logged in to their account.
The top navigation link that reads “Login” remains unchanged even after logging in.
✘ No seamless path to the "My Account" page
There is not a link to return to the main user profile page (which is labeled as “My Info”) without repeating the “Sign In” page process and entering an email and password.
✘ Unnecessary, empty pages
Once on the user profile page, there’s no obvious submenu that’s labeled, but it can be accessed by clicking an unlabeled icon. The submenu contains an empty page labeled “My Videos” that doesn’t seem applicable with the studio offerings and could probably be eliminated.
Redesigned Sitemap
✔︎ Dynamic menu states reflect login status
This new version of the sitemap clarifies login status and makes it easier for users to discover, navigate through, and modify their account details.
✔︎ Confirmation pages added to user flows
A confirmation page has been added to the scheduling flow to allow users more autonomy over how they’d like to pay for a class.
The old version of the site automatically enrolled in a class without any chance to view or confirm how the class is being paid for, or from which series the class is being deducted.
✔︎ A familiar shopping cart function
The confirmation page in the purchasing flow has been replaced with a “shopping cart” page that allows users to review what they’re about to purchase in a format that better replicates familiar e-commerce experiences commonly found on other websites.
The shopping cart page also allows users to mix and match series options; e.g., a user could add a 10-class pack for themselves, plus a single class that they intend to transfer to a friend, in the same transaction.
The new version of the sitemap also included some light restructuring of pages within subcategories and eliminated redundant hyperlinks. The former “Welcome” link was been removed from the header since the studio’s logo serves the same hyperlink function of directing users back to the home page.
Sketches and Paper Wireframes
The two pages that required the biggest overhaul were the Schedule and User Profile pages, so I teased out several ideas with Crazy 8s exercises for each page.
Playing with versions of the scheduling page
Thinking through the user profile page
Because this was a redesign of smaller UI elements rather than designing the page’s structure and navigation style from scratch, I didn’t belabor the paper wireframes too much. I primarily used them to further iterate on possible layouts of the scheduling page.
Expanding on earlier sketches
Digital Wireframes
Creating digital wireframes allowed me to continue iterating on the scheduling and user profile pages in particular.
During this process, I landed on a design idea for the scheduling flow that used cohesive, bold header text moving left to right across the page as users completed each step.
I felt this lended a subtle sense of progress for users and better explained where they were within the flow.
Homepage Navigation
Dynamic States
Login status is displayed in the navigation, indicating if users are logged in
Improved IA
Hyperlinks in the main navigation header were cleaned up to fit on one line
Familiar Iconography
Arrows were added next to links that contain submenus to discreetly indicate the presence of additional pages to users
Scheduling a Class
Calendar Feature
Incorporated a calendar date picker on the class selection page
Improved Navigation
Added back navigation arrows to help users move through flow
Mobile Friendly
Increased overall content and button size to be mobile-friendly
Payment Options
Included a new option to choose a payment method during scheduling process
Export Options
The confirmation page now gives users the option to export the booking to a third-party app directly from the website
Buying a Class
Improved CTAs
Call-to-action buttons increased in size for easier interaction on mobile devices
Stylistic Continuity
Fonts and UI updated to better match the rest of the site
UX Copywriting
Copy clarified from “Buy Series” to a more familiar, at-a-glance “Pricing”
Accessibility
Mobile menu size increased for accessibility
Familiar UX Flows
Replaced the confirmation page for a single class with a shopping cart feature, which is a familiar start to a checkout flow for users and allows them to modify previous selections
An Intuitive User Account Page
Digestible Info
Consolidated user account sections into one page using collapsible accordion menus
Simple Language and Labels
Added a “Modify” label next to upcoming classes, clarifying how to make changes to enrollment
Increased Legibility
Arrows were added next to links that contain submenus to discreetly indicate the presence of additional pages to users
Key Learnings
Having to adhere to Zura’s existing overall layout and the practicalities of its web host ZingFit forced me to identify on a very micro level which design tweaks were essential for improving the user experience, and which were feasible and executable for ZingFit. This constraint stripped away superfluous nice-to-haves and required me to distill specific design changes.
In a perfect world with greater project resources, I would have obtained much more firsthand user feedback during the research process. I also would have incorporated more user testing with activities such as card sorting and moderated usability studies using the existing site and prototypes.
Next Steps
We're in the process of working with ZingFit to implement the changes and update the site. I’m also discussing the opportunity to conduct usability testing once the new designs are live.
Until more robust testing can be conducted, the current iteration of the redesign aims to provide users with more flexibility to change their minds and modify classes. It gives users more control over how they will pay and what information they store in their profile. Finally, the redesign clarifies where in a flow users are by employing a more traditional, familiar e-commerce experience.