You Can see every step of the orange journey here!
sit back tight!
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
Secondary Research
As the COVID-19 pandemic has spread across the globe, a majority of countries have announced the temporary closure of schools, impacting more than 91 percent of students worldwide – around 1.6 billion children and young people.
Never before have so many children been out of school at the same time, disrupting learning and upending lives, especially the most vulnerable and marginalized.
How Might We
How might we facilitate more effective and sustainable online learning experiences for students and teachers in developing countries?
How Might We
Primary Research
To understand the real problem and pain points of children in developing countries, I conducted 5 interviews with children between the ages of 8-12 who experienced online schooling due to COVID. I wanted to understand their feeling toward online learning and explore what are their needs and expectations from an online learning platform.
Hover to play
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
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. “
Experience Map
I focused primarily on Hanna's needs when designing a task flow. Using an experience map, I examined her overall journey more closely, noting the highs and lows as she tries to learn online spotting areas of opportunity among the dips. The map provided a bird’s eye view of the entire experience, helping me to prioritize actions strategically.
I found out that Hanna's journey is full of frustrations, from joining the online class to uploading the assignments can be hard for a young learner.
So the result should be more than only 1 flow.
Situations with the most frustrating moments were:
It was hard for Hanna to remember all her classes times and days.
All the video calling functionalities were confusing for her. She didn't know how to use each of them and what will happen if she taps on them.
Hanna Needed her mom's help to join online classes.
She couldn't find the material that the teacher has uploaded for her and it was hard to gather all the material needed for studying.
She didn't know what is the homework and couldn't manage to do all of them on time.
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
Brand Name
For naming an application with the user in mind, we have to remember our users are kids that English is not their first language, and pronouncing hard words may be hard for them.
Choosing a name that can remind the child of an actual thing will help our users remember the name of the application.
That is why I have chosen the name ORANGE.
It can help me with branding the application and put some restrictions on the application’s color palette.
It indicates a healthy option
It is easy to remember and pronounce
Both meanings are kid-friendly and simple
_gif.gif)
App icon
If you are searching for an app with the name orange you want to see both the color and the fruit.
Our app icon will always be up against dozens of other apps, whether a user is browsing the app store or scrolling through their home screens. Create an orange icon that’s instantly recognizable on search listing pages and a user’s screen can help them find our app easier.
I want to focus on one element rather than trying to jam every feature into a tiny icon. I want to go for instant recognition with a big orange icon — if someone needs to squint to make out the details of your icon, I am not accomplishing my goal.
Using vibrant colors as orange will help my app stand out both against the other apps a user has installed and against his or her background image.
%201.png)
Moodboard
The photos are giving the feeling of being happy and colorful. They want to show you how kids are joyful and the bright colors remind you of being a child one more time.
Wordmark
With a specific group of users in mind, the wordmark of my application can be more than just a combination of letters. I can include some illustrations or shapes that can help my users have a correct mindset about what they should expect when opening the application.
but after exploring some font ideas I have decided to pick a font that is round and doesn’t have a lot of edges that will remind the user of the fruit orange.
Being playful with the wordmark and including an illustration instead of “O” can remind the users that this app is designed for kids and build the right mindset about anything that they see throughout their experience with this brand.
Color injection
As I’m starting to create prototypes of app screens and illustrations, I wanted to do some research on how I can use colour to design effectively for children.
My target audience for my app is children of primary school age, particularly 8–12 year olds. colour is an important factor in the design of any product, as it conveys a certain emotion and can therefore influence or motivate the user.
I decided to look into using colour when designing for children.
I think one of the first things I automatically thought when I knew that I would be designing for children was that everything needed to be bold and bright to keep their attention. I’ve come to realise, however, that this could actually be harmful to the UX. If everything is bold and bright, users (kids and adults, alike) won’t be able to distinguish interactive elements from static elements, which would result in them aimlessly clicking (or banging on a screen) to find the interactive spots.
Children love colours, so there is more leeway here with being able to use bright colour-palettes or just more colours than what would be appropriate for an interface designed for adults.
Taking a lesson from how children learn right from wrong; feedback is essential. Colour can be used to help them understand that feedback. For example, an orange color in the app can indicate that this place is clickable and will redirect you to another page.
The consistency of orange CTAs will allow them to make visual links between where is clickable and what will happen if you click on orange rectangles all through your experience in this app.
So for gathering some insights about which version and color can make the tapping and interacting more obvious I made various versions of each page and asked some users to participate in dot voting activity. This could help me discover more than 1 version and helped me overcome my biases. The version that you can see are the ones that was chosen but you can see other options if you click on the button.
.png)
.png)
.png)
Click on buttons to see other versions of the same page.
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.
Marketing website
To approach the challenge from a different perspective, I created a marketing landing page for Orange. Although the application is for kids the marketing website targets busy mothers. We want to talk about the functionality of Orange for parents that don't have time to read a lot of text and we try to make the layout as simple and scannable as possible.
After gathering inspiration, I began sketching combinations of interface components, experimenting with hero images, testimonials, contact sections, and appropriate placements of Call-to-Action buttons.
By looking at variations of both mobile and desktop alternatives, I wanted to ensure that the structure of the page moves well responsively as it shrinks in viewport size. So I worked digitally to create a content flow diagram for two viewports.
Although I wanted the marketing website to have a consistent tone with my application I wanted to make it simple too.
So I came up with 3 versions of the marketing website and chose version 3 because while it was scannable, kids could enjoy it too!
Responsive Design
After gathering inspiration, I began sketching combinations of interface components, experimenting with hero images, features sections, testimonial carousel, newsletter subscription, and appropriate placements of Call-to-Action buttons. By looking at variations of both mobile and desktop alternatives, I wanted to ensure that the structure of the page moves well responsively as it shrinks in viewport size. So I worked digitally to create a content flow diagram for two viewports (desktop and mobile).
Going forward
Alternate Platform of Choice
Taking into consideration the needs of my personas, I translated the design of Orange onto an alternate platform - the TV. This was done with the purpose of allowing kids to see the content bigger on the screen, further adding to the intuitiveness and ease of use of the product. As parents prefer their kids to watch TV instead of sitting behind the monitor, having a TV interface would allow Orange to serve kids' and parents' needs better.
Design Impact & Future Thinking
The idea of Orange originated from online learning frustration for kids, particularly in the current quick transition to online education affected by the Covid-19 pandemic. It was happening fast and I kept wishing that I could play a bigger role in their learning.
Orange aims to reduce the frustration of kids, provide the support and resources they need to digitally learn better and allow them to participate in online classes easier, and let them use an application without their parent's help.
Orange offers all the required features that a young learner might need from online learning. Often, these offerings seem fragmented and found across multiple channels. Over time, my hope is that kids can learn how to cope with online learning and Orange plays even a small part in making this happen.
Shuffling the Tarot Card Deck
While I focused on a best-case scenario, it’s always important to start considering how I would handle some unforeseen events if they happen in the future.
Tarrot cards of tech are a set of provocations designed to help creators more fully consider the impact of technology. They will help me foresee intended consequences and can help me reveal opportunities for creating positive change.
Answering the "Service Dog"made me think of how Orange will affect life of underserved population.
My targeted user is the group of students that have access to education but have problem managing the classes that they attend. Now if we extend the user group to students that don't access to classes and school, the process won't change that much.
The number of students in a class won't affect the teaching and I can add a seminar and public URL section for each class that can be given to students that are not able to pay for them.
They might not answer to in class question modals but can see the content and can participate in classes or watch the video of the class later due to time-zone difference.
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.
