TechSavvy
Developed an accessible and affordable gamified platform for users to have access to technical learning tools.
Context
Problem
Covid-19 has disproportionately exacerbated low-income families, especially communities of color across the country from economic losses to educational setbacks. Distance learning is harder to implement for students in certain groups, including students in the youngest grades, students with disabilities, and students learning English.
I was brought onto this team to tackle an issue that could promote digital equity and accessibility. Built in just 4 days, this responsive gamified e-learning site allows children from K-12 to engage in technical skills such as coding. This is all in an effort to increase critical learning skills, boost self-esteem, and allow low socioeconomic individuals access to education. My contribution to the team was the overall design of the app, writing the copy throughout the interface, and conducting usability testing.
Digital Inequity is the disparity in access, knowledge, and ability to use digital tools and technology, particularly harming lower income individuals and minority communities. Across 24 states, only 35% percent of high schools in the US teach computer science. In addition, Black and Hispanic students, students receiving free and reduced lunch, and students from rural areas are less likely to attend a school that provides access to this critical subject.
Coding in the classroom is linked to improved problem solving and analytical reasoning, and students who develop a mastery of coding have a natural ability and drive to construct, hypothesize, explore, experiment, evaluate, and draw conclusions. By promoting code literacy, schools could improve education equity, offer inclusion for students with ASD, improve STEM proficiency, and build neuroplasticity associated with multilingual education.
Solution
In an effort to help solve accessibility and reduce digital inequity, we created TechSavvy, a website that allows K-12 students free access to computer science lessons, general tech skills, and design lessons because we believe that everyone should have equal access to education regardless of race and income.
View prototype here
Role
Product Designer
Project Manager
Team
4 UX Designers: Sally Yang, Morgan Seaman, Marina Zalman, Meeson Park
2 Software Developers: Dustin Greyfield, Martin Fitzpatrick
Tools
Figma, Adobe, Maze,
Zoom, Hotjar, GitHub
Project Outline
Competitive Analysis
One of the next steps in our research was conducting a competitive analysis on the coding bootcamp for kids industry feature inventory and task analysis.
From our feature inventory, we decided that creating a gamified learning experience, implementing an accessibility settings throughout the site, and join for free with no membership necessary would be most beneficial to TechSavvy.
Meet our User Persona
User Flow
Mid-Fidelity Prototype
View the clickable prototype below:
When going into our designs, we focused our efforts into creating a streamlined flow to help users quickly and confidently sign up and go through the onboarding process and lesson plans. Here are some of the concepts and principles we implemented in our prototype:
Gamification
Provided percentage progress and lessons under the curriculum to increase motivation and engagement.
Organization
In order to determine which level would fit for the user, we set 3 levels: (01) beginner, (02) intermediate, (03) advanced, to identify what users will need when learning and adjusting through lessons.
Usability Testing
Using the remote usability testing tool, Maze, we conducted 3 rounds of usability tests where we had an 80% task completion score from users.
We received a 100% vote in product retention reflecting how many users see themselves using TechSavvy in the future. This helps us confirm that children are willing to use the application.
Feature Prioritization
Micro-Interactions
High-Fidelity
Our hi-fidelity iteration focused on simplifying the design by reducing the number of pages in the onboarding process, improving the copy to be visually accessible when navigating on the site, and adding the accessibility adjustment in the navigation bar — for example, removing questions that users found confusing when searching for available lessons in the dashboard.
Future Improvements
If we had time, we would like to do more research testing on our MVPs and what improvements or additions should we add to build retention and users to come back. I believe we’ll get 100% retention if we had three MVPs for users to engage in.
One of the MVPs I had in mind was implementing tutors in the YouTube space to help teach teenagers how to code. Pursuing higher education can get expensive and eventually inaccessible to lower income families. YouTube is a creative space that allows creators, educators, and advocators to teach from a holistic approach.
While there are many educational platforms accessible for teenagers, we believe that building a responsive gamified e-learning site would promote digital equity and accessibility for K-12 users in technical skills such as coding. This is all in an effort to increase critical learning skills, boost self-esteem, and allow low socioeconomic individuals access to education.