Topic Bits

Problem

Microlearning is a topic that has been growing in popularity since 2015 (Leong et al., 2020). It can help educate professionals (Fagerstrøm et al., 2017). Also, microlearning seems to be effective for learning a new language (Dingler et al., 2017).

Based on the papers that I have reviewed which were freely available on Google Scholar, they focus more on the interaction design of microlearning applications. The discovery gave me the idea to uncover its visual side. Specifically, I would like to learn what a visual learner would appreciate in microlearning applications.

Lastly, I was curious about how a design sprint works. Hence, I decided to keep the project timeline to a week.

Insights

I conducted a one-on-one interview with 4 participants who were visual learners aged 18-60 years old. The age was referenced by the research done by Fagerstrøm et al. (2017). The goal of the interview was to know more about what visual learners enjoy when learning in general. After completing the interviews, here were the 2 common responses mentioned by participants when it comes to learning as a visual learner.

Concise

2 out of 4 of the participants expressed how they prefer reading concise information. Although, as stated by one of the participants, the concise information must completely explain the lesson. Also, another participant shared that they shun away from learning materials containing too much text.

Repetition

2 out of 4 of the participants utilize repetition when learning. What was referred to as repetition was to first master a certain part of the lesson. Once that part has been mastered, the participant moves on to the next part of the lesson for them to master.

Solution

I created a prototype named Topic Bits that would cater to the learning needs of visual learners. The user selects a topic from the Home page, then proceeds to the Lesson page. Afterward, the user would learn a bit of information before taking a quiz. Hence, conciseness was applied when designing the Lesson page. When taking the quiz, the user would have to get a perfect score to access the next lesson. In that way, repetition was included when learning the lesson.

For faster design work, I have utilized the design system, Carbon Design by IBM. Moreover, according to Cherry (2020), people in blue rooms have higher productivity based on research. Hence, the brand color I chose for Topic Bits was blue in hopes for users to feel productive when using the application.

Usability Test

Once I had completed my 5 usability tests, I summarized the common concerns that needed to be fixed.

The concerns to be solved in this case study:

• Wanted topics to be categorized and searchable on the Home page
• Wanted to make the header take up the whole space so that it won’t be skippable on the Home page
• Thought image cards would lead them to another page on the Lesson page
• Wanted to be able to change the answer before moving to the next question on the Quiz page
• Separate finished and unfinished topics on the Finished Lesson page

• Did not know star’s functionality and mistook stars as rating or difficulty level on the Home page
• Wanted hints and reason when the answer is incorrect on the Quiz page
• Wanted an option to choose how long until they can take the next test on the Finished Lesson page

For conciseness, there was no feedback about bulky text on the Lesson page. For repetition, there were pressure-related responses from 3 out of 5 of the participants when finding out that they need to get a perfect score to move on to the next lesson. Here were the statements from the participants. One of them was translated into English:

“Oh no, what if I get it wrong?”
“Oh wow, perfect, really?”
“Wow, pressure.”

Hence, repetition is something to improve within Topic Bits in the future.

Improved Design

The prototype can be viewed here. Also, before proceeding to the improved designs, I would like to mention that they were not part of the 1-week timeline. However, since I recently found the time to improve on the wireframes, I decided to showcase them.

Home Page

The first improvement I made is found on the Home page. First, I added a search bar and a filter to make the topics searchable and categorized. If ever the user did not touch the filter, the only category shown would be the Recommended category.

What was suggested was to make the header that is used to welcome the user fill the whole page. In that way, it would not be ignored by the user as mentioned by a participant. Instead of making the header take up the whole screen on the Home page, I decided to give it a separate page, which is the Landing page. The following was my decision to better distinguish the page to welcome the user and to search for topics.

Lesson Page

The concern raised on the Lesson page was that the image cards looked like buttons. I attempted to not make it look like a button by removing the background color. I also changed the font style to italic to make the text look more like a caption.

Quiz Page

In the previous prototype, after clicking the answer on the Quiz page, the user was shown to the next screen. Hence, the user could not change their answer to the previous question. In the new prototype, users can finalize their answers by clicking the Next button. They can also return to the previous question through the Back button.

Finished Lesson Page

As of now, I removed the finished topic since users would not be interacting with it until the next day. I believe that there are better ways to separate the unfinished and finished topics. Although, removing the finished topic is the fix that I can think of for now.

Recommendations

As I reached the end of the case study, here are the steps I would take to improve project Topic Bits:

• Embed repetition to Topic Bits in a less pressuring manner.
• Make other improvements, such as providing a setting that can change the time limit to take the next quiz.
• Conduct another usability to test the improvements.

References

Cherry, K. (2020, February 21). The color psychology of blue. Verywell Mind. https://www.verywellmind.com/the-color-psychology-of-blue-2795815

Dingler, T., Weber, D., Pielot, M., Cooper, J., Chang, C., & Henze, N. (2017). Language learning on-the-go: opportune moments and design of mobile microlearning sessions. Proceedings of the 19th International Conference on Human-Computer Interaction with Mobile Devices and Services, Article 28. https://doi.org/10.1145/3098279.3098565

Fagerstrøm, A., Gulliksen, M., & Grønli, T. (2017). Microlearning in educating healthcare professionals. Proceedings of The 2017 International Conference on Advanced Technologies Enhancing Education (ICAT2E 2017). https://doi.org/10.2991/icat2e-17.2016.8

Leong, K., Sung, A., Au, D., & Blanchard, C. (2020). A review of the trend of microlearning. Journal of Work-Applied Management, 13(1), 88–102. https://doi.org/10.1108/jwam-10-2020-0044

2023 Update!

My recent update from the Milk Tea App is that I have improved its UI. As for Topic Bits, I also made some tweaks: I chose a lighter shade of sky blue for the topics.