Team Project - Learnium

This is the final team project that we worked on from September 2023 to December 2023 at Langara College. As a UI/UX designer, I was involved in all stages of the design process, beginning with user research and ending with the final design.

Mock-ups of Arc

My Role

UI/UX Designer

Teammate

4 Full Stack Developers, 4 UI/UX Designers

Duration

12 weeks

The Problem

It all began with a conversation in the library. When we were struggling with the exams, we came up with an idea to use AI for effective learning.

Typically, we used to spend a lot of time on preparatory tasks such as reading content, summarizing key points, and creating flashcards to understand new topics. This consumed both time and effort, leading to lower learning efficiency. Therefore, we came up with the idea of feeding the content to AI to automatically generate learning content.

My Role

I was involved in all processes related to the design of this project, especially the UX area. Therefore, my main focus was on the process from research to developing low-fidelity wireframes, which encompassed tasks such as user research, sitemap, user flow, and wireframe. Additionally, I dedicated effort to refining the wireframes through usability testing.

The Solution

Learnium is an AI-powered smart mobile app that simplifies the learning process by transforming textbooks into interactive content, provides a responsive learning schedule, and keeps learners engaged in practice and tests by rewarding their progress.

This would significantly reduce the time spent on preparation and allow us to use our learning time more effectively. We believe that this approach can shift learning from passive to active, resulting in improved learning outcomes.

Project Idea

Project Timeline

We followed this design process for our new product, from user research to finalizing the design. The project had to be completed in 12 weeks, including coding, so the design phase had to be finished within 8 weeks.

Research: Week 1 - 2

In this process, we examined the usage context in which the user is currently situated and determined the value of the experience to provide.

  • Concept & Objectives
  • User Research
  • Persona
  • Market Research
  • MVP Planning
Design: Week 3 - 5

The main activity at this stage is to visualize what specific UX the idea will bring and in what situations it will be used.

  • Sitemap
  • User Flow
  • Wireframe
  • Logo, Branding
  • UI Kit Elements
  • Mock-ups
Iterative Testing: Week 6 - 8

In this process, we repeatedly conducted evaluations while refining the prototype to identify usability issues and improve the user experience.

  • Prototype
  • Usability Testing

User Research

First, we conducted user interviews as a qualitative research method, and based on the insights and hypotheses obtained, we designed an online survey as a quantitative research method to validate these hypotheses. Through this combination of qualitative and quantitative research approaches, we deeply understood users' usage contexts.

User Interview

We conducted and recorded 9 user interviews. Our main objective in this process was to discover hypotheses about their essential needs. Here are some of the interview questions.

  • How do you prepare for an upcoming exam?
  • What are your frustrations when studying topics that require memorizing?

Through user interviews, we developed the following hypothesis.

College and university students, especially, struggle with time management when studying, and they prefer to check themselves by taking quizzes after memorizing to see how much they remember.

Online Survey

We designed an online survey to further test our hypotheses and gathered answers from 40 college and university students. There are a total of 5 questions, and we got detailed data on students' study styles.

Survey Result

Persona

We analyzed raw information obtained from user research and created a user model. Through this process, we all were able to share the same understanding of the user.

Persona

Competitive Analysis

We conducted competitive research with a focus on designing differentiation points for our app in comparison to competitors. This research provided valuable insights into understanding the overall market and the situation of rival companies, contributing to enhancing the user experience and business value of our product.

Competitive Analysis

MVP Planning

Based on the information obtained from previous research, we created a list of features to support user learning and then narrowed it down to the MVP features required for the initial release, ensuring that we could develop them within the 12-week schedule.

>MVP Planning

Sitemap

From that task list, we extracted objects and designed the sitemap with a focus on intuitive labeling and organization, ensuring it would be easily understood by users. During this process, we adopted an object-oriented approach rather than task-oriented, discussing and sometimes testing whether users could smoothly navigate to the information they desired.

User Flows User Flows
Sitemap

User Flows

After that, we created a user flow to visualize the user's more detailed experience and to gain an understanding of the whole structure of our app. This process helped us discuss the best user experience we could provide early in the design process.

User Flow of Learnium

Wireframes

Based on the sitemap and the user flow, we started sketching and creating low-fidelity wireframes. This helped project members quickly visualize the product image that would deliver the experience we designed. Then, we conducted user testing and improved the fidelity of the wireframes. This was an effective approach for reducing rework, allowing users to focus on the essential points rather than text and colors, and gathering appropriate evaluations.

Home Screen
Home Screen
Keytopic Screen
Keytopic Screen
Flashcard Screen
Flashcard Screen
Quiz Screen
Quiz Screen

Branding

The primary color is Purple which is associated with creativity and wisdom. This aligns well with the educational nature of Learnium, evoking a sense of innovation and intelligence. White as our secondary color creates a clean and modern aesthetic, providing a visually appealing background that allows other colors to stand out. We have two accents color: Solar Yellow to add a touch of playfulness and fun to the app and Colar Red for special conditions such as incorrect answers and missed schedules.

We selected two typefaces for headings and body type which are modern and easy on the eyes, and suitable for a text-heavy application.

Color and Typography

For our UI components, we followed a flat design with rounded corners, creating a clean and friendly interface. This consistent style extends across all the screens, ensuring a seamless experience.

Components

We designed our octopus mascot, Dr. Lumi. Octopuses are known for their adaptability and problem-solving skills. Similarly, Learnium aims to adapt to individual learning styles and provide solutions to various educational challenges.

We aimed to make the app more gamified by adding animations to various elements. Overall, we wanted to create visually appealing elements that would bring users back to the app at the end of the day.

Mock-ups

After branding, we proceeded to create implementation-level mockups. We conducted user-involved evaluations to confirm usability quality and UX realization.

Home Screen
Home Screen
Keytopic Screen
Keytopic Screen
Flashcard Screen
Flashcard Screen
Quiz Screen
Quiz Screen

Usability Testing

In usability testing, we assigned tasks to participants, had them use the prototype, and analyzed aspects such as the results of their interactions, task completion, and their behaviour during the operation to discover and measure usability issues. Additionally, We recorded the participants' screens during the tests for sharing with other team members and for later analysis.

As a result, we identified some usability issues from the analysis results and made the following improvements.

Usability Testing

Measuring Success

To ensure the success of products like Learnium, continuous measurement and improvement after release are crucial. The key metrics that can be used for this purpose are as follows:

Communication

We adopted Agile development using JIRA for a 12-week project. This approach allowed us to focus on user needs and feedback, continuously evaluate the application, and effectively meet user expectations.

When collaborating with other team members, I prefer to have clarity on individual tasks and schedules. For this project, we held weekly retrospective meetings and designer meetings to clarify tasks.

Furthermore, throughout the project, I maintained consistent information sharing. While we had mid-week stand-up meetings, we also frequently exchanged information via Slack. This approach ensured that everyone remained on the same page, facilitating mutual support to proactively address issues and maintain a smoothly running project.

Retrospective
  • Every Friday for 30 minutes, everyone on the team participates.
  • Everyone presents the tasks accomplished during the sprint.
  • Discuss the previous sprint in terms of "Keep", "Problem" and "Try".
  • Plan the tasks we will tackle in the next sprint.
Designer MTG
  • Every Friday for 30 minutes, designers participate.
  • Confirm design tasks to be done this week, assign them to each member.
Stand Up MTG
  • Every Wednesday, online, everyone on the team participates.
  • Share the tasks done in the past 2 day, the tasks planned in the next 2 days, and any blocked tasks.

Conclusion

We created Learnium from concept to code in just 12 short weeks and clinched the first prize at the Capstone student showcase.

Moreover, we were happy to get valuable feedback suggesting the potential for running Learnium as a business rather than just a student project.

This outcome confirms our deep understanding of the essential needs of our users, showcasing our ability to design an app that delivers the best user experience through cutting-edge technology.

Team Photo

Tools Used

Tools used