INERDE ACADEMY - A UX PROJECT
jan - may 2021
THE TEAM
Shine Kim (Project Lead),
Iha Jain (Designer),
Kathryn Minor (Designer),
Masha Zaytseva (Designer),
Elaine Zhang (Designer)
THE INCENTIVE
iNERDE Academy was built over the course of one semester for a student led design studio, Scout. We were paired with a client who had dreams to inspire and empower the African youth to learn the skills necessary to prosper in the evolving world. iNERDE envisions that they will become the essential platform for effective STEM education for all of Africa.
Currently, iNERDE Academy is operated in actual classrooms. iNERDE partners with schools and after-school programs to run their preset STEM curriculum. Their curriculum is set on a pre-requisite basis, so students are encouraged to participate again every year until all skills are acquired. Obviously, with their ambitious vision, this method of operation is unsustainable for iNERDE as an organization.
We were given the important task of ideating, testing, and designing this essential platform: the learning web application that all students, teachers, and admin would use to delegate the iNERDE curriculum.
WHAT IS INERDE ACADEMY?
iNERDE Academy is a personalized course and learning platform catered specifically towards African K-12 to empower youth with opportunity. We built iNERDE Academy on the basis that in the long term, it would be the primary hub for students in Africa to maintain the tools and skills for STEM-based development.
We defined the scope as follows: In the span of a semester, we would ideate, design, and iterate upon a set of high-fidelity wireframes. These wireframes would include all the possible interactions a user might have with the interface after logged into their account.
Within iNERDE Academy, there are three separate users: the admin, the teacher, and the student. For each of these users, we built an interface that accommodates their needs and tasks. For admins, the interface allows for ways to control the course curriculum, add/remove users, peek into currently active courses, facilitate the teacher hub, and more. For teachers, the interface allows for easy communication with students via global messaging and a class-specific discussion board, easy grading, quick scheduling via an office hours calendar, a way to become trained for newer iNERDE courses, and more. For students, the interface allows for easy communication with other students and their teachers, easily viewable modules and assignments, a task reminder, a separate "Games" interface for independent learning, and more.
Below are a few recorded demos of these interactions.
Read through the process to see how these came to life!
THE PROCESS
Getting started on the project was definitely an uphill battle. We started with virtually nothing except for iNERDE’s pre-existing brand and brand voice (given to us through iNERDE’s website). In addition to this, our client would tell us what he envisioned iNERDE Academy to look like.
Some key words from our first few meetings were:
-
“So fun that kids keep coming back for more”
-
“Similar to Facebook”
-
“Addictive”
-
“Can easily collaborate and communicate”
UNDERSTANDING AND DEFINING THE SCOPE
From the key words in the previous section, the goal of our project would be to create an interactive space for students of all ages to learn and be motivated to learn.
After finalizing our high-level project goal, we dove straight into research; we were starting at an empty slate. The first order of operation was to conduct some competition research––what are some existing examples of applications that fulfills our client’s desires? What could we take away from these examples?
The four biggest learning apps we studied. From the left to right include: Canvas, Google Classroom, Khan Academy, IXL Learning.
Moreover, we conducted some general user research before sketching out our first iterations––who is going to use our application?
At this stage, we were also very careful to communicate with our client to understand how their learning curriculum takes place in real life––how does the curriculum get made? How do teachers get onboarded? How do students interact with each other and with their teachers?
A collection of High-Level User Stories.
From our first stage of research, we highlighted four important points of observation:
-
A learning application with 3 different types of users: the student, the teacher, and the admin.
-
The only user with the authority to make and edit the course content is the admin. The teachers would not be responsible for making their own content, they would just need to be trained (through the app) on how to effectively teach the content.
-
Interactivity and cross-communication is really important to learning and should be encouraged within the application.
-
Students should be able to learn individually outside of their class - if there are fast learners, the interface should accommodate them.
FURTHER USER RESEARCH
We took two practical measures in conducting user research: user interviews and user questionnaires. We first met up with an iNERDE affiliate, a high school student in South Africa named Ahmeel. Our goal going into the meeting was to better understand the learning and social culture of the region. Talking to Ahmeel proved helpful in understanding his personal experience and excitement for a platform like iNERDE Academy, but we wanted to gather more concrete pieces of evidence as well.
Assuming the access barrier to internet within the majority of students in South Africa, we built out a printable questionnaire to better understand the needs and wants within the students. These questionnaires were printed and distributed on our client’s side to over a hundred students, and we received about 90 valuable responses!
We were also interested in the experience of teachers, another user group within our application. While we did not receive nearly as many responses from teachers as we did students, we were still able to discern the core responsibilities of an iNERDE teacher and how they communicate with their students on a day-to-day basis. There were definitely areas where we could see how an interface could improve the teacher experience through better means of communication and a smoother onboarding process.
Visual Representations of Gathered Data from our Student User Questionnaires
Some main insights gathered on the student side were that students generally don’t spend time outside of class learning course material, students communicate with each other and their teachers mainly through personal means (Whatsapp, SMS, phone call, email), and students generally enjoy competitive activities such as sports and video games.
EXECUTING THE WIREFRAMES
To flush out the necessary components of our web application, we started with user flow diagrams and a general site map. This helped our team comprehend the complex relationship between different interfaces as well as the access/relationship barriers between the different user types.
Working Site Map of iNERDE Academy
When starting on the first draft of low-fidelity wireframes, each member of the team took on different design roles so that there could be a better balance of individual responsibilities within the team. The responsibilities were split by retrospective user views: Admin, Teacher, Student Modules, and Student Games.
This strategy proved to be effective because all of our team members could introduce creative solutions related to their personal passions to the project.
After laying out all of the components and ensuring that the navigation was in-tact, we went through a round of user testing to make sure that our users could understand the interface. While we were undergoing testing and further iteration to solve evident problems that surfaced through our testing stage, we also worked on tightening our brand design strategy.
Even though branding was not a promised deliverable to our client, our team worked extra hard to come up with a theme that was both friendly and educational. We standardized the brand colors as well as the call-to-action (CTA) button strategy so that our interface would look and feel consistent. We also agreed upon the brand typography and header sizes to maintain visual hierarchy within any written content.
Snippets of our low-fidelity wireframes
BRANDING
iNERDE Academy Brand Strategy 2021. Includes typography, colors with their HEX codes, and iconography.
While we unfortunately did not have time to run through an elaborate logo development session, we refined the pre-existing iNERDE logo and developed a friendly bee-robot mascot to pair alongside all iNERDE materials.
HIGH-FIDELITY WIREFRAMING
After all this, we finally moved onto high-fidelity wireframing. We continued with the roles that were previously given, but each member was additionally able to take on designing the different high-fidelity components within the application. For example, individual members were responsible for building out the messaging component, discussion board, calendar component, modules, games, sidebar navigation, office hours, etc.
Currently, our team is still iterating on the details within the specific components of our interface. We came up with some super cool design solutions, and we can’t wait to see what becomes of them. A few of us have also partaken in some developer meetings to talk about how our work can be picked up in the development stage.
As the project lead, I am receiving emails here and there to discuss our work and answer any questions regarding our designs and am foreseeing continuing to do so for the next year.
WHAT'S NEXT FOR iNERDE?
Overall, we fostered some really great internal and client relationships within this project. Each meeting was filled with so much laughter, innovation, and a great system of knowledge transfer.
While we wrap up the deliverables for this project and prepare to hand it off to the developers, we understand that there is still some design work to be done. First of all, the iNERDE logo can be further developed so that it can stand alone (without the mascot) and still represent iNERDE’s mission. Furthermore, because we worked on developing a new brand with new colors and new typography for iNERDE Academy, it would make sense for iNERDE to update their brand presence on their general website to reflect this change.
Because of the great relationships cultivated from this project, our team is in talks of picking up these new deliverables as a separate freelance project. We are so proud of what we have been able to accomplish within the span of this semester, and we can’t wait to see our work come to life in the near future!