Brief
Smartee is a learning portal aimed at school leavers, particularly in Africa. The portal's goal is to create a personalized, supportive, and engaging learning experience that will help students choose the right career path. This is a personal project.
The Vision and Objectives
Defining Smartee's vision for children who do not yet have access to education, and setting clear objectives for the vision
The workforce potential in Africa is immense, but the uneven access to education and infrastructure poses a problem. Therefore, there is a need for easy access to quality and up-to-date education through online learning.
There is inequality in opportunity and education in Africa. Smartee's goal is to close that gap and make world-class education more accessible to everyone, regardless of socioeconomic background or geographic location.
It serves as a means to directly contribute to the development of a healthy digital ecosystem and technology through existing talents.
The portal’s purpose is to create a personalized, supportive, and engaging learning experience that will help individuals decide on the right career track.
It aims to inspire many people through various trainings and contribute to creating a wider job market with high competitiveness.
The user is confident in developing their own potential and career, regardless of diverse backgrounds and environments.
The user can compete in an increasingly competitive landscape, on the international stage.
The user contributes effectively in their work environment by providing valuable knowledge and reliable skills.
The user can become a teacher/mentor for other students in the future.
The high-level UX objectives
Stage 1: When the customer enters Smartee, they should know what is this website for.
💡 Provided by rich information content in the homepage.Stage 2: When the customer enters Smartee, they should know how to operate the interface.
💡 Guided by product tour.Stage 3: Once the user know how to operate, they understand what they can do and get in Smartee.
💡 Features and function are available in the interface, recommendation and personalization are generated by user preferences from the initial setup.Stage 4: User know what to do to achieve their specific goals.
💡 Simple and common task flow make an easy journey for user to find a course.Stage 5: They can repeat the same process in the same way in recurring process (for instance: Replay the previous video for recalling information).
💡 Simple and common task flow make an easy user learning curve so user can easily repeat the same process in the future.Stage 6: Motivated to achieve more goals beyond their initial goals.
💡 A use of gamification principle: User got motivated with reward such as badge. Creating a scarcity by displays upcoming reward badge that the user can achieve if they have completed a task.Stage 7: If users have obstacle or make mistakes, they can easily recover and find help.
💡 Provided by “Assistant” features. User can ask anything or find useful information in FAQ.
The goal of Smartee is to provide the best alternative education for school leavers with personalized, accessible, affordable, qualified, supportive, and engaging learning experience that will help them decide the right career track.
Data Research
About school leavers in Africa
In 2018, approximately 258 million youth globally had either never started or left school early (UNESCO, 2019).
The benefits of attending school until full completion include increased employment opportunities, skills development, reduced crime and risky behavior, equality, better health, and an increased sense of self-worth. In low-middle-income countries such as South Africa, school dropout is related to poverty and inequality, which are threats to the current generation and future generations to come (Sulla & Zikhali, 2018). Understanding student’s reasons for leaving school is therefore necessary and a global priority.
South African studies conducted before the COVID-19 pandemic found that the reasons for dropout differed between studies and were due to poverty, high use of substances, bullying, boredom, family needs (helping with the household income, pregnancy and caretaking responsibilities), illness, disability, community violence, school factors (poor school performance, disliking school, conflict with teachers and being too old for the class and disciplinary consequences).
Youth/adolescence behavior
Behaviorally, adolescence (10-19 years) is associated with volatile emotions and boundary-testing behavior as individuals explore and assert personal identity, learn to navigate peer relationships, and transition to independence. Highly influenced by peers and seeks validation of achievements from friends.
The strongest stereotypes of adolescence are portrayed in countless television shows and movies: the emergence of sexual interest and behavior, and decision-making dilemmas.
Collegie strives to assist adolescents, especially school leavers, through approaches:
Help by providing guidance and answers to their questions through AskGPT.
Offering materials for sharing achievements through shareable badges & accomplishments.
Presenting engagingly packaged videos, enriched with music and subtitles, to ensure they remain captivating and informative.
Persona Development
I created proto-personas to represent Smartee’s users because, at this early stage, we needed a quick and practical way to understand who we are designing for and to guide early design decisions.
I built the proto-personas using existing research about children without access to education and by making logical assumptions based on Smartee’s vision and goals.
These proto-personas will be refined later through real user research.
Framework
I defined several frameworks to support the project’s foundation. Below are some of the frameworks I used.
Information Architect
Approach: Top-down IA
The form that the environment takes—its content, page layout, etc.—is designed and produced to support this structure that has been centrally defined “from above.”
Scheme: Activity-oriented
IA involves planning a scheme and method for ordering, structuring, and labeling content. It also involved creating a site navigation scheme which enables users to easily locate information. The end goal is to create a clear mental model of site content in the mind of the user.
Smartee adapts an activity-oriented scheme that groups menus based on similarities in their activity types. It based on mental model user of similar video browse like Youtube. User are more likely to find content by what activity that they must do and accomplish.
I separate into 3 groups of activity type:
Exploration (Menu: Home, Categories)
Past & ongoing activity (Menu: My Learning, Schedule, Wishlist)
Setup (Menu: Preference, Payment & Subscription)
The Octalysis Framework for Gamification & Behavioral Design
Gamification, a design approach centered around human motivation, takes elements from games and applies them to real-world activities. Octalysis emphasizes “Human-Focused Design” instead of mere functionality, optimizing human motivation and engagement within a system.
The use of gamification in Smartee:
Accomplishment: User got motivated with reward such as badge.
Scarcity: Displays upcoming reward badge that the user can achieve if they have completed a task.
Empowerment: With the presence of titles/status on badges, users become more confident in their personal achievements.
Social Influence: Status and badges can be shared with recruiters or friends via a link. This can boost their self-esteem.
The Opportunity
Opportunity
Some opportunity that can be provided by Smartee:
Offline learning due to internet connection problem.
Provide an option of low & medium resolution of screen to reduce bandwidth consumption.
Provide more practical skills lesson that are directly applicable to the workplace, such as technical skills, computer literacy, customer service skills, or trades training.
Provide support system including mentors, counselors, or role models who can provide guidance, encouragement, and resources.
Give promotional discounts or free plan subscription to help them with financial issues.
Value Added
There is a progress badge that users can get once they have completed several courses and received evaluations from instructors. This can also motivate users to continue learning to achieve higher badge levels. These badges can be shared via links to showcase progress/badges/certificates to recruiters, that the users have completed various courses and gain valuable skills. The higher the level and status, the better the user's credibility.
How it works
Workflow
The form that the environment takes—its content, page layout, etc.—is designed and produced to support this structure that has been centrally defined “from above.”
Feature Assessment
I conduct feature development and apply design thinking methodology, including the development of the onboarding feature.
Onboarding
Pain Points
User doesn't get a chance to provide their preferences to receive content that matches their interests. Problem hypothesis:
The user may not find the topic or category they are looking for due to incorrect navigation or keywords in the search.
The user feels they cannot find a match with the portal because they do not feel they share common interests and are not interested in the courses offered.
The user is unaware of the subscription program to facilitate payment and obtain discounted prices.
User doesn't know the functions available in Collegie and can't operate the interface yet. Problem hypothesis:
The user doesn't know where to start exploring because they are not directed by the system.
There are unfamiliar elements, and the user may overlook or be unaware of the navigation functions and interface usability in Collegie, hence they need to be guided.
Needs
A chance to choose preference data based on interest and goals.
Clear information about what the website is all about, how to use the website especially for the key feature.
Onboarding best practice
I adapt few best practice of onboarding such as:
Simplify Registration: Streamline the registration process by minimizing the number of required fields and steps. Offer social sign-in options and provide clear instructions to guide users through the registration process quickly and easily.
Provide Guided Tours: Offer guided tours or walkthroughs to introduce new users to key features and functionalities of the platform. Use tooltips, overlays, and interactive elements to highlight important elements and explain how they work.
Personalize the Experience: Tailor the onboarding experience to the individual needs and preferences of each user. Offer personalized recommendations, content suggestions, and onboarding paths based on user demographics, behavior, and interests.
Set Clear Expectations: Manage user expectations by providing clear information about what users can expect from the platform. Explain the benefits, value proposition, and goals of the platform upfront to help users understand its purpose and relevance to them.
Offer Progressive Disclosure: Present information gradually and progressively as users navigate through the onboarding process. Avoid overwhelming users with too much information at once and instead reveal additional details and features over time as users become more familiar with the platform.
Identify opportunities from an understanding of users' and pain points
Solution
I created a solution for onboarding that helps new users to get started:
Initial Setup to Understand User Preferences: Ask users about their goals and the categories they are most interested in. This will help tailor the experience to align with their intentions, making the user experience more personalized and relevant to them.
Product Tour to Guide Steps: Introduce users to the interface in Smartee and guide them step by step to complete their intended tasks.
Technology Adaption
Smartee has embraced technology to enhance the learning experience.
It's adaptive learning algorithms personalize the learning path for each student, ensuring that they receive tailored content based on their interest, needs, and preferences.
The use of generative AI in AskGPT will assist users in various tasks by generating human-like text based on the input it receives. AskGPT leverages its language understanding capabilities to communicate effectively with users and provide helpful responses tailored to their needs and inquiry.
Overall, technology adaptation in Collegie has revolutionized the way students learn, making education more accessible, engaging, and effective.
Deliverables
I designed and defined Smartee’s brand visual identity, built the design system, crafted user workflows, created mockups and prototypes, and delivered final UI designs to bring the user experience to life.
