{"id":3195,"date":"2021-05-26T20:08:13","date_gmt":"2021-05-26T20:08:13","guid":{"rendered":"http:\/\/miguelbarrerodesign.com\/?post_type=portfolio&p=3195"},"modified":"2025-03-07T11:15:22","modified_gmt":"2025-03-07T11:15:22","slug":"search-help-for-victimst","status":"publish","type":"portfolio","link":"https:\/\/miguelbarrerodesign.com\/index.php\/portfolio\/search-help-for-victimst\/","title":{"rendered":"Victims’ aid Berlin Finder"},"content":{"rendered":"[vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1621251729838{padding-top: 10px !important;padding-bottom: 10px !important;}”][vc_column width=”1\/2″][vc_column_text animation=”animation bottom-to-top”]\n

An online database platform that provides support to victims who experience violent abuse.<\/span><\/h2>\n

The Opferhilfe Berlin e.V. (victims Aid Berlin Association) proposes to create an online platform to help victims of violent conflicts. By visiting the website, victims can find the right help to solve their case without having to search for a long time and safely.<\/p>\n

Another challenge to be achieved is to be a multicultural platform, accessible to people with disabilities and with special consideration for victims of extremist political violence. The target group must find their result fast, easy and must feel secure in their experience. Search engineering must always offer a result to the victim.[\/vc_column_text][\/vc_column][vc_column width=”1\/2″][vc_empty_space height=”20px”]\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tClient: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\tOpferhilfe Berlin e.V.
(Victims Aid Berlin Association)\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\tMy role: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\tUX\/UI Design
Lead Art Direction
Digital Product Design
Conception
Branding
Creative Direction
User research
User-Centered Design
Information Architecture\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t: <\/strong>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” thb_video_overlay_color=”#f9f8f8″ css=”.vc_custom_1622562683860{background-color: #ecf1f7 !important;}”][vc_column width=”1\/6″ css=”.vc_custom_1622560648018{background-color: #ecf1f7 !important;}”][\/vc_column][vc_column width=”2\/3″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”80px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_column_text]\n

Solution<\/strong><\/h4>\n[\/vc_column_text][vc_column_text]\n

A new online portal with an intuitive, functional and Accessible Design.<\/span><\/h2>\n[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/2″ animation=”animation left-to-right”][vc_column_text]The online portal used a User-Centered Design for an efficient experience to provide local resources and support facilities to victims of a violent abuse case. The design is based on Accessibility Guidelines.<\/p>\n[\/vc_column_text][\/vc_column_inner][vc_column_inner width=”1\/2″ animation=”animation right-to-left”][vc_column_text]User-centered design techniques were applied here like Interviews, Personas, and Customer Journeys. After the results, it was possible to build a platform that\u00a0was really useful for the victims.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”100px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”30px”][vc_column_text]\n

The process<\/span><\/h1>\n

<\/h1>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

User Research<\/strong><\/span><\/h4>\n

The first part of the research was created the User Personas who represent our target audience. The User research process involved interviews with workers of the association, to provide quantitative data on the victims as well as interviews with victims who have resorted to the association to provide qualitative data. Thus, the way the portal should be designed could be understood.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1670243719211{margin-top: 5% !important;background-color: #ecf1f6 !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″ box_shadow=”large-shadow”][vc_empty_space height=”40px”][vc_column_text]\n

Personas<\/h2>\n[\/vc_column_text]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1670243793873{margin-top: 5% !important;background-color: #f1f1f1 !important;}”][vc_column width=”1\/6″][\/vc_column][vc_column width=”2\/3″ box_shadow=”large-shadow”][vc_empty_space height=”40px”][vc_column_text]\n

Customer Journey Map<\/span><\/h2>\n[\/vc_column_text]\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t[vc_empty_space height=”20px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

User Interviews<\/strong><\/span><\/h4>\n

5 interviews were conducted with victims who used the aid support service in berlin and a worker there. The result highlighted the importance of inclusion (languages, contrast, ..), of showing the information content very intuitive, the search for very intuitive and localized help, and the existence of help in situations where crisis is always available and to exit from the page due to the presence of aggressors.<\/p>\n[\/vc_column_text]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1670244772795{margin-top: 5% !important;margin-bottom: 5% !important;}”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Wireframes and Concept<\/strong><\/span><\/h4>\n

All the inputs were applied to the functionality of the portal to achieve the most optimal functionality possible for the user. It was designed what content to display and how to do it. For this, based on the sitemap, both wireframes and prototypes were created.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” thb_divider_position=”bottom” css=”.vc_custom_1670244718484{background-color: #f6f9fc !important;}”][vc_column][vc_empty_space height=”30px”][vc_column_text]\n

Wireframes<\/span><\/h2>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1670245012528{margin-top: 2% !important;}”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Designing the solutions<\/strong><\/span><\/h1>\n

After the interviews, the creation of personas, and the customer journey maps, I was able to design more suitable solutions for the users\/victims such as a smarter search, accessible content, or a more accurate map view to help victims wherever they are or more accessible access to resources.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center” css=”.vc_custom_1670245043927{margin-top: 2% !important;margin-bottom: 5% !important;}”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”40px”][vc_column_text]\n
Accessible content, crisis and exit buttons<\/strong><\/span><\/h5>\n

Thanks to user research, solutions were created for users such as displaying the content in 8 languages, in sign language, and in easy language.
\nMoreover, users will be able to adjust the contrast and size of the letters in order to help victims with any type of personal condition.<\/p>\n

In addition, two buttons were added, reachable all the time: One with direct access to help in moments of crisis and another to leave the website without leaving a trace for possible aggressors.[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/2″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/2″][vc_empty_space height=”30px”][vc_column_text]\n
Search engine and filter efficiency.<\/strong><\/span><\/h5>\n

The main search parameter is the name of most users’ needs. The results can also be easily adjusted with the filter system. Among them is the distance, type of case or languages.<\/p>\n[\/vc_column_text][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/2″][vc_empty_space height=”30px”][vc_column_text]\n

Map and list view<\/strong><\/span><\/h5>\n

The help resources are Swipe up to see all the information about the results and swipe down to see the entire map. You can also switch to a list view with just one interaction offering help from local sources exactly when and where you need it.<\/p>\n[\/vc_column_text][\/vc_column][vc_column width=”1\/2″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/2″][vc_empty_space height=”10px”][vc_row_inner][vc_column_inner]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column_inner][\/vc_row_inner][\/vc_column][vc_column width=”1\/2″][vc_column_text]\n
Detail Screen<\/strong><\/span><\/h5>\n

The local support details page clearly and neatly displays relevant data for the victim to reach and how to do it, as well as interesting related information based on the search parameters.<\/p>\n[\/vc_column_text][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/2″][vc_empty_space height=”30px”][vc_column_text]\n

Smart accessibility of resources<\/strong><\/span><\/h5>\n

The design of the experience smartly displays the support resources by formulating appropriate questions with the user search. The resources page is easy to access and provides additional information about resources in your area and how to contact them.<\/p>\n[\/vc_column_text][\/vc_column][vc_column width=”1\/2″]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”40px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1670244817335{margin-bottom: 2% !important;}”][vc_column width=”1\/2″]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/2″][vc_empty_space height=”30px”][vc_column_text]\n
RTL design<\/strong><\/span><\/h5>\n

Arab users will be able to understand the adaptation of the content from right to left and translated into their language.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1622060210053{background-color: #ecf1f7 !important;}”][vc_column width=”3\/4″][vc_empty_space height=”40px”]\t

\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][vc_column width=”1\/4″][vc_empty_space][vc_column_text]\n
Functional categories access<\/strong><\/span><\/h5>\n

Accessibility Guidelines were applied to the interface elements to achieve a satisfactory user interaction experience.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” el_class=”align-center”][vc_column width=”1\/6″ offset=”vc_col-lg-9 vc_col-md-10″][vc_empty_space height=”20px”][vc_column_text]\n

Accessible Interface Design and Branding<\/strong><\/span><\/h1>\n

The colors and icons created to redesign the brand are clean, neat and apply to the interface under Accessibility Guidelines. Users should have a visual experience in a context that is as comfortable and easy as possible.
\nThe typeface is “Atkinson Hyperlegible”, which makes it different from traditional typography design in that it focuses on letterform distinction to increase character recognition, ultimately improving readability.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row thb_full_width=”true” thb_divider_position=”bottom”][vc_column][vc_empty_space height=”30px”][vc_column_text]\n

Branding and Interface<\/h2>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column width=”1\/6″][\/vc_column][vc_column parallax=”content-moving” width=”4\/6″][vc_column_text]\n

The final product<\/strong><\/span><\/h4>\n

The final product design is a practical and functional help-finder portal that truly provides victims with the right information regardless of their language, disability, or personal situation.<\/p>\n[\/vc_column_text][vc_empty_space height=”30px”][\/vc_column][vc_column width=”1\/6″][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”80px”][vc_column_text]\n

Landingpage<\/strong><\/span><\/h4>\n[\/vc_column_text]\t
\n\t\t\t
\n\t\t\t\"\"\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t[\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”220px”][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row thb_divider_position=”bottom”][vc_column][vc_empty_space height=”20px”][\/vc_column][\/vc_row][vc_row thb_divider_position=”bottom” css=”.vc_custom_1621251729838{padding-top: 10px !important;padding-bottom: 10px !important;}”][vc_column width=”1\/2″][vc_column_text animation=”animation bottom-to-top”] An online database platform that provides support to victims who experience violent abuse. The Opferhilfe Berlin e.V. (victims Aid Berlin Association) proposes to create an online platform to help victims of violent conflicts. By visiting the website, victims can find the right help…<\/p>\n","protected":false},"author":1,"featured_media":3318,"comment_status":"closed","ping_status":"closed","template":"","tags":[],"_links":{"self":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/3195"}],"collection":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=3195"}],"version-history":[{"count":75,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/3195\/revisions"}],"predecessor-version":[{"id":3284,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/portfolio\/3195\/revisions\/3284"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media\/3318"}],"wp:attachment":[{"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=3195"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miguelbarrerodesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=3195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}