YogAR
Year - 2020 Role - Project Manager and UX/UI Lead Type - Concept design, User research and testing, Prototyping
Project Overview
The COVID-19 pandemic has led to prolonged physical and social isolation, negatively impacting mental wellbeing worldwide. With rising levels of anxiety and depression, there is a growing need for accessible digital solutions that foster social connection and healthy habits.
Objective
Design an immersive social AR yoga app that enhances mental and physical wellness by connecting users with wellbeing professionals and other yogis. The platform leverages augmented reality (AR) technology to replicate the studio experience from home, promoting exercise, healthy eating, and social interaction—all key factors in combatting stress and depression.
Key Features
Social AR Integration – Users can engage in live yoga sessions with trainers and peers through AR-enhanced virtual environments.
Personalized Wellness Plans – Guided yoga sessions tailored to individual needs, incorporating nutrition tips and mindfulness practices.
Interactive Community Spaces – Social features that allow users to connect, share progress, and participate in wellness challenges.
Accessibility & Usability – Ensuring seamless onboarding, intuitive UI, and compliance with accessibility guidelines.
Performance Tracking – Features to monitor physical activity, mood improvements, and progress over time.
Process
As part of a 4-person design team, I collaborated to efficiently refine and develop ideas within tight time constraints. We adopted Scrum methodologies, structuring our workflow into one-week sprints with regular team meetings to ensure alignment, rapid iteration, and effective project management. This approach enabled us to optimize processes, enhance collaboration, and deliver high-quality design solutions within the given timeframe.
-
We conducted preliminary research and brainstorming to define the problem and explore potential opportunities for innovation and improvement.
-
Throughout the project, we conducted four key research tasks—Question Storming, Design for Emotion, Jobs-To-Be-Done, and User Journey Mapping—to gather valuable insights that shaped and refined the application’s design. These methods helped us identify user needs, emotional drivers, and functional requirements, ensuring a well-informed and user-centered approach.
-
We developed the initial concept design through research, storyboarding, and wireframing, laying the foundation for a structured and user-centered design approach.
-
We created a proof-of-concept through interactive prototypes in Figma and video demos, showcasing functionality and validating design decisions.
-
We conducted user evaluation sessions to gather feedback, then systematically analyzed and organized the findings to refine and improve the product.
Project Scope
Following an initial team meeting, where we analyzed the design brief and determined our project focus, we created a diagram to map out potential opportunities and barriers. This visual framework allowed us to identify viable solutions and steer our research in a more strategic direction.
Design Research
Question Storming
Design for Emotion
Jobs-to-be-Done
Journey Mapping
We began by brainstorming a comprehensive list of questions, focusing on areas of curiosity and uncertainty. This process expanded our perspective, helping us uncover possibilities we hadn’t initially considered. By challenging cognitive biases, we explored new directions and innovative solutions.
Once we had generated a broad range of questions, we refined and categorised them based on relevance and potential impact. Our emphasis was on open-ended questions that reframed the problem, allowing us to approach it from fresh angles and discover new pathways for exploration
With a focus on mitigating the effects of isolation on wellbeing, we aimed to create a solution that evokes intentional emotional responses. By leveraging this method, we identified user concerns and strategically designed the experience to deliver a targeted emotional impact, ensuring a more meaningful and engaging interaction.
The Jobs-to-Be-Done (JTBD) framework helps develop products by understanding the customer’s goal and decision-making process. During COVID-19, users aimed to maintain fitness and wellbeing despite isolation. An online yoga platform emerged as a solution, enabling exercise and social connection in a comfortable setting.
Key user needs were categorized into:
Functional: Practicing yoga online with accessible instruction.
Emotional: Engaging in a relaxing and uplifting experience.
Social: Connecting with friends during yoga sessions in a more interactive manner.
Observations of Zoom and YouTube workouts highlighted a gap—users could follow yoga instruction but struggled to engage socially during sessions. Addressing explicit and latent emotional needs, future development should balance social interaction with personal space, fostering a sense of togetherness while maintaining individual comfort.
We applied this method to shape the overall experience, identifying user goals, needs, and key interactions throughout their journey. Our research revealed that unfamiliarity with the technology led to user hesitation, while a lengthy registration process significantly decreased engagement and adoption rates.
Ideation
Research Boards
After refining our concept, we explored five key areas to enhance the solution:
Values & Benefits – How it improves user experience.
Existing Projects – Evaluating similar solutions.
Features – Core functionalities and design.
Technology – Comparing AR and development tools.
Out-of-Scope Ideas – Future enhancements beyond current constraints.
Storyboarding
The storyboard mapped out user interactions with the application, environment, instructor, and device, providing a clear overview of engagement. However, it did not fully capture how users communicate with each other during a class, an essential aspect for fostering meaningful social connections. Moving forward, we prioritized integrating features that enhance user interaction and community engagement within the experience.
AR Wireframing
After storyboarding, we explored visual concepts for the AR environment, designing multiple iterations of the interface. This process was crucial to ensuring a seamless user experience, particularly as AR technology remains unfamiliar to many users.
Prototyping
First iteration
High-fidelity prototype
Concept demo video
AR Video Demo
We began by creating initial screen mockups in Figma, focusing on three key aspects of the prototype:
Design & Style – Establishing the visual identity of the application.
User Flow – Mapping out interactions to ensure intuitive navigation.
AR Environment – Designing the immersive experience for group classes.
Initial Figma mock-ups prioritised user flow, avoiding stylistic elements to clearly define navigation and transitions into AR.
To enhance usability, we selected lighter colors and rounded shapes to create a stress-free experience. We then developed an AR prototype in Torch, visualizing the user's perspective upon entering a class.
Next steps include aligning the app and AR environment for visual consistency, differentiating user roles with color coding, and exploring biometric data integration to reflect participant mood. We also plan to incorporate sound and link Figma with Torch for a more immersive experience.
We began by integrating user feedback from the last testing round, improving seamless interaction between the AR prototype and Figma prototype. Our focus was on refining key user tasks, ensuring a smooth experience. Users can now:
Log in or sign up for YogAR.
Navigate the interface to find and register for a class.
Join an AR session effortlessly.
Engage in a group class with ease.
Interact with other users during the AR experience.
This iteration enhances accessibility and streamlines user flow, bringing us closer to an intuitive and immersive digital yoga environment.
Video link: https://www.youtube.com/watch?v=i8E7_lFA41I&fea ture=youtu.be
The concept video showcases how YogAR can be used at home, following a user as they roll out their mat, select a yoga class, interact with fellow yogis, and complete their session. The video establishes a calming atmosphere with soothing music and a serene space filled with plants and other participants.
One challenge we encountered was AR elements overlapping physical furniture, creating visual clutter and confusion. In future iterations, we aim to ensure AR objects align more naturally with the physical environment. Despite this, we are pleased with the video’s outcome and believe it effectively conveys our concept and vision.
Video link: https://youtu.be/v-3TIStu1j8
We developed a new AR version with mood tracking and a smoother transition from Figma to Torch, adding icons and arrows for better navigation.
In Figma, users create accounts, personalise schedules, explore the news feed, and register for classes. In Torch, users connect with fellow yogis and experience mood-driven color shifts, powered by biometric data.
Next steps include improving AR object placement, refining color differentiation for user connections, and enhancing biometric mood tracking for a more immersive experience.
User Evaluation
Storyboarding
Participants answered targeted questions to assess user interaction, product responsiveness, and emotional impact.
Findings showed clear understanding of the experience, but many assumed users were already familiar with yoga, technology, and AR, highlighting accessibility concerns.
Additionally, while social interaction was recognised as a benefit, participants did not see it as essential for stress reduction, suggesting the need to reinforce its value in well-being.
UI Analysis
We asked five participants to playtest the prototype using the prompts: "I like...", "I wish...", and "What if...". Feedback was overwhelmingly positive, with participants appreciating the color scheme, easy session booking, access to wellness information, and immersive home workouts. Social connection—one of our core goals—was well recognized.
One participant wished for AR headset compatibility, prompting consideration of both mobile AR and heads-up display options for future development.
This evaluation helped identify key areas for refinement in future iterations and user interviews, ensuring a more seamless and engaging experience.
User Interviews
We conducted user interviews with six participants, exploring usability, navigation, and emotional response after viewing demo videos and the Figma prototype.
Key findings:
Users identified the app’s goal—to connect and engage in yoga with friends, with some noting its educational aspect.
The sign-up process was clear, though one user suggested adding class preferences and social connection options.
Class registration was intuitive, increasing curiosity about the app.
How-to screens improved onboarding, making new technology more approachable.