UX Project For Doc - The Health app

Doc - the Expert App is a modern web-based medical finder dedicated to obtaining and making the search for medical help worldwide online as easy and accessible as possible. The app is designed for every person, travellers, locals, families and singles, looking for an organized platform that can perform a quick search on experts based on location and connect them via video chat. This project originated from a project brief for CareerFoundry.

 
 
 

Making an appointment with a doctor sounds like an easy task, but in a lot of situations depends on a lot of factors to arrange an appointment smoothly.

Just think of (single-) parents, expats, students and travellers and rising costs of health insurance. Oh, and full practices, of course!

Interested in my Design Process?

Read below for a detailed walk-through or view the prototype.

 
 
Bildschirmfoto 2019-10-23 um 00.03.52.png
 
 
 

My Role

My role in this project was to plan the outline of the design task from beginning till end:

  • defining the best field for an Expert app

  • Competitive analysis

  • conducting interviews I General & Evaluative Research

  • creating user stories and personas

  • mental models and user journeys

  • task analysis and user flows

  • - Sitemap& Card Sorting

 
  • Mobile-First and Responsive Design

  • Iterative Wireframing & Prototyping

  • Usability testing & Preference Testing

  • Emotional & Visual Design Principles

  • Design Documentation / Design Language System

  • Mockup

  • Logo / Branding

 

My Tools:

  • Sketch

  • InVision

  • Lucidchart

  • usabilityhub

  • Illustrator


Hypothesis

We assumed that people faced problems in receiving immediate personal medical advice. We assumed the problem to be rooted in long waiting times, long commutes, language barriers and little personal attention. Local inflexibility.


The Goal
To alleviate the problem, we designed a web based app that offers faster service and
better comfort to the person using it.
This web based app provides the user with an easy and time-saving way to look for medical experts and schedule a video consultation call. Wherever they are. Worldwide.
This entails designing a medical web app that gathers a community of medical experts who provide medical advice via (video-) call.

 
 
Bildschirmfoto 2019-10-19 um 00.37.36.png
 
 

The Process:

During this process, I was involved in:

  • Understanding the Problem

  • Competitor’s Analysis

  • User Research and Interviews

  • User Personas

  • Information Architecture

  • Ideation/ Brainstorming

  • Prototyping

  • User Testing

  • Revisions

  • Visual Design

 

Research and Interviews

After the competitive analysis, I was able to identify the common important functions as well as to find lacking elements that I could further develop in my prototype. The next step was to gather direct information from people who have faced such problems or were willing to share some of their personal insights and general thoughts around finding medical help and the availability of it.

In order to find out about general attitudes and experience in going to doctor consultations in person, I interviewed the first group of people to find out more about their experiences. These interviews were held in person.
I have identified several aspects of behaviours that a user might encounter on these aspects and phrased my questions to touch on following aspects:

 
interview boxes.jpg
 
 
 

The results were summarized into four pillars each with a title summarizing the content:

I have summarized the needs and goals / behaviours & attitudes / frustrations into columns and have put significant


After the initial interviews, I grasped the mayor needs and created User Personas to better be able to understand the point of view and additional needs of the target audience.

 

Say hello to David and Lin!

 
 
image5.jpg

David Fischer, The Traveller

Bildschirmfoto+2019-10-19+um+01.45.21.jpg
 
image2.jpg
 

Lin Chang, The well-travelled Expat

Bildschirmfoto 2019-10-19 um 01.45.30.png
 

Now that I have gather even more information and insights, I dedicated time to create the Information Architecture. By defining topics that came out of the user’s needs during the interviews paired up with my field research, I asked volunteers to participate in a Card Sorting and help define and categorize topics that belonged together.

I took these results and crafted ideas to implement into the design process when wireframing.

The Process of Prototyping

During the process of wireframing and prototyping, I iterated and tested the new versions constantly to ensure that the new changes made navigation easier.

The closer I got to give shape and color to the design, the more I involved my users to share with me their preferred screen versions.

It was important to see their reactions when testing the prototypes. By observation and feedback questions, I was able to adjust the web-based app even more.

I have focussed on three major user flows and wireframes for this web-based app:

Log In / Sign Up
Finding a doctor
Booking an appointment

The development of the Sign up page: From Low Fidelity to Mid Fidelity to High Fidelity

The development of the Sign up page: From Low Fidelity to Mid Fidelity to High Fidelity

Log In: From Low Fidelity to Mid Fidelity to High Fidelity

Log In: From Low Fidelity to Mid Fidelity to High Fidelity

 

Sign Up and Log In

A clean and easy navigation are important to keep the user engaged and to emphasize the core functions of the web app.
Therefore, I have a limited color selection that puts a highlight on those areas
and buttons that carry the main function on that current screen.

 
 

Gestalt Principles

The Gestalt Principles form a profound source during the iteration process. The mayor principles put into practice are: Law of Proximity, Law of Similarity, Law of Good Form.
With accessibility, simplicity and clarity in mind, the wireframes were constantly altered keeping the design principles in mind.
The aspect of transparency is equally important. We want users to feel safe and understood while screening the information.

 
 
 

Design Guidelines

When developing a color scheme, I have researched the history and effect of colors. Knowing that people will come here for a special type of Colors, the language used to communicate with the audience and the emotions that result from it, are very important details reflect how the app can be positively perceived and ease the interaction by building on trust.

 
 

Color

The dominant color is purple. Different shades of purple are used.
The color has soothing effects and additional is very distinctive and is inclusive of all genders.

 
 
Bildschirmfoto 2019-09-20 um 21.42.24.jpg
 
 
Bildschirmfoto 2019-10-24 um 23.31.04.png
 
 
Bildschirmfoto 2019-10-24 um 23.58.27.png
 
Bildschirmfoto 2019-10-23 um 00.03.52.png
 

InVision Prototype

Please visit the Prototype Link to test Doc - The Expert App.

https://bit.ly/2Byj6Xf