Case study
2021

Creating a Seamless Digital and Physical Appointment Journey for the Municipality of Haarlem

The challenge

For my graduation project, the municipality of Haarlem (just outside of Amsterdam) approached me with serious problems. The drop-out rates for the online appointment booking process were exceptionally high, and citizens mainly depended on the service hotline to deal with renewals of their official documents.

In 12 weeks, I combined ethnographic field research with analytical data to uncover pain points within the whole digital and physical appointment journey. Within the innovation department, I designed a new intuitive, easy and accessible online appointment booking journey connecting seamlessly with the physical experience inside the public hall. Building on the user groups existing mental models.

My role

As an independent individual UX designer, my responsibilities touched upon the following activities.

  • UX research
  • Product Design
  • Service Design
  • Workshop Facilitation

Tools used

  • Figma
  • Miro
  • Webflow
  • Sketch-up
  • Lots of post-its
  • Pen & paper

City of Haarlem

A beautiful & digital dutch city

What is Haarlem, you might think? Haarlem is a medium-sized (235,141 Population) city in the northern half of the Netherlands and a beautiful town with a considerable population and economic importance for its region.

You need to know one thing about the Netherlands' governmental organisations. Almost everything is digitalised, and “citizen” centred design gains more importance. The municipality of Haarlem is no exemption.

Over here

A municipality with over 200 digital governmental services.

With the appointment journey at the center:
From making an appointment to the experience in the pubic hall.

Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey.

The Problem

More than 70% of all citizens who make an appointment online drop out during the process.

When Haarlem approached me, however, more than 70% of all users that started making an appointment online dropped out and, instead, called the service hotline to get help. This, in turn, caused a bad experience for the citizens and consumed significant Human Resources for the municipality.

Designing with the holistic journey in mind.

I approached this project with the holistic user journey in mind. Since the appointment booking doesn’t happen in a vacuum but is part of the bigger journey. As it turned out, while doing ethnographic research, there were problems interconnected with the physical appointment that I could, therefore, solve at the root.

Iterative design process it is.

Undoubtedly, every project has its own unique design thinking process. For this project, I decided to start with extensive user research to pinpoint and define existing problem correlations and pain points. Understanding the specific user & characteristics to inform my design decisions. This non-linear process was followed by iterative design & testing sprints in close proximity to the citizens.

The Solution

Clear, inclusive & guided process

The result is an appointment booking experience empowering all user groups to manage official matters autonomously and effortlessly. Improving user motivation through early feedback and clear instructions.

Leading up to a better-prepared citizen showing up at the physical appointment at the right time and checking in with the self-terminals with ease.

Connecting the touch-points.

The final experience includes all journey touch points. All steps connect seamlessly with each other. The check-in process at the appointment builds upon the citizens existing mental models.

See my full
In-depth process:

01
Research
Jump to section
02
Insights & Artefacts
Jump to section
03
Ideation & Workshop
Jump to section
04
Sketching ideas
Jump to section
05
Information architecture
Jump to section
06
First MVP & User testing
Jump to section
07
Additional ideation & journey prototyping
Jump to section
08
Design changes
Jump to section
09
Final Design
Jump to section

Kicking off with research

I decided on a diverse set of research methods to get a clear overview of the root problems users face and their fundamental needs for this specific context. I was working with an agile approach, so research activities were strongly influenced by initial research outcomes.

Desk research

  • Website analytics
  • Online city archive
  • Expert review
  • Scientific articles

User research

  • Usability testing
  • User interviews
  • Stakeholder interviews

Field research

  • Fly-on-the-wall observation
  • Participatory observation

Desk Research

Getting familiar with the users behaviour & diving into demographics.

I am analysing website analytics to understand how citizens use the website and service in Haarlem, focusing on the passport application process. I began by looking at available data because it allowed me to adjust my research based on any insights I discovered early on. There is no data available for the appointment-making process, but there is valuable data for users who visit the information page. This is usually a starting point for the appointment-making process. I am interested in analysing patterns in behaviour, including how visitors access the page and what they do on it. I also looked at an online archive with demographics and statistics about Haarlem's citizens.

Qualitative User Research

Poor usability and design causes significant drop-outs.

Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey.

Key Takeaway

Online journey lacks major usability fundamentals such as missing constructive feedback, no visibility of system status & visual hierarchy flaws.

Key Takeaway

Amount of irrelevant information and questions asked is causing confusion and increases cognitive load.

Key Takeaway

Date-of-birth as a check in code for the appointment is an unclear concept that causes confusion in the public hall.

Ethnographic field research

There are problems in the public hall.

While talking to citizens and support agents from the municipality, it became apparent that there were problems in the public hall. I did a fly-on-the-wall observation to investigate and interview citizens in context, and I was interested in identifying patterns in behaviours and reoccurring pain points. Interestingly enough, there are problems with the check-in journey, but also ones that are avoidable during the online process.

Mental model flaws

Nearly half of all visitors approach the assistant for help with the self check-in procedure.

01

The date-of-birth as a check-in code is an unclear concept. It causes confusion for 1st time visitors. This concept does not fit with the users mental model.

02

The machines lack Ease-of-use and are not intuitive to use. They are hard to understand and lack accessibility.

03

People show up at the public hall thinking they have an appointment but did not confirm it online. They have to leave again. Dropping out of the whole journey.

Connecting the dots

It’s time to get the bigger picture.

By now, I could gather a considerable amount of research data. Qualitative and quantitative and for each part of the user journey. I combined different methods and data on a synthesis wall to identify main insights and to create relevant research artefacts that support ideation.

Synthesis wall on miro

This method helped me to connect the dots between different steps of the journey and to get to the root problems. By combining research results from various research methods, I can be assured of the problems' relevance.

Key Insights

Boiling it down to the most important insights

Insight #1: Usability

Both the date of birth and phone number input field are the cause for major drop-outs during the appointment making process. Unnatural formats, insufficient error prevention and error handling.
1/4

Key Insight #2:

Insufficient visual presentation of date & time for the time slots causes citizens to show up without an appointment.
2/4

Key Insight #3:

Making an appointment needs to be quick, easy & mobile. Many citizens make their appointment on their mobile within their busy work day.
3/4

Key Insight #4:

People prefer to call because they don't feel competent enough doing it on their own online. Making it as easy as possible while reducing cognitive load is crucial.
4/4

While research, it became apparent that the date-of-birth field and the phone number input field are placesthat cause dropouts of the online appointment-making process. The date-of-birth input field only accepts a specific format but does not indicate by its design what kind.

I approached this project with the holistic user journey in mind. Since the appointment booking doesn’t happen within a vacuum but is part of the bigger journey. As it turned out, while doing ethnographic research.

I approached this project with the holistic user journey in mind. Since the appointment booking doesn’t happen within a vacuum but is part of the bigger journey. As it turned out, while doing ethnographic research.

I approached this project with the holistic user journey in mind. Since the appointment booking doesn’t happen within a vacuum but is part of the bigger journey. As it turned out, while doing ethnographic research.

UX Factors

Whats particularly important for the citizes?

These user needs are crucial to increase the adoption of the online appointment-making journey while enhancing the overall experience.

Efficiency

Making an appointment online should have a higher perceived efficiency than making one by calling.

Competence

Feeling competent and confident enough to initiate the application process autonomously.

Ease-Of-Use

Easy-to-use and intuitive design that builds on citizens' existing mental models.

Persona "Extremes"

Designing for all withholds challenges

Each and everybody within the community has to go through this process at some point. Therefore, creating personas that reflect a specific user group is impossible and not relevant. However, some user groups within a community have special needs. These need to be considered at a minimum to make the experience inclusive and accessible.

Starting the
design process:
Iterative sprint cycles

After concluding my initial research and defining the problems, I planned multiple design sprints. These sprints vary in time and are about one week long, and consist of ideation, concept creation, prototyping and evaluation. I decided to jump straight into rapid concept creation, followed by user tests as early as possible. This is to validate early ideas and learn along the way.

Involving other creative minds

Time to include other creatives with workshop.

HMW improve the appointment making journey for all citizens?

The purpose of the creative workshop was to involve various stakeholders with different professional perspectives. I wanted to generate a broad array of diverse ideas to use as a starting point for a first concept. The workshop used research insights, design requirements, and information about the user journey as a starting point.

A presentation was prepared with relevant information to introduce the topic and guide the brainstorming session. I mainly acted as a facilitator but also participated from time to time.

A glimpse into the workshop structure

Beginning with an icebreaker exercise to create a more enjoyable atmosphere, we moved on to a visual brainstorming exercise on the user journey maps. With dot-voting, we converged on the most promising ideas used as the starting point for brainwriting. The workshop was structured to facilitate idea generation and iteration based on research insights.

01
Presenting research insights & artifects
02
Opportunity brainstorming on journey map & HMW
03
Dot-voting
04
Brainwriting
05
Innovative Whack
Pack

Brainsorming

HMW improve the appointment making journey for all citizens?

The result is an appointment booking experience empowering all kinds of user groups managing official matters autonomously and effortlessly. Improving user motivation through early feedback and clear instructions.

Desk Research

Discovering psychological tools to support the users intentions.

Before moving on to concept sketching, I used this opportunity to do additional desk research based on my objectives. This was to explore relevant physiological principles that further support the design to help people achieve their goals.

Psycology Theory

Design Implication

Goal-Gradient Effect
This effect describes how motivation increases significantly when people believe they are in closer proximity to their goal.
Design Implications
This can be influenced by visual progress indicators but also low-effort-entries into a flow.
Zeigarnik Effect
Processes or tasks that are interrupted or incomplete are more likely to be remembered. Cognitive awareness increased after a flow has been interrupted.
Design Implications
Including artificial friction at the right point to increase awareness.
The Anchoring Principle
This principle suggests that the cognitive cost of decision-making is reduced when there is a reference value present. This can act as a visual reference of what is expected or “normal”.
Design Implications
Suggesting or pre-selecting default values to decrease cognitive cost and speed up the process.

Concept Creation & Prototyping

Going messy and broad

It is time to bring the design concepts and ideas to life. Doing so early on with low-fidelity prototypes allows me to test my assumptions with users quick and early. Since I am a visual thinker, I greatly enjoy this creative thinking method.

Doing Sketches

A glimpse into my notebook with various concept ideas and interactions. After brainstorming with the stakeholders, we decided on this project's direction.

Before:
After:

Making the flow as efficient as possible.

Research has shown that the process needs to be simple and intuitive at its fundament. Therefore, unnecessary user steps and input requirements must be removed, and irrelevant questions only reduce confidence and cause confusion.

The user must stay motivated and competent enough to make an appointment without additional help. I explored flows with as few steps as possible while staying within the organisation's requirements. I collaborated together with the tech lead.

The result was quite significant. A considerate amount of questions and information asked are redundant and irrelevant to the citizens' goals.
The initial questions, however, are required to estimate the duration of the appointment. I utilised these to solve another problem: Making the information more relevant and providing a low-effort-entry.

Prototyping

Creating a first MVP to validate the concept

I used whimsical to create the first wireframes and converted them into a clickable prototype using Figma. With that, I tested my very first concept and gained more insights to learn from. I wanted to test my concept of asking the initial questions before the actual appointment flow. Using these, I want to increase the relevance of the information for the users' goals while engaging the user to initiate the process online. So far, the hypothesis.

Validating Concept

Testing with citizens:
New input for further explorations.

I validated my greatest assumptions using this first MVP of the entire online flow. But also gain insight into existing problems. Moving the questions to the beginning made the participants feel more confident and competent in proceeding. Also, the QR code concept proved to be fitting the mental model. However, the actual time-slot selection needs to be more intuitive.

01
The initial questions before the appointment flow reassured their confidence and competence in continuing online.
02
The content is still too overwhelming and irrelevant.
03
The questions act as a perceived “low-effort” entry and keeps users engaged to make an appointment online.
04
The appointment selection part did not perform as expected. It is not efficient and intuitive enough.

Ideating on test results

Getting back to the whiteboard.

With valuable input from the first user testing sessions, it was time to put the learnings into perspective again. Getting back to ideation to refine the design concept. The result is several HMW question brainstorming visualised into prototypes for further testing.

HMW make the content more relevant and meaningful to reassure the feeling of competence?

I know by now that there is a connection between content relevance and the feeling of competence and increased motivation. By doing a competitor's analysis and defining specific user goals, I brainstormed and prototyped a more meaningful information presentation.

01
Brainstorming
Sketching out concept
Clickable prototype

Updated Flowchart

The content is filtered based on the personal questions answered. This required an update to the flowchart.

HMW make the appointment selection efficient, intuitive and error proof?

The first and probably most crucial step in the appointment-making journey is the time-slot selection. Taking the test results into account, I brainstormed a more efficient and easier-to-understand interaction.

02
Before:
After:

Utilising the Zeidernak effect, I introduced a pre-selected default. This default value is the next possible day. Since time preferences differ greatly, I empathised the design on this part and chunked up the values to further decrease cognitive load.

Prototyping

Its time to put the whole journey
together

To do further user testing, it was finally time to make the whole physical and digital journey one. At this point, I am still within the mid-fidelity of wireframing.

Wireframes of the digital journey

Mapping the whole digital journey pre and post appointment

The complete journey includes not only the pre-appointment phase but just as importantly right around the appointment and to follow up on it.

Gluing all touch-points together:
From the initial trigger to the psychical journey

I identified clear frustrations caused by last-minute passport renewals before the holiday season. Therefore, people get a letter notification with clear CTAs.

Storyboard of the physical touch-points

Touch-points

Mapping out the different physical touch points and bringing my Check-in concept to life.

Validating and improving the prototype along the way

Slowly moving towards high-fidelity, I made sure to continuously test with citizens to not only improve the design but also make sure I was solving the problems. Some of the testing insights:

01
Even though the QR code for the self-check-in proceedure is a well known concept, some elderly citizens feel some uncertainty approaching it.
02
Visually asking the initial questions together with the rest of the information on the passport page might be causing confusion and increased cognitive load.
03
Important documents to bring is easily being missed as users don't pay much attention to the page once they see a confirmation.
04
The appointment making process is quick, clear and doesn't cause any usability issues.

Some of the changes I made right before moving on to the high-fidelity prototype. After I make more significant changes, I usually test these at least once to check if they aren't causing new unforeseen problems.

Ideating on new challenge

HMW help citizens to understand the check-in process?

Since inclusivity is crucial for this project, I want to make sure that all citizens know exactly what to expect and what to do at which part throughout the process. Even if the check-in concept had been validated, some test participants didn’t know exactly what to expect, which is why I ideated on a better visualisation.

Prototyping & Visual Design

From mid to high-fidelity.

Finally, time to give the experience fresh paint and incorporate the organisation's branding. I upgraded the prototype using usability testing insights and moved it into high-fidelity, which offered new opportunities to better visualise details and interactions.

Landing page design evolution

A fairly important user step is the passport landing page. With each design iteration, the page got measurably more relevant, engaging & confidence promoting throughout the user groups.

Final Design

One seamless and engagingstep-by-step flow.

Effectively reducing the drop-out rate with increased motivation, feeling of competence for all user groups and an experience that fits the users mental model.

Personalising information to engage users.

From the beginning, citizens of all digital confidence levels are engaged by the relevance of information. By personalising the experience, cognitive load is reduced, and users are engaged to continue the process online.

Time-slot selection:
An error proof & efficient experience.

No confusion with the weeks and no superfluous thinking or time spend. A simple and intuitive time-slot selection, obvious by design. The appointment is what people brought to the website in the first place, and by making it the first step in the process, the completion rate is measurably being improved.

Fast and easy step-by-step flow

Get ready for your appointment

Making the appointment is only part of the journey. Preparing for the appointment and making sure to bring all necessary documents while appearing at the right time to the right place is crucial for a successful experience.

The design features clear follow-up confirmations and instructions. The citizen always feels confident and well-prepared. Transparency is key.

Pysical journey

Imagine you have never been to the public hall. Being confident instead of anxious.

Evident and apparent touch-points for a straightforward self-check-in process. The layout is designed to have a visual & physical hierarchy to be guided naturally. Seamless connection from the digital journey to the actual appointment.

Watch video

What I learned

Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey. Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey.

What are the stakeholders saying

Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey. Many official matters can already be dealt with online. However, some do still need a physical appointment at the public hall. For all of these, the citizens of Haarlem need to schedule one. This can be done online or, alternatively, via phone. You can imagine the importance this experience has within the user’s journey.

What's next?

Increasing the Completion Rate Using Psychology.

A project done for a scale-up startup.

Coming very soon