Redefining Melearn's e-learning experience

Project background

Melearn is a social online learning community platform offering educational videos through subscriptions. After Melearn conducted initial market and user research, they determined their users needed up-to-trend user experience with added features: educational podcasts, audio books, and blogs to expand their vision.

Melearn wanted a redesigned app and web experience that catered to learners and content creators for an effortless experience on both ends.

CLIENT

Mevento LLC

COMPLETION

April 2022

DURATION

10 weeks

ROLE

Design Sprint

UX Design

Visual Design

CONTRIBUTORS

Sprint Master

Project Manager

Senior UX Designer

Intern

Melearn (Development)

Goal

Melearn plans to become an internationally recognized social learning community platform with content creators and teachers earning a portion from the membership fees.

THE PROBLEM

Melearn sought us for a redesigned application and web experience that catered to learners and content creators for an effortless experience on both ends.

STEP 1

Ideate

Design Sprint and Brainstorming

Although there is no direct competition to Melearn, during the ideation stage of the Design Sprint we analyzed other learning community platforms like Skillshare and Coursera and brainstormed on how we could design an effortless social learning platform. During the lightning demo, most examples utilized bright illustrations and elements of fun learning.

GOALS OF SESSION

1. Review competitive analysis to align on strengths and opportunities.
2. Identify long-term goals and sprint questions
3. Lightning Demo ( researching other competitors) and sketching out new ideas

Design Sprint brainstorming and sketching with clients

User Testing

Ten users were tested in total in two usability tests. Five of the users are Melearn App users who use it on a daily basis and five are new users from a new demographic.

USABILITY TESTING FINDINGS

1. The social learning aspect of the app was not clearly displayed on the prototype, instead, it displayed too many in-app features that weren’t relevant to the main goals.

2. Users did not understand what the chatroom was for. This showed that to create a useful social learning platform, we need to keep everything as minimal and straightforward as possible, to not distract and confuse the user from their learning experience.

STEP 2

Prototype

Low-fidelity prototype

After concluding all initial strategy work and low-fi sketches, we moved on to finalizing the flow map with the client and high-fidelity prototypes to nail down the content architecture and general layout. Extra attention was paid to the homepage to ensure the primary goals of the project were being met.

Final flow map for hi-fi UI Design

STEP 3

Design

Visual Design Process

Finally, with all deciders on board with the ideation, we began the UI design phase. To start, we first refreshed the branding to appeal to the demographic, with a new logo design and user-friendly font and focused on building accessibility into the design system. Additionally, we incorporated custom animated illustrations all designed in-house.

Walkthrough Motion Designs

Mobile App Design

Utilizing existing styles, tokens, and components established during the application redesign, we built on top of the final wireframes to create mobile designs with tested and iterated new features we discovered during Design Sprint.

Website Design

The website remains consistent with the design of the mobile application. The user is able to access from a wider screen to view courses and books.

Final website design that was used as a reference when developing the UI design for the dashboard.

MEASUREMENT OF SUCCESS

Since the update, the Melearn App has now 219 content creators, with 5000+ available content, gained 87,634 new users, and has become the top e-learning platform on the App store in Mongolia.

App store

Thanks for stopping by,

Let's chat!

Dribbble

Email

Resume