Description
Berlino Schule is a language school in Berlin, founded in 2015 by Andrea d’Addio, an Italian journalist who emigrated to Berlin and founder of the famous online magazine Berlino Magazine, a reference point for Italians living in the German capital. The school mainly offers courses in German, Italian and English, both in the presence and remotely through Skype, with the possibility of requesting support for visas and accommodation for non-European students.
Besides, the school offers to follow creative workshops dedicated to recreational activities and professional training (in Italian and English). The school goals from its competitors in the type of courses and method and having very competitive prices.
Our challenge was to design a new user interface for the website, expand the offerings for online courses and meet users need by providing immediately all the information they need.
The new platform should support users through the choice of the most suitable course for them, being also able to take a test to verify their languages starting level.
Role: User Experience Research, Product designer, Web designer
Duration: December 2020 – April 2021 (4 months)
Client: Berlin Italian Communication UG
Tools: Figma, Adobe Photoshop, Adobe Illustrator, Balsamiq, Miro, WordPress, Wp-staging Pro
Method: Design thinking – Inspiration > Conceptualization > Iteration > Exposition
Inspiration
Business requirement
Hypotesis:
Our target group consists of users between the ages of 20 and 45 who wants to study German for work, study and integration purposes.
Most users live in Berlin and, in the case of online courses, would to move to or live in Germany in future. Currently, online courses are preferred because of the covid 19.
Why
Users are looking for an affordable German course that will teach them how to communicate and enable them to deal with everyday problems, work and bureaucracy.
They are looking for a course that will allow them to quickly improve their language, make friends and/or create ties with other students.
The school offers German courses and supports no European students who would like to study in Berlin with visa support.
Who can attend creative workshops in theatre, photography and creative writing are mainly Italian and English native speaker users.
Problem statement
Berlino Schule website is a very articulated and complex project due to the number of proposals offered by the school.
We would like to propose a product that will enter the market that will stand out among the competitors as a quality school with well-trained teachers.
The intention of the school is not to address only an Italian target, but also an international audience.
The platform must be easy to consult and require little user interaction to reach the information they need. Aesthetically pleasing, the website must be able to contain as much information as possible to avoid users call customer service to receive assistance.
Conceptualization
User stories
We started developing the new design from the users.
Based on the information we gathered, we defined 4 types of possible users and how Berlin Schule could meet their needs.
User Stories: As a “role”, I want to “action”, so that “desired outcome”.
Job stories: When “context or situation”, I want to “motivation”, so I can “expected outcome”.
Site map
Iteration
Wireframe
Low fidelity wireframe
We started to redesign the new website starting from a new sitemap and sketching the wireframes first on paper and then reporting it in Figma.
In total 21 pages have been designed for Desktop and 21 pages for Mobile.
Usability tests
Goals
Our purpose is to test the website follows the basics of usability and learnability.
We want to test the basic functions of the website to allow users to find the language course that best suits their needs and also in taking a test to check their starting level.
Students will be able to plan their short and long term study path, choosing among various types of courses, online and in-person. Besides, within the Italian (and English) section of the school, there is the possibility to follow workshops dedicated to recreational activities and professional training. The school also helps students with accommodation and visas. Blog in Italian and English
Objectives
The objectives of the test are to understand if the primary needs and objectives of people have been met and if the product is easy and intuitive to use. The purpose of the test is to analyze how well the product works and to highlight any design errors.
Participants will be asked to perform tasks and will be observed how they feel during use.
The final goals are to analyze the 5 components of Usability: satisfaction, learnability, efficiency, memorability and errors.
5 Participants
Result
The main tasks that will be solved by the participants will be:
– First impression of the website
– Choose courses online and in-person
– Choose the course based on the hourly/daily/monthly schedule
– Price is visible and clear
– Plan a long-term study.
– Ask for visa support and steps to follow.
The results led us to create an affinity map with the suggestions and errors by the participants. Using the rainbow sheet, we defined the severity of the errors produced and how to correct them.
Errors will be measured using the Severity Ratings for Usability Problems by Jakob Nielsen:
0 = I don’t agree that this is a usability problem at all
1 = Cosmetic problem only: need not be fixed unless extra time is available on project
2 = Minor usability problem: fixing this should be given low priority
3 = Major usability problem: important to fix, so should be given high priority
4 = Usability catastrophe: imperative to fix this before product can be released
Affinity mapping
Rainbow Spread Sheet
Exposition
Style guide
Colors
Responsive design
After the usability tests, we moved on to high fidelity wireframes and prototype design using Figma for desktop and mobile versions of the product, thus creating a responsive product.
We then transferred the prototype into production via WordPress and the Enfold theme. Using the WP staging pro plugin we created a staging clone of the current site, so we could work on the design and translation of the site in 5 languages: Italian, English, German, Spanish and French and then move the staging site into production.
Website translation
Conclusion
Pros
We were able to give the website a more solid structure and create an AI that is closer to the needs of users. Requests concerning online courses have increased, due to Covid 19, and dedicated sections of the site have been created.
The CTAs and contacts have been integrated to ease the contacts of the school also the page of the job section has been designed.
Cons
The Berlin Schule website has a very large and complex structure. The services offered by the school are many and therefore the structure of the website is also considerable.
Also, the translations had to be adapted to follow the structure of the website.
Using a platform like WordPress is certainly an advantage, but it has led to having to adapt the design to the needs of the theme.
