A UX Case Study- WhiteHat Jr
Redesigning the User Experience & User Interface.
Coding for kids, I know it sounds intimidating. But for real this pandemic has created new norms of NORMAL! 8-year-old learning how to make interface and space tech, I feel old already. Can’t even imagine the capabilities of Gen Z’s. But its always exciting to know the unknown. Let’s hope for the best.
Disclaimer- This is not affiliated with the official website/organization. This case study is solely for educational purposes, with my partner Sushmita. This is implemented under the guidance of our mentor Abhrojit Boral. All images are credited to the owners.
About WhiteHat Jr.
An online platform for children to learn fundamentals of coding — logic, structure, sequence, and algorithmic thinking, to generate creative outcomes like animations and apps. They are also taught data structure, app, and game development to machine learning and space technology.
How it all begin?
The idea for starting WhiteHat Jr came to Mr. Karan Bajaj when he was reading about the Industrial Revolution and how Mathematics hadn’t been a part of the school curriculum till then. “After the Industrial Revolution, every school had to create a new curriculum but it took them 10 years to implement that. I realized something similar is happening now. Today, consumer tech is at the center of every household but the school curriculums are extremely basic. Nobody is teaching children coding from an early age,” explains Bajaj.
Mission and Vision
In 2030, Artificial Intelligence and Robotics will touch 800 Million jobs. The world will split into creators and consumers. Their mission is to make kids creators in the new world with the first structured coding curriculum in the world for early childhood.
Learning the Fundamentals and becoming the curator of their future, that will to human welfare.
Making it Fun for the kids to learn new things and keep them engaged in the basics.
Inspire them to be a mastermind for a more sustainable life ahead.
Stakeholder Mapping
Teachers
A platform for a part-timer with flexible working hours, which keeps them engaged in their basics and help them grow as teachers and make a good amount of money at the same time
Parents & Kids
Parents are the main stakeholders here considering the age demographics of the brand. Most of the parents wanted their kids to join and learn to code and improve their skills with this period (6–14). They want kids to learn to code and enhance skills like critical thinking, logic, reasoning, and so on.
For kids, the platform should be engaging and fun to work on rather than a place to just learn and read.
Owner and team
Engaging more parents in the platform as well as qualified teachers, and make them realize the importance of coding at an early stage.
The company holds the bridge between the teacher, students, and also the parents. Make it easy for them to communicate it and engages in interactions and solve issues faced by both parties.
Motivate parents about technology and where it can lead their kids.
Understanding the Demographics involved
User Persona
Strategizing
The strategy used by Whitehat Jr is to attract parent’s interests on and how they can help them develop their children’s growth. One of the best ways to let parents understand that growth during childhood and teenage is very good for learning and enhancing the brain to greater levels. The age group 6–14 is very tackling and most of the time considering the Indian demographics, the decisions on life choices are taken by parents or guardians.
They have named a category called brain-based learning and how coding will help them to develop every area of convention like logical thinking, structure, creative thinking, sequencing, algorithm thinking. These all things subjected to the parental audience has helped them gain so much audience over just 2 years.
Growth
The growth of Whitehat Jr has been very uplifting for the past few years, also considering the growth not just in India but also overseas. Its recent collaboration with Byju’s let it also expand its consumers to a wider range.
Acquired by — Byju’s (300M)
Raised 10M funding in Series A from existing investors Nexus Venture Partners and Omidyar Network India
Involvement with the customers
Whitehat Jr made it very important to have proper communication with the parents and students. The company’s communication involvement has been very well projected including the daily infographics for both teachers and students.
● Free counseling for the parents and teacher
● Blogs by students visible to both parents and students about their work
● Forum for interaction in the blog for teachers and students
● Parent feedback is taken into consideration
● Updating stages of the course to the parents
● Course descriptors every month
Promotion
Whitehat Jr. didn’t promote a lot. It attracted a new wave of customers who wanted to see how coding for children worked. It started promoting only recently with established celebrities like Sonu Sood and Farah Khan
One of the main promotions done by the brand is the free trial and counseling for the parents. The free trial gives students the choice to understand coding and if they choose to work on it continue to join the course or not.
Competitor Analysis
WhiteHat Jr’s annual revenue estimated is 11M.
Vedantu- Platform where recently coding for kids was introduced. Its annual revenue estimated is 75M
Code Monkey- Platform for kids to learn to code. Its annual revenue estimated is 1.5M
Coding Ninjas- Platform for kids to learn how to code. Its annual revenue estimated is 6.5M
Understanding the Interface
The interface is very simple and easy to handle, but it is hard to understand the information hierarchy for the first time you enter. The website has three sides of it for the three stakeholders (parents, students, and teachers).
The main page of the website is to make them understand the purpose of the website and what coding is, how it is taught, the course introduction, and free trial. This side of the website is mostly for the parents/guardian for Whitehat Jr’s purpose.
Parents
The main web page will come under the parent’s side, as the main its not properly aligned to the structure.
The whole web page has followed a lot of different styles throughout the website including icons, typography, and pictures.
Teachers
The teacher is very informative and helpful but it doesn’t give you any direction throughout the website. The typography and icons are very different on this web page too.
Proposed changes
Proper information hierarchy in the main web page which is the introduction to Whitehat Jr. Removal Unwanted of unwanted data; like parental video in between the page, textures, pictures.
Following a grid, to make better space management and removal of unwanted boxes. Using one style guide of color. Making the web page more interesting with visuals for the parents to understand and dwell through categories. Using one typeface throughout the page and designating a specific style and font size to each of them. Considering proper leading and kerning.
Adding a virtual assignment for better guidance. Adding FAQs for parents to review other parent’s doubts and answers. Creating a new page direction for courses and curriculum. The children’s side of the page will be a lot simpler and easy to understand interface. Dashboard, calendar, and schedules at the top of the page for easy access.
Introducing recording. Every week progress will be available to check their performance. The teachers will improve in less information on the dashboard, and the navigation will be much easier. Considering the amount of information and simplifying them. Help Desk will be available for the teacher’s help and documents.
Information Hierarchy
The information hierarchy stated the most important to the least important aspects to be delivered through the website.
Navigation Flow
The navigation describes the flow of the website from the beginning to the end. The flow has to be easier to follow for the user end.
Style Guide
As the earlier interface had a lot of visual elements, we tried to reduce them so it could be visually appealing.
Wireframe
To get a clear visual image of the navigation, and also to lay the foundation of the prototype
Prototype
Now to give a clear idea about the website’s look and feel, this stage gets important.The colors have changed a lot on the website considering the them offline.
Videos
Designing for another medium
Phones are another medium and the most used device when we talk about surfing. The responsiveness of the website is the deciding factor whether its properly coded and designed.
Conclusion
The journey from finding all these interfaces fascinating to learning how to create them has been a roller coaster ride. It made us lose our minds and even made us happy when we see how it had turned out to be.
Thanking our mentor Abhrojit Boral and Rajeev Kumar for guiding us through the journey. And my dear friend Sushmita for bearing me all this while. (Thanks to you sushi!)
The case study has been done in collaboration
