Overview
The objective of this project was to revamp the design system of BYJU's app to create an engaging, user-friendly, and age-appropriate learning experience for its diverse user base.
The project focused on three primary cohorts: elementary kids (4-5 cohort), mid-senior students (6-7 cohort), and higher secondary students (8+ cohort). This case study documents the comprehensive design and research process, the rationale behind key design decisions, and the impact on user engagement and conversion rates.
My role:
UI design, User research, Visual language, UX heuristics
Context
Enhancing Usability and Visual Appeal to Meet Student Needs
BYJU's, a leading educational technology company, sought to enhance its app's usability and visual appeal to better cater to the needs of its students. The existing design needed a refresh to align with the latest UI/UX trends and to improve user satisfaction and retention.
Challenge
Crafting a Unified Design System for BYJU's App
My primary challenge was to create a unified design system that effectively catered to the distinct needs and preferences of three diverse age groups: elementary kids (4-5 cohort), mid-senior students (6-7 cohort), and higher secondary students (8+ cohort). This required a deep understanding of each cohort's cognitive and emotional development, balancing vibrant and playful elements with more mature and professional design features. Additionally, I had to ensure that the new design not only improved usability and visual appeal but also enhanced user engagement and retention across all age groups.
Cohort 4-5
For elementary kids in the 4th and 5th grades, the design focuses on creating a playful and engaging learning environment.
Cohort 6-7
For mid-senior students in the 6th and 7th grades, the design strikes a balance between playfulness and maturity.
Cohort 8+
For higher secondary students in the 8th grade and above, the design is professional and focused.
User research
User-Centric Approach
The project followed a user-centric approach, involving extensive research and iterative design processes.
User surveys
Focus groups
Interviews
Implementation
Approach
Differentiation between Cohorts
What makes each cohorts unique?
The uniqueness of each cohort is influenced by different design principles combined together. Each cohort has a different corner radius to define its form factor, 3D to 2D combinations to define its icon style, and a variety of colours that are used in the colour tone layers.
Subjects
Accents
1
Form factor: Rounded corners are perceived as more friendly and approachable. They are less intimidating and more inviting, which is suitable for younger children who may be new to using apps and digital interfaces.
2
Vibrant Colors: Bright and vivid colors are engaging and can capture the attention of young children. These colors are often associated with fun and excitement, which can make the learning process more enjoyable.
3
3D Icons and Visuals: 3D icons add depth and realism, making the interface more interactive and engaging. This can help in holding the attention of young users who are naturally drawn to playful and dynamic visuals.
12 px
Subjects
Accents
1
Form factor: Slightly sharper edges than the elementary cohort, indicating a transition to more mature content while still maintaining a degree of friendliness.s intimidating and more inviting, which is suitable for younger children who may be new to using apps and digital interfaces.
2
Mid Pastel Colors: Mid pastel colors are more subdued than vibrant colors, providing a balance between engaging and not being overly stimulating. This is suitable for pre-teens who are starting to mature but still enjoy colorful interfaces.
3
2.5D Icons: 2.5D icons provide a sense of depth without being too complex, striking a balance between the playfulness of 3D and the simplicity of flat design.
4 px
Subjects
Accents
1
Form factor: Sharper edges give a more structured and organized feel, aligning with the higher expectations and responsibilities of older students.
2
Flat Pastel Colors: Flat pastel colors provide a clean, professional look that is suitable for older students. These colors are calming and can help reduce eye strain during longer study sessions.
3
Flat Icons: Flat icons are simple and modern, providing a more professional and serious tone appropriate for older students who are preparing for higher education.
Implementation
Home screens
Implementation
Card anatomy
Showcase
Components
Showcase
Subject landing pages
Takeaway from this project
User-Centric Design: Importance of understanding and meeting diverse user needs through research.
Developmental Stages: Tailoring design elements to different age groups for effective engagement.
Aesthetics & Functionality: Balancing visual appeal with usability.
Collaborative Process: Value of iterative design and stakeholder collaboration.
Cohesive Design System: Creating consistent and scalable design systems.
User Impact: Positive effects on engagement, retention, and conversion rates.
Overcoming Challenges: Improving problem-solving skills in diverse design contexts.
Psychological Insights: Applying psychology to enhance user behavior and learning outcomes.