For this school assignment, the task was to redesign the form of a clinic in Norway called Klinikk for Alle. Apart from the necessary personal information and policy number, the form needed to be fully operable with a keyboard only, make adequate use of contrast for visually impaired and elderly users, use subheadings when required also taking web accessibility into consideration, ask for information in a logical order, and have a progress bar.
The original form, since it was was meant to be fully operable with a keyboard only, was designed for desktop, and it served as the starting point for the design of the mobile app version, which was a continuation on my own initiative and not as part of the original assignment.
My version of Klinikk for Alle's booking form for desktop
Mockup of the mobile app version of the booking form for Klinikk for Alle
My software of choice for this type of projects is Figma, which I also complement with programs from Adobe such as Photoshop and Illustrator, as well as very useful plugins that one can find on the internet thanks to the amazing user community in Figma.
The user flow is as simple as it can be for a process that requires to collect a lot of information from the user, from their personal information to the desired time and date of their appointment. I tried to make the process from start to finish in as few steps as possible and in the most intuitive and logical manner, while also trying to make the form as engaging as possible with the help of variation in the way the users interact with the app. Always trying to adhere to common app development practices and maintaining a clean, professional look. At the end of the day, the main user goal is to make a doctor's appointment.
Thinking of accessibility, I consulted the Web Accessibility in Mind's contrast checker to make sure that the choice of color was accessible, although the colours used on this design was directly taken from Klinikk for Alle's own website. The buttons and spacing are big enough to be easy to click on, and I abstained to use color in ways that could potentially make the experience difficult for people with, for instance, color blindness. These are only a few examples of how I tried to make the booking form as accessible as I could for everyone to use.
P.S. This is a case study still under construction! There's still more I'd love to share about the process behind and all, but good things take time to build :)
