Design + UX
mObywatel Polish ID App redesign exercise
Last June I was so preoccupied while traveling that I forgot my national ID card from home. That caused a small problem, as I needed it to confirm my identity at the TOOL concert in Krakow so I had to find a way. Going back 400km home to get my ID wasn't obviously a desired outcome. There had to be another way.
It turns out there's an app for that.
I downloaded the mObywatel (mCitizen) app for my iPhone all happy that it will solve all my problems.
Sadly the app didn't work as expected and it took me 2 days to actually be able to use it. All communications within the app are written in a "government" way of "we'll let you figure out what it means, now move along". 🧐
What's also cool is that every app update requires you to log in again. Safety first, especially since the login is through an external web service that sometimes doesn't give the data back to the app resulting in an error.
Reality kicks in 🤯
But after I managed to finally log in, I was greeted by a very retro look & feel, reminding me a bit of the good old skeuomorphic days of 2008. 🤦
Since I had to use that app for over a week, I couldn't help myself but to take it into 💎Sketch💎 and see what small changes can be made for it to make more sense visually.
Clarity and readability were the main concerns, but of course making it a bit more modern wouldn't be a bad thing either.
The first screen would be self explanatory but for some reason the main menu is (in some instances) under three dots on the right. The bottom menu has mixed tabs and actions. (home is a tab, share is an action)
And those cards ... Don't let me get started on the cards. Just one thing - nothing speaks rigid government rules like a card that's visually "bending". 🥵
What I did was to make the tabs bigger and only action focused (history would be a modal as making a change here is next to impossible anyway).
Bigger tabs equal easier navigation, especially under remote circumstances of showing the ID to someone to verify.
The horizontal cards could've worked ok as simple (smaller) objects with all of them visible on one screen. But since that decision wasn't made I went a bit more crazy with a carousel. Why not!
mObywatel ID card view
The ID part was even easier. The main problem there was ineficient use of space. All the information was squeezed towards the top of the app, impacting readability and leaving a lot of empty space below.
Simply unifying the fonts and spacings did the trick and readability went up. 📈
Since it's one level deeper than the main screen, having the main navigation here would be silly, so the home button got removed too. The three dots at the top can serve as a per-screen more modal if one is even needed (most likely : no.)
Adding a grid is the first step.
Of course none of it was random.
We used a 16 point grid system, with 8pt increments (16 -> 24 -> 32 where needed). Here's an example of the applied grid. The "real" app has pretty random spacing throughout. By choosing the font sizes within the 8 point system as well we managed to get vertical rhytm. This all took into account different widths, as the grid here is not completely centered due to the amount of information on the right side of the photo.
Why we do those quick redesigns?
We're doing quite a lot of workshops and classes and we've noticed that one of the best ways to teach people of best practices is to show them applied to something they already know and use. That way they can re-apply that knowledge in their own projects.🚀
Total time on this project was only an hour, as like in most cases quick readability fixes don't require a lot of time and effort.
A true redesign would of course start with research, A/B testing and a design system, but that wasn't the point here.
Small changes make a big difference.
Did you like the redesign? Let us know what you think, share it and enjoy your plastic ID card. I mean it's great that this app exists and it is useful if you forget your ID. But the way it looks now it's not really pleasant to look at. 😎
Design + UX