
Learnara
BACKGROUND
Learnara redefines the way we engage with online education by offering a comprehensive platform for students.
OBJECTIVES
Learnara empowers students to explore a myriad of online courses with customized learning. From submitting assignments to fostering direct communication with your instructors, our platform prioritizes collaboration and interaction.
TIMELINE
Jan 2024 - March 2024
ROLE
TOOLS
UX Researcher
UX Designer
Prototyper
Figma
Adobe Photoshop
Adobe Illustrator
01 | OVERVIEW
1.1 | CONTEXT
Existing e-learning platforms lack the traditional interactions between teachers and students that are crucial to effective learning.
There is a need for a comprehensive solution that integrates recorded courses, instructor-led training, real-person tutoring, assignment submission, and direct communication channels, catering to the evolving demands of modern education.
Xia, Yuefan, et al. “Challenges of online learning amid the COVID-19: College students’ perspective.” Frontiers in Psychology, vol. 13, 22 Dec. 2022,
1.2 | SOLUTION
An integrated mobile application that bridges the gap between learners and educators. By seamlessly integrating recorded courses, instructor-led training, assignment submission features, and direct communication channels.
Onboarding
Colorful splash screen and introduction screens with encouraging messages
Register and Login features that support third-party integrations
Redirecting to dashboard with current, completed, and suggested courses
Notification & Messages
Notifications accessible from dashboard/homepage, organized by time
Messages accessible from bottom navigation bar to see messages with other students, tutors, and instructors
Profile accessible from bottom navigation bar to update settings and other information
Course Browsing & Purchasing
Browse courses from bottom navigation bar to access courses by categories
If the course is not enrolled, course details page shows “Lets Enroll” button
Purchase course and payment authorization process once “Let’s Enroll”
Course overall curriculum and other similar suggested courses are also shown
Course Learning & AI Assistant
Access purchased courses from “Courses” tab to view each courses’ progress bar
Course details and expandable course lectures
Access course support with real tutors or TutorAI when human tutors are not online
02 | RESEARCH
2.1 | THE PROBLEM
Online learning may not produce the desired results
due to lack of interaction with instructors, no campus socialization or well-trained technology skills, and appropriate content for online courses and group work. Thus, online learning offers the opportunity to reconsider ways to improve students’ technology skills, learning methods, communication skills and reconceptualize their responsibilities as team members.
Xia, Yuefan, et al. “Challenges of online learning amid the COVID-19: College students’ perspective.” Frontiers in Psychology, vol. 13, 22 Dec. 2022, https://doi.org/10.3389/fpsyg.2022.1037311.
2.2 | COMPETITIVE ANALYSIS
Initially, I conducted a competitive analysis to understand how other platforms’ online learning perform against one another.
2.3 | USER PERSONA
Subsequently, I delved into user research by creating persona and conducting interviews with users to gain deeper insights.
Main takeaways from the research:
Community engagement is key part of the experience; creating project groups, one-on-one tutoring, instructor-led activities are all helpful methods for engagement
Offering courses at various prices and accepting global e-payment methods so it is accessible to a wider variety of audience
Offering both long form courses and bit-size courses for ease of learning
Courses can be pre-recorded, but learning should offer more guidance from real instructors
Display some motivational elements to encourage learning on front page
03 | IDEATION
3.1 | BRAINSTORM
With the development of AI technology, both mentors and mentees can greatly benefit from implementing AI in teaching and learning. The initial idea of Learnara is to combine the much needed human interaction in learning with AI-assisted self-studying to create an effective online learning platform.
3.2 | USER FLOW
Next step is to integrate courses with tutors, instructors, and AI into the user flow.
3.3 | WIREFRAME
After drawing the users flow and information architecture, I created main screens and drew the whole flow with a mid-fidelity wireframe
04 | FINAL DESIGN
Learnara provides a cohesive and engaging learning experience. Empowering users with versatile tools and fostering collaboration, Learnara sets a new standard for online education, enhancing accessibility and effectiveness for all.
4.1 | FINAL DESIGN
Introduction Screens:
Users can tap on “continue” to view all motivational messages or tap “skip” to skip to login/register screen
Onboarding Screens:
Simple “Sign In” and “Register” pages with basic information needed. Third-party website logins are also supported. Dashboard or homepage is the landing page after logging in. Dashboard displays current and completed courses, and any courses users might be interested in.
Profile & Notifications:
Users can access their dashboard, messages, courses, and profile via the bottom navigation bar. Profile information and settings can be updated. Notifications are grouped by timestamp. Messages shows all human interactions.
Course Browsing:
Users can browse courses before purchasing. Courses are grouped by categories and tags. Course details and overall curriculum can be accessed after tapping on a course. Browsing another course can be accessed via the “similar courses” tab.
Purchasing:
After user tap on “Let’s Enroll” in a course, the app takes the user to a secure payment page. The checkout page displays the cost and any discount. A success page is displayed after payment is complete and course is enrolled.
Course Enrollment:
A newly purchased course can be found in the “My Courses” tab where course progress is also displayed. Tapping on a course takes the user into the course and its lectures. Any associated tutors for that course can be accessed via the “TutorAI” tab.
4.2 | DESIGN SYSTEM
05 | REFLECTION & NEXT STEP
E-Learning Community Engagement
With the short time frame of this project, I was only able to complete the design of basic messaging features. Since community engagement is a key part of this platform, I would like to come up with design that can allow a variety of engagement types - group projects, interactive quizzes, hand-raising, etc. - that can closely mimc conventional teaching environment. The goal is to break away from the one-directional passive learning with pre-recorded courses.
Mobile to Web Transition
Although it is easy to learn through a phone, students are usually more focused and are able to digest new information better when sitting down at a computer. Thus, a more robust web version of the app shall be designed. Web version of the app can host longer form videos and can host a wider variety of activities.