{"id":208,"date":"2024-03-22T02:05:06","date_gmt":"2024-03-22T01:05:06","guid":{"rendered":"https:\/\/stanbednarekdesign.com\/?p=208"},"modified":"2024-03-22T02:05:06","modified_gmt":"2024-03-22T01:05:06","slug":"ba-mobile-app-redesign-challenge","status":"publish","type":"post","link":"https:\/\/stanbednarek.com\/index.php\/2024\/03\/22\/ba-mobile-app-redesign-challenge\/","title":{"rendered":"BA-Mobile-App: Redesign Challenge"},"content":{"rendered":"
UX\/UI Design<\/a><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n\n
\n\n
Public services<\/td>\n Feb. 2024<\/td>\n Ironhack Berlin<\/td>\n individual work<\/td>\n<\/tr>\n<\/table>\n\n\n\n

Intro<\/h3>\n\n\n\n

BA-Mobile-App<\/strong> is the official app of the Bundesagentur f\u00fcr Arbeit<\/strong> – the German Federal Employment Agency and is currently used by more than half a million people. The app’s aim is to digitalize services of the agency. Does the app do that?<\/p>\n\n\n\n

About the project<\/h3>\n\n\n\n

As a student during the IronHack bootcamp, I was given an assignment – Redesign of a digital product.<\/strong> The aim was to identify the elements of the product that may need<\/em> improvement, propose changes and test them. I didn’t think long and chose an application that gave me headaches many times.<\/p>\n\n\n\n

During the BA-Mobile evaluation, I paid attention to the overall grid\/column layout, the shapes and geometry of elements used, icons, fonts, colors and user flow logic, as well as accessibility (size and arrangement of elements) and locality (language). Problems occurred in all assessed areas.<\/strong><\/p>\n\n\n\n

Redesign mode: on<\/h3>\n\n\n\n

To improve the product, first I worked on the app’s drawbacks using Heuristics Evaluation and I fixed the obvious.<\/em> After solutions ideation, I conducted 5 iteration rounds <\/strong>with user testing. To show the improvement, I focused on three different flows:<\/p>\n\n\n\n

    \n
  1. One wants to see the contents of their new notification,<\/li>\n\n\n\n
  2. One wants to book an appointment with their caseworker,<\/li>\n\n\n\n
  3. One wants to change their personal data (address).<\/li>\n<\/ol>\n\n\n\n

    Flow 1 – notification’s content<\/h3>\n\n\n\n

    In the first flow I gave up the distinction between notifications (ger. Infomationen<\/em>) and messages (ger. Nachrichten<\/em>), because for many users the difference between the categories was not entirely clear. Tiles of individual documents have gained more space and it’s easier to keep an overview.<\/p>\n\n\n\n

    \n
    \n
    \"\"\"\"<\/div><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"\"\"<\/div><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Flow 2 – booking an appointment<\/h3>\n\n\n\n

    The App before the Redesign<\/h4>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    To arrange a meeting with their caseworker, the Agency’s Client will certainly go to the “Termine einsehen” menu (eng. See appointments<\/em>). After clicking, they will find themselves in the cul-de-sac of the system. The application will display that there are no meetings. And that’s it.<\/p>\n\n\n\n

    To arrange an Appointment, the User have to enter the “Kontakt Aufnehmen” (eng. Make contact<\/em>) menu. So, they will have to scroll through a long list to find the right option, but… They will not find one. So the Client will click on “Weitere Kontaktm\u00f6glichkeiten” (eng. Further contact options<\/em>) and they will be transferred to the Agency’s website and\u2026 they will not be able to arrange such a meeting anyway. This is only possible by phone or e-mail, but the App does not provide this information.<\/p>\n<\/div>\n<\/div>\n\n\n\n

    The App after the Redesign<\/h4>\n\n\n\n
    \n
    \n

    After making changes, the User can arrange a visit with their caseworker by clicking on the “Termine verwalten” icon (en. Manage appointments)<\/em>. Here, the Agency’s Client will be able to make an appointment with the office completely online. This is what a digital service should look like, right?<\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Flow 3 – changing personal data<\/h3>\n\n\n\n

    Before the Redesign<\/h4>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Here we go again\u2026 One might begin to wonder whether the Agency’s goal is to make the User doubt the use of its services, because the App brings one to further dead ends. The User can click on the Profile icon and then select the Address option in the Menu. And there they will see nothing more, just their address. Or dowload a PDF-leaflet about moving away and travelling [disclaimer: after first being redirected to the website]. In other words, the utility of this option is NONE<\/strong>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

    \n
    \n

    After the Redesign<\/h4>\n\n\n\n

    In the redesigned version, the User updates their own data themselves. Thanks to the possibility of uploading their Resident Registration Certificate, they no longer have to go to the Employment Agency’s office. In fact, a caseworker would have to check the compliance of the entered data with the uploaded certificate, and – in the event of a change in the responsible local filia – transfer the Client to the new caseworker. <\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n<\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    <\/div>\n\n\n\n

    Summary<\/h3>\n\n\n\n

    To improve the overall readability, I created the grid to make it even at every screen of the flow. The icons throughout the application got rounded shapes and the same line thickness, and some of them were created from scratch and replaced the old one. Furthermore, I introduced a clear gradation of Headers and individual Paragraphs. With this step I also improved the accesability by exlarging the smallest font used to 16 px.<\/p>\n\n\n\n

    \n
    \n
    \"\"\"\"<\/div>
    the new grid and spacing<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"\"\"<\/div><\/figure>\n\n\n\n
    \"\"\"\"<\/div>
    comparison of some new icons<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

    I also decided to change the colors of the interface. The user feedback was clear \u2014 BA-Mobile was way too depressing. Altough the saturated red logo of the Employment Agency posed some difficultes, I used it as an inspiration, since it reminded me of a poppy flower. Hence I decided to icorporate the color of poppy seeds and dried poppy plants. BA logo creates a coherent composition with this palette.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Additionally I developed features to improve user journey. No more switching from the app to the website to arrange an appointment, no more going to the Agency to show up in presence or to send a letter to change their data, no more calls needed when having questions – the added FAQ-Menu in footer will help the Users with their struggles.<\/p>\n\n\n\n

    I hope this all could contribute to decrease the frustration level of people in the involuntarily unemployment life situation. Stress? Ain’t nobody got time for that!<\/p>\n\n\n\n

    \n
    Read Case Study on Medium<\/strong><\/a><\/div>\n<\/div>\n\n\n\n\n\n \n
    ROLES<\/th>\n DELIVERABLES<\/th>\n DURATION AND TOOLS<\/th>\n<\/tr>\n
    User Research
    User Experience Design
    Interface Design
    Visual Identity<\/td>\n     		3 improved or new flows
    changed color palette
    fixed app grid
    accessibility<\/td>\n     		2-week sprint
    Figma
    User Interviews
    User testing<\/td>\n<\/tr>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

    Public services Feb. 2024 Ironhack Berlin individual work Intro BA-Mobile-App is the official app of the Bundesagentur f\u00fcr Arbeit – the German Federal Employment Agency and is currently used by more than half a million people. The app’s aim is to digitalize services of the agency. Does the app do that? About the project As […]<\/p>\n","protected":false},"author":1,"featured_media":247,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[21,26,28],"class_list":["post-208","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux-ui-design","tag-ironhack","tag-public-services","tag-redesign"],"_links":{"self":[{"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/posts\/208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/comments?post=208"}],"version-history":[{"count":0,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/posts\/208\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/media\/247"}],"wp:attachment":[{"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/media?parent=208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/categories?post=208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stanbednarek.com\/index.php\/wp-json\/wp\/v2\/tags?post=208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}