Free Learn - UX Case Study

Background

Thanks to the internet, many people have access to education despite not having the possibility of schooling. Platforms like YouTube, blogs, etc., help create learning. However, the difficulty of finding precise information for what we seek or a guide from start to finish on a general topic like architecture, mechanics, chemistry among many others, where reading, video, and images are needed, becomes difficult. The person searching gets blocked wasting a lot of time, piecing together information from different platforms. That is why Free Learn was born, all learning in a single social network.

All in One

That is what Free Learn aims to offer. A space for students to share their study guides, learning-related information, and where teachers can share diverse types of information: text, images, videos, live streams, polls, study groups, and a personalized learning filter. This benefits a very important industry like education, which is somewhat lagging in the present.

Research

What is the point of exploring this solution? What user interactions are we talking about? Let's see how common user behaviors and patterns can help apply these design concepts.

METHOD

• USER INTERVIEWS
• FIELD RESEARCH

Goals

We interviewed 10 people with usability questions. Using the user empathy framework, we were able to understand their difficulties, the common flow for learning, and the flow for sharing information with their team.

Result

People who use YouTube to learn also use Office Word to self-evaluate; people who learn online share their learning in WhatsApp groups.

Persona Creation

User Journey Map

To empathize with users, we also created empathy maps and a user journey map to delve into each stage our personas go through when evaluating and finding the information they need.

User Flow

We decided to invest our effort mainly in the most used user flow; we discovered it is finding information. Based on the discovery through the user flow, we could see how the views link together in this way.

Architecture Design

Designing the information architecture was easy to create because we knew the user flow. It was also accessible because from the beginning we thought of a hamburger menu or side menu.

Crazy Eight

Taking the Information Architecture into account, we began organizing the corresponding elements in their views. We expanded our range of possibilities with the Crazy Eight exercise and finally refined based on user experience parameters (Accessibility, Simplicity, Intuitive, and Inclusivity).

Wireframes

Having the wireframes ready on paper, we started digitizing them, giving each element a coordinate on the screen according to its hierarchy and weight, so the user can be guided step by step through the design to complete the main goal.

Low Fidelity Prototype

Once digital wireframes were created, we started prototyping. This helped us know if our internal linking logic worked well, create more accesses to the same place, and discard what didn't work.

Usability Testing Plan

We wanted to know how the user navigates between views, how long it takes to access information, and see their reactions when executing a task. All this was done during the Testing Plan process. The participants chosen were 6 people of different ages, professions, and skills.

During the interview, we learned that the questions the user couldn't answer might contain information mentioned on the card to be more accessible and consequently save more interaction time. We interpreted the Wireframe and resolved the notice.

📝 Design Usability Study Survey

Background and Experience:

• Could you briefly introduce yourself and tell me about your experience with technology and mobile applications?
• How often do you use online course apps and social networks?
• Have you previously used applications that combine both functionalities?

Experience with the App:

• Could you briefly introduce yourself and tell me about your experience with the application?
• Could you describe your general experience using the app so far?
• What aspects of the application have you found easiest to use?
• Have you encountered any difficulties or problems using the application? If so, could you describe them in detail?
• How would you rate the general ease of use of the app on a scale of 1 to 5 (1 being very difficult and 5 being very easy)?
• Have you used the application to search for and take online courses?
• Could you describe the process of searching for a specific course? Was it easy to find what you were looking for?
• How would you rate the ease of use of the online courses section on a scale of 1 to 5?
• Have you completed any lesson or activity within a course? Could you describe your experience in that process?
• How would you rate the ease of use of the lessons and activities section on a scale of 1 to 5?
• Have you interacted with a teacher or classmate in any course? Could you describe your experience in that case?
• What aspects of the online courses section could be improved?

Mockups

Once the Wireframes were refined, we dedicated ourselves to laying out all the elements adding colors, weights, shadows, typography, etc.

Design System

Technological and Futuristic

The combination of blue and turquoise under a black background to give contrast to something new and futuristic, the Roboto typography to give an elegant and technological tone, the sizes in buttons and the contrast in them so that people with color vision deficiency can differentiate it easily.

Conclusion

The product is Free Learn, a social network for everyone to learn easily and for free. We are still working on the views and components to show the final product.