Project omschrijving

The Public Library of Amsterdam as a community hub

Role
UX Design

Category
Redesign Website

Timeframe
2019

I wanted to offer a helping hand to refugees and immigrants trying to integrate into the Dutch culture by redesigning the website of the Public Library of Amsterdam (Openbare Bibliotheek Amsterdam – OBA).

My Motivation
My parents weren’t born in the Netherlands and over the years I have seen how valuable and important a helping hand to immigrants can be. Therefore the OBA offers various social activities, but they also have a learning platform at their disposal. However, it’s difficult to find because the navigation offers several ways to get there. Further more, it gets even more difficult for those that don’t speak or read Dutch.

TLDR; Casestudy

Problem Statement
Imagine you are left no choice but to move to a different country. In search for a safer place where you can settle and build a new life. Everything moves so quickly and have little time to prepare your migration. Once you arrive in the Netherlands you are expected to adopt into a completely different culture. You have little resources or help and have to figure out everything on your own. Furthermore, the websites that offer integration courses are all in Dutch, but you haven’t gotten a grasp of the language yet. As you’re reading this you must be able to imagine how frustrating it is, to navigate a website that is supposed to help you, but is not designed with you in mind.

The Public Library of Amsterdam is a community hub, where all sorts of people come by and visit. They offer refugees integration courses in real time and have large amounts of useful information on their website. But the problem is… It’s all in Dutch. Simply translating everything into a large range of languages is not efficient and expensive. From a business point of view you have to consider many smaller target groups.

Solution & Approach
My solution for the website was the use of design patterns and visual cues. Using consistent design patterns that exist in both digital and real life made it much easier to navigate through the pages. That’s because these users are already familiar with the patterns. Aside from that, I used icons as visual cues to give users more context. This project doesn’t have big and fancy changes. But from my point of view as an UX designer it can be the little things, the little considerations, that can make all the difference. Giving the correct labeling, focusing on visual elements and applying familiar design patterns were what really mattered in this casestudy.

Conducting Interviews

I have conducted many interviews with various people:
• Random visitors of the library;
• People who have an OBA subscription;
• Visitors and tourists in Amsterdam;
• And employees of the OBA.

An important interview I had was with Dimitar R. He’s an employee at the public library and has been with the OBA for 12 years. At the time he was studying for his PhD Degree and focused on immigrants and refugees. Dimitar gave me interesting insights about the ‘Leef en Leerpunt’ (the platform to help people integrate in the Dutch society).

He said that people at an older age find it difficult to integrate into Dutch culture. The reason being that they can’t remember the subject matter and they also find it difficult to accept a different culture. According to his research, the average age of immigrants and refugees is between 29 and 50 years old. About 20 to 30% are highly educated in their own country. According to Dimitar, the highly educated can pick up Dutch culture a little more easily than the less well-educated.

User Task Analysis

In the original structure of the site the user has to go through various steps in the navigation to reach their final goal. The process is too long-winded, complicated and sometimes unclear. For this task analysis users want to make an appointment at the Leef and Leerpunt (education platform) starting from the homepage. This diagram shows that all roads lead to Rome. I personally think it’s convenient from an Information Architecture perspective to have multiple ways to navigate through to the final destination. So this was not immediately my biggest concern. What I did target and improve was the user flow. In the section below I will explain this in more depth.

Current Situation Screenflow

Based on the User Task Analysis, I made a schematic representation. Here I discovered that the user can find their way to the ‘Leef en Leerpunt’ in different ways: 1. through the direct search, 2. through the main navigation with ‘actueel’ and ‘agenda’. 3. and last but not least, through the homepage by scrolling further down, shown in a small unobtrusive banner.

All of these items are hidden in the website. People who do not have a good command of the Dutch language cannot find the navigation or read the labels. In addition, the user keep getting forwarded to new pages which takes the user out of the flow. To return they’re dependent on the back button in the browser. What I also noticed was that the user had to go through many steps before they reached their final goal.

Design
Challenge

I want more attention to be given to the ‘Leef en Leerpunt’ so that immigrants and refugees can find information better and easier on the website. This lowers the threshold and increases motivation among those who want to integrate into the Dutch society.

Empathy Map

OBA Empathy Map

Persona

Oba Persona Violet Jim

User Goals

These user goals are based on my interviews with Dimitar R., deskresearch, observations within OBA, my persona and through the empathy map.

1. The user wants to learn Dutch together with others in a quiet place.
2. The user wants to plan an activity to get to know more people.
3. The user wants to build confidence and have fun.
4. The user wants to be able to make mistakes in a safe environment.
5. The user wants to make progress with the integration.

Storyboarding
Context Scenario

Ideation Sketches

First Design

I presented my designs to the client. Then I refined my design with the help of their feedback. Although it did not need major changes, I decided to redesign the agenda page. My goal was to make sure that someone who does not speak the Dutch language could navigate through the website without being dependent on text. That is why I strongly focused on the use of icons, images and recognizable design patterns.

Additional Changes

Second Design

I had the second design tested with users through a “Heuristic Evaluation”. With this test method you use a certain set of rules, or “best practices”, to view a website and quickly identify problems. They found this new concept to be better than the previous one, because in their opinion the agenda page was well developed and universally recognizable. They also liked planning an activity, since you go through simple steps and are guided during the process.

Most of the feedback I received was aimed at improving some of the visual elements. The flow, on the other hand, was very clear and they knew where to navigate too. It was mainly the details that I had to pay a lot of attention too in finishing my prototype.

On the agenda page I wanted to design a digital calendar. Depending on the culture or country where someone comes from, the first day of the week starts on Monday or Sunday. In the Chinese calendar, for example, it starts on Monday. But in Christian and Arab countries the week starts on Sunday. For this reason, I consciously chose to give the weekends a different color in my design to avoid confusion.

End Result

After processing the feedback from the Heuristic Evaluation, I made a complete prototype for testing among my target group.

I conducted the Usability Test with 6 people. For 4 of these participants Dutch was not the native language. The average age was 55 years.

This was the moment to see if the design patterns that I applied were also clear to my target group. After the first 3 tests I saw a recurring problem among the test subjects. The icons of the ‘Leef and Leerpunt’ weren’t always clear enough. Possibly they were too stylised (or modern), so that users could not associate the icons with reality or previous experience. They also found it difficult to navigate independently through the page without help. This was because the homepage was too busy, or because the translation button wasn’t present. Once they got to the ‘Leef and Leerpunt’-section of the site they could find their way.

Halfway through I adjusted small elements in my design. Including the icons and illustrations for adding an activity to your calendar. Even though I asked exactly the same questions during these last 3 tests the results showed an improvement. Users were able to navigate the website easier.

Eye-Tracking Results

After applying the feedback from the Usability Tests, I conducted eye-tracking with 3 participants. Here I wanted to be sure that the changes I made in the interface would be noticeable and understandable. My participants all differed in their Dutch language proficiency. The results were largely in line with the previous findings from the Usability Tests.

Conclusion

After I gathered all the information from the Usability Tests and Eye-tracking Test, I came to the following conclusion: the design I made for the OBA website, with the target group of immigrants and refugees, was clear. Even for those who were less skilled in speaking Dutch. They understood the design patterns that were processed in the calendar, the tabs, changing the language and adding activities.

Afterwards I asked all test subjects what they had initially looked for when opening the site for the first time. Participants who spoke little or no Dutch wanted to first adapt the website to their own language in order to navigate through the website. Participants who were able to speak a little Dutch, but couldn’t speak it fluently, didn’t necessarily have to use the translation button. Their focus was more on visual expressions, including icons and images. Using images, they could retrieve a lot of information and understand the context of the story. Participants who were more advanced at the Dutch language mainly looked at text and tried to find their way using that.

All test subjects understood the calendar very well and were able to find the activities quickly. The tabs above the calendar were very practical and saved space.