The Active Educator

How thoughtful UX/UI design boosted The Active Educator’s traffic by 110% and brought clarity to its course ecosystem.

TYPE
Client Project

ROLE
UX design, UI design, brand identity, web development

DESIGN TOOLS
Adobe InDesign, Adobe Illustrator, Adobe Photoshop

Deciding What to Build

When Andriana Zarovska, founder of The Active Educator, approached me, she needed more than a website refresh—she needed a complete system overhaul. Her programs and resources were powerful, but they were also confusing for her audience to navigate.

The Challenge:

  • Her audience struggled to understand how her programs connected—and how they were different.

  • Similar program names made it hard for her users to navigate and understand when to sign up and in which order.

  • Andriana’s website lacked a professional, polished design that reflected her minimalist brand aesthetic.

We started with user research and strategy sessions, exploring her audience’s needs and pain points. The goal was to design a cohesive system that clarified her offerings and made decision-making effortless for users.

Scope & Structure

The Plan: Build a unified digital system for The Active Educator with subbrands to showcase their growing program offerings—and align this system with its values of calm, empowerment, empathy, and minimalism.

Core Elements:

  1. Brand Cohesion: Develop sub-brands for each program, with visual distinctions that work together as a whole.

  2. Simplified Navigation: Streamline the website’s structure to guide users seamlessly to the right place.

  3. Centralized Platform: Use Kajabi to integrate courses, sales pages, and community engagement in one hub.

The structure was mapped with a clear hierarchy:

  • A homepage that introduced The Active Educator’s values and programs.

  • Dedicated pages for each offering, with unique highlight colors for differentiation.

  • A cohesive visual design system that carried through from the site to course materials.

Considering the Interface and User Flows

The website design needed to embody calm professionalism while prioritizing usability. Through wireframes and low-fidelity prototypes, I focused on:

  • Clear user flows: Ensuring educators, administrators, and other visitors could quickly find the resources they needed.

  • Uncluttered layouts: Using white space and minimal design elements to reduce overwhelm.

  • Mobile-first design: Considering that many users browse on the go, mobile responsiveness was key.

By designing around these principles, we made The Active Educator’s digital presence feel approachable yet sophisticated.

How Will Users Behave?

Understanding user behavior was central to this project. Educators visiting the site had limited time and needed to find relevant resources quickly. To meet their needs:

  • Navigation was simplified with a top-level menu and clear CTAs, ensuring no user had to click more than three times to reach their destination.

  • Sub-brand differentiation was introduced through a color-coding system, helping users visually distinguish between programs.

  • Actionable content blocks were added throughout the site, prompting users to enroll in courses, download resources, or explore additional content.

These adjustments reduced cognitive load and ensured visitors could engage without frustration.

Shifting into high fidelity mockups

Once the framework were in place, we brought the web design to life through polished design mockups. The high-fidelity prototypes incorporated:

  • Animations and interactivity: Subtle motion effects added a layer of sophistication while highlighting key content.

  • Visual storytelling: Videos of Andriana teaching provided authenticity and built trust with potential course participants.

  • Consistent branding: From the homepage to course pages, every touchpoint reinforced The Active Educator’s calming, minimalist aesthetic.

Breaking down visual choices

  • Colors: We expanded on The Active Educator’s original palette, creating highlight colors for each program. These accents provided clarity while maintaining a cohesive visual identity.

  • Typography: Our simple, clean sans-serif fonts ensured readability across devices, while also having a playful, educational element. Subtle weight variations guided users’ focus to key content areas.

  • Iconography: Building-block-inspired graphic elements and color-blocking enhanced usability, giving the site a polished yet approachable feel.

The Results

The Active Educator’s website redesign didn’t just look good—it worked.

  • 110% Growth in Organic Traffic: Monthly visits doubled from 203 to 427, proving the effectiveness of the redesigned user experience.

  • Increased Engagement and Conversions: Clear pathways and intuitive navigation led to higher course enrollments and stronger engagement with educators and school districts.

  • Streamlined Ecosystem: The cohesive system made it easier for users to understand and engage with Andriana’s offerings.


ANDRIANA ZAROVSKA

“Oh my goodness Stacy! This just made my heart burst. I am SO grateful our paths crossed, and you were able to make my dream vision of the logo and other promotional images/work come to life. You are AMAZING at what you do. I cannot wait to continue working together!”

In Conclusion

Through a thoughtful approach to UX/UI design, The Active Educator’s website became a hub for clarity, connection, and growth. By simplifying navigation, creating cohesive sub-brands, and prioritizing user behavior, we transformed Andriana’s vision into a calming, professional, and highly functional digital experience.

This case study highlights the power of designing with both users and business goals in mind—creating a product that not only meets immediate needs but also sets the stage for future success.