Shaping the interaction patterns for an automated appointment booking system.
The user journey for getting a decision in principle on a mortgage had a pain point. We had automated the flow to get an appointment online, but customers still had to speak to one of our mortgage representatives to book that. Our team was tasked with creating a pathway for customers to book online.
Researching familiar patterns
We had no existing pattern for online appointment booking, so I looked at different patterns that customers may be familiar with, from medical apps to hairdressers and online grocery slot selection. This helped shape the base patterns that we could put to users to test, alongside similar patterns we had in our design system.
Prototyping to test user preferences
Working alongside our Senior UX Designer, I wireframed and prototyped various possible design patterns. These were worked up in low fidelity in Axure RP to test with users. While not the simplest pattern, users reported back that the calendar booking pattern was the one they most associated with booking an appointment. While we expect users to book their appointment in the next few days, we understood the importance of listening to this recognition and giving them agency to choose an appointment that suited their needs.
Adapting existing design patterns for familiarity
As well as avoiding reinventing the wheel, this helps to reinforce patterns of interaction our users may be familiar with. We didn’t have an existing pattern for calendars, but breaking things down to an atomic level, I utilised the patterns used for primary and secondary CTAs. This created a familiar interaction pattern and meant we were meeting accessibility at the atomic level.
Designing for all devices
While size is not much of an issue for larger modern smartphones, I design for the smallest oldest mobile screens in circulation to ensure that it is still usable for those customers. Basing my calculations on minimum touch target sizes, on mobile I had to take the calendar out of the card component so it could stretch to the edges of the screen, and the individual dates had to be changed from circular buttons with gutters to larger squares that ensure the largest possible touch target for each one.
Baking in accessibility from the get go
It was important to ensure that the calendar pattern which works well visually could also be navigated by screen reader users. Firstly this required documenting the screen reader order to ensure the content was surfaced in the correct order. I also researched existing keyboard navigation patterns for calendars and included this in our design so that we weren’t expecting our users to learn a new pattern in order to choose their date.
