Let’s see how Doctolib’s app user flow works
Ironhack’s Prework — Challenge 2 : Wireframing
My second challenge for Iron Hack’s prework is to « reverse engineer » the one popular app Interaction Design and User Flow. My task is to create a wireframe version of the user flow of the chosen app based on screenshots.
For this challenge I chose Doctolib’s app. Doctolib is a French app to make online appointment with a medical specialist. It’s a platform that I used to use from several year. It’s really easy to make a medical appointment : we don’t need to call, we can have access to the planning and choose the best time that fits with our own schedule. We can have the address, codes to access to the building, consultation fares… everything ! And if we can’t go for any reason we can cancel it with a simple click.
During a long time I made my appointments via the website and I recently downloaded the app on my smartphone : it’s even better and easier ! Now, I can have access to my medical schedule anywhere and make a medical appointment at anytime. It’s really an app that makes my life easier and I wanted to dissect it to see its bones. Through this challenge I would like to understand why it’s such an efficient and pleasant experience.
I chose one specific task : make an appointment with a healthcare professional the user used to see. Six screens are required to complete this task, from the home page to the « confirm the appointment » button, as you can see through the original screenshots :
UI elements in this app
To understand the user flow, I began to list the UI elements I see in this app, in other words : all elements the user can interact with, have an action on it.
Components that appear through the six screens selected are :
- Input controls (radio buttons, buttons)
- Navigational components (search field, icons)
- Information components (wizard)
- Containers (accordion)
Only six different kinds of elements : not so much !
Lo-fi drawing of the user flow
When I did it, I realized there is one screen for each task. It might be for this reason that using this app seems so fluid and quick. This first feeling was confirmed by describing the task analysis of the flow.
Task analysis of the flow
- From the home page, click on the search field to find a medical specialist — > you go to the search page with my healthcare time list
2. Click on a specialist name — > you go to the specialist profil page
3. Click on « make an appointment online » to make an appointment — > you go to the appointment reason page
4. Click on the reason that suits you— > you go to the timetable
5. Click on the day and time you prefer for your appointment — > you go to the patient informations page
6. Answer few questions and confirm your appointment — > you made your appointment !
Result : six tasks for six screens !
With a complete knowledge of these screens thanks to these past two steps, I used Sketch to wireframe them in mid-fi.
Mid-fi wireframes
My real difficulty was to select the elements I wanted to show and those I wanted to hide. So I did a choice and decided to keep only icons or texts that are essential to the task understanding and those the user can interact with. Simplify at its maximum it isn’t so easy !
Prototype of the user flow
Finally, I put all my wireframes together through a prototype that recreates the user flow with Invision.
Doing the prototype and linking all the frames together was really fun. It was like giving life to my work !
Conclusion
To conclude, this challenge allows me to truly see how an app is built. When I was doing my wireframes, I used a lot the cmd+d shortcut to duplicate elements. I realized that we don’t need a lot of icons or buttons to be efficient. Keep it simple has to be our leitmotiv as a designer.
