E-Learning
Platform.

UX/UI Design for educational app

Project Plan

Task

To conduct a thorough discovery phase to identify opportunities and gaps and to validate the solution. Based on the findings of the research, we were to design a new learning experience for students to organize and memorize subjects effectively

Team

Business Analyst, Project Manager, UX/UI Designer

Duration

4 months

Scope

Discovery phase and UX/UI Design in a form of 85 web app screens with mobile responsive design

Result

A Miro board with all the discovery phase findings, clickable wireframes, a few UI Concepts, and the final deliverable in Zeplin with a style guide and exportable assets

Overview

Study Flow is an educational app that helps students to organize study materials and learn how to memorize subjects effectively. To deliver an improved learning performance, we enhanced the traditional note-taking approach with interactive study techniques such as Spaced Repetition, Quizzes, Interleaving, and Categorizing (STIC).

Cieden worked jointly with the stakeholder to understand various study methods and their effectiveness, conduct market research, identify the gaps in competitors’ features, facilitate a brainstorming workshop to ideate and validate the solution, conduct quantitative research (survey), define project scope and a feature prioritization map (roadmap), list jobs-to-be-done, define monetization strategy, build information architecture and the actual UX/UI Design.

The main concept is that all topics and study materials are organized hierarchically using a nested list and a mindmap with collapsible nodes. A node can contain study materials such as notes, images, videos, attachments, etc. as well as quizzes/flashcards which can all be ordered into a Study Plan.

Benefits

  • The client conducted significant research on the study methods which gave us a deeper understanding of his vision for this product
  • Technically savvy client who helped us define the project scope based on the functionality complexity
  • A gap in the edTech market that enabled us to think outside the box and ideate

Challenges

  • The project is self-funded. Thus, we had to wait long before we could learn about user feedback
  • We’ve discovered that it’s technically challenging to adopt the product for real-time collaboration, so this functionality had to be moved to phase 3 in the product roadmap. We conducted a survey based on the initial assumptions at hand to identify the pain points of customers and potential “painkillers”

Step 1

Discovery Phase

Learning for the sake of learning does not bring long-term results, it may lead to burnout, a waste of time and money. Keeping this in mind, it is essential to create an engaging learning experience to make sure the learners understand why they do it, to make every minute count.

Cieden’s team and the client were focused on the creation of innovative learning experiences, targeting potential users who aspire to organize knowledge and study effectively. A detailed analysis of existing learning methods, conducting market research, and the analysis of competitors’ features have led the team with a number of design questions.

To research the issue in-depth and continue the work with the brainstorming workshop, the team developed a series of assumptions and created jobs-to-be-done frameworks.

UX/UI Design for educational app: Discovery Phase

Step 2

Competitor Research

After reviewing plenty of competitors, the functionality of their products, and reading user feedback on them, we got a helicopter view of what’s currently available on the market. We identified a trend almost right away. None of the apps we’ve reviewed help users conceptualize and really learn. What the competition does instead is focusing strictly on memorization. They present information in small isolated chunks through flashcards, free of any context. In other words, categorization, which is an essential part of learning, is missing. That’s what we decided to zero in on.

UX/UI Design for educational app: Competitor Research

Step 3

Brainstorming Workshop

Workshops are intensive sessions used during the design process to solve problems and challenges when cross-functional collaboration is needed. Workshops enable participants to come together for a limited period of time of idea generation and hands-on activities that allow them to achieve an actionable goal.

We started by defining Problem Statement and used 3-6-5 Brainwriting methodology.

After gathering, grouping, and prioritizing all the ideas, we conducted a Sketching Studio workshop to visualize some of the best ideas that later served as a foundation for interaction design.

UX/UI Design for educational app: Brainstorming Workshop

As a result, we grouped our ideas into epics and voted for the winners.

UX/UI Design for educational app: Brainstorming Workshop
UX/UI Design for educational app: Brainstorming Workshop

Step 4

Survey – Quantitative Research

In the attempts to see what methods and tools students use to study and whether there is a desire to improve this process, we reached out to our potential customers to gather quantitive data. Armed with our initial assumptions only, we’ve recruited and surveyed students to better define their pains and their “painkillers”. That way we removed our own bias and based our further decisions on actual data.

UX/UI Design for educational app: Survey – Quantitative Research

Step 5

Value Proposition Canvas

The Value Proposition Canvas is a tool that can help ensure that a product or service is positioned around what the customer values and needs. At this step, we identified our customer’s major Jobs-to-be-done, the pains they face when trying to accomplish them, and the gains they perceive.

After listing gain creators, pain relievers, and products and services, each point identified was ranked from nice to have to essential in terms of value to the customer.

UX/UI Design for educational app: Value Proposition Canvas

Step 6

Information Architecture

Having completed the discovery phase, we gained an understanding of each function, user actions, user flows, and scenarios. Subsequently, we created the information architecture that merged several modules, which complemented each other and provided a seamless experience for our end users.

UX/UI Design for educational app: Information Architecture

Step 7

Product Scope

In the attempts to see what methods and tools students use to study and whether there is a desire to improve this process, we reached out to our potential customers to gather quantitive data. Armed with our initial assumptions only, we’ve recruited and surveyed students to better define their pains and their “painkillers”. That way we removed our own bias and based our further decisions on actual data.

UX/UI Design for educational app: Product Scope

Step 8

Wireframing

Based on identified users’ problems, the team developed a high-fidelity product prototype to test the design concept.

UX/UI Design for educational app: Wireframing

Step 9

UI Concept

As we all know, most students study at night, especially when they prepare for exams. Thus, we allowed them to choose between the light or dark mode in their customizable settings. Later, we added a few different themes to make our product visually appealing to a wider audience.

UX/UI Design for educational app: UI Concept

Step 10

Style Guide

To ensure consistency in the project implementation, we developed a style guide which is the single source of truth that groups all the elements that will allow the teams to design and develop a product. By utilizing a collection of repeatable components, we create an exceptional user experience.

UX/UI Design for educational app: Style Guide

Step 11

Final Result

Flashcards/Quizzes

 

Active Recall is a memorization technique we utilized in the product design. The technique involves learning something, and then regularly testing your knowledge actively through questions and tests, rather than rereading the material passively. Flashcards and self-testing are yet another group of studying techniques that have proven to be very effective. Spaced Repetition basically tells the user WHAT to study and WHEN based on their previous test scores and on a concept called The Forgetting Curve.

UX/UI Design for educational app: Final Result

Image Occlusion

 

Image Occlusion lets you create cards that hide parts of an image to test your knowledge of that hidden information. The cards generated by this add-on would be best described as image-based cloze-deletions. We further boosted learning retention by implementing flashcards and quizzes coupled with mind map categorization. Such a holistic approach to studying maximizes the chance to retain the knowledge in the students’ long-term memory.

UX/UI Design for educational app: Final Result

The MindMap

 

For every node in the mindmap, its title is displayed, but the user can also choose to show more things for each note. These things include:

• sections the user highlighted in the note embedded in the node;

• selected images/videos contained within the node;

• selected questions/flashcards contained within the node.

The mindmap isn’t just a different way of visualizing the same contents of the outline, but also a way of (optional) visualizing the other materials contained within each node: note highlights, media, flashcards, and user’s learning progress (determined by the learning algorithm). If we display too much info on the mindmap, it could become cluttered and confusing very quickly. That’s why we enabled the users to toggle among the different modes of visualization.

UX/UI Design for educational app: Final Result

I chose Cieden because of their portfolio which really caught my attention and their affordable pricing. 

The team was transparent, describing their steps and timeline on different projects they’ve done. Moreover, they were enthusiastic about the product and excited to give suggestions regarding features and subtleties of the app that I hadn’t considered. Overall, Cieden’s team did very well and provided me with a design that was easy for me to implement as a software developer.

virginia

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent