Stufast Learning Center
Stufast.id is a video learning-based platform that can help users learn about certain courses according to the chosen topic.
Disclaimer: This project is part of the Kampus Merdeka internship program organized by the Ministry of Education, Culture, Research, and Technology, of the Republic of Indonesia, with PT Baracipta Esa Engineering as a partner.
Overview
Stufast Learning Center is a video-based learning platform emphasizing an intuitive user experience. The main objective of this project is to create a user-friendly platform that presents quality educational video content engagingly and enjoyably. Throughout the development process, the project team will consider user security and privacy aspects, ensuring easy access to the platform across various devices and browsers. At the project's conclusion, the goal is to establish a video-based learning platform that provides user satisfaction and encourages high usage and loyalty.
Project Goals
Responsive Design: Ensure the platform is fully responsive, providing a consistent experience across various devices and screen sizes.
Dashboard: Create an intuitive and visually appealing interface for users to navigate their courses, track progress, and access important resources.
Quiz Functionality: Design and implement interactive quizzes that provide learners with an effective way to reinforce their understanding of course material.
Role
During this 5-month project (August 18, 2022 — December 30, 2022), I was a UI/UX Designer, collaborating with 3 UI/UX Designers and 12 Fullstack Developers. In this team, my responsibilities encompassed:
UX Design (conducting quantitative surveys, SWOT analysis, content creation including images and copywriting, user flow and task flow design, information architecture, wireframing, prototyping, component and variant creation).
UI Design (implementing the design system, creating responsive screens, working on low-fi, me-fi, hi-fi designs, and prototyping).
Each UI/UX designer had their specific tasks and responsibilities, providing mutual support whenever needed. Using the SUS method, we utilized Figma for UI/UX Design and Maze for usability testing.
Design Process
The project development method employed is Agile, involving three sprints: Online Course Purchase, Dashboard, and In-House Training. Continuous iterations will be carried out within this method to ensure the product aligns with user needs and remains synchronized with the developers.
Sprint 1- Online Course
In this first sprint, the product's focus will be directed entirely towards the UX and UI aspects for the user (client).
Research Plan
In this early stage, a research plan (primary research) will be carried out for respondents whose status is still active students who have/will take part in an online course.
It has been defined that users of this platform have different authorities according to their roles.
Survey (Student)
Competitor SWOT Analysis
What do we take from the SWOT analysis?
User Persona (Student)
Define
In this phase, user flow, task flow, and information architecture will be developed to define the direction of the website design to be created.
User Flow (Student)
Task Flow
Login and Register
Users are required to register an account and log in before they can access purchased courses. The login process involves entering an email and password.
Buy Course
Users can utilize vouchers acquired from referrals or integrated coupon codes within the system to purchase a course. Payments are processed through Midtrans.
Learning
Users who have successfully purchased courses can immediately begin their learning journey. Each course will include several quizzes designed to gauge the users' level of comprehension.
Quiz
Users will encounter quizzes embedded within various videos during the learning process. These quizzes are designed to engage users actively, as they must complete these assessments to progress through the course.
Get Certificate
After users complete the learning modules and participate in all quizzes, they can download their e-certificates and learning reports from the profile menu by providing reviews first.
Information Architecture (IA)
Design
Create high-fidelity (hi-fi) and responsive designs by implementing visual elements and copy in this design phase.
Website
Responsive
Sprint 2- Dashboard
Continuing with the second sprint, the product development is centered around creating a dashboard that fulfills the students' requirements for accessing learning materials.
Define
In this phase, we are crafting a user flow to define the pathway of the student dashboard. This encompasses mapping out the sequence of tasks and interactions students will undertake as they navigate the dashboard.
User Flow
Design
Sprint 3- In House Training
This third sprint focuses on an additional menu/feature, specifically centered around the In-House Training service purchase.
Define
In this phase, we create user and task flows to guide users through purchasing in-house training. Users will initiate purchases to gain access to in-house training.
User Flow
Task Flow
Buy In House Training
In-House Training can be purchased by searching for the desired topic, then exploring its details. Users can proceed to make the payment directly through Midtrans.
Design
In this design phase, we create a high-fidelity design by implementing visual elements into the in-house training menu.
Design System
Usability Test Plan
Background
Course UI/UX Design, Frontend Engineer, Backend Engineer, dan beberapa course lainnya saat ini sangat populer. Banyak bermunculan platform yang menyediakan pembelajaran berbasis video learning baik yang gratis maupun berbayar. Namun, tidak semua platform tersebut memberikan pengalaman yang memuaskan, sehingga muncul perasaan menyesal telah mengikuti course yang mereka pilih.
Para kandidat bingung harus belajar dimana dan mana yang benar dan efektif yang dapat meningkatkan skill dan menunjang karirnya.
Objective
After testing the prototype of Product Sprints 1 to 3, collecting user data and insights involves measuring various attributes such as the product's usefulness, effectiveness, and efficiency. This process aids in understanding how users perceive and interact with the prototype, shedding light on its performance and user experience. By gathering quantitative and qualitative feedback, we gain valuable information that informs further refinements and enhancements to ensure the product aligns optimally with user needs and expectations.
Task
Usability Testing was conducted on December 15, 2022, with the primary objective of validating the design concept and evaluating the design outcomes. The UT was executed through an online approach involving 6 respondents.
Tools: Maze
Mission 1
Mission 2
System Usability Scale Result
Lesson Learned
Teamwork and Agile Method Experience
Throughout the project, the sense of teamwork felt somewhat lacking, resulting in an experience that was not as fulfilling as anticipated. However, this project taught me the invaluable lesson that effective teamwork significantly impacts the success of any endeavour. Reflecting on the experience, I've realized the importance of collaborative teamwork that supports one another.
Agile Methodology as a Learning Curve
Working with the Agile methodology was a novel experience for me, particularly when applied to real projects within a company. This experience highlighted the acceleration and intensification of work pace and load. It also highlighted the pivotal role of communication in steering the project's direction. This demanded proactive communication with developers, stakeholders, and fellow UI/UX designers. The Agile approach unveiled the necessity of adaptability, constant communication, and a united effort to achieve project goals.
The Things to Improve
Usability Testing
The results of the Maze analysis suggest a suboptimal outcome, partly due to a higher misclick rate. This issue emerged as respondents aimed to explore the prototype. A potential remedy could involve providing more detailed scenario explanations and employing Zoom functionality to observe respondent behaviour closely.
Project Management
Each team member contributed to every ongoing design process and executed tasks assigned by the Project Manager (PM). Nonetheless, misunderstandings often arose due to the lack of clearly defined professionalism and limited communication within the team. To enhance the project's efficiency, the PM could consider intensifying project monitoring efforts and minimizing distractions from other projects.
Copy
Several instances of unclear and ambiguous copy were identified, posing the risk of perplexing users and diminishing their interaction experience with the product. To address this, it's advisable to present straightforward and concise copy and focus on high-contrast text for improved readability.
Further Recommendations
Soliciting User Feedback
Creating Authorities for Admin and Author
That’s All About The Project
My internship experience and design processes thus far hold significant value in my career journey. Looking ahead, I aspire to contribute to other companies and further enrich my UI/UX Design insights.
I extend my heartfelt gratitude to all my fellow interns and mentors for their guidance and support.