Simbi Foundation — Redesigning Simbi Learn Cloud

The platform which improves the refugee students’ curriculum

8 min readOct 14, 2021

About Simbi Foundation

I’ve been collaborating as a UX/UI volunteer for Simbi Foundation. This is a non-profit organization that provides support for refugee communities that face challenges accessing quality education.

Their goals are:

Deploy educational infrastructure and software to those who need it most.
Every decision is based on research.
They create sustainable solutions with partners.

Simbi Foundation provides solutions or Brightbox for the students in a settlement:

Brightbox Macro which recycled contained solar panels which works as a classroom for these students. The Macro is equipped with furniture, laptops, and a projector.
Brightbox Micro: this is a solar-powered digital educational suitcase kit. It contains tablets and projectors that can be used by 1,500 students per week.

Every Brightbox has a microcomputer in which they can run Simbi Learn Cloud on laptops.

Goal

The main goal was redesigning the whole design system for Simbi Learn Cloud. SLC is an offline platform in which South Sudanese and students from different parts of the world can improve their educational curriculum. Currently, we are redesigning this app kit for a refugee camp in Uganda — Bidibidi, the largest refugee settlement in the world.

SLC is based on the Rachel operating system in the microcomputers that can work offline.

The main challenges are that the students and most of the teachers are:

Give access to 100 students simultaneously.
Replace the microcomputer in a Blackberry Pi with a Linux-based server along with a dedicated Ethernet network system.
Designing a usable platform. Due to most students and teachers are not familiar with new technologies or has low computer literacy.
Students have little time to use SLC. The classes are overcrowded and between 160 to 200 students are using SLC for an hour. They use SLC in groups for 15 minutes.
Designing an accessible platform because most of the students have visual disabilities due to the civil war in their home country and they have never used glasses.
It allows for effective and quick use of the curriculum.
Ensure it’s an intuitive process.

Research

My team and I started with extensive research about the Ugandese educational system, the South Sudanese culture and disabilities focused on new technologies. We completed the research making surveys in order to know what are the student’s and teachers’ needs toward SLC.

The research was based on documentation from different research and an interview with Mukasa one of The Simbi Foundation directors in Africa.

Some of the questions for the interview were:

Is there any imagery that should definitely be avoided in the RACHEL curriculum?
Could you please kindly share with us some information about the culture of South Sudanese refugees and the culture of Ugandan people?

We conclude the research with important findings:

Art therapeutic materials have been a common practice across settlements but also in South Sudan. Children are helped to vent out negative emotions through drawings without any pressure, clay making, etc.
In the settlements in Uganda, we are hosting the eastern Bari speakers who somehow share 80% of the traditional practices, including the language called bari. The second group hosted in Uganda from South Sudan with a different culture are the Dinkas and Nuels. The primary role of women is household work and not education, and just like the bari girls, they are a source of wealth.
Not many girls attend class due to early pregnancy, lack of money, a/o the education delays that the menstrual cycle creates.
The majority have lost a relative due to the war.

We also did a comparative research analysis in order to research different websites layout that can be a good fit for SLC.

Finally, we did a Rachel's audit based on the heuristics:

Match between system and the real world
The sections’ titles are not in a language that users would understand nor have any meaning to the user (eg. CK-12 Textbooks, GCF Learnfree.org, etc.).
No logical order. For example, Math subjects are located in several sections so if the user wants anything math-related they will have to scroll through all sections in order to find what they need.
Visually, the high amount of buttons and banners (all being close to each other) doesn’t help users to identify where they’re at on the page. The information doesn’t appear in a natural way. There are too many buttons on one single page and the user is left wondering where to click.
Consistency and standards
The UX/UI of Rachel isn’t predictable and it’s not easy to learn.
Rachel has no clear internal consistency. The only set of standards is that red is used solely for buttons. Different tones of orange are also used for buttons.
The titles of each section are also hyperlinked buttons but they’re not underlined.
The search bar is also inconsistent. Not all sections have a search bar for some reason.
Recognition rather than recall
Rachel’s layout does not bring to mind any similar patterns seen in other websites -doesn’t promote recognition.
Rachel provides no instructions for navigation. The only button that could help the user with navigation, the Browse button, has a drop-down that shows a hover color combination (light orange/light blue) that it’s illegible and unreadable.
Aesthetic and minimalist design
Rachel misses the mark here as the multiple buttons and multiple colors in both buttons and paragraph blocks create too much background noise.
Rachel doesn’t prioritize content nor the features as there is no clear pattern among sections but several sections look the same. Rachel isn’t even organized in alphabetical order to help with user recognition. The multiple colors in the palette that have no clear set meaning just add to the noise in the site. The icons are small and cute but they don’t add any value in assisting the user with navigation, since the icons are multiple in number and may not clearly deliver what they’re said to represent (eg. elephant icon for “Animals” button title, when in fact that button only presents a page about cows and a few more domestic animals).
The shape of the buttons and paragraph blocks also take a high amount of space causing a longer scroll.
Another point is the primary and secondary navbars. The primary nav bar (admin/stats/version) contains irrelevant info to the user that is unnecessary for their experience. The secondary navbar has a repetitive home button.

After the research, we started wrapping all the research information we obtained in an affinity diagram. We also created our personas which I mentioned at the beginning, we made an accessible color palette and we tested. Finally, we came up with the information architecture. Then, we started the design part and each team member design their own low-fi version. After that, we picked one option and combined that option with some elements from the other versions. After finishing the mid-fi wireframes, we tested them. Currently, we are finishing the hi-fi wireframes while the developer is developing them. We are expecting to test these wireframes and finish with a future considerations report.

Planning

After the research, we started wrapping all the research information we obtained in an affinity diagram.

We also created our personas which I mentioned at the beginning.

We made an accessible color palette and font pairing and we tested for accessibility with a contrast checker. We also tested the color palette with people that are not familiar with new technologies.

After that, we focused our persona on teachers, children who need to complete the academic part, a teenager and young adults who couldn’t go to school due to the war.

Design

For the Design part, we started sketching low-fi wireframes.

After that, we design the mid-fi wireframes. We did two versions and then, we present and discuss the most suitable elements for SLC.

We tested the final option with 7-years old children. Some of the use case scenarios and observations were:

Find the magnifier icon (search icon) and click on it

Time: 5 secs (child said “I can see it”).

2. Explore the search bar and search for ‘calculus’

The task wasn’t timed as I wanted for the child to explore the search bar and read the instructions provided in it (search bar and tooltip) so he had a better understanding of how to look for ‘calculus.’ Child clicked on the search icon as instructed and read the search bar instructions. Accessed tooltip (instructed to click on white rectangle again so tooltip could appear). The child read the tooltip instructions. The child clicked on “x”, the search bar closed. He commented that he clicked the “x” that “ok, it got different. The rectangle is gone.”

3. Go to the homepage

Time: Found in 20 secs. The child started getting more used to looking around everywhere. He started seeing the Resources page but then saw the homepage/logo on the top left corner (note.- the logo was marked as “homepage” in order for the child to execute the task).

For the hi-fi wireframes, we designed some icons and some volunteer illustrators helped us with some backgrounds and imaginary.