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

  1. Colorful splash screen and introduction screens with encouraging messages

  2. Register and Login features that support third-party integrations

  3. Redirecting to dashboard with current, completed, and suggested courses

Notification & Messages

  1. Notifications accessible from dashboard/homepage, organized by time

  2. Messages accessible from bottom navigation bar to see messages with other students, tutors, and instructors

  3. Profile accessible from bottom navigation bar to update settings and other information

Course Browsing & Purchasing

  1. Browse courses from bottom navigation bar to access courses by categories

  2. If the course is not enrolled, course details page shows “Lets Enroll” button

  3. Purchase course and payment authorization process once “Let’s Enroll”

  4. Course overall curriculum and other similar suggested courses are also shown

Course Learning & AI Assistant

  1. Access purchased courses from “Courses” tab to view each courses’ progress bar

  2. Course details and expandable course lectures

  3. Access course support with real tutors or TutorAI when human tutors are not online

  • "How might we create a comprehensive e-learning platform that seamlessly integrates recorded courses, instructor-led training, assignment submission, and direct communication channels to meet the diverse needs of students and enhance their online learning experience?"

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.

DrayEasy

Regale Winery

Open2Work

Dr.Lambda AI