Designing for Digital Literacy Without Wi-Fi
Designing for Digital Literacy Without Wi-Fi
Advocating for digital literacy + accessible, digitalized curriculum in Senase, Ghana.
Advocating for digital literacy + accessible, digitalized curriculum in Senase, Ghana.
DURATION
DURATION
September 2023 - June 2024
September 2023 -
June 2024
ROLE
ROLE
UX Designer
UX Designer
TEAM
TEAM
1 project manager + 5 developers + 2 designers
1 project manager +
5 developers + 2 designers
ORGANIZATION
ORGANIZATION
Global TIES, Jacobs School of Engineering
Global TIES,
Jacobs School of Engineering
TOOLS
TOOLS
Figma + Figjam, Jira, React, MongoDB
Figma + Figjam, Jira, React, MongoDB
THE CHALLENGE
THE CHALLENGE
There is a lack of equitable access to technology and internet access in Ghana, Africa.
There is a lack of equitable access to technology and internet access in Ghana, Africa.
In Ghana, many students attend schools with little to no internet access. Yet in 9th grade, they’re expected to take a critical basic education exam that determines whether they move on to secondary or vocational school. Missing such an opportunity can lead to cyclical, generational poverty in rural regions of Ghana.
In Ghana, many students attend schools with little to no internet access. Yet in 9th grade, they’re expected to take a critical basic education exam that determines whether they move on to secondary or vocational school. Missing such an opportunity can lead to cyclical, generational poverty in rural regions of Ghana.
Students at the Semanhyiya American School in Senase, Ghana.
(Photo: GodFreds Organization)
Students at the Semanhyiya American School in Senase, Ghana.
(Photo: GodFreds Organization)
No access = no practice = no opportunities. That’s the equation we were determined to change.
No access = no practice = no opportunities. That’s the equation we were determined to change.
How might we support elementary-age Ghanian students in building critical digital literacy skills, even in offline settings?
How might we support elementary-age Ghanian students in building critical digital literacy skills, even in offline settings?
THE SOLUTION
THE SOLUTION
We designed an educational platform students could use without WiFi access.
We designed an educational platform students could use without WiFi access.
We designed an educational platform students could use without WiFi access.
We designed an educational platform students could use without WiFi access.
A browser-based learning platform powered by a local area network, with:
📡 A server and NAS device
📥 Downloadable content via USB
🖥 An intuitive educational interface
A browser-based learning platform powered by a local area network, with:
📡 A server and NAS device
📥 Downloadable content via USB
🖥 An intuitive educational interface
This system allows students and teachers to practice key digital skills anytime, without needing an internet connection.
This system allows students and teachers to practice key digital skills anytime, without needing an internet connection.
STAKEHOLDERS AND TEAM
STAKEHOLDERS AND TEAM
We collaborated with stakeholders both near and far!
We collaborated with stakeholders both near and far!
The Schoolhouse project has been funded for multiple years by the Jacobs School of Engineering in partnership with the GodFreds Foundation and the Semanhyia American School in Senase, Ghana. Although Schoolhouse Ghana had been running for years, this was the first time the project had a dedicated UX design team — a.k.a. me and one other designer!
The Schoolhouse project has been funded for multiple years by the Jacobs School of Engineering in partnership with the GodFreds Foundation and the Semanhyia American School in Senase, Ghana. Although Schoolhouse Ghana had been running for years, this was the first time the project had a dedicated UX design team — a.k.a. me and one other designer!
The original prototype, built by a team of student engineers the year before our cohort.
The original prototype, built by a team of student engineers the year before our cohort.
We inherited a working prototype (see above) but saw plenty of opportunity to reimagine the structure, visuals, and flows to make the system intuitive and delightful.
We inherited a working prototype (see above) but saw plenty of opportunity to reimagine the structure, visuals, and flows to make the system intuitive and delightful.
DESIGN GOALS
DESIGN GOALS
To kick things off... a structured design critique!
To kick things off... a structured design critique!
Our design critique file, where we outlined key user flows and identified system-wide issues.
Our design critique file, where we outlined key user flows and identified system-wide issues.
Our design critique surfaced key issues in information hierarchy, visual consistency, and navigation logic. From there, we prioritized:
Our design critique surfaced key issues in information hierarchy, visual consistency, and navigation logic. From there, we prioritized:
✅ A unified design system with intentional color and type
✅ Cleaner relationships between classes, users, and roles
✅ A curriculum upload system to encourage teacher engagement
✅ Admin tools for managing classrooms and users
✅ A unified design system with intentional color and type
✅ Cleaner relationships between classes, users, and roles
✅ A curriculum upload system to encourage teacher engagement
✅ Admin tools for managing classrooms and users
TOOLS AND METHODS
TOOLS AND METHODS
For many of us, it was our first time working with both developers and designers!
For many of us, it was our first time working with both developers and designers!
To sync priorities across our workflow, we used the following tools and strategies :)
Design: Figma + FigJam 🖌️
Engineering: React + MongoDB 👩💻
Collaboration: Jira, Agile sprints, daily standups 🤝
Structure: Luis Ouriach’s numerical screen system for Figma & Git branching (1000 > 1100 > 1110…)
To sync priorities across our workflow, we used the following tools and strategies :)
Design: Figma + FigJam 🖌️
Engineering: React + MongoDB 👩💻
Collaboration: Jira, Agile sprints, daily standups 🤝
Structure: Luis Ouriach’s numerical screen system for Figma & Git branching (1000 > 1100 > 1110…)
We found that numbered flows were far easier for both designers and developers to refer to. It helped us speak the same language, and cut down on Slack back-and-forth by a lot.
We found that numbered flows were far easier for both designers and developers to refer to. It helped us speak the same language, and cut down on Slack back-and-forth by a lot.
LET'S GET TO WORK!
LET'S GET TO WORK!
A new design system is always so satisfying.
A new design system is always so satisfying.
We built a clean, minimal visual system where color was used sparingly but meaningfully: to signal urgency, user roles, or types of content.
Fonts were selected for maximum legibility and friendliness, especially for younger users new to computers. Here's a peek at our style foundations:
We built a clean, minimal visual system where color was used sparingly but meaningfully: to signal urgency, user roles, or types of content.
Fonts were selected for maximum legibility and friendliness, especially for younger users new to computers. Here's a peek at our style foundations:
INFORMATION ARCHITECTURE
INFORMATION ARCHITECTURE
We created information flow diagrams to visualize the new features we wanted to create.
We created information flow diagrams to visualize the new features we wanted to create.
We began wireframing flows for our three user types (admins, teachers, and students) while mapping out access levels and permissions.
We began wireframing flows for our three user types (admins, teachers, and students) while mapping out access levels and permissions.
Here’s how those permissions broke down:
Here’s how those permissions broke down:
A feature’s complexity therefore depended on the user and their scope of access within the interface. Below is a user flow that maps out all of the steps an admin, like a principal or office administrator, would see when creating a new class.
A feature’s complexity therefore depended on the user and their scope of access within the interface. Below is a user flow that maps out all of the steps an admin, like a principal or office administrator, would see when creating a new class.
A user flow for the "Class Manager" feature outlining how an administrator might set up and manage classes.
A user flow for the "Class Manager" feature outlining how an administrator might set up and manage classes.
Mapping out the core logic behind class creation, user account linkage, and content publishing clarified the overarching system logic for both designers and developers, and informed our interface hierarchy.
Mapping out the core logic behind class creation, user account linkage, and content publishing clarified the overarching system logic for both designers and developers, and informed our interface hierarchy.
FEATURE IDEATION
FEATURE IDEATION
Another critical feature that was missing was structured curriculum pages for teachers and students.
Another critical feature that was missing was structured curriculum pages for teachers and students.
We tackled one of the most critical engagement points: class and curriculum pages where teachers could upload files, make announcements, and post assignments.
We designed views grouped by subject and by teacher, giving instructors flexible ways to manage educational content. Resources were color-coded and tagged for easy navigation.
We tackled one of the most critical engagement points: class and curriculum pages where teachers could upload files, make announcements, and post assignments.
We designed views grouped by subject and by teacher, giving instructors flexible ways to manage educational content. Resources were color-coded and tagged for easy navigation.
Teachers can view all of their class to see all class pages currently and previously published.
Teachers can view all of their class to see all class pages currently and previously published.
A homepage for a class (left) with announcements and subject-specific resource modules, and an example resource module for a science class (right).
A homepage for a class (left) with announcements and subject-specific resource modules, and an example resource module for a science class (right).
USABILITY TESTING
USABILITY TESTING
But we wondered... would this system be intuitive for young children?
But we wondered... would this system be intuitive for young children?
Due to time zones and connectivity limitations, we weren’t able to test directly with our target users at Semanhyia American School, which made our process challenging: how would we approach designing for an audience with varying levels of technical proficiency that we couldn’t directly interact with or investigate?
Instead, we recruited 10 students aged 9–11 in the U.S. with varying levels of digital literacy to test basic functionality. We asked them to complete tasks as both a student and a teacher, using clickable prototypes.
Due to time zones and connectivity limitations, we weren’t able to test directly with our target users at Semanhyia American School, which made our process challenging: how would we approach designing for an audience with varying levels of technical proficiency that we couldn’t directly interact with or investigate?
Instead, we recruited 10 students aged 9–11 in the U.S. with varying levels of digital literacy to test basic functionality. We asked them to complete tasks as both a student and a teacher, using clickable prototypes.
A user test with a young stakeholder practicing some basic navigation tasks.
A user test with a young stakeholder practicing some basic navigation tasks.
What we learned:
✅ All users could use basic interactions (clicking, scrolling, drag/drop)
❌ Horizontal scrolling confused many
❌ More kid-friendly language; for example, "Assessments", "Assignments", and "Announcements" sounded way too similar
What we learned:
✅ All users could use basic interactions (clicking, scrolling, drag/drop)
❌ Horizontal scrolling confused many
❌ More kid-friendly language; for example, "Assessments", "Assignments", and "Announcements" sounded way too similar
“Wait, what’s an assessment again?”
– every 9-year-old, basically
“Wait, what’s an assessment again?”
– every 9-year-old, basically
Going forward, we reaffirmed the importance of continuing to build with our target audience in mind; a kid at Semanhyia American School would not interact with our platform the same a tech-savvy kid in the U.S. would! We decided a welcoming, fun onboarding tutorial that walks new students through all of the important pages and interactions would be one of our top priorities for our next sprint.
Going forward, we reaffirmed the importance of continuing to build with our target audience in mind; a kid at Semanhyia American School would not interact with our platform the same a tech-savvy kid in the U.S. would! We decided a welcoming, fun onboarding tutorial that walks new students through all of the important pages and interactions would be one of our top priorities for our next sprint.
TESTING INSIGHTS
TESTING INSIGHTS
Going forward, we reaffirmed the importance of continuing to build with our target audience in mind.
Going forward, we reaffirmed the importance of continuing to build with our target audience in mind.
🧠 Simplified language throughout—fewer syllables, more meaning
🧭 Onboarding tutorial added for student users
🎯 Reduced interface clutter, especially in student views
Designing for a kid in Ghana isn’t the same as designing for a kid in the Bay Area. We kept iterating with empathy and clarity as our north stars.
🧠 Simplified, kid-friendly language
🧭 Onboarding tutorial added for student users
🎯 Reduced interface clutter, especially in student views
Designing for a kid in Ghana isn’t the same as designing for a kid in the Bay Area. We kept iterating with empathy and clarity as our north stars.
THE HANDOFF
THE HANDOFF
Closing time… we set things up to hand off to future designers and developers.
Closing time… we set up documentation for future designers and developers!
As our year came to a close, we documented every component, screen, and interaction for the next cohort of designers and developers. We also created a starter guide for onboarding, built out dev-ready files in Figma, and ensured alignment with engineering.
[File links here]
As our year came to a close, we documented every component, screen, and interaction for the next cohort of designers and developers. We also created a starter guide for onboarding, built out dev-ready files in Figma, and ensured alignment with engineering.
[File links here]
REFLECTIONS
REFLECTIONS
Real world impact comes from intentionality.
Real world impact comes from intentionality.
I'm very grateful to have collaborated with a mission-driven team and advisors who trusted us to bring this work to life! This project pushed us to get scrappy, stay collaborative, and never lose sight of the real-world stakes behind our interface.
I'm very grateful to have collaborated with a mission-driven team and advisors who trusted us to bring this work to life! This project pushed us to get scrappy, stay collaborative, and never lose sight of the real-world stakes behind our interface.
Team brunch at our favorite: Snooze A.M. :)
Team brunch at our favorite: Snooze A.M. :)
Special thanks to Shruti, Albert, Dr. Mandy Bratton, and Fredrick from the GodFreds Foundation!
And to my wonderful teammates: I had so much fun learning and growing together :)
Special thanks to Shruti, Albert, Dr. Mandy Bratton, and Fredrick from the GodFreds Foundation!
And to my wonderful teammates: I had so much fun learning and growing together :)
Thank you for reading!
Thank you for reading!
Looking for more? Check out some of my other case studies.
Looking for more? Check out some of my other case studies.
A dramatic new design system and website for the Tritones, UC San Diego’s premier a capella ensemble.
A dramatic new design system and website for the Tritones, UC San Diego’s premier a capella ensemble.
Computer Science Society @ UC San Diego - 2023
Computer Science Society @ UC San Diego - 2023
Optimizing our college enrollment and class planning tool to be more thoughtfully intuitive + friendly.
Optimizing our college enrollment and class planning tool to be more thoughtfully intuitive + friendly.
Product Space @ UC San Diego - 2023
Product Space @ UC San Diego - 2023