COVID-19 vaccine registration design and testing
How did I use data to improve vaccine registration at the City of Seattle?
My role: UX and analytics guidance, communication with stakeholders
Working with the Mayor’s office was always tough. Their staff was always tasked to accomplish digital experience goals with almost no time to get it done or any realistic idea of the process or dependencies involved.
The staff always expected our digital team to build custom ideas they never vetted or including technical partners on ahead of time.
The success of this project was due to being proactive with mayoral staff, setting expectations, and going above our team’s scope to do what was right for the public.
Business Problem
The original COVID-19 testing page on Seattle.gov was confusing for the public. It was created quickly by mayoral staff and it had all the right information, but the user flow and the wording for sign-up was vague.
There were two pathways - one for people exhibiting symptoms and one for people who had no symptoms.
Immediate time-slots were reserved for people experiencing symptoms so they could get tested quickly.
People without symptoms were scheduled 1-2 weeks out.
Up to 50% of people with and without symptoms were signing up incorrectly and the reserved time-slots for sick people were not being used as intended.
How did I guide the UX process on a short timeline?
The mayor was under a lot of pressure to make sure the city vaccination sites were set up and working well. The online registration system was the front door.
I knew the main registration and sub-pages would need to be reorganized and rewritten, but the mayor’s team wanted it done immediately.
As the lead for my team, I wanted to set my designer up for success. Before our mayoral stakeholder could be directive, I quickly proposed a plan we put into action.
I proposed we redesign the pages using patterns we had put in place in other platforms that could help provide visual focus for the different registration paths.
I also proposed we conduct a usability test, which we ha push-back on first due to the turn-around time, but I assured the mayor’s team we could have results back within 24 hours after designing a prototype in Figma.
My designer update the page organization, improved the visual design to help make the choices clearer, and edited the content. This was all done using UX principles and best practices.
I set up a usability test on the design prototype at the same time it was being built in development. This would allow us to get some signal that the redesign would direct people correctly and the mayoral team wouldn’t lose any time waiting. We could always tweak after the launch if needed.
Within 3 days, the website changes were moved to production and I had initial results on the registration flow’s usability. This was a grouping of 3 pages that led to a vendor’s registration application so it wasn’t a large project, but it had very high visibility.
Design Process
I sent the designer the data to get her started. We zeroed in on web analytics and behavior maps. Mobile interactions were much higher so we chose design patterns that conserved space on small screens to optimize the experience.
I collaborated with my designer in a quick collaborative session where we mapped the two user paths and thought through word choices to make the options plain and actionable.
UX updates based on basic principles:
Design was optimized mobile-first
Duplicate content was removed
Most useful information at the top and content most important to choosing a registration path was placed contextually with the sign-up buttons
Button copy was change to specifically address each registration path: “Yes, I have symptoms” and, “No I don’t have symptoms.”
Design elements were used to distinguish sections of the pages more visually and highlight importance.
Before UX design and usability testing
After reorganization, UX writing, and design pattern updates
Results
Our stakeholders saw an immediate difference when the new design went live. There were almost no people registering for the wrong time-slots. This also validated what we were seeing in the new heat maps.
The scroll map on the left show that people were lingering at the first registration button, but the second map shows more people were clicking on the second button.
Ever since the success of this project, we gained a lot of trust with the mayor’s office. They would contact me and bring our team in at the start of projects instead of waiting for a problem to arise.
