Redesign of Brno iD account page

Read updated version, it’s way better 🙂

Old version

It’s easy to judge. Making things better for real, that’s the challenge. This lesson and more are my takeaways from working on a redesign of Brno iD.

Table of Contents

The design is never finished is another. We joke about project-final-final-v2-final-real_final file naming convention for a good reason.

I could easily continue iterating. I could structuralize the design in a different way, and make more and bigger changes. But I won’t. Why?

I’ve set project constraints for myself in order not to spend too much time on this.


I’m paying myself in chocolate bars but the boss is greedy and won’t pay for overtime.

Project constraints

Project constraints limit the scope of the redesign.

  • Conform to current layout and branding – I won’t be redesigning global navigation, etc.
  • Redesign only one page and preserve its functionality and content as much as possible.
  • Don’t require changes in the backend.

Basically, the redesign will be mostly visual and it won’t be a radical one.

I don’t know how exactly the website is built – I might need to make assumptions. However, I’ll try to verify them as much as possible.

Original account page

When I saw the original Brno iD account page (more specifically the basic data page with my information) it immediately struck me that I could make a redesign.

Take a look yourself:

Original page

Note: I’ve replaced real information with dummy data for privacy reasons.

View images in full screen: Right click + Open image in new tab

It’s not the worst page but I thought I could make a redesign that would be better.

Judgment time!

Let’s walk through the original page. I’ll comment on some of the issues I’ve noticed.

Picture of a judge

Navigation looks like separate buttons instead of one cohesive unit:

Original navigation


Ticket type entitlement is relevant during the process of buying a ticket. It doesn’t need to be on this page:


The email verification section is too wordy. The email log is a low-priority element that doesn’t need to be at the top of the page. It makes for a poor visual hierarchy of the page:

Email verification and log


The next piece of content is only relevant during the verification. It doesn’t need to be always visible:

Content block related to verification

There is more info related to verification hidden under “More info”:


A wordy heading (a nitpick but still):

Long heading

Brno iD full

What’s Brno iD full? Here you go (this is a screenshot from different page):

Brno iD basic and full comparison, source:


Hints should be placed after the label for accessibility, not below the field:

Input hint below the field


Why are optional titles mixed with mandatory items?

Optional titles

Email field

The email field is read-only and can only be changed via support. Not very user-friendly.

Disabled email input

Moreover, the disabled input could have a better contrast:

Contrast Checker


The dropdown for day and year doesn’t make sense – there are too many items on the list. Birthday input fields are in disabled color as well, nevertheless one still can interact with them, strange:

Birthday dropdowns

Verification indicators

Verification indicators are inconsistent in placement. Interestingly, titles don’t have any. Keep in mind that email is verified differently from personal data:

Verification indicators


Address verification indicator is inconsistent with the rest – the verified address is indicated by text instead of an icon:

Address verification indicator

Notice that address is read-only. I don’t see an option to change it directly. The user can only add a new one. I haven’t tinkered with it because I don’t want to mess up my account (I do use it you know):


This is the new address form (with random values). It expands below the existing address:

New address (CZ)

The format changes when a different country is selected:

New address (USA)

Dropdown with filtering is very practical:



Why do they even ask for non-mandatory items? I’ll keep these in the redesign because I assume they need them, for some reason.

Non-mandatory items


The phone input field is way too long for an expected input length:

Phone input field

Contact address

The contact address is hidden by default. It looks a bit messy:

Hidden contact address

Expanded contact address:

Expanded contact address

Save button

The save button is the only one with a background shadow. A bit too chubby as well. It doesn’t fit with the rest of the buttons:

Save button

Background color

The page background color is based on the referral page (default grey vs blue for sport). This is an utterly unnecessary complication to keep the website accessible (color contrast):

Referral based color

Error tooltip

The error tooltip shows up only after the page is submitted and it’s hard to see (covered by modal overlay). Furthermore, it goes away on clicking anywhere. Very. Bad:

Error tooltip

Commence redesign

Let’s grab a few old papers, turn them blank side up, and sketch.

Not me. I don’t wear a t-shirt of this color.

Note: All drafts are “encrypted” with Roman’s poor handwriting. Sorry.

First draft

My first draft deals with the order of elements on the page:

draft layout

Ideas in the first draft:

  • Remove entitlement because it doesn’t make sense here.
  • All emailrelated content should be together.
  • Move identity verification information to the end of the page.
  • All personal information is in a single form.
  • Use a consistent grid layout for the whole page.

In my first draft, I was aiming to simplify as much as possible, reorder & remove items, and unify the page structure.

Second draft

My second draft goes into a bit more detail and refutes some ideas from the first draft:

draft form

Let me walk you through the 2nd draft.

Personal information

Personal information that is mandatory for Brno iD full gets a preferable treatment and is placed first. Non-mandatory items are moved to the bottom:

separate mandatory from non-madatory


I was itching to combine names into a single input field but remembered project constraints. The first and last name are probably two separate columns in the database. Making this change would probably break things.

Verification indicators

Verification indicators are made consistent: a single column of checkmarks (including one for the address). Users can start verification by clicking the link next to the unverified item:

verification indicators

Low-priority elements

Identity verification information is placed after the address. The email log is moved to the bottom of the page (as it’s a low-priority element):

identify and email log position


The address is made more compact. The first line includes the street name and both numbers (land registry number and house number). The second line includes the zip code and city. The last line is just the country:

address layout

Draft #3

I explored different states of verification indicators and also an error state for inline validation.

States would be color-coded:

  • green: verified
  • blank/dotted line: not verified
  • red: error

draft 3

Verified information would be accompanied by a green checkmark symbol. Input fields would be highlighted with respective colors.

I was considering an extra state “…being verified” but decided not to go with it because the original page doesn’t have it.

The third draft was the last one before diving into Figma.

Iterations in Figma

Pen and paper are great for initial problem breakdown. It’s fast. Changes are cheap. A great tool for broad strokes.

The downside is that elements are not to scale and are all over the place. Alignment is non-existent. I mean, I could use a ruler… but if you want things to look pretty why not just use the computer tool?

Anakin, Battle over Coruscant​​ (19 BBY)

Let’s jump to Figma.


The first thing I did was set up a blank canvas for my Figma adventure:

Blank canvas in Figma

Iteration zero

This one is feature incomplete. I’ve set up the basic navigation and form elements. I was following the direction set by my second paper draft.

Iteration 1

The first iteration took me a while.

Form layout

I was researching form best practices and accessibility guidelines. Based on those and what I already knew I decided to use a single-column form layout with left-aligned labels.

First name label, hint and input field

It offers great scanning speeds and it looks kind of neat. The form fields stay aligned. It doesn’t matter how long are the labels.

Hints are placed immediately after labels for accessibility (eg. easier for people with screen readers). Their font size is also bigger thus making them easier to read.


I used the same font as the original: Rubik. The golden ratio was my friend when specifying text size for various elements. Occasionally, I would increase the font weight to make it stand out more.

Golden ratio, source:


As a dummy text, I used the longest possible values. This would ensure my design would be able to accommodate it. The downside is it kinda ugly, init mate?

Long street name

Meet Rosha, our placeholder user:

Woman in white crew neck shirt smiling photo, source:


The long heading was shortened. Extra information was moved into the description below.

Heading and description

Iteration numero uno

I added verification indicators based on paper draft 3. This led me to move up email (and made it read-only). The remaining fields all have verification indicators. In this iteration, I chose to place verification indicators close to values.

Iteration 1

Iteration #2

The second iteration is way more complete than the previous two.

Iteration 2


Verification indicators and other elements were aligned. This looks better than the previous version.

Verification indicators aligned

Email verification

I believe users are used to email verification by now and don’t need detailed instructions. Entire email verification is reduced to a single link. The email log is hidden under a link as well:

Email field, verification and log links

Just a reminder, the original email verification and log look like this:

Original email verification and log

Verification card

A new addition in this iteration was the verification card with a call to action. It would only show up when there are unverified values. All the details about the process of verification are tucked away. The yellow color should make it stand out.

Verification card

The original:

Original content about verification

Inline validation

I added an inline validation error:

Inline validation error

The red color and warning sign makes it clear there is a problem.

The original:

Original error tooltip

GDPR and save button

Lastly, I added the GDPR checkbox and a save button. I removed the button’s shadow and made the text bigger.

GDPR and save button


Original save button

Iteration three

I improved upon the GDPR section and the button. I reduced the text weight and adjusted the save button aspect ratio.

Improved GDPR and save button

I started playing around with Auto layout in Figma. This iteration was my checkpoint in case I mess things up.

Iteration 4

Similar to the previous iteration: minor tweak to the save button and further experiments with Auto layout.

Auto layout

The only bigger visual change was in the navigation: the white background was removed. The white background was distracting even though it unified navigation as a single unit. The gestalt principle of proximity and users being familiar with simple navigation like this should be enough.

Navigation without white background

Feedback session

At this point, I was all out of ideas. I knew the design could be improved. I just didn’t know how.

Thinking reflect question mark, source:

Luckily, Jason, one of my colleagues at Red Hat, was so kind and gave me feedback.

Furthermore, Lenka, one of the UX people I met at a UX meetup, offered her help and added a great number of comments to my Figma project.

I’m incredibly grateful to both of them. Thank you, Jason and Lenka.

I won’t list all the feedback I got, only a few examples:

  • It wasn’t clear that the mandatory items were only needed for Brno iD full status. In fact, the Brno iD account only requires an email address for basic status.
  • The buttons are way too small and don’t fit the Brno iD brand.
  • Input fields and placeholder texts are too long.
  • Page content could be centered.

Iteration five

I separated email from personal information, changed buttons, and centered the content.

Iteration 5

Verification card

Also, I played around with the layout of the verification card.

Verification card


It’s worth mentioning that I wanted to distinguish buttons from input fields. The distinction should be obvious at the first glance. I experimented with black buttons with white labels. Those felt too visually heavy. I went with white buttons with black labels. This style is already used by Brno iD anyway.

Iteration #6

I made small changes to the width of the buttons.

Iteration seven

I removed the ugly grey page background! A major change that impacted input fields, buttons, texts…

Iteration 7


Once more, I needed to distinguish buttons from labels. This iteration has 4 buttons, each one a different style. I was experimenting. It doesn’t make a consistent design though.


I removed the email input field and replaced it with bold text. It didn’t make sense to have a read-only value inside an input field. It’s easier to achieve a good contrast without the greyed-out input field.

Bold text for email

Removing the email input field messed up the layout and it needed to be adjusted. I wasn’t particularly happy about the result.

I added an underline to the selected item in the navigation:


Feedback session 2

I had a call with Lenka and received good feedback that moved the redesign forward.

Iteration #8

Based on feedback, I shortened the placeholder text and I changed the colors.

Iteration 8


Finding the right colors proved particularly challenging. In the end, I settled for the ones suggested by HTML CSS Color. Anyway, I feel like better colors are still somewhere out there.

Updated verification card:

Verification card with new colors


I shortened the email title, removed the description, changed placeholder text and added padding between email log and the rest. It’s cleaner and easier to scan.

Email section


Birthday input fields were expanded and aligned to the columns.

Birthday input

Previously, I chose to keep them short to communicate the expected length of the input (up to two digits for the day and 4 digits for the year). This looks more organized though.


I added labels to the individual parts of the address. It presents information in a structured way.

Structured address

It ended up looking similar to the original:

Original address

Redesign (v8)

Last iteration, number 8, is the redesigned Brno iD account page.

View images in full screen: Right click + Open image in new tab


And the original:



It was a great learning exercise. I studied best practices for forms, and accessibility guidelines, and took advantage of the Auto layout feature in Figma for the first time.

I’m glad I set project constraints for myself. Otherwise, I would still be redesigning, making more and bigger changes and never finishing.

UX design can’t exist without feedback. I didn’t have a clickable prototype to test with users. Nevertheless, at least I got some from fellow UX people and it helped tremendously.

It was very easy to spot a poorly designed page (the original). It took me a significant amount of time to actually design something better (and I’m not 100% satisfied with the result).

Once, I lost an internet connection and realized I can’t open anything in Figma. I couldn’t listen to any tunes on Spotify either. Folks, I got some bad news for ya – we’re dependent on the Internet!

Welcome to the Internet, Please Follow me by SharpWriter on DeviantArt, source:

Redesign (v9)

Update: I was haunted by the ugly colors. Here is version 9 with fewer colors. It looks nicer, doesn’t it?

Project: Redesign of Brno iD account page
Date: 2023
Duration: 40 days +10min to change the colors for v9
Team: Roman Luks (UX)
Consultation: Jason, Lenka
Tools: Paper, Figma