Figma
One month contract
Competitive Analysis, Synthesis, Prototyping, Journey Mapping, User Personas
Product Designer and Research in a team of 4
The AI Education Project is a nonprofit organization that strives to increase equity and accessibility in AI education. They do this by providing curricula to high school students from marginalized communities, disproportionately impacted by AI and automation. Currently their curriculum is hosted on Google Classroom, however, they are experiencing some emerging problems.
In a month-long project, I collaborated with 3 other designers and researchers to create a streamlined experience aimed to improve student's' engagement with the AI education curriculum. Over the course of this project, we partnered and maintained communication with Ora Tanner and Ehrik Aldana, both Co-Founders, to identify what opportunities and advantages a new platform would offer their students.
My team and I created a learning platform that integrates and improves upon the most used features of competing products to solve user pain points. The result was a platform that keeps the student focused, never having to leave or switch tabs.
UX research, product design, user testing/validation
Initial research helped us focus on better understanding user needs, and conducting an audit of the current user journey helped familiarize ourselves with the curriculum we were designing for. We leveraged these insights to solidify a problem statement and identify opportunities for AIEP.
Designing solely on Figma
Solely focused on the student persona (for now)
Designing for a desktop client
Four weeks to design a proof-of-concept
The very first step in my team's process was to conduct an audit of the current user experience on Google Classroom, taking note of UX elements we found useful, elements we wish we saw, and frustrations we had.
Meeting with our project stakeholders, my team and I were provided with existing metrics, user feedback and other data collected from the AI Education team. This helped us validate some of the concerns we had when auditing the existing experience. This was also useful to reference when conducting our own external research. Right off the bat, there were many pain points to focus on.
NEED A SINGLE LOGIN Having to go through multiple Google Forms for the lessons (creates somewhat of a disjointed learning experience). For instance, students must enter their first and last name for each activity they complete in order for teachers to be able to track their work.
CONFUSING SUBMISSION PROCESSES Submission of student work within Google Classroom for specific types of content has been confusing. For example, student's have problems with knowing how to respond to discussion prompts on a discussion board or uploading files seems to be an issue for some.
NO PROGRESS BAR There is no way to track student progression within the course with Google Classroom. Would like a student at any given time to know how much of the course they have completed and how much they have left to go.
The aesthetics is part of the student experience is missing. Each activity is only accessible by clicking on accordion-style drop downs. Would like students to visually be able to see what the course looks like instead of titles of each module.
On certain occasions, students have issues accessing the forms if the permissions for sharing have been changed.
The users we were accounting for were high school students, typically 13-18 years of age. Furthermore, the AI Education Project also aims to serve learners from disproportionately impacted communities. This includes those from low-income, rural communities, those who attend schools without a lot of dedicated CS classes, and those who have limited access to technology
With the average demographics of the typical AI Education student in mind, our team conducted some further research on our target users to understand what limitations they may face when learning as well as they access to technology in the learning space. Through this extensive research, we found that students suffer from not being able to have consistent platform to learn on.
The next step in our process was to analyze and map out the current AI Education user journey. We did this to help refine our problem statement and fully gauge the scope of the project.
In our analysis, we found that we found that the most negative stages in the current user journey were the submission process and ability to track learning progress. To elaborate, for example, confusing submission forms hindered users' ability to successfully turn in assignments. On the other hand, users tended to have a negative experience tracking their progress as next steps were not often made clear. Another major stage in the user journey that reflected negatively was the learning stage as a whole. The road bumps in this stage were that it is hard to navigate the current platform, there was no instructional help, and it was difficult managing assignments and lessons.
Our team came to the realization that the fundamental issue we needed to target was related to the overall flow of the course curriculum. Because links from the course curriculum led to a superfluous amount of tabs, we found that students were getting distracted and ultimately disconnected from shuffling between it all. Thus, engagement with the curriculum declined as a result. From our journey mapping, our team was able to define our problem statement:
Our team's research stage continued by conducting audits of existing Edutech learning platforms. In our analysis, we found that a several of these platforms favored UI elements that continue to keep students engaged and encouraged.
clean and easy to grasp cues to track progress in courses
relevant metadata to cater to specific user needs/interests
learning material being organized into sections to make content more digestible to students
clean and easy to grasp cues to track progress in courses
After synthesizing the insights gained from research, our team went on to free brainstorming. We split up and created some initial sketches on our own before coming together to consolidate our ideas.
a landing page/course overview
individual lessons page
transitions between lessons/pages
course completion
Once we consolidated our sketches onto a single board, we found a lot of similar themes between the four of us, letting us know that we had a similar process. This helped us come down to three screens to focus on and bring to mid fidelity: course overview, lesson view, course completion.
Once we figured out which three screens we wanted to pursue, we transformed our initial sketches into mid-fidelity screens. Key features we wanted to include on our new platform were a course timeline on the landing page, the ability to expand and collapse lessons, indicators of learning progression, learning content fit on one page, and a message of encouragement at the end of each lesson to promote continued learning.
After creating our mid-fidelity mockups, we conducted some usability testing with selected participants to gain some more feedback on the decisions we've made. In these tests, we asked the users to perform specific tasks from our flow to observe how well they were able to navigate the learning experience. We noted their struggles and elements of the experience that made their navigation more efficient, as well as documented verbal feedback.
Find the next due date
Move onto and complete the next module
Select an activity to do once finished with the course
Users were confused with the due dates:
- Ambiguous text resulted in redundancies when it came to due dates because some modules had the same due dates as lessons
- Opportunity: refine text to be more specific
Some users had trouble locating the next module
Users didn't know where the "try something new" button would take them
- Opportunity: Rather than leading a user by chance, give them a clear direction (come up with a specific action)
Finally, we took the results from our usability testing to refine our designs and iterate up to a final deliverable. Our designs showed that the user experience for the AI Education can be narrowed down to just a few clicks, eliminating the distractions and unnecessary tabs that came with the existing platform.
Important Due Dates: In our mid-fidelity prototype, the initial concept was that the "current tasks" box would appear if the user hovered over a lesson. By having a "modules due soon" section in a fixed position at the top of the screen, users are presented with a sense of urgency. However, fun and delightful visuals placed around these dates would make these tasks seem less daunting.
Expandable Lessons View: Lessons that a user is currently learning would be expanded to showcase their progress and lead users between the different modules more efficiently. Since users want immediate access to the modules they are currently working on, the current lesson is visible while other lessons are presented as negative affordances.
Lesson Due Date: Previously, the "next due date" was ambiguous in whether it was for lessons as a whole or individual modules. Now, there is a clear distinction between module due dates and lesson due dates.
Lesson Descriptions: users are informed about lessons before delving into them. This gives users a preview of what is to come.
Learning goals: Learning goals for each module are clear and visible to give purpose to each lesson and help motivate the user.
Delightful Visuals: We sourced fun and playful visuals from undraw.co to make the learning experience more pleasurable .These visuals carry the same theme and are present throughout the whole experience.
Everything in One View: All of the module's content takes place on one scrollable page so that users never have to leave or transition back and forth between different pages. This eliminates the previous pain points of having superfluous tabs.
Expandable Lessons View: To keep up with the users' need for visual consistency, we refined the notes section to mirror the course outline sidebar in both its functionality and presence on the page.
The purpose of this page is for the user to take a moment to celebrate their learning milestones and achievements. We wanted to make sure students felt validated in their hard work and efforts.
The pitch submission affordance was added to the page to fulfill the users' need for direction. By replacing the "try something new" button, students have full reign over how they want to move on and what steps they want to take after completing the course. Now, in addition to course suggestions and upcoming events, students have the ability to submit a pitch to a competition hosted by The AI Education Project -- which is also the next step in their curriculum plan.
After working on this project for four weeks, my team and I presented our work and interactive prototype to the AI Education Project. The next steps for AI Education included reaching out to a pro-bono developer to build the new platform using our prototype.
Reflecting on this project from my personal experience, I learned that designing on a team remotely required an extra level of communication and organization. In order to maintain a shared vision between four people, it was essential for us to meet over Zoom before every iteration and make sure we effectively express our individual ideas. This was a great opportunity for me, because now I can say that I am comfortable tackling projects under remote circumstances.
