Designing E-learning Platform for Company service Expansion — UIX Project
Hi, My name is Ajrin, a product design freelancer from Palembang (Indonesia), a bit of introduction this project is the result of my internship at Media Cipta Prestasi, from November to January 2022, besides that this project is also the final project of a UIX program from Dibimbing.id which is the Bootcamp platform that I currently follow. In working on this project, I collaborated with other Bootcamp students with Faiz and Reyhan, starting from the research process to testing. We are very enthusiastic about working on this project because we can exchange ideas and learn from each other. Anyway, feel free to leave comments or feedback about this research. Happy reading
Background
Media Cipta Prestasi is a company engaged in educational services, while the flagship programs for creating achievement media are educational tours, intelligent training, and event organizers that focus on character education, life skills, and soft skills. Currently, company sees high interest in online learning as an opportunity to participate in implementing digital learning, this is due to the COVID-19 outbreak which limits people from socializing and because of these limitations, people who tend to study offline are quite difficult to learn. meet their learning needs.
Therefore, Company aims to build a digital learning platform that is acceptable to users, besides that the company has also collaborated with several parties to participate in presenting classes that are useful for users.
Design Process & Timeline
In order to help companies know the habits of users when using online learning platforms, we started doing research with the aim of finding a deeper context about the problem at hand. We then tried to analyze the data obtained to show some key insights for us to focus on in this project. Then the next process that we do is build a solution based on the data obtained and finally test the solution we offer
Here’s our timeline while working on the project:
Approach to users
Because this is a project from a client, what we do is have a brief discussion with the company. In addition to knowing the business model, we also know who the company’s target customers are.
After knowing the target user, we prepared our research plan which included our research objectives, methodologies, sample specifications, and discussion guide. after that we tried to approach it in the form of an in-depth interview with 6 participants. because it is not possible to conduct face-to-face interviews, the research process is carried out online with the following user criteria:
- E — learning platforms active users which accessed e — learning classes at least in the last 1 month.
2. Men or women in the age range between 13 to 30 years old
3. They are student and jobseekers
And the main objectives of doing this research are:
● Discover participants’ mental models, including their goals/motivations and behavior when using e-learning platform
● Identify participants’ pain points and needs when using e-learning platform
Interview Process
The interview started with a question about how your experience was with using online learning platforms in finding classes, following the learning process and their pain points.
While conducting interviews, we got some insights from users such as the reasons for using e-learning platforms, what learning platforms do they use, the ideal payment method according to users, their habits when looking for classes and what they need users to support the learning process as well as what difficulties are preventing them from using digital learning platforms. Here are some quotes from the participant’s answer that I got from the interview:
Defining the problems
After getting a collection of data from users, we try to analyze the data because a lot of data obtained makes the data still seem biased. That’s why we use affinity mapping to group interrelated user insights so that we will know the mindset of users when using digital learning platforms.
After grouping user data into affinity mapping, we found 4 main topics that users become accustomed to when using digital learning platforms, including user reasons and motivations, user preferences when using the platform, user needs and struggles.
Key Insights:
- User Reasons & Motivations
The reason they use the platform is driven by the current pandemic situation which makes offline learning less effective. besides that there are other factors such as an invitation from a friend or a desire to improve skills. The price and class benefits are also a driving factor for users to use the platform - Preferences
On the other hand, regarding the process they go through to develop skills, they have their own preferences when using digital platforms such as the learning method they want, looking for classes based on their needs, the method of purchasing the class they want, and what details they look at before deciding to buy class - User Needs
Based on the affinity mapping, we gained some insight into what features can help SSAT users use the digital learning platform. Some users say that they need a miniquiz to measure their understanding after learning. In addition, users tend to like learning platforms that provide access to download materials to help the learning process. This can also be helped by the reminder feature that will remind users if they have not finished class. - User Struggles
In addition, we found several obstacles that hindered users from using the digital learning platform, such as, class materials that did not meet user expectations, being lazy and busy when attending classes, not finding the desired class payment option, or in terms of the appearance of the application that was less attractive. .
Then What’s the problem?
After we dive deeper into the relationship between the data obtained, then we analyze it again. finally we can define the problem we are facing in this project. Below are some of the problem statements we made based on our users.
- Users find it difficult to find an online learning platform that can fulfill their desire to learn a certain skill in completing a project or simply to increase their knowledge.
- Due to the large selection of classes that can be studied, users have difficulty finding the right or desired class. this is also supported by the lack of information about the details of the class and greatly influences the user’s decision to buy the class.
- In addition, users have difficulty when they want to buy classes, because users do not find suitable payment options or manual transfer payment methods, the verification process is quite time consuming.
- Users need some useful features in online learning platforms that can help them learn and maximize their learning potential.
- The user does not complete the class that has been studied, this is triggered by the feeling of saturation experienced by the user during the learning process. some users feel bored because the class material is not as expected, the class delivery is confusing or because of external factors such as busyness, no time, or forgetting
- In addition, users are confused about tracking their learning progress, this can be the last class studied or the last class material accessed.
User Persona
We built 2 user personas based on the pattern of observations we got from the interviews. This persona will help me make better design decisions. Maintaining design scope is also helpful because we will know who the users are, what issues to address, and what behavior is appropriate. The first persona is the person who did not complete the course on the e -learning platform. He tends to only study the material he wants and sometimes loses the motivation to continue studying until the end of the course. The second persona is a girl who is enthusiastic about learning new skills and has a strong motivation to grow as a person for her first job. The details of both personas will look like this.
Now that we know that there are 2 personas we need to focus on, we thought we needed to understand more about those personas, so we tried doing some mapping like Empathy Map and User Journey Map. Empathy map helps us to describe the point of view of the user as a whole, while the Journey Map can describe the sequence of activities and each process that occurs based on the actions taken by the user, the following mapping we have done.
Empathy Map
As I said earlier, the empathy map helps us understand users better. Here we plot some factors like what users feel/think, what they see, what they hear, and what they do. This can be answered from previous interviews about the basic behavior of participants.
User Journey Map
Next we create a journey map that focuses on what specific steps the user takes to reach his objective. We obtained these results from previous interviews about user experiences in using digital learning platforms. This mapping will also help us in building user flows and information architecture at the ideation stage.
Based on previous research, we created 2 types of user personas according to our observations of users, these two users have their own goals in using digital learning platforms and to achieve these goals users have different journeys. However, in this case, we found similarities when they used digital learning platforms. the second user both — realized that they needed to add or upgrade skills based on the second user’s thinking that they felt they lacked understanding in a certain area. Then they also have the same journey when they want to find a trusted learning platform, namely searching on social media, using a web browser or getting advice from friends. the process of searching for classes to following the learning process is still fairly the same. It’s just that the goals that each user wants to achieve are different, such as Mamat (Persona 1) who has a goal after attending lectures to understand the lecture material or Angeline (Persona 2) who has a goal who wants to learn his skills. can help her fulfill the requirements of her dream job. Based on this journey map, we can also clarify the main differences, namely users who don’t complete classes well and users who are serious about completing their classes.
Competitor Audit
As we explained earlier, this project was based on the company’s request and because the company had never had a digital learning platform, we tried to do an analysis on competitor platforms. This aims to find out what features our competitors have that we might be able to apply as well, as well as find out their strengths and weaknesses. To determine our own competitors, we ranked 5 platforms that are often used by users. This data is taken from the preferences of the users we interviewed and the survey form we distributed.
Competitor findings
Based on the competitors table above, we can find differences between competitors in terms of features, advantages or disadvantages. besides that we got some interesting insights about features that we might also be able to implement on the platform we are going to build
Ideating Solution
The next step I took was to look for various alternative solutions that might solve the problem by creating a design mandate. This solution builds on the insights I gained earlier, both from user needs and behavior. Then I started to prioritize the use of the Impact-Effort Matrix. Mapping was done based on the impact on user needs and behavior, as well as technology implementation efforts. So that later I can narrow down those solutions into impactful and efficient products.
Key Solutions
- Building a website-based digital learning platform with the main feature of providing online class learning in the form of video recordings that can be accessed at any time. Based on the results of previous research, we found that users are more likely to learn to use laptops, this requires users to study at a desk with additional activities that can help users understand the learning process such as taking notes for example. Based on user habits as well as travel maps, a web-based digital learning platform with a desktop size will be more suitable for use.
- In addition to classes in the form of videos that can be accessed online, we alsoadded webinars and book features to the platform. Based on previous research, I found that one of the ways users can improve their skills is through webinars as well as reading books. In addition, the bookstore feature is also one of the features desired by the company because the webinar and bookstore features have the same function as an effort for users to improve their abilities. Therefore, this feature is suitable to be added and can be an added value to compete with competitors. but because of its implementation that will require more effort because the webinars are in sync and the books to be sold are hardbooks. Therefore, the system that will be used later is only limited to providing information and purchasing books and webinar tickets. Meanwhile, books for sale will be delivered directly to users and for webinars, an additional video conferencing platform will be used.
- So it is necessary to provide search options that can help users find the desired class easily, such as recommended classes/webinars/books, products currently being promoted, popular products based on user choices or future products. With the various search options, it is hoped that it can help users find the desired class, after the user searches for the class, it is necessary to have a feature that can explain the details of the class in detail so that it can increase the user’s desire to buy the class.
- Then it is necessary to add other complementary features so that the previous features can run well, such as payment options, availability of detailed information, product reviews, e-certificate, notes, and others.
Experience Mapping
Once we have a solid understanding of the solution to be developed, we start creating a user experience map. which is a combination of information architecture and user flow, which describes the information structure and workflow in the application. this way we can quickly explain the overview of the application and become our reference in the Hi-fi design process.
You can see the screenshot below to see more details of Information Architecture:
After mapping the flow of user experience when using the platform, we found that there are 4 main experiences that users go through, namely login & register experience, product browsing experience, payment experience, and learning experience. The next step that we do is to divide the work area for design work because the application that is built is very complex and requires many screens.
Based on the division of work areas, I am responsible for designing Hi-Fi User experience when browsing products and experiences when users make payments.
I highly recommend readers to visit other articles in order to get a comprehensive view of how this platform was built, readers can visit other articles of my teammates below
Medium Reyhan Firmanda: Experience when visiting the platform, login process and user registration
Medium Faiz Abiyandani: User experience when learning to use the platform
If I emphasize, this is the experience mapping that I will focus on in the design process later, but as the project progresses I realize that the Information architecture that has been designed can change and this is a natural thing to happen according to my discussions with friends and mentors.
Wireflow
After figuring out the user flow and what pages are required, I try to brainstorm by doing a basic sketch for each required screen, but I add the user flow in it so that my teammates and I get a general idea of how the app will look like. see and what interactions might occur.
Although at this stage we carry out the design process individually, we still communicate and provide input to other teammates on the design solutions offered.
Creating Design Guidelines
After going through a very long process, we have finally arrived at the stage of visualizing the solutions offered. At this stage we will create a system design that is useful as a design library. With this design system, it will really help us to create a uniform design, then because it is a library we can use components repeatedly and will speed up the design process. However, before creating a design system component, we must determine the design style first, this includes Typography, Color, Grid, Elevation and iconography to be used.
After going through a very long process, we have finally arrived at the stage of visualizing the solutions offered. At this stage we will create a system design that is useful as a design library. With this design system, it will really help us to create a uniform design, then because it is a library we can use components repeatedly and will speed up the design process. However, before creating a design system component, we must determine the design style first, this includes Typography, Color, Grid, Elevation and iconography to be used.
Typography
The first thing we determine is the size of the typography and what type of font we will use because as we know a word or sentence is the medium used to convey information to the reader. For the font size itself, we know that there is no definite size as to what the font size should be because it follows from the screen size itself, so we refer to the guidelines contained in the material design with slight adjustments.
In addition, we chose the Monsterrat font as the text heading and open sans as the body text. We chose the font because on this platform we want to build the impression of a casual and friendly platform so that it can be accepted by various types of users.
Colors
Based on the Media Cipta Prestasi brand, their logo has five colors, namely blue, purple, yellow, green, and red. With so many color choices, we have to determine the main color that we will use on the learning platform that we will create, we try to browse their social accounts and visit the company’s website and it turns out that blue dominates the appearance of that color. Company Site. Based on these findings, we tried to match the blue color with the platform we are building. In addition, from a color psychology perspective, blue is a color that carries trust and professionalism and strongly reflects the company and platform we build. Once we find a brand/primary color, we also create a neutral and semantic color .
Iconography
One of the complementary elements in a UI Design, both mobile and web-based, with icons can help users understand the function behind the icons more quickly. We also implement this in some component functions such as the bell icon which means notification or trash box which means delete. By implementing objects around the user, it will emphasize the functionality of an application feature. The icons we use are from the By Heroicons icon pack which can be used for personal or commercial use.
Illustrations
It’s the same with illustration icons helping users to understand the situation that occurs in the application, besides that with illustrations it can increase interaction between users and applications, on this platform we use illustrations obtained from Drawkiit and can be used for personal and commercial use
Elevation
Height is the relative distance between two elements along the z-axis. Any object in the real world casts a shadow when elevated, and shadows have special properties and appearances based on the degree of elevation. This can have an effect if there are other components whose position is higher than the other components. e.g. Header on this platform later. when in the default position the height of the header is the same as the component or section below it, but if we want the header to stay on top and not move its position when the page is scrolled what we think is how the objects below seem to pass through the header? by confirming the elevation between components/ materials, we can know that components/materials are in a lower or higher position than other components.
Grid System
The last thing from the type of style that we specify is the Grid, the use of the grid will really help us in designing the appearance so that the distance between objects is even and looks consistent. In addition, the grid is also a guide for developers when handing over the results of the UI design to be developed, here is an example of the grid that we applied to a 1440px wide desktop design.
After determining the design style that we will use on this platform, then we create a basic component which can later be combined with other components and produce a new component with different functions, while the basic components that we make are buttons, badges, text fields, checkboxes, radio buttons and others.
After that, we started to build a component kit based on what features we need for each page according to the design solutions we offer, on the page I created I will discuss the user experience when searching for products (classes, webinars and books), looking for details product and make payment, here are the components I need to design this page:
Hi-Fi Design
At this stage I use the library design system that was created previously, as I explained the design system really helps me to design faster because of the components that we have prepared beforehand, so in this process I focus on adjusting the distance between components and their placement so that will create a complete page, here’s the design solution I offer:
The start of a jounery
The first thing a user does before doing a search is to visit the homepage, this page is the start of all the journeys that the user makes starting from the user’s need to find the course he wants. Based on previous research, users tend to use the search bar to find the courses they want, but some other users also search for classes based on popular classes offered while the user is still on the homepage, after seeing this search option we added the search bar feature to the header and popular classes section on the homepage.
Search Result — Product Found
Based on the results of previous research, users who already know what class they want to buy tend to immediately use the search bar feature to search for products by typing in the keywords for the class they want to search for, from this insight I try to maximize the feature search in the application design that I build. The display below when a user tries to search for the desired class by typing a keyword in the search bar and finds several products such as classes, webinars or books related to the keywords entered. Users can narrow the search by using the filter feature. The filter I provided has several options such as displaying the class that is being promoted, based on user level, what product you are looking for and what category you want.
Search Result — Not Found
Next I added a page that might occur when a user searches for a class, i.e. when a user does not find the desired product, the platform will display a message that the platform cannot find a product based on that keyword and suggest searching for a class based on another keyword.
Search by Headers menu— Courses Page
In addition to searching for classes based on the Search feature, I also found that users also search for classes by visiting a page that displays the class as a whole. This page can be accessed via the menu located on the platform header bar. On this page, users will be shown several class options based on promo classes, popular classes, newly released classes or search using the filter feature based on recommended classes, class type preferences and desired categories.
Courses Detail Page
On this page is the main solution that is expected to help the user, I try to add additional information that the user needs based on the approach that has been done previously. On this class detail page, users can check course ratings and find out who is being taught by the tutor, besides that users can also see class trailers in the form of short videos of what class to take. , then the user can see the class description and find out what material will be taught. besides that there is also information about homeroom teachers, class reviews based on previous users, the level required to attend classes and most importantly information about class fees along with info on what benefits you get if you buy the class.
Search by Headers menu — Webinar Page
Based on the approach to users, one way for users to improve their abilities is through webinars, through webinar users will get insights from practitioners who are experts in their fields. Therefore, I added a webinar feature that can be accessed by users via the webinar page in the header menu. On this page, webinars based on 2 types will be displayed, namely webinars that take place this month and those that will be coming, besides that users can also use the filter feature that can help narrow the search, such as wanting free or paid webinars or searching by category.
Webinar Detail Page
Just like class pages, webinars also have their own details page. On this page displays information about the title of the webinar and then there is a promotional banner from the webinar, besides that the user can see the detailed description of the webinar and get what information will be discussed/learned, the user can also check the background of the presenter in addition to the last section, the user will be notified about several webinars that will be held in the near future and most importantly, there is information about the prices for participating in the webinar along with information about the schedule for the webinar and what benefits are derived from attending the webinar.
Search by Headers menu — Books Page
Just as I explained earlier that the company wants to add a page that contains information about what books are published by the company and users can buy the book. then this is also in line with one way so that users can improve their skills, namely through reading. This page will display information about what books are best sellers and book recommendations that users might like, besides that users can also use filter features such as searching for books by type or category.
Books Detail Page
Then there is also a page that explains about the book selected by the user, on this page it displays information in the form of the name of the book, the category of the book, the rating based on the user’s opinion and there is a preview image of the book the user wants. On this page, users can also find other information such as a description of the book, the main points in the book, who the author is or see reviews by other users, then there is additional information about the price of the book and what benefits are obtained.
Wish list Page
Furthermore, there is a wishlist page, this page serves to display product information that users like but do not want to buy, this page also functions as a bookmark or library that can be accessed quickly by users when they want to buy. desired class without having to search by keyword and others. On the page I designed, there are two states that will occur when the user accesses the page, the first is the page when no products are added by the user and the second is the page that displays information about what products the user has. added to wish list. In addition, users will also be provided with references to other products that users may like. This information will be displayed based on the products the user has added to the wish list or based on the user’s search history.
Cart list Page
The next thing I will explain is the Cartlist page, on this page it displays information about what products the user has added to purchase, there are three conditions for the cartlist that I designed, the first is a cartlist with an empty state on this page the condition displays a notification that no there are products that are added to the cartlist and in the last section there are product recommendations that the user might like, the next is the condition of the cartlist in a different empty state, there is only a new section that displays the products that are in this product wishlist later the user can immediately move them to cartlist And the last is the product terms in the cartlist on this page, in addition to displaying what products are in the cartlist but also displaying information about the price of the summary of the product you want to buy.
Checkout Page
Finally, the checkout page and payment success, this page displays information about the payment methods that can be made by the user and information on the total price that can be paid by the user as a whole, after the user makes a payment, they will be directed to the payment status page. On this page there is an action button. if the user wants to continue browsing another class or check the purchase history to see the purchase status of the purchased product.
Prototyping
After the empathize, define, and ideate stages were completed, I created a Figma prototype. This prototype consists of user activities when searching for classes, viewing class details and making class purchases, along with a prototype link that can be tried
Usability Testing
After going through a long process, we finally arrived at the final stage, at this stage I conducted usability testing on several respondents, with the aim of observing whether the design ideas I created were easy to use by users, answering their problems, whether this product was well received, and are there any difficulties while using this prototype.
The test was conducted with 5 participants (done online via zoom) who had the same criteria as the first reasearch interview, they were in the productive 13–30 years range and E — learning active users (access e — learning at least in the last 1 month)
Task Given
I asked the user to perform the following tasks. I did this by giving the scenario “You are a beginner looking for IELTS classes, please explore this app and show us how you search until you finally buy the class using the virtual account method.”
Each participant is given 4 tasks in completing the UT, as for the tasks scenario referred to as follows:
● Task 1: Trying to find a class based on the search bar feature and Viewing the class description
● Task 2: Add class to card list And complete payment
● Task 3: Explore the Course menu, webinars and books on the online learning platform
Feedback user after Usability Testing
● Some users stated The details regarding the classes displayed are very clear to the user
● Users find it helpful with the search filter options offered because they can further classify classes based on search preferences
● Some users say that displaying more classes vertically will only make scrolling difficult
● Some users have difficulty regarding the class tooltip that is displayed when the cursor hovers, they argue that the area clicked to bring up the class detail page is covered by the hover tooltip.
Feature-related suggestions
● It would be very helpful if the search results were displayed using pagination, so that the user stays on the same page without having to scroll through the search results quite a lot.
● It would be better if there was a see more / see class detail button feature in the tooltip area when hovered
Lesson learned about this project
- It is quite difficult to work on this project because the company is still not aware of the importance of ux in a product, so we need more time at the beginning to help companies find out what they really need to build the e-learning platform.
- It takes time to be able to adjust the design style and establish a comfortable workflow with fellow team members
- Communication is the main key in completing this project, both to the company and to fellow members, because it is done in a WFH way, besides that, each member has their own main job outside of the internship project.
That’s it, thanks for reading! Feel free to leave a like or comment. I’m also open for further discussion, just ping me out :)
Linkedin: https://www.linkedin.com/in/muhammad-ajrin/
Portfolio: https://biolinky.co/porfolio
Thanks to :
Dibimbing Crew for the learning experience, Ka’ Gya & Ka’ Wanda
All great and beloved mentors : Ka’ Nadya, Mas’ Yusuf, Ka’ Ryan, Ka’ Theo, Mba ’ Vita, Mas Luq, dan Mas Den
My Team Projects : Mas Faiz Abiyandani and Mas Reyhan Firmanda
All Friends in UI/UX Design Batch 5
