Pintara learning app

Problems

Kampus Indonesia plans to develop a website-based learning application with a display design concept that provides a more interactive and visual learning experience to users through better accessibility through the website.

However, Kampus Indonesia lacks tangible products to provide online learning

Solutions

I did research to develop a website-based e-learning application with the aim of providing a comfortable and motivating user experience so that users feel excited to learn.

👉 The design concept was positively received by users who were satisfied with the interface.

Discover

After understanding user needs and expectations, I designed the website based on the Kampus Indonesia problem solving framework. I then created a low-fidelity prototype. After doing design and prototyping, I did usability testing using the System Usability Scale with a total of 5 participants and incorporated the feedback to refine the design, resulting in an 80% satisfaction rate.

First, I conducted a User Interview and Qualitative Survey to get a deeper understanding of the problem at hand. Next, I analyze the results of the research to identify the key points that form the basis for determining the right solution. The next stage was creating a wireframe, where I could focus on the layout and information to be presented without worrying about the visual aspect. Finally, from that wireframe, I created a High Fidelity version, which includes a more detailed and complete visual design.

Define

At this stage, I do User Research using In Depth Interview, to hear what they think, feel, say, and do when learning on the application. So it is hoped that the ideas for solutions and applications that will be built solve real and urgent problems. Of course, create Stimulus User Research to determine goals and prepare questions so that the answers are right on target so that the data obtained also meets needs

📌 This research aims to describe how to learn in an easy, fun way, with flexible time. This objective leads to a research question namely how they learn easily, have fun and have a flexible time.

My goal is to do a User Interview because I want to know what they do? what's their problem? and what do they want?. I conducted the User Interview with 3 people who subscribed to 3 different online learning courses.

The interview began with questions about why they subscribed to the online learning and how their behavior was when using the website. And here are some quotes from them:

Affinity Diagram

From the research process carried out, I can group the findings into several groups in the Affinity Diagram. This can help me in classifying information, user opinions, needs, and so on. The findings I got divided into 4 groups, namely, Motivation, Problem, Features, Preference.

Persona

This user persona is useful for me to determine who our users really are. The persona that I created consists of Goals, Needs, Pain points, and Motivation

Empathy Mapping

To better describe the user as a whole, I created an Empathy Map. The contents are Says (What is said), Thinks (What is thought), Feels (What is felt), See (What is seen), and Hear (What is heard) from the results of my research to users.

User Journey Map

The making of this Journey Map was obtained from the results of interviews with respondents about their experiences in subscribing to online courses. The contents are the stages starting from the things that moved them to subscribe to when they studied on the course.

How Might We

The last step is How Might We to identify the pain points obtained. How Might We contains solutions or ideas based on the problems that have been obtained.

Design

📌 At this stage, I brought my idea to an interactive low-fidelity digital prototype and took it to five potential users to gather feedback.

‍

Wireframes

Making this Wireframe is intended to focus more on information and hierarchy without having to think about the visuals of the design itself.

After creating the Wireframe, I continue to add context, content, colors, copy, and other visuals to the Wireframe that was created during the High Fidelity Design stage. I made this Hi-Fi Design at Figma.

👇 Homepage

Hi-fi design Homepage :

• Navigation Bar - Inside there are the main menus of this Website such as Programs which contain available class fundamentals, Promos to see which classes are on promo, Classes which contain available course lists, Learning flow intended for beginner roadmap paths, Community which contains Showcase projects members
• Hero Section - Contains information about the value of the Indonesian Campus which is intended to attract user interest. There is also a CTA Button to directly search for the class you want.
• Course by Top Category - To make it easier for users to search for classes based on the top or commonly searched categories.
• Learning Path Package - Contains several class collections that have been provided in one package according to the existing learning flow. The addition of this Class Package is based on the insights obtained from users, who say that they do not know the correct learning flow when exploring certain topics.
• Tutors - Contains a list of highly experienced tutors to support members in exploring certain topics.
• Members Feedback - Contains reviews given by previous members.
• Alumni - Contains alumni members who work in large companies.
• Blog - The closing content on this Home Page contains a blog about us.

👇 Dashboard Page

Hi-fi design Dashboard :

This is the page where the user manages all their activities on this Website. On this Dashboard page, users can access the classes they are taking, their learning progress, project results that have been worked on, notification messages, and settings.

👇 Course Details

Hi-fi design Course Details Page :

• Class Information - Contains information about ratings, number of members, and levels in the class.
• Class Description - The description is made more concise, but can provide information that is in accordance with what the user needs.

👇 Community Page

Hi-fi design Community Page :

• This Partner Connect page allows members to collaborate with other members or alumni or mentorship in partner companies that have worked together. The existence of Partner Connect is based on the insight results obtained that users want facilities in the form of connecting them to related industries.

‍

Design Iterations 🔃

I made iteration major modifications based on feedback I received from usability testing sessions. I take note of user comments and suggestions, and work hard to implement them in a way that will provide the best possible user experience. My goal is to create products that are easy to understand, efficient to use, and fun to interact with. To achieve this, I pay close attention to user feedback and make changes accordingly.

‍

👇 Presentation of detailed information is still lacking in terms of providing sufficiently clear information.