| Public services | Feb. 2024 | Ironhack Berlin | individual work |
Intro
BA-Mobile-App is the official app of the Bundesagentur für 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 a student during the IronHack bootcamp, I was given an assignment – Redesign of a digital product. The aim was to identify the elements of the product that may need improvement, propose changes and test them. I didn’t think long and chose an application that gave me headaches many times.
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.
Redesign mode: on
To improve the product, first I worked on the app’s drawbacks using Heuristics Evaluation and I fixed the obvious. After solutions ideation, I conducted 5 iteration rounds with user testing. To show the improvement, I focused on three different flows:
- One wants to see the contents of their new notification,
- One wants to book an appointment with their caseworker,
- One wants to change their personal data (address).
Flow 1 – notification’s content
In the first flow I gave up the distinction between notifications (ger. Infomationen) and messages (ger. Nachrichten), 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.
Flow 2 – booking an appointment
The App before the Redesign
To arrange a meeting with their caseworker, the Agency’s Client will certainly go to the “Termine einsehen” menu (eng. See appointments). 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.
To arrange an Appointment, the User have to enter the “Kontakt Aufnehmen” (eng. Make contact) 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öglichkeiten” (eng. Further contact options) and they will be transferred to the Agency’s website and… 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.
The App after the Redesign
After making changes, the User can arrange a visit with their caseworker by clicking on the “Termine verwalten” icon (en. Manage appointments). 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?
Flow 3 – changing personal data
Before the Redesign
Here we go again… 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.
After the Redesign
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.
Summary
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.
I also decided to change the colors of the interface. The user feedback was clear — 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.
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.
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!
| ROLES | DELIVERABLES | DURATION AND TOOLS |
|---|---|---|
| User Research User Experience Design Interface Design Visual Identity |
3 improved or new flows changed color palette fixed app grid accessibility |
2-week sprint Figma User Interviews User testing |