Helpful Information
Overview
Type of project redesign (Part-time)
Duration July 2021 - TBD
Role UX UI Designer
Tools and methodology Figma, User testing, UX copy research, Teams
Helpful Information (HIA) is a web app built to provide information and help to people affected by displacement. The web app was initiated in 2019 by aid workers in the Dutch Red Cross as part of 121 - a cash-based aid platform pioneered by 510 (510 is the digital branch of the Red Cross, based in The Netherlands. The organization aims to provide humanitarian aid across the world by creating data-driven digital products).
You can read more about it here. and more here.
While working on 121, the Human-Centered Design (HCD) team together with the aid workers noticed that aside from monetary aid, undocumented migrants suffer from a lack of access to information about their rights and services they can use in their situation. While initially developed and used as a pilot in the Netherlands for a limited user group (people affected who received aid through 121), HIA grew its user base due to the COVID pandemic as the need to spread information to non-Dutch speaking people in the Netherlands grew.
As it's reaching a greater user base, the team at 510 went on a user testing rounds that included interviews with different groups of people affected by displacement (A Person Affected (PA) is someone affected by natural or manmade disasters, who may or may not have received aid) in the bigger cities in the Netherlands, these groups have different needs, varying levels of command of the english language and varied levels of technological literacy.
Goal
With the growth of functionality as well as a priority on the COVID-19 Vaccination flow, The goal of this project was to redesign HIA based on the feedback from the user testing and conduct user testing for the new design.
I worked together with a Strategic Design intern and a UX copy specialist. Together we took the user testing findings and implemented UX and UI changes, took into consideration the brand and style of 510 products (of which I helped create the design guide and component library), adjusted components from desktop to mobile, designed new icons based on OCHA's guidelines and produced new copy while maintaining communication and actively participating in meetings with the product owner, client, and developers.
We also had to take into consideration the very restrictive back-end that was chosen to accommodate the aid workers who update the offers as well as to be easily scalable as it will be in use by more cities in the Netherlands and in the future by other Red Cross and Red Crescent associations around the world.
Process
Examining HIA's old design to get to know the web app and how it works we examined the interface online, took screen shots and started organizing them to build the site map. We've concluded that there are 5 types of pages that are different from one another and the content of those pages change by the location, subject and offer shown. We went over the UI elements and together with our volunteer UI specialist from philips we marked all the elements that were not best practices and could be improved. We've noticed problems like:
-
The header being very big and taking up "good real estate" of the page.
-
When the text in the subject page was too long it created a little scrollable section within the scrollable page which was not optimal.
-
"Last updated" timestamp located in the header even though this information should be low in the hierarchy of the text architecture.
-
Overall proportions of the icons and logos.
-
The information about the Whatsapp Helpdesk is shown only on the main page assuming that the user will recall this information when using the Whatsapp Helpdesk which could lead to disappointment if the user is not aware of the opening times and is having an emergency.
We concluded that the overall look and feel of the app has to be more professional and intentional as building trust with the user is crucial for the success of the product.
Analyzing user testing data We were given access to user testing findings that have been clustered and made into a presentation by the Human-Centered Design department of 510 in June 2021, The presentation showed the data from the original target group which was undocumented migrants in Amsterdam as well as the new users: undocumented migrants in Den Haag, Rotterdam, and Almere en Lelystad, Undocumented migrants of the LGBT+ Filipino community in Amsterdam and Rotterdam.
What was tested was:
-
In terms of content: what information is relevant? what information is less relevant? what can be added?
-
In terms of usability: How did you get this information? Are there things that are difficult/unclear?
Based on the user testing user personas were produced (shown below) each persona shows the difference between the groups of users using HIA, they speak different languages, on top of their mother languages some have a good command of the English language, some know a little English, some speak Dutch, some don't have good skills in Dutch or English. They also use their mobile phones in different ways - Some have access to internet at home or through a mobile sim, some are reliant on wifi in cafés and day shelters and they use different apps to communicate. It was found that most groups do use Whatsapp.
Some of the interface and copy comments we focused on:
-
Shelter - it was unclear to the user that we can not help them with finding a place to live but only direct them to temporary day and night shelters.
-
Lawyer - this category name was misleading as it did not direct users to lawyers but to organizations that can provide legal assistance and help them learn about their rights.
-
Doctor - this category is divided into body and mind - we learned that there is a lot of stigma throughout the user group about getting psychological help, even though it can be very beneficial because people affected deal with stressful situations and uncertainty and sometimes experience panic attacks and seek help in hospitals. Another problem is that in the Netherlands you have to see a family doctor before you go to a hospital unless it's a life-threatening situation and that is not communicated well enough.
-
Safety - this category caused a lot of confusion because of its vague icon and name, we learned that our user group is less likely to click on a category they don't understand.
-
Usability - the web app has "back" and "main screen" buttons on the bottom of the screen and in some user testing groups it was noted that the users were trying to go back with the preset back button of their device's browser which lead them back to the main page.
From the user testing, it was clear to see that disappointment is the emotion we want to avoid as much as possible, it makes the user lose trust in the app where it wishes to be a platform that shares information as aid. As much as we want to help, giving false hope can negatively affect our chances of supporting our users.
That's why redesigning the app with a focus on UX copy was so important at this point.
Design style, guide, inspiration, and icons Since I've been a part of the team that worked on the design style and component library of 510's products it was important to implement the style that was agreed on this web app, this was the first mobile product to be adapted to the new style and many components needed to be built or adjusted to it.
In order to have a better grasp of this product, we conducted a visual analysis of both apps of humanitarian organizations and apps that are built for people affected. We looked at elements from apps and websites of 510, the red cross, Doctors without Borders, and the UN. We found 2 apps that had similar functionality to HIA - Miniila which is an initiative by Missing Children Europe and Support for Migrants which helps raise awareness of human trafficking and enables migrants to access services and support in the western Balkan.
From the data collected in the user testing, we knew that some of the categories needed either a new name, a new icon, or both. We were also asked to create icons for sub-categories that the product owner wanted to add (for example the "Doctor" category that was divided into "body" and "mind" will be divided into emergency services, dentist, family doctor, etc and all new sub-categories needed icons.
In the humanitarian sector, it is advised to work with icons by OCHA (OCHA is the part of the United Nations Secretariat responsible for bringing together humanitarian actors to ensure a coherent response to emergencies.) and when we could not find the right icons we use their guidelines into creating them, throughout the project we produced close to a dozen icons and variations.
In our iterations of the redesign, we suggested the addition of photos to the app to create a sense of trust, help explain the content. Though this idea was met with some enthusiasm by the design team we had to revert from the idea for a number of reasons: Scalability - the aid workers filling in the offers might not have access to the right photos, copyrights - someone will need to produce the photos or make sure they do not violate privacy rights and lastly - avoiding situations where we show racial stereotypes.
Some of the changes we made were:
-
Moved the navigation bar to the top header. Having the "back" button on top increases its visibility and might solve the problem of users using their device's preset back button.
-
Replaced the "main page" button with a clickable header. This might not be clear to users who are not technologically literate but we felt that the main page doesn't provide important enough information that needed a button to go directly back to since the user is always 1-3 "back" clicks away from the rest of the information.
-
Added information about the availability of the Whatsapp Help Desk next to the WhatsApp button to avoid user recall and disappointment.
-
Offered a language change dropdown that would lead to the main page in different languages.
-
Designed a smaller header to make sure more information is shown on the screen without scrolling.
-
Moved the "last updated" timestamp from the header to the bottom of the offer pages.
Bright VS. dark theme The helpful information web app, as the name suggests, is packed with information. Being a text heavy platform and knowing UX UI "best practices" we offered design solutions with a light and soft beige background (which is associated with 510) and our Navy text on top.
While the result was pleasing to our eyes, we were educated by our head of design about the choice of a "dark theme" for this product.
As their former research shown, the user for which this web-app is intended is more likely to experience PTSD, and is likely to be using this web-app in stressful situations such as - looking for medical assistance, looking for shelter, seeking protection from violent situations and more. In these situations it's important for the user to not feel overwhelmed while looking through the platform and having a dark themed design helps relief stain on the eyes.
Going forward we designed many changes keeping this information in mind, minimized white boxes that were used in the old design and using Material design information on dark theme as a reference point.
Site map and back-end As I mentioned before, the site map of this web app is quite simple. there are 5 types of pages :
-
The main page (shows a selection of cities)
-
The city page (shows a selection of categories)
-
The category page with sub-categories (if available)
-
The category page with offers
-
The offers page
(With the exception of the Covid vaccine flow)
The content of HIA is stored on google sheets, this backend was chosen to make sure that aid workers are able to fill in offers easily as part of their day to day activity since it was known that aid workers as a user group are mostly familiar with either Excel or google sheets and would be able to maintain the pages in this manner.
While working on the redesign and examining the offers, we noticed that not all cities had offers from every category. In order to avoid disappointment with our users we came up with a new site map proposition in which the main page shows the selection of categories that can be chosen - that way the user knows right away what they can find on the web-app without having to share information about his whereabouts- then he gets to the sub-category page (if available) and from there they chose a city and get the relevant offers. In this flow if the user is looking for a service that is not available in their location they are able to click on a different city and find offers there or click back once to find other offers.
We presented this idea to the developer and product owner. While it was agreed that the new site map would be beneficial, unfortunately, the way the backend is set up with google sheets meant that instead of every aid worker having to deal with 1 sheet that is of their city they would have to deal with multiple ones. Creating a portal in which aid workers could upload the offers that will be connected to a different backend was discussed but that out of scope for this project and so we went back to the old site map.
UX copy copywriting and UX copy played a huge role in this project. what words mean to different people, connotations, and prejudice could affect whether the user will continue to use the platform and get to the information they are looking for (as well as understanding it) or leave the platform.
I got to have joint work sessions with a UX copy specialist who was working on this project as well and got to learn a lot about her process and how it works together in the UI of the product.
Deciding how much text space a card is going to have, what size font to use for the titles to fit and so much more came directly from work sessions of finding a balance between the right copy for our user (who has varying levels of understanding of English) and also taking into consideration the scalability of this product and that the aid worker who fills in the information doesn't necessarily have the skills of summing up information to the correct amount of notes that would be most beneficial in terms of informing the user about the offer.
From the UX copy perspective, it was also discussed that an instruction guide would be made for the aid workers to guide them into applying the UX copy principles used here into further content in HIA.
Read Snezhana's case study here
Coronavirus vaccine flow As the pandemic started at the end of 2019 HIA outgrew its original user base was used by the red cross to distribute helpful information about the virus. as mentioned the coronavirus flow was an exception to how the rest of the platform is set up - you get to it through the main page, then choose a language and from there you are directed to pages developed by the Dutch red cross in the corresponding languages informing people about staying safe, regulations and where to get tested.
Around halfway, through working on this project we were asked to incorporate the newly released Dutch website for receiving the COVID vaccine without an appointment as well as without a BSN (the Dutch citizen service number). We had to figure out the best solution of incorporating it into the old design while bringing in UX copy expertise and the least amount of DEV changes so it can be implemented as fast as possible.
We came up with a few options and together with the developer we found a solution that was easily implementable whilst still keeping the new design in mind and creating a redesigned version of the page using the new components and elements.
User testing After prototyping the new design and filling in a few pages with content that has been modified by the UX copy specialist we were sent to test our redesign. We conducted a round of user testing in De Nieuwe Stad, a day-shelter for undocumented migrants in south Amsterdam where we had the chance to talk to people affected who have not used HIA before.
Through all the testing we noticed that in terms of getting around in the app and completing the tasks, all of the users found it easy and clear to find the information we requested of them to find. Some of the copy caused conversations about how the users would like to be addressed as well as some copy was not clear enough for this user group.
Most users found it difficult to locate the Whatsapp helpdesk button and information because of the white background of it as well as misalignment between the size of the prototype and the mobile phones that were used in the test, it got lost into the preset bottom bar of the phone's browser.
We tried to test our language change option but we found that in this user group it's quite difficult to test out hypothetical scenarios and since all participants of the user testing spoke English and did not speak dutch we couldn't properly see if adding this option would be affective.
Iterations After the user testing it was decided to put aside the language change idea as it would have taken more development capacity than was available at the moment and we could not prove its usefulness.
We created a different design for the Whatsapp helpdesk that would look more separate from the preset bottom bar and some of the UX copy was revised.
Finally, We created a file for the developers where they can find all the information about the redesign.
Prototype
Outcomes & Lessons
At the time of writing this, the redesign is passed to development for implementation. For the client's request, we added a hyperlink to every offer leading to a feedback questionnaire to give users an opportunity to share their opinion and needs. As this is an iterative product, once the redesign is implemented there will be more testing and together with the feedback - improvements to make. The next step might be adding static information about rights and laws.
It's been an absolute pleasure of mine to get to work on this product with this amazing team and also going to the field testing the product with people affected and seeing how we can help them by designing for them.
Some of the Lessons I've learned in this project were:
-
The importance of human-centered design and when you have to break out of "best practices" to accommodate for the user.
-
UX copy - research and methodology and how crucial it is for the success of products.
-
Designing for scalability - what we need to take into consideration as designers when content is changing and when the person entering the content is not a designer.
-
I also really enjoyed having meetings with developers and understanding how they work as well as understanding how the backend works and designing within its constraints.
