Designing “AI-Course” an AI convenience for Teachers | UI/UX Case Study

Hugo Kayana
20 min readMay 18, 2023

Good evening, Medium 👋 This time, we are going to share a case study about the AI-Course feature available on our project “Brainy”.

!!Disclaimer!!
This project is a part of our final project at SMK IDN Boarding School, and it serves as a determining our future performance in the work field. And here, We are excited to share our experiences and stories with you, the reader.

Project Challange Briefs and Problem Statements

The Brainy platform includes AI-Course, which enable educators to create courses with ease and originality, keeping students consistently engaged and motivated. However, the main reason of why this feature is created is that students may lose interest when courses are either feel incomplete or overly detailed, or when the humor falls flat, causing them to feel bored and unmotivated. This can result in a lack of desire to continue learning. This feature here is the answer to the problem, This is the following user flow when using AI-Course to create their courses:

  • Users will visit the instructor dashboard to see what they have created and will be given materials to start off with
  • Users will be able to see their performance and communicate from the user’s dashboard as well
  • They will see a “Try Creating AI-Course” button and proceed to a page where they will fill in some questions such as Profession, Target Audience, Ideas, & Price
  • After filling in all the details, the AI will automatically create the course for the Users
  • The Users will edit some of the lectures and proceed by pressing the “Submit for Review” Button
  • Once the Review process is finished, the course created by the user will be uploaded to the public

Just know that everyone can become an instructor and try out the feature. Even the students, as long as they are in the right plans.

Research Goals

Find out if the user can complete a couple of tasks from trying out a course to creating one using the AI-Course feature. And we’ll have to find out if the feature is difficult to use or not.

Research Objectives

  • Knowing what difficulties users experience when taking online lessons.
  • Knowing what makes users interested and excited when they are studying online.
  • Knowing user needs regarding convenience when running this app feature.
  • Know what method the user prefers.

Research Methods

  • Secondary Research
  • Qualitative Data (In-depth Interview)

Roles and Responsibilities

Here is the team and our roles on this project.

Team Brainy

Respondent Criteria

The user criteria in this study will include users who are currently in school, college, or those who are employed, aged between 18 to 55 years. The targeted respondents are active social media users, often seeking information through the internet, especially those interested in digital content. In addition, respondents are expected to have a desire to improve their potential and seek experiences and skills to achieve a better career. We will also pay attention to respondents who have used online learning applications such as MySkill, Teachable, and others, as well as those who are accustomed to making online payment transactions.

Research Timeline

The purpose of this timeline is to establish a plan and determine the duration required to accomplish our target. The projected timeline for the development of the AI-Course feature is from January 15, 2023, to June 10, 2023, spanning a duration of around five months.

Timeline

Key Performance Indicator (KPI)

  • Single Ease Question (SEQ)
  • System Usability Scale (SUS)

Tools

The Tools we used during the process

Tools

Design Thinking Process

The Process & The Stages we went trough

What is Design Thinking?

Design thinking is a problem-solving approach that places the needs of users at the center of the design process. It involves a human-centered, iterative approach to problem-solving that emphasizes creativity, empathy, and experimentation.

The design thinking process typically consists of five stages: Empathize, Define, Ideate, Prototype, and Test. During the Empathize stage, we seek to understand the needs, behaviors, and motivations of the users we are designing for. In the Define stage, we use this understanding to define the problem the users are trying to solve. In the Ideate stage, we generate a wide range of ideas for potential solutions. In the Prototype stage, we create physical or digital representations of these ideas to test and refine them. And in the Test stage, we gather feedback from users to refine and improve the design.

Design thinking is used in a wide range of industries and fields, including product design, service design, engineering, and business strategy. Its focus on user needs and creativity has led to many innovative solutions to complex problems.

Overall, design thinking is a problem-solving approach that emphasizes empathy, creativity, and experimentation, with the goal of creating solutions that meet the needs of users and stakeholders.

Design Thinking — Empathize

Summary

Empathize is the first stage of the design thinking process, and it involves understanding the needs and perspectives of the people who will be using the product or service being designed. This stage is critical to the design process because it helps us gain a deep understanding of the end-users and their needs, goals, and pain points.

What do We do?

During the Empathize stage, We use various methods such as interviews, observations, and others to gather information about the target users. We try to put ourselves in the shoes of the users and develop a deep sense of empathy for their needs and challenges.

What will We create?

We will also create personas, which are fictional representations of the target users, to help them better understand their motivations, behaviors, and goals. This information is then used to define the problem and set the direction for the rest of the design process.

Overall, the Empathize stage is about developing a deep understanding of the users’ needs and perspectives and using that understanding to guide the design process towards creating solutions that are both useful and meaningful for the users.

Secondary Research

During the initial phase, our team conducts secondary research to identify all the potential challenges of the project. We gather data from various sources including articles, case studies, user feedback, competitive analysis, and data analysis.

Secondary Research

Competitive Analysis

We employed this process to gather additional information for comparison purposes and to pinpoint the strengths and weaknesses of the company in relation to its competitors.

Udemy, Coursera, & Skill Academy

In-Depth Interview

During this stage, we carry out user research with the objective of assessing the level of user engagement towards the online learning or course creation feature and identifying any challenges that users might face. We also made stimulus user research as a guide.

Stimulus User Research

If You’d like to see our Stimulus click here

List of Interview Questions

  1. What do you think is an online course?
  2. How many kinds of online course applications do you know?
  3. Have you ever taken an online course?
  4. If so, what online courses have you taken?
  5. If so, can you share your experience while taking the online course?
  6. If not, what made you not interested in taking online courses?
  7. What was your motivation for learning online courses?
  8. Have you ever experienced difficulties while taking online courses?
  9. What are your obstacles when taking online courses?
  10. What did you do when this problem occurred?
  11. In your opinion, what can increase motivation in learning online and offline?
  12. In your opinion, what learning methods are fun and make you excited?
    a. What’s the reason?
    b. How many times have you completed lessons with this learning method?
  13. What do you think about the online courses that already exist today?
    a. Why is that?
  14. What learning media do you think makes online learning more effective?
Interview with Mrs. Samini

Click here if you want to see the record data

User Persona

During this stage, we develop a user persona that aligns with the challenges we have received, having similar potential problems and goals. Here is the result:

User Persona

Empathy Map

Using an empathy map to visualize user attitudes and behavior helps us develop a comprehensive understanding of our users. By externalizing our knowledge about users, we can create a shared understanding of their needs and use this information to inform our decision-making process.

Empathy Map

Design Thinking — Define

Summary

The Define stage is the second stage of the design thinking process, and it involves synthesizing the information gathered during the Empathize stage to define the problem and articulate the design challenge. This stage is critical to the design process because it sets the direction for the rest of the process and ensures that the design team is working towards a clear and well-defined goal.

What do We do?

We will create journey maps, pain points, Affinity Diagram, How-Might-We, and Solution Idea to identify pain points and opportunities for improvement. These tools help to create a shared understanding of the problem and ensure that our team is aligned on the direction for the rest of the design process.

Why do We do it?

During the Define stage, We use the insights gathered during the Empathize stage to identify the key issues and opportunities that need to be addressed. We create a problem statement that defines the problem in a human-centered way and it will help our team stay focused on the users’ needs and perspectives.

Overall, the Define stage is about synthesizing the insights gathered during the Empathize stage to define the problem in a clear and human-centered way. This sets the direction for the rest of the design process and ensures that the team is working towards a well-defined goal that addresses the needs of the users.

User Journey Map

Our objective is to discover methods to facilitate user interactions that lead to the accomplishment of their objectives with maximum speed and ease.

Journey Map

Pain Points & How Might We

Now is the time to gather the information that has been collected. The first step in the define stage is identifying pain points. In this step, we collect information from previous research results, analyze them, and determine the core issues we face in a concise and simple way. To aid in this process, we are utilizing the Figjam Board. And the second step is using How Might We to solve the problems.

Pain Points(left) & How-Might-We(right)

Solution Idea

During this stage, we generate solution concepts based on the insights gathered from the How-Might-We exercise. We then delve into these solution concepts to address the identified problems in a comprehensive manner that aligns with our business objectives.

Solution Idea

Affinity Diagram

After generating a solution idea, we gather the features that we will develop and categorize them.

Affinity Diagram

Design Thinking — Ideate

Summary

The Ideate stage is the third stage of the design thinking process, and it involves generating a wide range of ideas and potential solutions to the problem defined in the Define stage. This stage is critical to the design process because it encourages the team to think creatively and explore a broad range of possibilities.

What do We do?

At this stage, We will use Prioritization Idea, Crazy 8’s, User Flow, Wireframe, and Design System to help generate ideas and inspire creativity.

Why do We do it?

During the Ideate stage, We use various brainstorming techniques and ideation methods to generate a large number of ideas. They aim to defer judgment and encourage wild and unconventional ideas, as this can often lead to innovative and unexpected solutions.

Overall, the Ideate stage is about generating a large quantity of ideas and potential solutions to the problem defined in the Define stage. This encourages our team to think creatively and explore a broad range of possibilities, which can often lead to innovative and unexpected solutions.

Prioritization Idea

Prioritizing ideas allows us to decide which steps to prioritize in our work. We select the ideas that will determine the priority scale, based on user value and effort required in the next process. This helps us remain focused and make the most of our time.

Prioritization Idea

Crazy 8's

Once we obtained the prioritization ideas, we proceeded with a quick and rough sketch known as Crazy 8’s. These sketches can be in the form of wireframes or storytelling.

Crazy 8's

User Flow

The user flow can help depict the sequence of steps that a user may take to accomplish one or multiple tasks within an application. Based on our discussion, we have identified 3 flows. Here are the results:

Student’s Flow
Teacher’s Flow
Course Flow

Information Architecture

To put it simply, An Information Architecture can provide an understanding of the app’s flow and structure.

Information Architecture

Sitemap

Just like Information Architecture, A sitemap can provide an understanding of the website’s flow and structure.

Sitemap

Wireframe

After creating the sitemap and information architecture, our next step is to create a low-fidelity design framework, also known as a wireframe, using Figma. The purpose of the wireframe is to layout the content on a page with user needs and functionality in mind, considering user journeys and speeding up the ideation process.

Web Wireframe
Home, Explore, Events Wireframe
Class Wireframe 1
Class Wireframe 2

Design System

In this stage, our aim is to utilize a design system that enables us to maintain consistency and stability in product design, resulting in high quality.

Typography
Color Styles
Button Styles
Slider Banner
Cards Styles
Payments & Discounts Styles
Extras!

Design Thinking — Prototype

Summary

The Prototype stage is the fourth stage of the design thinking process, and it involves creating a physical or digital representation of the ideas generated in the Ideate stage. This stage is critical to the design process because it allows designers to test and refine their ideas in a low-risk environment.

What do we do?

During the Prototype stage, We create a variety of high-fidelity prototypes to explore and test their ideas. High-fidelity prototypes may include digital or physical models that simulate the final product.

Why do we do it?

We will use prototypes to gather feedback from users, and other team members, and use that feedback to refine and iterate their designs. The goal of the Prototype stage is to create a prototype that is as close to the final product as possible, while still being flexible enough to allow for changes and improvements.

Overall, the Prototype stage is about creating a physical or digital representation of the ideas generated in the Ideate stage, and using those prototypes to gather feedback and refine the designs. This allows designers to test and refine their ideas in a low-risk environment, and helps ensure that the final product meets the needs of the users.

High Fidelity / Mockups

The aim of this stage is to implement a design system to ensure consistency and stability in our product design process, resulting in a high-quality end product.

Onboarding & Register Pages
Home, Explore, Event, Profile Page
Detail Course & Payment Pages 1
Detail Course & Payment Pages 2
Explore Pages
Profile Pages
Event Pages 1
Event Pages 2
Course Pages 1
Course Pages 2
Course Pages 3
Course Pages 4
Instructor Dashboard 1
Instructor Dashboard 2
Home & Explore Pages
Pricings & Community Pages
About Us Page
Registration Pages
Instructor Dashboard 1
Instructor Dashboard 2
Instructor Dashboard 3
Payment Pages 1
Payment Pages 2
Payment Pages 3

Prototype

In this phase, we bring the ideas we have generated to life by incorporating interactive elements into each page. Our objective at this stage is to create a functional prototype that aligns with user requirements and can be tested in usability testing. Let’s give our prototype a go and enjoy!

Loading the Prototype might take a few minutes…

You can also use this link to access the prototype

Design Thinking — Test

Summary

The Test stage is the fifth and final stage of the design thinking process, and it involves testing the prototypes created in the Prototype stage to ensure that they meet the needs of the users. This stage is critical to the design process because it allows us to gather feedback and make any necessary final adjustments before launching the product.

What do We do?

During the Test stage, We conduct user testing to gather feedback from actual users. This feedback is used to refine and iterate the design, and to ensure that the final product meets the needs of the users. And during this stage, We create Usability Testing, In-Depth Interview, Single Ease Question(SEQ), and System Usability Scale(SUS).

Why do We do it?

The goal of the Test stage is to ensure that the final product meets the needs of the users, and to identify any remaining issues or challenges before launching the product. By gathering feedback and making any necessary final adjustments, designers can ensure that the product is successful and well-received by the target audience.

Overall, the Test stage is about testing the prototypes created in the Prototype stage to ensure that they meet the needs of the users. This stage is critical to the design process because it allows us designers to gather feedback and make any necessary final adjustments before launching the product, ensuring its success and effectiveness.

Usability Testing

This is the final stage in the design thinking process, where we conduct user testing through in-depth interviews. We employ several methods for usability testing, including in-depth interviews, Single Ease Questions (SEQ), and System Usability Scale (SUS). The objective of this testing phase is to assess whether users are able to accomplish tasks using the AI-Course feature and determine the level of ease or difficulty in using the feature.

Before proceeding with the remote unmoderated usability study with 4 potential users via Google Meet and Zoom Meeting, we created a stimulus that serves as a guide to facilitate the usability testing process.

You can also see our stimulus (Usability Testing) here

Research Objectives (Usability Testing)

  • Identifying what motivates and makes users effective in their learning.
  • Identifying opportunities and assisting user instructors to create clear and simple courses through the AI-Course feature.
  • Understanding their behavior when they find out about the AI (Artificial Intelligence) course creation feature, and how they respond to the feature, which will be a consideration in developing the feature.

List of Interview Questions (Usability Testing)

  • Please may I know who you are and what are your usual daily activities? (Name, Age, Place of Residence, Occupation, Hobby)
  • Have you ever participated in a learning program outside the school or campus environment? (like taking a course or something else)
    A. What is your experience in participating in learning outside of school or on campus?
    B. Are some types of learning preferred over others?
    C. Do you prefer to study independently or with study partners?
  • Do you think seeking knowledge outside of the school or college setting is important?
    A. Why?
    B. What examples have you followed?
  • Have you ever taken an Online Course?
    A. If Yes, Why?
    B. If No, Is there any special reason why you never took an online course?
    C. What courses did you take before?
    D. Do you think the purchase price of online courses is attractive enough?
  • What was your experience with taking online courses?
    A. What benefits have you received from online courses?
    B. In your opinion, are there any drawbacks that can be mentioned?
  • Have you ever experienced difficulties in the learning process?
    A. What kinds of difficulties have you experienced?
    B. How do you overcome these difficulties? & Why did you choose this solution?
    C. Are there any drawbacks to the solution you have implemented?
    D. If this solution doesn’t work, have you tried any other alternatives?
  • Have you created a course yet?
    A. If not, what made you not want to create a course? Have you ever intended to make one?
    B. If yes, what courses have you made?
    C. In your opinion, is the idea of AI necessary in the course creation process? What’s your excuse?
    D. Are you interested if the online course platform provides AI-Course features? Why?
  • When choosing a course, what are your considerations?
    A. In your opinion, what things need to be improved in online courses?
    B. What is your view on improving online courses, for example in terms of experience, cost, time, etc.?
    C. In your opinion, how can you make the course learning process more interesting?

In-Depth Interview

Our objective in this phase is to gather insights into the user’s experience, emotions, and perspectives when testing the application design of the mentor-on-demand feature. We conducted interviews with four different respondents to gain their feedback and input on our prototype.

Interview With Muhammad Yasin
Interview With Muhammad Verel
Interview With Kalingga
Interview With Fathan
Interview With Fajri

You can see our record data here

Single Easy Question (SEQ)

Upon completion of the in-depth interviews, we proceeded to employ Single Ease Question (SEQ) to assess the level of ease or difficulty perceived by users while completing the tasks presented to them when using the AI-Course feature on a scale of 1 to 7 points.

Our Single Ease Question (SEQ) You can also view it on Record Data

The outcomes of the Single Easy Questions (SEQ) from the 5 users showed a 88% success rate, indicating that the product we designed is useful, user-friendly, and easy to navigate.

System Usability Scale (SUS)

During our in-depth interviews, we also utilized the System Usability Scale (SUS) as a second method. Our objective was to assess the usability of our designed products by obtaining responses from the participants to 10 questions with five answer options.

Our System Usability Scale (SUS) You can also view it on Record Data

The System Usability Scale results we obtained from the 5 respondents were good, with an average score of 69.9%, indicating the reliability of the designed products. However, to further enhance user experience, we will strive to evaluate our products and make them more effective.

Research Findings

  • In order to improve the courses, it was suggested that we add a syllabus or tags that provide information about the course.
  • The courses card could be improved by increasing the margin.
  • To make it easier to communicate with instructors, it was recommended that the Communication Tab be organized in a group list.
  • It was suggested that we add a declined and waiting status to created courses.

Design Iteration

The Usability Testing results provide valuable feedback from the respondents, which we can use to improve our product development. However, there were not many changes needed for the design pages we have already created. Anyways, Here are some of the design iterations we did:

Course Card

We slightly increased the margin of the course card to enhance readability.

Course Detail

Based on feedback from respondents, it was suggested to include tags in the course details to provide additional information about the course content. Additionally, one respondent mentioned the importance of knowing the number of likes and dislikes, so we have incorporated this feature.

Communications Tab

Based on feedback from several respondents, it was noted that the mixed discussions were causing a lack of organization. To address this, we have redesigned the discussions to resemble a group chat format, providing a simpler and more organized experience for users.

Instructor Dashboard

Several respondents suggested adding a status feature to indicate when a user’s created course is being reviewed or when it has been declined.

Conclusion / Finale

The case study leads to the conclusion that learning new knowledge is crucial for users. However, users encounter issues related to courses, such as a lack of motivation and interest.

Based on this case, we can deduce that the AI-Course feature offers advantages to students seeking a more engaging and motivating learning experience, as well as to teachers who can utilize their creativity to develop innovative and straightforward courses. Hence, it becomes imperative to have more resourceful teachers who can enhance users’ motivation and concentration.

Additionally, through this project, I gained extensive knowledge about LMS Education and Artificial Intelligence. Despite the challenging timeframe of only 5 months, we persevered and developed a digital product featuring the AI-Course feature. The biggest challenge we faced was the limited time provided by our school to complete the project.

I acknowledge that there may be some errors in my writing and designs presented in this case study. I would like to apologize for any mistakes in advance, and I am committed to improving my skills in the future to create better work.

Thank you for taking the time to read my case study. I hope you found it enjoyable and informative. Your feedback is always appreciated, so please don’t hesitate to leave any comments. Lastly, I would like to express my gratitude to my team for their collaboration during this project. Thank you all!

(don’t forget to leave some claps before you leave 👏👏👏)

--

--