Serlo ABC enables people with no former knowledge of the latin alphabet to take the first steps to learning german. The UI is clean and simple and does not rely on written explanations. Instead the app uses a very visual approach and uses pictures, videos and animations where possible.
With: Serlo Education
We identified that for many refugees arriving in Germany learning the language is a major barrier to opportunities in education, for jobs but also many other aspects of everyday life.
In a time where the availability and access to language courses was very limited due to high demand we decided to work on an scalable approach that would work on any smartphone. The goal was to enable people prepare for and also assist the courses.
There was funding by EU for the Project so we were able to hire an expert in german as a foreign language learning. But for this non-commercial project our financial and programming resources were still very restricted.
For me personally the main challenge was to create an user interface that would facilitate people to learn as independent as possible without relying on prior knowledge of the german language or even the latin alphabet since most of my usual work relies heavily on typography.
After learning about the potential users:
Young, but no kids / can maybe read the arabic alphabet or not read at all / very diverse backgrounds and previous school experiences / …
I choose a very visual, playful and interactive approach.
All exercice types aim to be either self-explanatory or are introduced with an animation or even video of someone solving it.
The interface is very simple. There are not many interactive objects. They all use the same style to signal their interactivity.
The whole app should feel like a useful game (playful), exercises can be repeated and success is rewarded (low pressure, positive learning experience).
Feedback is also visual, color coded and easily remembered sound effects are used for support. The ends of chapters are rewarded with videos of acutal people cheering you on.
UI and Prototype
With research, didactic concept and the design approach done I started drafting the user interface for some of the exercices.
And after some discussion and improvements I turned them into a rough browser-based prototype (HTML/JS/CSS) so we could move into testing rather early in the progress.
This way the technical considerations for building the real app could move forward at the same time as testing and working on the content.
When the work started the developers also had a working prototype to check their work against.
More information on the german webite: https://de.serlo.org/abc