Wireframes
Low-Fi Prototype
MID-Fi Prototype
Test / Time to test the Prototype !
Usability Test Findings
Low-Fidelity Prototype:
Early testing of the low-fidelity prototype helped validate the core structure and general flow of the redesigned site. While users appreciated the simplified layout and clearly segmented pathways for new students, several accessibility concerns emerged, such as insufficient contrast in text placement and unclear icon meanings. Additionally, users expressed confusion around certain action buttons and program categories, which highlighted the need for clearer labeling and improved content hierarchy.
Mid-Fidelity Prototype:
The mid-fidelity prototype introduced more visual structure and interactivity, enabling us to test end-to-end flows such as browsing programs, creating an account, and registering for classes. While users found the overall experience more cohesive, the registration process was flagged as cluttered, flat, and lacking visual guidance. Users expressed difficulty understanding where they were in the enrollment flow and felt that key actions like selecting a class or entering payment details weren’t intuitive. Accessibility issues like small clickable areas and limited feedback during interactions were also noted.
HIGH-Fi Prototype
Usability Test Findings
As we moved into testing the High-Fidelity prototype, users responded positively to the updated visual design and improved structure, though a few areas still required refinement:
Positive Feedback:
-
“The site finally feels like what the Academy represents, peaceful, modern, and intentional.”
-
“I love the colors and imagery, it feels like a space I want to spend time in.”
-
“It’s much easier to find beginner classes now. The categories make sense.”
-
“The layout looks very professional and trustworthy. I would feel comfortable signing up.”
Areas for Improvement:
-
“The registration still feels a bit overwhelming, there's too much information on one page.”
-
“I expected more feedback after adding my payment details. A progress indicator would help.”
-
“I wish there was a quick summary of what I’m signing up for before submitting payment.”
The Process
Empathize / Exploring user's needs
This phase allowed us to build a strong foundation for the
Redesign Strategy.
Rooted in the brand’s mission and values. We conducted:
3 Stakeholder interviews (Academy Director, Administrator, Software Engineer)
6 User feedback sessions with active participants and new visitors
A UX audit of the original site’s architecture, tone, and accessibility
A competitor analysis
Interview Findings & Takeaway
Interviews with the Director, Administrator and software engineer of Life Yessence Academy were conducted to identify the core priorities, expectations, goals, and constraints that would guide the redesign process.
IMPACT
-
Users were able to complete key tasks, such as exploring classes and beginning the registration process, 30–40% faster compared to the previous version of the website,
-
All testers described the experience as "peaceful," "easy to navigate," and more reflective of the Academy's mission
-
Clearer program categorization helped users quickly identify offerings suited to their level (beginner vs. advanced)
-
Increased clarity and emotional resonance are likely to reduce user hesitation and improve engagement
-
Streamlined registration flow has the potential to decrease drop-off during onboarding
-
Modular layout and improved hierarchy support future growth, including membership tiers and community features
The Solution
The Problem
To solve the disconnect between users and the Academy’s mission, the website was reimagined, crafted, and designed as a unique immersive experience.
A dynamic interface was created, not just to inform, but to gently invite users into a space that mirrors the journey toward inner clarity, connection, and
conscious living
The original website lacked emotional resonance and had a clinical, impersonal appearance that didn’t reflect the warmth or depth of the Academy’s mission. Users struggled to connect with the content.
There was a clear need to transform the site into an engaging, intuitive space that could mirror the Academy’s teachings, fostering inspiration, inner clarity, and connection.
Life Yessence Academy
A full-scale website redesign focused on enhancing usability, visual storytelling, and brand alignment
Overview
LIYA is a nonprofit academy dedicated to awakening human potential and expanding consciousness through
self-realization, enlightenment training, and transformative practices such as yoga and meditation.
Role
Product Design (UX/UI)
Timeline
Nov 2024 / Feb 2025
(4 Months)
Team of 2 Designers
Tools
Heuristic Evaluation
Through a navigation audit of the website, several usability issues and areas for enhancement were identified, highlighting opportunities to improve structure, clarity, and user flow
DEFINE / Establishing the User's Needs and Problems
Persona Development
User Personas: Beginner & Advanced Pathways
To ensure the redesigned experience served the diverse needs of the Academy’s audience, we developed two core user personas based on research insights:
🧘♀️ The Beginner Seeker
Kayli is a young professional new to mindfulness. Often feeling overwhelmed by stress, she seeks gentle guidance, clear entry points, and straightforward explanations to begin her journey confidently and easily.
Needs:
-
A welcoming, non-intimidating interface
-
Clear explanation of programs and benefits
-
Guided onboarding or introductory pathways
🧘♂️ The Advanced Practitioner
Aditya is an experienced practitioner seeking deeper practices, spiritual growth, and a supportive community to continue evolving on his path of self-realization and opportunities for personal growth.
Needs:
-
Quick access to advanced programs and content
-
A sense of community and belonging
-
Pathways for deeper engagement and mentorship
Problem Statement
Users encounter confusing language and unhelpful program descriptions when looking to sign up for yoga classes.
Unclear calendars, unengaging visuals, and lack of accessibility considerations lead to frustration and reduce the likelihood of new users joining classes.
VALUE PROPOSITION
LIYA
How might we help people find their inner potential
through yogi & meditation practices?
LIYA UX
How might we turn LIYA’s existing website into a more warm, welcoming, and introspective experience while improving upon features like the calendar, sign up, and contact list?
User's Key Insights:
Users felt overwhelmed and confused navigating the site
There wasn’t an easy or effective way for users to sign up or register
for classes.
The site lacked clear differentiation between class levels, making it difficult for users to find offerings that matched their experience.
Users wanted gentle onboarding, clear program pathways, and more inspirational content
There was no consistent visual system to convey trust and emotional connection. As a result, the overall experience felt flat, uninviting and unengaging
Affinity Diagram
After our discovery interviews, we synthesized the information we gathered using an affinity diagram where we grouped our feedback in order to get clear on our design approach.
COMPETITOR ANALYSIS
We carried out a competitor analysis of comparable academies and institutions to pinpoint the strengths and weaknesses in their user experience and design. This allowed us to identify successful strategies from other products, This helped us to understand how to position Liya's uniquely
KEY TAKEAWAYS:
-
Simple and clean layouts
-
Easy-to-use menus
-
Clear buttons like “sign up”
-
Good use of images and structure
-
Well design calendars to find classes
-
Simple and straightforward registration
Ideate / Creating the Framework
Features and Priorities
Once the research was completed and the problem was understood from the users' point of view, a brainstorming session was held to explore potential solutions to generate solution-oriented ideas that could effectively address the challenges uncovered.
Moodboard & inspiration
Align Design with the Academy’s Mission
Ensure that every visual and interaction reflects LIYA’s core values, inner clarity, mindfulness, and transformation. The aesthetic should feel calming, grounded, and spiritually resonant.
Enhance Navigation and Information Architecture
Create a clear, intuitive structure that allows users to easily explore classes, learn about programs, and understand the Academy’s offerings, especially for new visitors unfamiliar with spiritual or wellness journeys.
Support Diverse User Journeys (Beginner & Advanced)
Design pathways tailored to different levels of experience, from newcomers seeking gentle guidance to advanced practitioners looking for deeper practices and community.
Create an Immersive, Inspirational Experience
Use visual storytelling, subtle animations, and symbolic design elements
(sacred geometry) to make the website feel like an emotional and spiritual experience, not just a digital interface.
Ensure Accessibility and Responsiveness
Optimize the site for all devices and users, including those with visual or cognitive limitations. The experience should be seamless, inclusive, and beautiful across mobile, tablet, and desktop.
To define the visual foundation of LiYA’s new digital identity, we began by establishing a design direction rooted in warmth, clarity, and spiritual depth. The color palette draws from bright, sunset-inspired hues blended with soft gradients and grounding tones, creating an atmosphere that feels both uplifting and introspective. Graphic patterns are influenced by sacred geometry, chakras, and meditative forms—designed to evoke meaning, energy, and alignment with the Academy’s teachings.
Sketching
Beginning with paper prototypes helped us quickly establish foundational design parameters, which guided the development of an interactive hero section, a streamlined user sign-up flow, and a bold new visual direction.
User Flow
Why User Visit the Site?
Kayli is interested in exploring the programs offered by the Academy and is ready to register for beginner-level classes. As a new student, she plans to create an account, select her courses, and securely add her payment method during the enrollment process.
Prototype / Let's make the Design !
Early Stage Wireframes
Low-Fi Prototype
Mid-Fi Prototype
Branding & Style Tile
Implement / Final design & Next Steps
-
The visual identity successfully aligned with user expectations and the Academy’s mission.
-
Structural clarity and course-level distinctions improved significantly.
-
Final adjustments were needed to streamline the registration and payment flow, ensure mobile responsiveness, and improve visual hierarchy in CTA elements.
Final Thoughts
-
Redesigning the Life Yessence Academy website was a deeply meaningful project that went beyond aesthetics. It was about creating a digital experience that reflects the Academy’s mission of inner clarity, conscious living, and spiritual growth. Throughout the process, we balanced functionality with emotion, transforming a fragmented, clinical site into a calming, intuitive, and inspiring space.
-
Each design decision was rooted in empathy: from simplifying the user journey for new students to building trust and alignment for advanced practitioners seeking deeper guidance. Usability testing across low, mid, and high-fidelity phases helped surface real challenges particularly around accessibility, enrollment flow, and visual hierarchy, which led to intentional refinements.
-
This project reinforced the power of human-centered design in spiritual and educational spaces. When design is guided by intention and understanding, it doesn’t just inform, it invites, nurtures, and uplifts.
-
The final result is not just a website, but a living digital sanctuarydesigned to support transformation, reflection, and growth.
Next Steps...
-
Admin Features: Enhance backend capabilities with improved user management, analytics, and automation to streamline operations.
-
Continued Profile Development: Expand user profiles with richer insights, progress tracking, and personalized achievements to enhance engagement.
-
Google Classroom Integration: Streamline course management by connecting directly with Google Classroom for a more cohesive learning experience.
-
Full Web Development: Continue refining and expanding the platform to improve usability, scalability, and overall performance
-
Improving Spiritual Education: Introduce new content, tools, and resources to deepen the spiritual learning experience and support ongoing growth.