.png)
.png)
.png)
Project Overview
Orange is an android educational app that helps young children learn better online.
It is a platform that helps learners participate in online classes, upload assignments, and download class content. I wanted to design a solution that would help young learners enjoy online learning process and make this learning transition easier and more comprehensive for them.
Timeline:
8 weeks
Role:
UX Researcher
Design Strategy
UX/UI Designer
Tools:
Figma / Invision
Project Type:
Academic July-Sep 2021
Design Process
EMpathize
Why this problem ?
As a teacher, I have been struggling with online teaching and learning for 2 years. I have been teaching English to very young learners 10 hours a day and saw how learning online can be frustrating for them. The main problem was due to COVID online learning was not a choice! It was the only option.
Children had to study online without being ready for it. Parents that didn't let their children hold cellphones, now have to see they work with digital devices several hours a day.
Children were not ready to learn online and there wasn't a suitable platform that can make this process easier.
Most of the time teachers and schools had classes in video calling platforms like "Skype, Zoom, Google Meet..." that was designed for grown-ups.
When I had to come up with an idea that can solve a real problem, this was the first thing that came to my mind.
After being an online teacher for almost 2 years, I have seen what challenges kids were facing in online learning.
When you see an Orange, hover to see how that section works!
Problem Space
The pandemic has dramatically changed education around the world, with more than 1.2 billion children in 186 countries affected by school closures. And insufficient hospitals and low vaccination rates in countries like Iran have caused many schools to shut down completely. Elementary-age children (ages 7–12) have had to learn how to work with computers and video conferencing applications and cope with new, remote learning methods. While some believe the unplanned and rapid move to online learning will result in poor educational experiences and outcomes, others see the potential for a new hybrid model of education to emerge with significant benefits for developing countries.
Problem Space
How Might We
How might we facilitate more effective and sustainable online learning experiences for students and teachers in developing countries?
How Might We
Nazanin - 10 Years Old
Every time I have an online class I have to ask my mom to help me join it. Using video calling applications is hard too.
Ava - 11 Years Old
The hardest part of online learning is uploading your homework, and you have a lot of them!
Maryam - 10 Years Old
I write notes during classes and record my classes too. I want to make sure I have everything that I can review before my exam.
Primary Research
PRIMARY RESEARCH
After completing the interviews, I have categorized the interview outcomes and classified them as pain points, motivations, and behaviors. After organizing my interview results I have found some similar problems that all interviewees were facing. Following this pattern, I could pull 4 themes and insights from the interviews.
Most of the kids had problems finding the content that was thought on that day. As studying was divided into digital and analog for kids, they couldn't sort their material and this form of content, made studying hard for them.
Uploading homework is hard too! Making PDFs and zip files and taking photos from your notebook can be frustrating. It is hard to find the photo that you took from that page in your notebook! Guess we expect a lot from kids!
Using video calling applications with a lot of options and buttons can be enough for communicating with your teacher but it is not the best way to do it. Children were confused about the buttons and options that were hovering around while they were in a class.
The disruption of virtual school is increasing the risk this generation of children will suffer from and die of heart disease and diabetes. It could reduce their lifelong earning potential and cripple their mental health. Forming healthy social and physical habits and promoting a love of learning are vital processes for school-age children that are integrally associated with lower chronic disease burden, higher economic earnings, and increased overall life satisfaction, and every day out of school is taking these things away from the children in our society.
Interview Synthesis
Interview synthesis is about externalizing all the data gathered during your design research to make the content free to be moved and manipulated. This way, the entire set of data can be seen at once which will help me uncover implicit and hidden meanings. Organizing data around themes helped me go from knowledge to start building a common understanding of your users’ needs. It was about reaching a consensus about what are the most compelling insights or consistent problems the children are facing in the online learning journey.
Now that we have the common themes it is time to get organized. I am going to categorize the interview results into motivations pain points and behaviors. This will help me identify the pain points better and narrow the topic that we are offering the solution in.
Motivations
I love wearing uniform to go to school
If I can learn quickly I can become a doctor and find a vaccine for COVID 19
I like online school because I can use my mom's cellphone or computer
I want to get good grades to make my mom proud
I want to do my homeworks very fast and upload them quickly to go and play with my toys
Pain Points
I prefer going to school, I liked asking questions from my teacher and my friends.
I can't find what that has been thought in the class. I have to ask my mom to find it
It is very hard and stressful to upload your homework and know that you did it correctly
I hate online schools and I don't learn like I did in real classrooms with bench and desks.
My notes are very hard to find before exams. I have to find them in my notebook, computer, in videos and in the place my teacher has shared it.
Behavior
I ask my mom to help me find my homeworks. It is hard for me to know what should I do every day
I stare at my monitor for 8 hours a day. I feel very tired at nights and I have a headache then.
I always lose my notes and what teacher has shared.
I spend a lot of time behind the computer.
Our teacher teach the content very fast but I can't tell it to her. I don't want everybody think that I am stupid!
Themes and insights
Uploading your homework is far too complicated for kids. Making PDF files and zip files, taking photos from their notebooks, and organizing them can be hard and time-consuming.
downloading content
A lack of easy access to content was in the class has led to a major drop in children's GPA
Considering video calling applications as an online platform, made kids disappointed and learning process became harder for them.
too much time behind monitor
Sitting behind the computer all day life could reduce kid's lifelong earning potential and cripple their mental health.
Participating in classes
uploading homework
define
PERSONA
After synthesizing my interviews into insights and pulling out a key insight to focus on, I developed a persona and experience map to ensure my design process was driven by my target user’s goals and behaviors.
Diving into the mindset of kids can help me identify the opportunities to intervene with a digital solution and will help me understand what is the user's goals and needs.
Here are my personas. They have been online schooled due to covid and they are a northern star for my upcoming design choices and ideas.
Hanna Sheller
Age:
10 years old
Country
Iran
Devices:
Her Mother's Phone
Gender
Female
Language:
Persian
Family:
Lives with her mom and dad
Bio
Hanna is a ten-year-old student who has been online schooled because of COVID. Her parents didn’t let her use their cellphone before, but as all the classes are online she has to spend a lot of her time behind the computer or on a mobile device. She didn’t know how to work with technology but she tried her best to learn it as fast as possible. She uses her cellphone for talking to her friends, participating in online classes, taking photos of her homework, and watching educational videos.
Frustrations
-
I don’t know what are the options under the video calling screen. (like share screen or annotate ...)
-
I always lose the files that the teacher sends me after teaching a subject
-
I don’t know what is my homework and how should I do it!
-
I spend a lot of time behind the laptop and I feel like I don’t exercise enough
-
I struggle with sending my homeworks to the teacher
Touch Points
Touch Points
Motivations
-
Loves video calling with her friends
-
Wants to have the best grades in her class
-
Wants to be able to participate in her online classes
Personality
-
Out going
-
Enjoy Reading books
-
Competetive
-
Non Tech savvy
Goals
-
To have an easy to work platform for participating in online classes
-
To be able to upload my homework easily
-
To be able to find the content that my teacher has thought today and download it
-
To import my handwritten notes to an online platform next to my teacher’s notes.
“I don’t like online learning, because I have to sit behind the computer all day, and working with technology is very confusing for me too. “
Ideate
USER STORIES
In order to begin brainstorming the functionality and features of my solution,I utilized user stories and epics to develop the core features for the application. This was done to ensure that each feature had a relation back to the needs and desires of the core users.
I created several user stories under different epics and initiatives. After categorizing the epics and user stories I chose 3 of the epics to solve in this project
Class Material Management
Uploading Assignments
Onboarding Students
These 3 epics were needed to have a basic application that would help students learn better and more efficiently.
If students had to use several applications for uploading and downloading and participating in online classes that would create a big mental load for the user.
Epic: Screen Time management
As
a parent
I want to
Be able to lock the screen whenever my child reaches the internet usage time limit
So that
so that I can control that she is not spending so much time on the phone
Epic: Managing Assignment
As
a student
I want to
upload my homework easier
So that
It can be done efficiently and before the deadline
Epic: Class Material Management
As
a teacher
I want to
share course content
So that
my students can view it on their own time outside of class
Epic: Screen Time management
As
a teacher
I want to
help my students manage their screen time
So that
they stay healty as they study online
TASK FLOW 1
The main step for creating an online platform that connects the student to the teacher is the video calling functionality. But how is this function different from existing apps? Adjusting teaching speed is one of the problems that teachers face every day. Not getting enough feedback make classes too slow or too fast for the students.
The best way to adjust your speed for each class is to get constant feedback from your students to know if they are understanding the content or not.
.png)
Slide to see my more task flows
Prototype
Sketches / Wireframes
It was time to get the concept on paper and start ideating by using inspiration on structure and interactivity. By considering specific elements from my inspiration findings, sketching was effective in brainstorming how these components may fit together and add to product functionality.
Sketches were great for ideas but ineffective to test so the wireframing process began. Building the first medium-fidelity prototype was the first step. I thought more deeply about how ease of navigation, personalization, and an overall sense of intuitiveness could be achieved through the combination of components and within page templates.
Flow 1
Question modal in the middle of the class
After walking in my user's shoes I have found out that 4 out of 5 of my users have problems with the speed of online learning. The communication between teacher and student is lower in online education and instructors can't get feedback on what speed is good for all the students.
So the question modal is the answer to this problem!
Teachers will ask a question from all the students while they are still hearing the teacher in the background.
They will answer the question and the teacher can adjust the speed to what students need. It will help the students think of this as a game and listen very carefully to their teacher.
You can hover on the sketches to turn them into the low fidelity wireframes.
Hover to turn the sketch into the wireframe
Flow 2
Downloading Class content
What is the main thing that all my users want and expect from an online learning platform? Downloading what the teacher has thought in the class!
Sharing the content can be very easy but organizing the content is pretty hard for a young learner. Imagine that after reading your handwritten notes for your exam you want to find the screen recordings of the class and the slide deck that the teacher gave to you!
The second flow is about finding all the content under their subject name. You can tap on the wanted subject and then see all the content categorized into smaller topics and you can find all the content over there, easy? Orange to rescue!
.png)
We don’t want to confuse students with a lot of options.
We want to keep the flow simple Using a lot of sub-categories may hide the main topic under it. So I didn’t include this page in my main wireframe.
.png)
No More selecting the download folder. Students can find the downloaded document in the download folder OR tap on see file when download is complete.
Flow 3
Uploading Assignments
All the teachers are giving a lot of homework and this is becoming chaotic! You don't know what is due tonight and what is all your homework.
You want an app that tells you your homework and let you upload them straight to the app.
You can send your assignments by taking a photo of them or writing it in the app itself. Not sure how to do it?
Ask your teacher or see the related notes again!
TEST
User Testing
After making the first version of my prototype, I tested it with 5 users whom all took on the role of my persona. The tests were meant to smooth out the flow and collect general thoughts about the design and functionality of components. Most importantly, I wanted to understand whether the digital product is understandable for kids and if they can work with it. After noting a set of necessary changes to make, I repeated the process with 5 different users and made some more alterations. Because Orange has a unique set of audience 7 out of 10 of my testers were kids between the ages of 8 to 12 that could empathy with my persona better.
.png)
I realized that some parts of my design were not easy to understand for kids that I have imagined in my mind. Particularly, this was seen in places with confusing language for a kid. and as kids don't have a lot of experience like grown-ups, some icons were new to them and weren't as obvious to them as it was for me. Thankfully, those I interviewed helped to bring me back to focus and I simplified wherever I could.
Prioritization Matrix
A prioritization matrix serves to identify the most important problems. This structured, objective approach helps achieve a step by step guide to make the changes while satisfying the varied needs of the user.
Prioritization charts give us a simple way to assess and analyze what is most impactful to the user and business, in a collaborative, disciplined way. That is why we have placed the problems in this matrix to help us understand where each of them stand as a matter of impact on usability and effort to fix.
I have fixed all the issues mapped in this matrix starting from easiest to fix and highest impact on my users.
You can see the some of the iterations that was made after 2 rounds of user testing and you can hover on each iteration to know the rationale behind the change.
.png)
I have prioritized user needs and put them into a matrix to have a clear road map that which problem should I solve first.
I did user testing one more time after solving these problems to make sure I made the design kid-friendly and understandable.
You can see the iterations I made and the rationale behind it here:
Hover on the priority matrix for more information
Iteration 1:
Not enough visuals
The Confirmation for in-class quizzes wasn’t as encouraging as what students expected it to be.
So the signs that indicate if the answer is wrong or right have changed.
.png)
.png)
Kids want pictures
Iteration 2:
Vague Navigation Bar
Simple Navigation bar
Previous Navigation Bar with not so understandable icons and small text
The new Navigation bar is bigger and has more white space and bigger text description for each icon
Iteration 3:
Easy Language
As users are young children that English is not their first language we try to keep the language as simple as possible so after some confusion in user testing these words has changed:
Deliverable Homework
Attachments Files
Collaboration Group Work
Lecture Class
Class Material Teacher notes
Description What you have learned
.png)
.png)
Easy Language
Iteration 4:
Better order for learning
Better order for learning
Having easy language in your product and organizing your data in your category is important for designing for kids.
That is why I have changed the layout of the navigation bar and made the order different.
I have included videos instead of screen recordings for visual learners in the app and Changed my notes to keep the text light and simple.
Iteration 5:
Complete flow, Complete test
Having a confirmation page and uploading made the user testing easier and helped most of the testing more clear.
Although I thought having an upload button will indicate the feeling of uploading something, the User tester didn’t think that they have completed the task due to the lack of a confirmation page.
.png)
.png)
Complete flow, Complete test
.png)
.png)
Hover on the iterations to see the reason behind the change
Refine
You can see work with the prototype here or get redirected to figma prototyping after clicking on the button
Flow 1
Question modal in the middle of the class
The main goal of this flow is to ask a question while you can hear the teacher talking and examine the knowledge of the students from the content that was just introduced in the class. This will help teachers adjust teaching speed that was one of the pain points that my persona was facing.
I wanted to make sure that they are no extra options in the video calling functionality and students can't see themselves.
The layout is very simple and it is easy to learn as this points to the moment that my persona was feeling confused in the experience map.
I tried to solve this problem after turning my interview insights to my persona's pain point and frustration. Having a kid-friendly and easy-to-work interface will help students focus on the material and learn more efficiently.
Flow 2
Downloading Class content
You learn a lot online, each teacher talks about different topics and you want to be able to download the content categorized by content in the application.
It has a simple layout and you can find 3 tabs for seeing videos, see your notes and the notes teacher has provided for you.
This flow can help my persona find the content easier and can categorize all the class notes in one place.
Studying for the exam and finding the material was one of the topics that came up in most of the interviews.
Flow 3
Uploading Assignments
You take a picture of your notebook to upload it, but between a lot of pages and documents, you lose it instantly. That is why for uploading assignments you can take a picture from the app to scan the page like a professional scanner and upload it straight to the application.
It was hard for young learners to find the pictures and upload them from the gallery when seeing the small thumbnail. That is why taking the photo immediately after writing it was an easy solution. We can add the technology that makes the scanned documents look better and easier to read.
Next Steps
Screen Time management
As sitting too long behind the monitor was one of the main problems that kids were facing in our interviews there is going to be a screen time management for kids.
Let’s play in Recess
As kids have to stay at home and this will effect their mental health we are going to make a tab names recess that let kids talk to each other or play online together
What about teachers?
We can make a platform for teachers to be able to see assignments and can see data about each kid individually.
Make it international
Having this app only in English will make it impossible for kids with another language to use it so we are going to provide a language selection in the app.
Key learning
The 8 weeks of working on this project were an emotional rollercoaster, with a mix of rewarding feelings along with doubts.
I had to learn how to focus on delivering projects and learned how to prioritize user needs and how to decide on features that I can deliver on time. Overall, my key takeaways are:
Listen more than talk
As a UX designer it is important to overcome the urge to decide from your user's point of view. You shouldn't make an assumption prior to testing and while testing the product, it is important to listen instead of leading the user in a path that you want.
Sometimes the answer that you expect from your user is very far from user need. So it is important to overcome your bias and let user guide you through her/his train of thoughts.
Don't assume anything.
Test it!
Testing change everything.
Something might look obvious till the moment that you see users can't figure it out.
When you look at something for a long time your eyes will get used to the screen that you see and won't notice the flaws. You will spend hours on a UI of a component that may not make sense for your user group at all.
Listen more than talk
Adding everything, even as small as a line, needs a strong rationale.
You need to have a user test support when you want to create something new.
Does it help the user?
Can this new feature effect the usability?
How will it effect my end user's experience?
These are the questions that you have to keep in mind when designing a feature otherwise coming up with a new feature that only make the application look better will effect your work as a UX designer.
