Europe/London
17:36:14
Projects

Building BA Learn, a Customizable Design System

image
April 8, 2024
Bioacoustics Learn aims to demystify complex acoustic data analysis by providing a structured, user-friendly learning environment. Created as part of my MA in User Experience Design at Falmouth University, this project exemplifies an intensive, research-driven, user-centered design approach from April to July 2024. Contextual and user research across several channels played an important role in this project. BL fosters deeper learning and supports users in navigating sophisticated software tools, powered by generative AI, enhancing both their skillset and confidence. 3 months (April to July 2024)
  1. Innovated through a user-centered, accessible, generative educational platform.
  2. Incorporated gamified elements to boost user engagement and knowledge retention.
  3. Received positive validation through expert and user feedback.
  • Engagement: Gamified elements boosted user retention by 40%, improving knowledge retention through progress tracking and achievement rewards.
  • Design System: Developed a scalable design system with 700+ components, ensuring accessibility and consistency across platforms while meeting WCAG standards.
  • Usability: Iterative design improvements led to a 40% increase in task success rates, streamlining navigation and key actions.
Figma prototype
Bioacousticians encounter significant hurdles when accessing and utilizing intricate acoustic data through various software tools. The primary objective of Bioacoustics Learn was to create an intuitive, accessible, and scalable learning environment that addresses the diverse needs of its users while facilitating effective data analysis and interpretation.
  • Diverse software requirements for different analytical contexts.
  • Complexity in data visualization and processing.
  • Skeptic nature of scientists (users demand rigorous validation and clarity before adopting new tools).
To ensure the platform's relevance and usability, I conducted extensive user research, employing both primary and secondary methods:
  • 8 in-depth Interviews
  • 21 participants unbiased surveys
  • 15 academic papers analysed
  • 7 channels for contextual Inquiry
  • 3 Co-design workshops
Personas
  1. User Needs: Guidance in selecting suitable tools for analyzing large datasets.
  2. Pain Points: Big learning curves for each software, lack of route of how to continue progressing in their technical skills.
  3. Opportunity for Innovation: Develop a decision-making tool that aids users in choosing the right software at various stages of analysis and integrating educational resources to streamline workflows.
  4. I developed Personas to embody user archetypes, from novice users to outsiders, and experienced bioacousticians.
A thorough competitor analysis highlighted strengths and weaknesses in existing platforms, identifying Microsoft Learn as a best-in-class reference. This analysis informed the development of a user-friendly experience that minimized barriers to entry. I facilitated design studio workshops with academic and scientific contributors to brainstorm and refine key concepts. These sessions helped craft a user-centric approach, focusing on clear, intuitive navigation and personalized learning paths.
  • Defined structured learning paths tailored to user expertise.
  • Enhanced onboarding processes supporting new users.
Starting with low-fidelity sketches, I iteratively tested and refined the design, with a desktop-first approach, until reaching a high-fidelity prototype that prioritized responsive design and accessibility.
  • Devices Supported: Desktop, Tablet, Mobile
  • Compliance: WCAG accessibility standards (Stark, Adobe)
To foster motivation and deeper learning, I introduced gamification elements:
  • Progress Tracking: Visual milestones that guide users through their learning journey.
  • Achievement Badges: Rewards for course completion and participation.
  • Interactive Quizzes: Reinforce knowledge with scenario-based challenges.
  • Challenges: Periodic challenges simulate real-world scenarios where users must make decisions based on bioacoustic data.
These gamified elements aimed to turn learning into an engaging, repeatable experience.
Gamification
Multiple rounds of usability testing were conducted to refine the interface and ensure alignment with user needs. Feedback was gathered through one-on-one interviews and remote usability tests.
User testing
To address the platform's growing complexity and improve team collaboration, I created a design system based on key principles that guided my work:
  • Scalability: to support the platform's growth.
  • Variables: by using tokens for colors, typography, and spacing, I ensured both consistency and flexibility across designs and teams.
  • Responsiveness: I focused on making the system adaptable to different devices and screen sizes.
  • Accessibility: Creating WCAG-compliant components was a priority to ensure an inclusive user experience.
  • Handoff-Friendly: I developed detailed documentation and assets to streamline the workflow for developers and future designers.
  • Future-Proofing: to evolve with the platform and accommodate the needs of a growing team.
To ensure clarity and reusability, I followed a structured workflow, moving step-by-step from auditing existing designs to final handoff.
User testing
  • Improved Usability: Through iterative design and testing, usability improved significantly. For instance, after incorporating user feedback, path navigation and key actions (e.g., starting courses) were simplified, reducing confusion and increasing task success rates.
  • User-Centered Design: Validation sessions and usability testing highlighted the platform's intuitive UI and accessibility, receiving positive feedback from practitioners and lecturers in the bioacoustics field.
  • Gamified Engagement: Features such as progress tracking and achievement rewards boosted user interaction and retention, demonstrating the effectiveness of gamification.
  • Sustainable Design System: The comprehensive design system with built-in components and tokens supports platform scalability and ensures consistency for future feature additions.
  • Community-Oriented Features: Early connections with users helped build a supportive community and generated actionable insights for further iterations.
  • Usability Testing: A 49% usability success score (Mission 5) highlighted areas of strong user understanding, while challenges in other missions (e.g., navigating courses) indicated opportunities to refine pathways and simplify CTAs.
  • User Validation Outcomes: Senior lecturers and bioacousticians appreciated features like the dark/light mode and icon clarity, emphasizing the importance of accessible and flexible UI choices.
User testing
Industry experts praised the intuitive UI and engaging demo. Constructive feedback included suggestions for integrating image generation within story creation for a more cohesive experience.
"Extremely impressive and comprehensive project Sofia. You have demonstrated a tremendous amount of work and care in this project, and the work is of a very high standard. It has been wonderful to see you do multiple rounds of user research, many iterations of changes, and focus on accessibility and responsiveness. You appear to have learnt a lot of how Figma works, and made use of advanced features like variables and flexible layouts to make the prototype closer to real life. Future enhancements: Through working on this project I hope you have gained a sense of confidence in your abilities. Remember though that you don’t have to recreate everything from scratch - make use of libraries and frameworks that can enhance the users’ journey."