Pretzel Kids Yoga! 🧘‍♀️

Client redesign of Pretzel Kids’ website

Scroll ↓

Pretzel Kids is a yoga teaching service and brand that has created a specialized yoga curriculum designed specifically for children. Through their site they offer both virtual and in-person certification to yogis who would like to teach kids yoga classes, and in turn help connect those trained yogis to schools and organizations that want to add kids yoga programs to their roster.

Role | UX Design Lead

Duration | 3 Week sprint

Client | Robyn Parets (CEO of Pretzel Kids)

Tools | Figma, Zoom, Google Slides, Excel, Trello, and Google Surveys

Methods | Competitive Analysis, User Interviews, Content Audit, Personas, Affinity Mapping, Usability Tests, Journey Mapping, Prototyping, User Flows, Sketching and Wireframing

Problem

Pretzel Kids offers a curriculum for yoga instructors to teach yoga to children in a B2B model that primarily serves program coordinators of K-6 schools, after school programs & daycares. Currently the site does not clearly reflect this and users are not sure how to navigate to different program offerings if they wish to book services.

Goals

  • Sharpen the visual design of Pretzel Kids website to refine messaging and aesthetics so that users can quickly understand what services are offered, locate those offerings and initiate contact to book services.

  • Refine and prioritize lead generation for the site via UX informed CTA location / design, including streamlined & updated contact form to provide quick and thorough lead management.

Design Process

Statement of Work

After meeting with our client, as a team we made a statement of work to have our client agree to and sign. This was to ensure everyone has a full understanding of the scope for the project. With the timeframe of our redesign we decided to focus on the 3 main pages in which our persona would land on and go through.

Research (Discover)

Current Site

  • We noticed, a lack of consistency in the names of call to action buttons that were leading users to the same place but also confusing them as well.

  • Users had trouble figuring out which elements were clickable buttons and which were simply part of the site’s aesthetic design.

  • The font style being difficult to read - sometimes disappearing into backgrounds and other times too thin and stylized to be legible.

Methodologies:

  • Competitive Analysis (Feature Analysis)

    Pretzel Kids did not have any lack of marketable features, what the site needed most were ways to showcase those features more effectively

  • Content Audit

    Used a spreadsheet to go over the 3 main pages that we wanted to focus on. Systematically combing through to find out what each one held, and strategize how we could make the pages more directly targeted and easy to scan for users.

  • Usability Testing

    2 Interviews: Both with after school program coordinators

  • User Interviews

    Performed a current site usability test to see if users can navigate the website layout.

Key Findings

  • Pretzel Kids features are often difficult to locate in an info-rich site

  • Lack of consistency in the names of call to action buttons that were leading users to the same place but also confusing them as well.

  • Numerous sections that repeated the same or similar pieces of copy which was crowding the pages.

  • Users found the service reliable and easy to schedule within the parameters of their programs.

Persona (Define)

Personas help keep UX design firmly focused on the needs and goals of users. Pretzel Kids caters to schools looking for yoga teachers and yoga teachers looking to incorporate children's yoga into their brand We created two personas in alignment with our two target users of Pretzel Kids.

Proposed Instructor Flow

User Flows

Proposed Program Coordinator Flow

Prototype (Develop)

  • Simple Navigation bar (less options)

  • Moved logo to corner of the screen an not bleed into the hero image

  • 2 Main CTA buttons below the hero image (different placement and design)

  • New font for all text throughout website

  • Combined similar/related pages to simplify

Usability Test Results

Testimonials 🗣

  • Reviews play a big part in attracting new customers to businesses, but some users said they would prefer them on a separate page.

Picture & Font Sizing 🔍

  • Pictures & fonts were too big - not in line with standard sizing for web, and felt overwhelming to viewers.

Yoga…for kids? 🧘

  • Some users felt uncertain that yoga should be taught to kids, they wanted to see more information about the benefits.

Site Messaging ⚠️

  • We had eliminated a bit too much copy and needed to bring back some information about the main goals of Pretzel Kids. Users wanted to see a mission statement for better clarity about site offerings.

Hi-Fidelity Prototype (Deliver)

Design Improvements:

  • Added more info back into not only the homepage but the following pages as well.

  • Implemented info tiles to address users being unsure yoga is for kids, with info from the pretzel kids blog.

  • Size adjustments (images and font size)

Style Guide:

  • Kept color scheme in focus

  • Implemented hover states to help identify buttons

  • Hierarchy of font weights/sizes to site more scannable

Next Steps & Takeaways

This project was an enlightening new experience that gave me a lot of insight on how websites run and how to approach problems that users run into. Given more time in a different situation, these are some of the next steps that we would take after this point

⇢

  • Further testing on our current hi-fidelity, and re-design of subsequent pages for site-wide consistency.

  • The future is mobile, would also be very helpful for instructors to log into their portal on the go.

  • Users had talked about slow loading times for the page. A potential change of website domain.

  • Price Display, users mentioned wanting to have prices more upfront and obvious.

  • When users sign up for in-person trainings they are taken to third-party sites. We would add a popup to prepare users for this jump so they don’t feel confused.