ABC Education website UX UI design
Introduction
At-a-Glance
Gen z’s Career Plan - Empowering Generation Z with a dynamic platform that blends flexible education and real-time career resources, paving the way for informed career choices.
​
For instructors and students in elementary and middle schools, ABC Education provides a range of curriculum-based materials, such as games, interactive content, and videos. The current objective is to increase the materials available for lifelong learners by finding creative methods to make use of ABC's vast resource base.
Timeline
Role
August 2024-October 2024​​​​
UX UI Designer
Collaboration
Platform
A team of four
Figma
Client
ABC Education
Brief Overview
For instructors and students in elementary and middle schools, ABC Education provides a range of curriculum-based materials, such as games, interactive content, and videos. The current objective is to increase the materials available for lifelong learners by finding creative methods to make use of ABC's vast resource base.
Goals
-
Broaden Audience: By tailoring information to individual requirements and learning styles, the major objective is to draw in more consumers of higher education and lifelong learners.
-
Increase Engagement: By integrating information with a structured taxonomy that promotes academic progress and career development, the project seeks to make learning more interesting.
-
Career-Focused Learning: Incorporating career resources into the platform is another objective in order to give users learning paths that are closely linked to actual employment chances. The platform's solutions will have more utility value as a result of this strategy.
Complications
-
Time constraints: Flexible and accessible learning options are vital for lifelong learners who frequently balance work, school, and personal activities.
-
Continuous engagement: Educational resources need to be interesting and motivating for students in order to guarantee retention.
-
Curriculum alignment: Curriculum alignment must be combined with flexibility to achieve set curriculum requirements in order to offer individualized and creative learning experiences.
Outcomes
-
Expanded User Base: The platform has effectively increased its audience by matching material to the requirements of users in higher education and lifelong learners.
-
Enhanced User Engagement: By making it easier for users to access pertinent material, the adoption of a hierarchical categorization system boosts user engagement and lengthens their stay on the platform.
-
Career-Related Success: The incorporation of career resources associated with learning paths furnishes users with pragmatic instruments that facilitate the application of their acquired knowledge to actual situations, hence augmenting the platform's worth for individual and occupational growth.
Project background
-
The program's initial goal was to assist the expanding group of lifelong learners who are juggling their education with personal, professional, and educational obligations. Today's educational landscape is shifting toward career-centered education and modular learning, largely due to technological advancements and remote learning environments. ABC Education wants to break into this market by creating a platform that meets these changing demands while upholding educational rigor and relevance.
Relevant Researches
How to define our target user as gen z?
Lifelong Learners Using Online Resources
Fragmented Time Learning
Attracting and Retaining Users on Educational Platforms
Relevant Theories
Self-Directed Learning Theory (Andragogy)
Precedents
Coursera and Udemy
Duolingo
Key Insights
Target user
We defined Gen Z as our target user based on two key characteristics: tech-savviness and their position in the educational or early career phases. The combination of technological fluency and a focus on self-development positions Gen Z as the suitable audience for expanding the reach of our platform.
Flexibility
Studies reveal that lifelong learners like materials that are easy to fit into their hectic schedules, such anytime-accessible microlearning modules.
Career Relevance
When learners can make a clear connection between what they are learning and actual employment chances, they become more engaged. Including career resources in the platform's instructional design is essential to raising user happiness and engagement levels.
Personalization
Especially for lifelong learners looking for relevant, useful educational experiences, information that is tailored to each user's unique learning interests may greatly boost user engagement and retention.
Design Process
Phase 1: Research
1.User research
1.1 introduction
The research phase focused on deeply understanding the learning behaviors and preferences of Generation Z (born between 1997 and 2012, ages 12-27), the primary target audience for ABC Education’s platform expansion. As digital natives, Generation Z users are highly familiar with technology and are accustomed to on-demand, interactive learning experiences. By investigating their specific needs, we aimed to ensure the platform design would resonate with theirexpectations.
1.2 Qualitative Research (User Interviews)
Key findings about the preferences of Generation Z learners (high school students, college students, and workers) for online learning platforms were obtained from 5 in-depth interviews.
Frequently updated content: They choose platforms that guarantee that the information is current, keep users interested, and regularly provide fresh and pertinent content.
Personalised Learning Paths: The learning process is more relevant and successful when it is customized to the goals and development of each member of Generation Z.
Reward programmes or concrete recognition: Acknowledgment in the form of badges, diplomas, or other material awards encourages students to keep studying since it gives them a feeling of success and makes it possible to monitor their development.
1.3 Quantitative Research (Survey)
Data from 68 online surveys provided insight into the preferences and behaviors of Gen Z learners.
Preferred features: According to 51 respondents, "personalized learning paths," "reward or certification systems," and "frequent content updates" are the most desired features (45 respondents)
Content Interests: The respondents' high interest in "personal growth" (66.7%) and
"language acquisition" (83.3%) is in line with Generation Z's emphasis on acquiring transferable skills for the workplace.
Formats of choice: 'Live workshops' (25.4%) and 'video tutorials' (26.9%) are the most popular learning formats. Although they were less common, other forms including text-based training, interactive exercises, and audio courses were also suggested.
2. Market Research
In order to make sure that our platform stays competitive and lives up to Gen Z's expectations, we carry out extensive market research using a range of techniques:
2.1 Competitor Analysis
The following findings are the result of our analysis of the services provided by major platforms, such as BBC Bitesize, CBC Kids, NHK for School, and Duolingo.
Bitesize: This portal caters to children in the UK between the ages of 5 and 16, providing them with curriculum-aligned films, activities, and quizzes. It highlights school-centered content in an engaging manner.
: CBC's educational platform features engaging and instructive programming, including as interactive games, reality shows, and cartoons, for younger students (6–12 years old)
: NHK offers instructional materials that complement the curricula of Japanese schools. For students in grades 6 through 12, it provides live instruction, video content that can be watched on demand, and resources centred around language and science.
: This programme for learning languages is unique in that it uses gamification to keep users interested. Due to its worldwide accessibility and attractiveness to learners of all ages, Duolingo is a compelling role model for students in Generation Z, who appreciate goal-oriented and interactive learning experiences. It also includes interactive exercises, badges, and winning streaks to inspire students.
2.2 SWOT
SWOT analysis allows us to evaluate both external and internal variables. This methodology offers a methodical synopsis of ABC Education's present standing within the industry and facilitates the identification of the platform's advantages and disadvantages.
Strengths
-
Support from public broadcasting: ABC Education's standing in the education industry is strengthened by the assets and standing of Australia's national broadcaster.
-
Free access: ABC Education guarantees that all Australian students have equitable access to high-quality educational resources by offering free resources.
Opportunities
-
Growing demand for online education (Global Market Insights, 2023): ABC Education was able to grow its digital products and attract more consumers because of the popularity of distance learning.
-
Adoption of new technologies: For tech-savvy Gen Z customers in particular, customization mixed with AI-driven personalization can improve the user experience.
Weaknesses
-
Geographic limitation: The platform's potential for expansion and attractiveness outside is constrained by its concentration in Australia.
-
Refreshes to the content are made slowly: ABC Education feels less dynamic and refreshes its content more slowly than commercial platforms.
Threats
-
Global platform competition: Australian students seeking a more engaging environment may be drawn to foreign platforms that provide regular updates and individualized instruction.
Phase 2: Define the Problem
This phase's primary objective is to summarise the results and determine the core issue that our design will attempt to solve. We are able to pinpoint the shortcomings of our present platform and the ways in which our solution would fill them by having a thorough awareness of the demands, habits, and frustrations of our target consumers.
1. User Personas
We developed two comprehensive user personas, Alex and Anna.
College student Anna is unsure about her future and is looking for individualised career advice and useful resources to assist her weigh her alternatives. Time-pressed project manager Alex is searching for a brief, tailored learning programme that would enhance his love of the great outdoors and fit into his busy schedule.
The main problem for both of these user personas is that there aren't enough interactive, personalised tools to fit their unique interests and learning or career objectives. The material available on current platforms is frequently overly generalised or not accessible in a way that suits the user's schedule or preferred method of learning.
The customised, effective learning environment that users like Alex and Anna required to meaningfully explore their learning and career aspirations was not offered by the solutions that were already in place.
2. How Might We Statement
How might we provide Gen Z with a flexible, personalized career learning platform that adapts to their learning habits?
Phase 3: Ideation
The goal of the ideation phase is to produce a broad variety of concepts and viable fixes for the main problems that were discovered during the earlier stages. We want to create solutions that offer interactive skill-building opportunities, career-specific information, and personalised learning experiences that are suited to the requirements of our user personas via the use of a variety of structured ideation techniques.
1.Method: Brainwriting & Crazy 8
Because we need to expand modules for a completely new user group, therefore "Brainwriting" and "Crazy 8" methods are suitable to help us come up with unique and creative ideas.
1.1 Brainwriting
Each team member focused on important platform needs including interactive features, personalised professional development, and time-saving material as they individually jotted down their ideas on paper or in a shared online document. We provide the idea to another team member after a short while so they may develop it further or add something new.
Personalised Career Paths is an application that helps users discover professions such as yoga or accountancy by proposing learning modules according to their interests. Micro-learning modules, Lessons that are brief and captivating, lasting less than five minutes, making learning easier to fit into hectic schedules for users with limited time, such as Alex.
1.2 Crazy 8
In eight minutes, each team member folds a sheet of paper into eight parts and writes down or draws eight potential ideas. Teams are challenged by this approach to think creatively and rapidly, without overanalyzing.
​
Gamified learning is a technique to increase user engagement with learning whereby users complete career-related learning modules and receive badges or prizes. Numerous innovative concepts were produced by these technologies, ranging from interactive simulations and gamification elements to personalised content suggestions. This paved the way for the creation of a platform that would offer a customised, captivating, and time-saving educational experience.
2. Method: Black Mirror
Brainstorming (Ethics - Focused)
We employed Black Mirror Brainstorming, we chose this method because ABC education is a platform that needs a positive image, therefore we fully focuses on investigating worst-case situations, to make sure that our design considers any ethical ramifications individually thinking up negative results or ethical issues related to our plans. This forces us to think through the worst-case possibilities, resulting in the development of more careful and responsible answers.
Two scenarios must be taken into account.
1. Career-related modules
The variety of career possibilities that are provided to consumers may be reduced if one just focuses on popular or in-demand professions.
Users' future employment prospects are limited since they are only exposed to a tiny selection of high-demand occupations. Consequently, this devaluation of less financially rewarding but personally satisfying employment limits users' perception of their professional options.
Solution: Make sure there is industry variety in careers. Provide a broad selection of job routes so that users may investigate fields that align with their interests and aspirations, independent of budgetary constraints, as opposed to emphasising market-driven occupations.
2. Modules of subject structure
Adhering strictly to the Australian Curriculum Standards for content learning might unintentionally restrict flexibility and leave out things that are innovative or unconventional.
Users could believe that there isn't enough possibility to study new or other subjects and that they can only learn the platform's conventional curriculum content. This restriction could make learning less enjoyable overall, stifle creativity, and keep students from developing in their areas of interest.
The answer is to integrate a greater variety of learning tools and materials while adhering to Australian Curriculum requirements to offer flexibility.
Phase 4: Prototyping
1st Iteration
In our initial prototype, we wanted to let users experience different occupational content by way of a game and capture their behavior with a camera to correct their mistakes. However, in later iterations we removed this section due to the potential invasion of user privacy this could cause.
2nd Iteration
In this version, we redesigned the ABC Education website to make it more user-friendly. However, most of the feedback we received from users was that the content was boring and lacked sufficient features.
Final Iteration
In the final iteration, based on user feedback and demand, we reintroduced and redesigned the careers section, tying its functionality more closely to the existing course content.
Phase 5: Testing
1.Method: User Journey Mapping
Because we need to understand the daily behaviors of Generation Z, in order to help them better formulate career-related learning plans based on background research, we choose User Journey mapping to assess how users engage with the site for important tasks including choosing subjects, finishing courses, taking quizzes, creating study plans, and looking into career options, we performed User Journey Testing. By following actual users from login to their end goals, our method pinpointed problems and opportunities for development.
2.Method: Think Aloud
The think aloud method involves having users speak out loud during testing about their thoughts and behaviors as they interact with the platform.Because ABC education's course filtering function involves complex interactions, think aloud ensures that users think clearly when they testing our prototype.
It provides insight into how user behavior and usability issues relate to design content. Targeted adjustments to newly identified issues improve the overall platform experience.
3.Method: A/B Testing
To enhance user navigation and selection visually, we introduced a few additional icons to the subject button during A/B testing.
Version A: Use text to display the subject button.
Version B: We added new icons to each subject to make it easier for users to browse through the topics.
We found that version B considerably enhances user experience, enabling users to browse subject categories more quickly and confidently.
Key Decision
1. Content Structuring:
-
In order to organize learning resources in a way that promotes both academic and vocational learning, it was imperative to decide to connect the content of the Platform with the Scientific Classification System.
-
Integrating "career resources" with instructional content allowed users to make a clear connection between their education and actual employment chances, which was another crucial choice.
2. User-Centered Design:
-
The platform's emphasis on "lifelong learners and higher education users" determines content forms (such as microlearning) and flexibility, guaranteeing that users with hectic schedules may access brief, easily digestible information.
3. Ethical Considerations:
-
The "black lens brainstorming approach" was useful in identifying possible drawbacks of the design, such as restricting users' career options or overburdening them with inflexible content structures. This affected choices made to guarantee a wide range of professional routes and flexible content.
Milestones
1. Initial Research Completion:
-
Early investigations into user requirements and preferences produced valuable information, including the significance of flexibility and job relevance for lifelong learners.
2. Wireframe Development:
-
To illustrate the topic organization and user interface of the platform, low-fidelity wireframes were made.
3. Prototype Testing:
-
To get input on the platform's design, content accessibility, and career tool integration, usability testing was carried out with a sample of users.
4. Content Alignment with Curriculum:
-
Full curriculum and content alignment that allows users to investigate subjects across disciplines while adhering to the Australian Curriculum, Assessment and Reporting Authority (ACARA)
Iterations
1. Content Flexibility:
-
Changes were made to the material to make it less inflexible in response to user input. This allowed for creative inquiry outside of the prescribed curriculum.
2. Career Pathways:
-
To guarantee that users were not overwhelmed and that they were given clear direction concerning their learning objectives, the integration of professional paths underwent many modifications.
3. Interface Refinements:
-
To make navigating easier and enhance the user experience while accessing modular material and career resources, the user interface (UI) was revised in response to usability testing.
Feedback Received
1. Positive Feedback:
-
Users appreciated the “modular learning structure”, which allowed them to intersperse learning content with tight schedules.
-
The integration of career tools was likewise highly rated, especially for those who wanted to apply what they learned directly to their careers.
2. Constructive Feedback:
-
The user interface needs to be optimized and lacks clarity for those less familiar with the online learning platform as it currently stands.
-
Many components of the interface were too large and users needed to scroll the page to interact with them.
-
The guidelines for the PK function in the social section are not clear enough.
Challenges and solution
CHALLENGE 1: Diverse Learning Preferences
Issue: The learning preferences, timetables, and objectives of "lifelong learners" and "higher education users" diverge. While students in higher education might need a more in-depth, planned learning experience, lifelong learners can choose brief, consumable material (micro-learning) that fits within a fragmented time frame.
​
Solution: To address the demands of lifelong learners and guarantee that the platform offers "deep resources" for higher education users, implement "modular, bite-sized learning units." Microlearning for quick learning classes along with optional in-depth study subjects, guarantees that the platform is beneficial to both user groups.
​
CHALLENGE 2: Integrating Career Resources
Issue: Adding "career resources" to a platform should be relevant and easy to use without becoming overbearing for the user. Individuals who are lifelong learners frequently seek to integrate their acquired knowledge into their professional lives; yet, an abundance of information or inflexible career paths may impede their ability to do so.
​
Solution: Offer "personalized career paths" that take into account the user's learning path and enable dynamic resource recommendations related to careers. The platform offers flexible career alternatives that are tailored to individual learner progress and interests, all the while offering useful, real-world advice.
​
CHALLENGE 3: User Engagement and Motivation
Issue: It can be challenging to maintain users' interest over time, particularly in situations where learning is fragmented. Incentives are necessary for lifelong learners to return to the platform again without becoming overwhelmed.
​
Solution: Use "gamification" components like prizes, progress monitoring, and "serotonin resets" (mini positive feedback loops) as a solution. Combining these incentive tactics boosts user engagement, motivates them to finish more learning courses, and allows them to freely engage with professional resources.
​
CHALLENGE 4: Usability and Interface Complexity
Issue: Some users may find it difficult to use the platform, especially less tech-savvy learners, due to the first confusing user interface and unclear topic categorization.
Solution: Streamline the User Interface (UI) to facilitate content access and make navigating more intuitive. By including "A/B testing" into the design process, it was possible to iterate the final user interface (UI) based on user feedback, guaranteeing that all user groups, regardless of their level of technical expertise, could easily utilize it.​​
Final Design Solution
Description of Final Design
Our team extended the existing content of the ABC Education platform, aiming to meet client briefs to attract more lifelong learners and higher education users. The core objective of the project was to increase the platform's audience and user engagement by optimizing and adapting the existing content.
Firstly, the platform can help users plan their learning paths more efficiently by recommending appropriate learning programs based on their chosen personal preferences. Secondly, with the newly launched Career Board, users can learn what courses to take to meet the needs of different careers and get guidance on career development. Finally, we have introduced a new social feature that allows users to reinforce what they have learned by competing with their friends in a PK competition, making the learning process more interactive and fun.
Visuals of Final Design
The think aloud method involves having users speak out loud during testing about their thoughts and behaviors as they interact with the platform.Because ABC education's course filtering function involves complex interactions, think aloud ensures that users think clearly when they testing our prototype.
It provides insight into how user behavior and usability issues relate to design content. Targeted adjustments to newly identified issues improve the overall platform experience.
Homepage
Profile
Career
How the Final Design Meets the Brief
Personalized Learning Path
The platform will intelligently recommend the most suitable courses according to the user's chosen career or interest, and help users quickly generate a learning program that meets their goals. Previously, the most frequently mentioned pain point by users was to spend a lot of time screening a huge number of courses. Now, the platform solves this problem through accurate recommendation, so that users no longer need to worry about choosing courses.
Users can also adjust the learning program at any time according to their own needs, such as changing the direction of learning or adjusting the difficulty of the course, the platform provides them with a higher degree of autonomy, to ensure that the content of the course to meet the different stages of the user's learning needs.
Career Development
In response to the user interviews, we found that many of the respondents felt that they lacked suitable career guidance and were not clear about the careers in which the courses they had studied could be useful, so we specifically designed a career introduction section.
This section re-categorizes ABC Education's original courses according to their occupational characteristics, and helps users understand which courses they can take to acquire the skills and knowledge needed for their careers. Through this feature, users can plan their learning paths more specifically to prepare for their future careers.
Interactive Elements
We have also added a buddy competition feature, which allows users to consolidate their learning by competing with their friends or other learners. In our previous surveys, users often complained about the lack of interaction and feedback during the learning process, and that the learning experience was rather monotonous.
So by introducing this feature, we hope to provide users with an interesting and interactive learning environment, where they can review and consolidate what they have learned while being motivated to learn through competition. This social approach to learning effectively increases users' engagement and interest in learning, making learning less of a one-way process and more challenging and interesting.
​
Through personalized learning paths, career development, and social interaction features, we ensure that the platform provides lifelong learners with content that is both engaging and aligned with their interests. These designs not only expand the reach of ABC
​
Education but also enhance user engagement and motivation, making learning a more interactive and challenging process rather than a one-way experience. This approach effectively meets the brief’s requirements for expanding content and promoting user participation.
How User Testing was Conducted
With the data collected on the Internet, we have summarized the main group of current Internet users, young users between the ages of 12 and 27 (Generation Z). We realized that capturing the needs of Generation Z would bring considerable market potential and user growth opportunities for the platform.
We also identified key stakeholders in the project through Power and Interest grid to ensure that the needs of Gen Z are met while the goals of the stakeholders are balanced and realized.Through the above user and stakeholder surveys, combined with our analysis of other similar educational platforms, we have gained a basic understanding of the challenges and needs that users often encounter when using online learning platforms.​
These initial surveys were clearly not enough; we needed to conduct multiple rounds of testing to ensure that our design solution met the needs of our users. In subsequent user testing, we employed user journey mapping, think-aloud, and A/B testing to conduct in-depth evaluations of each of the platform's key features. Through these tests, we collected and identified a variety of real-world problems that users encountered during their use, we conducted several iterations of optimization based on this user feedback to ensure that the platform could more accurately meet the needs of different users and provide a more structured and personalized learning experience.
User Feedback and Impact
Course Card Adjustment
When we finished the first version of the prototype and started internal testing, we quickly realized that the course cards were too large, taking up almost the entire screen, and that users couldn't access the right amount of content. It would have been difficult to spot this problem if we hadn't actually run the prototype.
At the same time, many users wanted to see more basic information on the card, such as the course instructor and course completion status, etc. Integrating this key information into the course card page optimized the previously cumbersome steps.
Previous Version
Updated Version
Optimize Navigation Bar Structure
In early user journey mapping tests, we found that many of our testers were having problems with the course navigation button, and that they were spending far more time on this section than we expected.
In post-testing interviews, they reported that after selecting a SUBJECT, the navigation bar did not clearly show the selected option, which prevented them from completing their selection in a timely manner. In response, we redesigned the navigation button, enhancing the visuals to emphasize the user's choices through highlighting and underlining.
Previous Version
Updated Version
Conclusion
Reflection
In this three-month digital transformation project for ABC Education, we redesigned an application targeting users of all age groups. Our primary objectives were to expand the user base and increase user engagement.
The main problems that occurred this time were primarily due to the team's lack of clarity on the purpose of using design kits, which led to deviations in conclusions at each stage. We lacked the reflection of "why are we doing this" at each stage. At the same time, we also need to improve the team collaboration process and more clearly define the division of labor in the timeline to better cope with the project timeline.
Advantages and Weaknesses
While our well-defined goals in the research phase helped us identify Generation Z's needs through interviews, the limited scope of our participant pool—primarily higher education students—led to findings lacking broader user need.During ideation, we overlooked crucial discussions on UX interaction methods, and only tested users' understanding of the UI.resulting in low-fidelity prototypes that inadequately addressed user experience needs. This problem increased our subsequent user testing workload, we need add additional A/B testing. The biggest challenge we encountered was planning the timeline. The three-month timeframe led us to make hasty decisions in some areas, especially during the user testing phase of the career section. About ux design, we may have focused too much on new users' needs for structured courses, which increased the difficulty for existing users in finding courses.