Schoolhouse Ghana
September 2023 - June 2024
Role
UX Designer
Organization
Global TIES
Jacobs School of Engineering
Team
1 project manager
2 designers
1 hardware lead
5 developers
Tools
Figma + Figjam
Jira
React
MongoDB
Skills
User research
Prototyping
Information architecture
Developer handoffs
The problem
A lack of equitable access to technology.
Schools in rural Senase, Ghana lack access to affordable, reliable internet, and digital resources. This impedes the students’ abilities to perform on an important digital assessment they take in 9th grade that determines whether or not they go to high school. Missing such an opportunity can lead to cyclical, generational poverty in rural regions of Ghana.
How might we support students in building critical digital literacy skills and increase access to digital resources within an academic context?
Our solution
An intuitive educational platform and server
Our team aimed to develop a local area network with a server, network-attached storage, a portable downloader software, and a web portal that can be used without constant internet access.
By providing rural students at the Semanhyia American School with access to a local database and browser-based learning platform to practice their computer skills, we aim to increase the digital literacy skills of teachers and students, and improve the school’s performance on the critical 9th-grade BECE exam.
Jumping in
The existing information architecture needed some work.
The Schoolhouse project has been funded for multiple years by the Jacobs School of Engineering. However, for the first time, the Schoolhouse Ghana team had an established Design team (me!) specifically responsible for all visual design, branding, and UI/UX decisions regarding the interface.
We decided to proceed with a traditional design critique to become familiar with the interface and determine some existing pain points. You can find our design critique file here.
Design goals
We came up with the following priorities:
Create a clean design system with standardized fonts + colors
Clean up the information hierarchy
Tidy up the relationships between classes, grade levels, and user objects with a classroom and account management system
Create curriculum pages to structure any curriculum or files being uploaded to the interface (one of the key goals in getting teachers/students to use the software!)
Workflow management
For many of us, it was our first time working with both developers and designers!
We wanted to prioritize the design-to-developer handoff and implement regular checkins and standups. As such, we decided to take an Agile approach to the project with daily standups, sprints, and retrospectives.
We also decided to implement a numerical system to organize our Figma workspace (designed by Luis Ouriach, a UX designer at Figma!) The system makes use of four number types to organize screens:
Distinct user flows start with the thousands place (ex. 1000)
Screens within a flow use the hundreds place (ex. 1100)
States within screens use the tens place (ex. 1110)
Other minute changes use the ones place (ex. 1111)
This change was implemented to simplify the developer handoff. We found it a lot easier for both developers and designers to be able to refer to a single number as opposed to a screen or feature name. The development team also found the numbering system useful to label and organize their Git branching system! (Yay, organization!)
Let’s get to work!
A new design system is always so satisfying.
These new colors were selected with the idea of using color more sparingly and intentionally on a clean white background so that students could use the colors as visual cues for actions or important resources. The following fonts were selected for their friendly, playful, and legible functionality.
Introducing structure and flow
We created information flow diagrams to visualize the new features we wanted to create.
Over our first sprint, we iterated upon a class and account manager page for admin accounts. 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.
We also determined what specific actions our three types of users – admins, teachers, and students – would be able to undertake within the interface, as seen below. Students are not allowed to make any changes to classes but can view them; administrators can create and add users to a class, but cannot publish them for students to view; teachers are not able to create and add users to a class but can publish their class pages for students when they’re ready.
Based on these constraints, we began to mock up some basic wireframes of what an account manager system might look like.
Creating structure for files and uploads
Class and curriculum pages
We created a couple of potential versions of what a class page might look like, either grouped by subject or teacher. Teachers have the ability to post and edit announcements, assignments, and resources for each subject they teach, as well as tag all of those resources with the relevant color-coded tags.
Here is what a landing page might look like for a teacher: current classes that she’s teaching, and archived classes from past years.
Here is a teacher’s view of their class page, where they can see summaries of all announcements and assignments they’ve posted. If they click into a subject, they have the ability to add and edit announcements specific to that subject.
Usability testing
Would this system be intuitive for young children?
The largest issue that we encountered at the onset of this project was a lack of contact with our stakeholders and target users: specifically teachers and students at SAS. We were well aware that we’d probably be unable to conduct live, synchronous user research or usability testing with SAS teachers and students, 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?
To get as close as possible, we decided to conduct some user testing sessions with elementary-school aged kids in the U.S.! We tested short functionality tasks with ten students, ages 9 to 11, all of whom had varying levels of digital literacy. Our interview was segmented into five parts:
Questions about their prior experiences with devices and digital learning
Their initial impressions of the interface
Student task questions, where our interviewees were asked to complete tasks as a student user on our interface
Teacher task questions, where our interviewees were asked to complete tasks as a teacher user on our interface
Interview debrief questions to reflect on their experience completing the tasks
You can find our full interview guide here.
All of our test users were able to interact with our interface with standard interactions (click, scroll, drag, etc.), but found certain features and tasks confusing: for example, our Gradebook task which involved scrolling through the Gradebook component horizontally.
Going forward, we reaffirmed the importance of continuing to build with our target audience in mind; a kid at SAS 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.
We also wanted to simplify our language and some major interactions to be more kid-friendly. Something none of us foresaw from our younger users was confusion with longer words, especially those that were really similar. We use the words “Assessments”, “Assignments”, and “Announcements” multiple times throughout our interface, and differentiating between them might be tough for younger students!
“Assessments”
“Assignments”
“Announcements”
Not surprisingly… very confusing for kids!
Looking forward
Handing off to future developers
This project was an incredible exercise in centering empathy and intention within the design process. The people we met through the Semanhyia American School and the Godfreds organization are beyond inspiring, and I feel very lucky to have worked on such a high-impact project with such local impact in Senase, Ghana.
Special thanks to my wonderful team. I learned so much from working with these people, and will forever cherish this experience.
I would also like to acknowledge our fantastic advisors, Shruti, Albert, and Dr. Mandy Bratton, as well as the continued support of the GodFreds Foundation. We’re very grateful for all your help!