UX Case Study: Mobile first responsive website for online doctor appointments

Interactive prototype to show the journey for persona 1

Press play to see video»

Interactive prototype to show the journey for persona 2

Press play to see video»

Desktop version for persona 1 journey »

We started with the mobile version and only created wireframes for mobile, after which we adapted the design for the desktop prototype; we always had in mind mobile first, desktop adaptable. With research and knowledge from doctors that have been working in one of the competitor apps, we developed our two personas and their goals. We tried to choose different kinds of goals for the personas to show how the website works and how it can be used in different ways. This is why, for example, we chose that persona 1 uses a mobile device and persona 2 uses a computer (the desktop version).

With all the personas goals in mind, we started sketching our low-fi wireframes and wireflows in order to see what the easiest and most obvious way for the two personas to reach their goal would be without having two different information architectures and structures. We had in mind that the menu should not be needed at all.

Desktop version for persona 2 journey »

We did not want to give the users too many options and overwhelm them, and therefore we kept it simple. We decided the homepage should be the starting point for both personas when it comes to reaching their goal, therefore we added the modals with the services provided “Prescriptions” and “Flu”. However, to be able to access your prescriptions, you need to sign in, therefore the homepage has the sign in button in focus. After you have signed in, the welcome page is exactly the same as the homepage, but the message “Welcome…” gives the user feedback that she is now logged in. It is familiar to other apps that uses BankID as a login method. On the other hand, persona 2 wants to first read the symptoms of his flu and therefore chooses to click on “Flu” first before he signs in.