.png)
A single platform for parents to find different online activities for their kids and enroll them without wasting their valuable time.
Skills
Ideation, interviews, affinity mapping, empathy mapping, user stories, user flow, sketching, wire flows, wireframing, usability testing.
Tools
Figma, Miro, Marvel
Timeline
3.5 months
Design Team
Solo UI/UX Designer
.png)
Motivation
The inspiration behind this project was my Daughter. during the pandemic of 2020, I struggled to find reliable, ideal and instructive online extracurriculars activity for her. So many options puzzled me.
Discovery
1. Problem
It is important for parents to understand and recognize the activities their children are gravitating towards. For working parents or parents with more than one child, it is always a struggle to find time from busy schedules to look and take their kids physically to different extracurricular or educational activities outside school. Parents also struggled to adjust schedules at the cost of skipping sessions. Furthermore, the unprecedented times we have gone through recently where socializing was next to none, the kid’s socializing skills took a toll.
2. Brief
E3 is an application where parents find all the different kinds of online extracurricular activities for their kids.
3. Target
The E3 is designed for the parents like me and many others who believe that extracurricular activities are a crucial part of a child’s overall development. Developing a hobby or some time profession out of this helps children in long term.
Discovery
Research
4. Research
Secondary Research
For this, I tried to look for literature and articles that reflected the need for extracurricular activities for kids. For instance, Massoni (2011) stated that the participation of students in extracurricular activities provides social interaction between students of similar and different interests and backgrounds. Similarly, Ritcher (2002) implied that students who participate in extracurricular activities behave well socially and are less likely to engage in antisocial elements.
Furthermore, scientifically online activities do help with early development and one’s progress as evident by systematic review by Griffith, et al. 2020, to use different online applications as a tool for early development in an academic setting and interactive applications may heighten the progress towards academic learning.
Primary Research
When i started my research I have to collect all the information via internet because of the pandemic. To collect the direct information i choose two methods of primary research: Survey and interviews. Interviews are open-ended question. These kinds of questions help me gain in-depth insights into opinions and perceptions of respondents.
-
Survey
Because E3 is designed for parents, so I created a screener survey and posted on the different social media platform. Got 36 responses and among them, I choose 5 for the interview.
-
Interview
To better understand other parents’ needs and how they look for an online class for their kids, I conducted five interviews. They all were moms. 3 of them were full-time moms and 2 were working moms. I ask questions regarding their preference for online classes, how they find the online classes for their kids. What are the things they like and don’t like when looking for an online class?
These are some of the actual quotes from my interview session.
 Mrs. Travadi“It’s very difficult to find online classes for the kids.” |  Mrs. Tariz“Online classes give me variety and flexibility.” |  Mrs. Keilly“I like the convenience of online classes” |
|---|---|---|
 Mrs. Fadime“I think it will be popular in the future.” |  Mrs. Varadhrajan“Online classes are mushrooms!” |
5. competitive Analysis
Used Jacob’s usability heuristics for the competitive analysis. Evaluating how other apps use consistency and standards, recognition, user control, and freedom, and aesthetic and minimalist design was a great way to learn what to do and what not to do with E3.
Major Discoveries
-
Consistency is the key. All websites provided information on different classes, logos, dimensions of visuals such as pictures, and uniforms.
-
Icons should be familiar to the users. Too many variations will be confusing and misleading.
-
The design should notify users about their current status and what will be their next step?
-
Quick emergency exits make users safe.
-
The design should be aesthetically pleasing at the same time and should be very minimalistic. Too many elements and pictures distract users from primary information.
-
A clear error message is very important. What is more important is preventing the error in the first place. In the signup window, there are examples like full name and email address. So users will easily recognize which field they are working on right now.
6. Affinity Mapping
Affinity mapping was an eye-opener at this point. I saw a group emerging and a familiar pattern in my interview process. I created 5 main groups the importance of online activities, the good things about online classes, not-so-good things about online classes, how you find out about the online class? What are the obstacles in online classes?
7. Empathy Mapping
After completing the affinity map and assessing themes from my user interviews, I created two empathy maps: working parent and stay-at-home parent. I created an empathy map for each group, underlining what the user is thinking, saying, doing, and feeling, as well as their pain, and gain points about kids’ online extracurricular activities.
8. Personas
To gain a better understanding of my users I created personas. The characteristics of these personas are mirroring the parents I interviewed during my research. This helps to keep the project anchored on the real users and their toil to find online activities for their kids.
Budget-Friendly Mom
Overachieving Mom
9. Problem statements
(How might we...)
How might we make the process of searching online classes for parents much easier?
How might we make searching for online classes less time-consuming?
How might we show the online class source is more reliable for parents?
How might we categorize different online classes?
How might we make the online class enrollment process easier?
Design and Ideate
10. User Flow
Creating the personas and being empathetic to their needs, I created Userflows to understand how they would individually work through the app to solve their problems. For this project, I created 2 red routes.
1. The enrollment process flow.
2. change the enrolled class date flow.
Describe your image
Describe your image
Describe your image
11. Sketching
Sketching first allowed me to gain a general insight on what layout will work before putting my ideas into a digital platform.
 |  |  |
|---|---|---|
 |  |  |
Guerrilla Usability Tests
I conducted a guerrilla usability test after creating a ruff sketch. One day I invited a bunch of my friends for dinner and explain the process. Gave them a couple of scenarios. I receive so much positive feedback and some suggestion as well and that helps me further a long way.
Changes After Guerrilla Test
-
On the available time page, the button “register” was confusing to the users. So I change it to “select”. And then add the “enroll now” button.
-
On the class information page, information about the teacher was missing so added later on.
-
On my cart page, there were buttons like remove and edit, users were getting confused about what were buttons’ functionality? So I went ahead and remove them both.
-
Re-design the payment method page.
-
Because I was planning to design a native mobile app. The sign-in/sign-up page should come first.
-
I designed a progress bar and decided to put it on each page.
12. WireFrames (lo-fi)
After doing necessary changes in my sketching, I created refined wireframes for each red route.
13. Mood bord
The Mood board was inspired by pictures I saw one day. And I like the cool and calm colors. The attributes of the brand are trustworthiness, time savvy, fun, anytime and anywhere.
Images and color inspiration
All the images provide us a clear picture of this company’s sole focus; kid’s online education and extracurricular activity platform. The imagery depicts how parents could engage with their kid’s activities and play active roles. The imagery shows the online activities are fun specially carried out in their own environment.
The chosen imagery is colorful and designed to make it appealing for kids and the design with laughing characters makes the activity lively and more engageable. The educational activity page, sign up and information page is designed with a formal outlook to gain trustworthiness from parents enrolling their kids. The icons define going from one step to another and concisely give an idea of steps in the process. The pictures put faces to names.
14. Style Guige
In this step, I created the E3 logo, grids, typography, colors (primary and secondary), iconography, and UI elements.
15. Final Visual Design
These are a few screens of my final design. And below are the links for the 2 red route prototypes. (give it a try!)
Some positive quotes from the testers (just a few)
Enrollment Process Route
Change The Time Route
16. Validation
So the final piece of the puzzle left was to test my design to actual users. Created test plan to user test and validate. The testers were given some tasks to work through as well as directed instructions.
These are the changes I have made after doing two rounds of the usability tests.
-
Change the color palette
Though the colors were matching my brand personality and attributes they did not pass the WCAG. so I need to make necessary changes regarding that. Colors like pink and yellow were very hard to read on white background. Like the pink heading was not working I changed it to dark grey. The same goes for the hyperlink.
-
Add filter option
In the first round of usability tests, two of my testers mention that they want to filter the result by age. And so further I added the “sort by” option. When they click on this icon it leads to the popup window and they can filter their result by price, age, newest class, our top-rated class. On the second round of usability tests, they all really like the sort by option and they understand the icon without me telling them. Here is the pic of that design.
-
Redesign the progress bar
While doing user testing users like the idea of a progress bar but it was very chunky and did not represent the E3 looks. I got inspired by a couple of progress bars on the internet and design this one. And now it looks much to refine.
-
Change some icons
Icon like share and like were in yellow color. They were not visible on white background. 2 of my users had a hard time finding them. So I decided to go with more natural colors for them.
-
Redesign the home page
Most of my user’s got confused by the home page. There was a big picture of kids’ colored hands in the middle and they kept asking me questions like what this pic is for? Some suggested that they wish there were some free class categories or the most popular class so they don’t have to search or look furthermore. The look of the home page was more of a website.
Overall, parents that recruited for either the research phase, the design phase, or the validation phase really liked the idea of this app and said they would use it if it were to be developed.
Some positive quotes from the testers (just a few)
“If It was a real app I would definitely use it.”
“Upcoming class was very easy if I want to change my registered class.”
“I like that you put so many search options like categories, search by price, and search by time.”
“Meet your teacher before you enroll your kid into that’s class was very thoughtful.”
“Like the thank you note and confirmation that I already got an email about the enrolled class.”
17. Conclusion
This whole process was very eye-opening and interesting. I really liked the research part of my project, being an extrovert I love to talk to people, and in research, I got the chance to do that. Not only did I meet so many amazing people but they gave me so many insights into my project. while designing E3 I learned that the first ideas of the app are just the beginning of the process. Usability studies and feedbacks influence each interaction of the app’s design.
The next steps for E3 will be more usability tests and more iteration.
While doing usability one of my users mentioned what happens if I cancel my class? Do I get credit or get my money back? I will work on that in the future.
It gives me so much joy that E3 will help to solve the current problem that parents face to get their kids into extracurricular activities and would play a key role in the active participation of parents within their own environment wherever they call home.