Prototyping The Desired flow

I wish I had this UI when I first came to berlin…

Analyzing the current user flow, it is clear that the 2 first steps are quite inevitable.

Analyzing the current user flow, it is clear that the 2 first steps are quite inevitable. 

Looking at steps 3 through 10, I believe there’s an opportunity to mitigate user frustration. In fact, this was the goal of the activity I worked on for the Shift Nudge Course.

The current user flow assumes that users will read every detail before clicking the call to action to schedule an appointment.

If you’re a new user and unaware of how quickly these appointments can run out, you’ll likely be tempted to read the entire page—you never know with all the German specifications. But by the time you decide to click for an appointment, you may be disappointed to find there’s nothing left but to wait for the next availability.

From my experience, I believe this flow should be optimized to ensure that users can quickly secure an appointment first and then be guided through the necessary specifications afterward.

Happy Path User flow proposal:

1. I land on a page that quickly explains the importance of registering my Anmeldung, highlighting the key details I need to know, while simultaneously prompting me to select an appointment.
2. I see the details for the appointment, including relevant information about the time and location, along with a simple form to fill out and confirm the appointment.
3. I see a clear confirmation page that validates my booking, along with a list of the necessary documents to bring to the appointment, as well as other useful information to help me prepare for registration day.

What has been described outlines the ideal or “happy path” for the user flow. However, we must also consider common alternative scenarios and how to address them in the most intuitive way.

Unavailable Appointments If no appointments are available, I would recommend displaying a helpful screen with tips on securing an appointment faster. This could include advice on the best times to log in or, in urgent situations, alternative contact options for support. An experimental feature could even allow users to schedule appointments automatically based on their preferences.

That said, this feature could impact the process on the other end, as there’s a significant chance that users who find it too easy to book an appointment might not show up, leading to inefficiencies for the office.
Appointments Within the Hour Another issue arises for users who secure appointments at short notice. For example, a user might book a slot at 11 AM, but it’s already 10:33 AM, and it will take them at least 45 minutes to reach the office. In this case, the system should optimize the experience to prevent frustration on both sides. Providing a warning or an alternative solution would help manage expectations and prevent no-shows.

Low Fidelity Mockups

On top of optimizing the flow, I wanted to ensure the experience was seamless for mobile users, as that’s how I would personally approach it if the webpage allowed for mobile access.

It added to my frustration that whenever I tried to book an appointment on my phone, it wasn’t possible, forcing me to rush to my computer to complete the process.

Creating low-fi mockups helped me quickly visualize how the experience could unfold, saving time and keeping the focus on the overall structure rather than getting lost in the small details.

Taking a mobile-first approach also encourages simplicity. With less screen space, it’s a great exercise in segmenting the user flow into logical steps.

For the first screen, I chose to display a list of available appointments rather than a calendar. This makes it easier for users to select an option, as a calendar grid can be difficult to navigate on smaller screens.

After selecting an appointment, users are shown a form with only the essential fields needed to secure the appointment. Ideally, to speed up the process, I considered the option of allowing users to sign up via Google.

Once the form is completed, the user is shown a confirmation screen, making it clear that their appointment is successfully booked. At this stage, I would present the most important information, not just as plain text, but visually organized for clarity.

Naturally, this information would be arranged vertically and prioritized by relevance to ensure users have everything they need to complete the Anmeldung process successfully.

1. Documents that might be relevant to download and complete with a link to more information.
2. Adding an appointment to your google calendar so you don’t forget the event.
3. Adding a distance calculator so you can easily know how to go and how much time it would take.

High fidelity Mockups

At this stage of the design process, I began focusing on the look and feel of the interface. I wanted to ensure that the page didn’t feel disconnected from the Berlin official branding.

In this visualization, you can see how I incorporated the colors and distinctive shapes from the Berlin logo to add personality to UI elements like text inputs, dividers, and buttons.

However, a critical aspect to consider when bringing branding elements into functional components is ensuring that functionality—such as affordance or accessibility—is not compromised..

Conclusions

This exercise was a fun way to put into practice all the concepts I reinforced during the Shift Nudge Course. It also made me think about how much I would love to see this interface integrated into the official Berlin website.