Obgyn Website

Overview: Young gynaecologist needs a brand new responsive website that supports her business activity, makes her known to the public and increases the online presence of her clinic, now available only on social media.

Role: UX Researcher, UX/UI designer

Toolkit: Figma, Adobe CC, FigJam

Overview

• Client Interview

After an initial interview with the Doctor herself, it has been found that she has already identified some of her goals and possible patients’ pain points.

LOCATION AND PARKING

The doctor needs to help her patients to easily and smoothly reach her clinic, since is very difficult to park where the practise is located.

PRENATAL DIAGNOSIS

The doctor would like to communicate that, unlike most of other clinics in the nearby, she can perform almost every service related to pregnancy.

BOOKING METHODS

The doctor wants to give her patients multiple choices: phone calls and messages. But also online booking method through a third part website.

• Research Goals

We want to validate or disprove insights we received from the Doctor herself, so that we understand what will strengthen up her clinic’s credibility and eventually reach more patients/users.

• Methodologies

  1. Competitive Analysis

  2. User Interviews

Competitive Analysis

Click to enlarge

User Interviews

• Overview

6 Women have been interviewed. Among them: 2 Pregnant women (30-35 y/o); 2 Students (25-35 y/o); 2 elder women (60-65 y/o)

All interviews have been conducted remotely by using Google Meet

• Affinity Mapping:

Click to enlarge

Research Findings

Google and the sense of guilt

Younger users tent to google every aspect of female health. Even though they feel it’s a wrong habit

First and second visit

Users prefer direct contact the first time they book a visit, but would use online bookings for following visits

Technical VS Practical

Users prefer to receive information in a professional but friendly way at the same time

The big concern: parking

Almost 100% of the participants feel anxious about wasting time in finding a parking area

Persona #1

Alex Shaw

Bio

Alex is facing her second pregnancy at the moment, while she has a 3 years old child to take care of. However, she doesn’t want to give up on her career. In order to fit together all her commitments, she organises her schedule in details and she’s very strict on following it. She’s always in a hurry and when she has to deal with women’s health issues, she tents to google any sort of things. But then, she feels guilty about that and tries to quickly reach her doctor.

Goals

• To receive a reminder form the clinic one day before her appointment
• To get clear info from her doctor about medical visit and therapy
• To have access to a reliable source of information where she can read about female health topics

Frustrations

• She is annoyed when she wants to book a visit but ends up waiting for hours on the phone because lines are too busy
• She feels discouraged when she has the feeling she’s wasting her time

Persona #2

Kyle Gregory

Bio

Kyle is attending the last year at University. She divides her time in working on her thesis and going to the gym, which is essential for her to blow off some steam. She makes large use of IG when looking for women’s health issues. She usually sends a message to the clinic in order to book an appointment, either on whatsapp or their IG page.

Goals

• To easily manage her appointments and schedule through her phone
• To receive email confirmation and google calendar invitation after booking an appointment
• To get an educational experience from her visit to the gynaecologist

Frustrations

• She gets anxious when she has to reach the clinic on time. She’s worried she’s gonna be late because of traffic or parking problems
• She doesn’t like when she can’t find enough info online about doctors and their clinics

Persona #3

Samia Liamani

Bio

Samia’s retirement started 2 years ago and she’s now committed to charity. She enjoys reading and watching documentaries. When it’s about her own healthcare, she is very careful and likes to know as much as she can. She is her doctors’ nightmare because when she goes for an appointment she keeps asking questions until she feels she has figured the whole picture.

Goals

• To attend a good female health program dedicated to women of a certain age. This way she will be called directly by the clinic when its time for a checkup
• To have a direct contact with the doctor. Especially if it’s the first time

Frustrations

• She is annoyed when she arrives late for a medical appointment
• She doesn’t like doctors who are too friendly
• When following a therapy, she’s often afraid she didn’t fully understand every detail of it.

Prioritisation

• Project Goals

UX research has demonstrated that business and users goals are mostly in line. Therefore, it wasn’t difficult to find a common ground between them and consequently identify the eventual project goals. The main goals of our website are: to help sorting the parking issue; to offer flexible booking options and to serve as a reliable source of information.

Click to enlarge

• Product Roadmap

After having established project goals, I’ve listed the different features I wanted to include in the website and then prioritised them into a spreadsheet. All the decisions have been supported by user interviews, competitive analysis and initial client interview.

Click to enlarge

Information Architecture

The sitemap process was pretty straightforward. I’ve started thinking of the homepage as the main container for almost all my P1 features (Main services, Booking button, FAQ, Reviews, Directions and Enquiry Form). Then I’ve defined the primary and secondary navigation.

Click to enlarge

User Flows

I’ve designed 4 main User Flows. I’ve considered the main reasons why a user can visit our website: to look generally for doctor and clinic information; to look for directions to the clinic; to book a visit; to find info about female health topics. The flowchart includes a start/end point; page or section; user decision; user choice options; alternative path and system action.

Task Flows

I’ve created flows for two task, which are the ones I’ve then tested in usability testing phase:

• Book an Ultrasound

• Find the closest parking area.

Here, the flowchart is made by: start/and point; user input; user decision and page/section.

#1 Book Ultrasound

Click to enlarge

#2 Find closest parking area

Click to enlarge

Exploring

After setting all users needs, information architecture, user and task flows, I’ve explored a few ideas by sketching some of the main features. In this phase, I’ve also started thinking about the style of graphics I wanted to achieve.

Wireframes

With the help of sitemap, user and task flows I’ve started building my low-fidelity wireframes. I’ve started with the design of Six Key Screens considering Desktop and mobile versions: Homepage - About - Services - Pregnancy - Directions - Book a visit

UI Library Components

After deciding about key screens, I’ve started to work on UI aspects and to make decisions about typography and colour palette. With those elements set up I’ve then designed the singular components: primary and secondary buttons and how they behave in different states; Services cards; FAQ accordion, Enquiry form; Testimonials banner; Navbar and Footer

High-fidelity key-screens

Prototype

Building the prototype has been really fun experience. I’ve created components and related variants to create animations such as hovering effects, horizontal scrolling of the images carousel, as well as a responsive accordion for FAQ. I’ve set up Navbar as a fixed element in each page to give even more the impression of a working website. I’ve used overlays connections to easily develop system input after submitting the enquiry form or clicking on the ‘direct call’ button. And of course I’ve linked each item to its page.

Outcome

The prototype I’ve created has been tested on 6 participants. Age range of them: 25 to 40 y/o. Apart from the two pre-defined tasks - Booking Ultrasound and Finding closest parking area - I’ve tested an additional task to detect potential defects and failures within the overall navigation. I’ve asked users to have a look at our Services or anything they would look for when browsing on a doctor website.

The overall experience was pretty straightforward for everyone. The participants had no problems accomplishing each task. However, the additional task highlighted few issues with the navigation

Click to enlarge

Iterations

• To improve navigation

- Implement secondary navigation under ‘Services’
- Add ‘Home’ link in Navbar

Click to enlarge

• Under Services

- Move ‘Full list of services’ to a separate page
- Make ‘Full list of services’ bigger

Click to enlarge

• Under Directions

- Even though some participants would like to have Parking directions at the top of the page, I would leave it as second paragraph. However, I will reduce the space between headlines and paragraphs so that it’s clear there is more info throughout the page

Click to enlarge

• Under Book A Visit

- Make ‘Miodottore’ a button in order to book via third part website

Click to enlarge

• Challenge

One of the biggest challenges of this project was to deal with a real client. In some cases, it was quite useful. The very first interview with the doctor herself was crucial for finding the right angle to the UX research. However, the presence of the client throughout the project development has sometimes made it difficult to have total attention to the users needs.

• Lesson learned

To find the right balance between users and clients needs.

To read between lines while interviewing people. To let them speak even when it seems they are going off-topic, because what they are saying can be useful and give a different as well as unexpected perspective to the problem to solve.