DOCTO hero image main


DOCTO- a case study of online diagnosis for any digital users.


Because of the Covid-19 pandemics, we face a lot of health problem of face-to-face. People start using the Internet wider than ever. Now we can make online appointments with doctors but seems like they are not kind for patients and new digital users.


Design a platform which can be used by patients and elders quickly without any frustrations.


Concept, Research, Visuals


I conducted a small interviews to my friends who never used online diagnosis/clinics, then simply created empathy maps.

DOCTO empathy map


1. Patients who need an immediate diagnosis.
2. Patients who need to talk to doctors from their houses.
3. Patients who have difficulty with going to the hospital.


1. Some hospitals are not available in the midnights.
2. Hospitals are not accessible for some people.
3. Going to the hospital takes hours.


To estimate the user flow, and understand deeply about the end users I created 3 personas and user journey maps for each persona.

DOCTO personas

Competitive Audit

Mainly direct competitors can be divided into 2 patterns, specialized for diagnosis, bridge between patients = doctors.

DOCTO  competitive audit


First, I did Crazy Eight with the subject of  “how I could connect patients and doctors immediately?” for the brainstorming. Then I simply scripted six possible home screens for the dedicated app before creating a paper wireframe.

DOCTO brainstorming

Wireframe to Lo-Fi

Based on the ideation phases, I draw up the wireframes for dedicated mobile app with a pen and piece of paper first. Then, I turned them into digital wireframes with Figma. After that, I conducted a small interviews to my friends who never used online diagnosis/clinics, then simply created empathy maps.

DOCTO affinity diagram

Information Architecture

Based on the paper wireframes, I made a simple information architecture to understand user flows easily before going digital.

DOCTO information architecture

Lo-Fi to Hi-Fi

After usability studies, I synthesized collected data, and prioritized insights from Priority0 to priority2. Then, I redesigned the wireframes and turned them into high fidelity prototypes. Detail of iterations are on the deck which can be check on the bottom of this page.

Link to Figma

DOCTO  prototype image

Style Guide

DOCTO style guideDOCTO assets guide
DOCTO hero image app

The easiest home

At first design, there were bunch of buttons which enhance user activities, however, I realized that people would use this when they are sick or injured.  So, I made the home as simple as possible so that users will be able to access doctors quickly.
Also, I put the button directly access to an emergency call for patients who need immediate cares.

DOCTO screenshot

The easiest flow

You are not always sure which department would be fit on your symptoms unless you’re a doctor. Therefore, to remove the users’ stress I introduced seem-less and straightforward diagnosis flow before selecting doctors. Thus, users can see the right doctor immediately.

DOCTO screenshot

The easiest video call

There is no need of fancy filters or conference-enhancement tools for online diagnosis.
So, I designed this as minimal as possible, and at one glance understandable flow. So that any users include mobile beginners such as my grandmother can use this without any struggles.

DOCTO screenshot

Site Map

Before going specific, I created a sitemap for web versions, so that I can have thorough user flows in my mind beforehand.

DOCTO sitemap

Responsive website

For some users, video chatting would fit on other devices than a mobile app, therefore I created responsive web designs for mobile, tablet, and desktop.
However, this is mobile-first project, so I used progressive enhancement method for beginning.

DOCTO wireframe
DOCTO hero image

Open presentation deck

Interested in working with me?
©Taito Iikura 2023