Website Redesign Concept

Dr Samuel & Dr Khan Practice

Contributions

User Research, Information Architecture, Wireframing, Website Design

Timeline

Aug 2021 ( 2 weeks)

Hero Image Dr Khan (2).png
Redesigning  the Practice’s website with a focus on reducing UI clutter and crafting an intuitive and functional experience that resonates with patients on a human level.

Why should this website be redesigned?

Dr Samuel & Dr Khan is a practice based in Newham, East London. The services they provide have mainly positive reviews from the NHS website, on the other hand, the website does not reflect the reputation of the practice.
The design patterns are outdated, and most importantly the main user flows (booking an appointment or registration) are not clear or intuitive.
I set out to redesign the website to improve the user experience thus reducing the user’s frustration when using online services

Constraints and  defining the goals

The current design decisions the practice made are unknown, so I had to work around that and put focus on discoverability, accessibility, consistency and simplicity.
While defining the scope of the project I prioritised the Homepage, Appointments, Registration and Prescription pages.
The new website also needs to integrate well with the NHS system and  the 3rd party consultation platform that manages requests made through the website.
With all of that in mind the new website should:

1.

Provide a solution that assists users in finding and using the services they are looking for 

3.

Be as usable for as many users as possible, consider accessibility issues early on

2.

Make the homepage easier to navigate, removing and rearranging all content that may overwhelm users

4.

Have a clear primary and secondary hierarchy to ensure a smooth navigation through the website

The problem

The existing website is not effectively providing information and services in a clean and easy to digest way. It lacks in securing trust and needs optimizing to reduce the user’s frustration and strain on phone services and reception staff.

Defining the issues and evaluating the current design

I carried an analysis of the current website in order to pick up any usability issues. I focused more on the information architecture, navigation flow and visual layout of the website.  I took notes and organised my findings into affinity maps so that I could refer back to when working on the solution.

Navigation and Accessibility

  • The navigation system is broad and shallow (many items in a menu) rather than deep (many menu levels)

  • Good navigational feedback is not provided

  • Light blue buttons are not accessible, they have very low contrast

Task orientation and IA

  • The number of screens required per task has not been minimised.

  • Overwhelming amount of information shown at once

  • Page has too many clickable items , key tasks are not differentiated

Learning more about the users

I spoke to users to collect some more data to address some of my assumptions. The research led to the problem statement above and guided my approach to the redesign. I recruited 5 users and invited them for a interview and usability testing on the current website.
I also conducted some independent research to learn more about the user’s frustrations through online reviews. These activities served as a way to test my initial assumptions.

They get lost

The typical user journeys involve drilling down through several levels. This causes users to feel lost and going a few steps back

They avoid interacting with the website

Navigating through the website causes a lot of frustration resulting in users using phone services and going in person to the practice

They know what they're looking for

The users are goal-oriented, they visit the website only when they really need to and they are usually in a rush.

How can the navigation and task flows be improved?

The navigation causes the most problems on the website, the first order of business was to implement a navigation structure that would be intuitive for users.

I performed a remote card sorting exercise with four users to get a sense of their mental models when using medical services.

These are the steps I followed:

  1. Create an inventory of all the pages and external links

  2. Select representative content removed duplicate links

  3. Fix biasing labels, where some words were repeated I used a synonym or reworded them to avoid bias

  4. Run sessions with users and analyse results

 

The following actions were prioritized on the Homepage:

  •  Book appointments

  •  Register as a patient

  •  Request Prescriptions.

After drawing results from the card sorting exercise and best practices for Information Architecture, I iterated the components in mid-fidelity wireframes as follows.

Exploring different page layouts

Using the insights I gained though the research phase I sketched different ideas and layouts. 

Mix matching the order of the different sections gave me an opportunity to explore paths I haven’t thought  of before.

Getting high- fidelity wireframes ready for testing

User Testing

After exploring different versions of the homepage layout I proceeded to implement the high- fidelity wireframes.
I validated the designs remotely with 4 users. They performed some task flows on the homepage, appointments and prescription pages,  at the end they provided me with their feedback on the designs. This helped me determine if there were any areas that caused confusion, frustration or uncertainty.
Here is a brief of the process:

  1. Provide context of the website to users

  2. Ask them to perform tasks one by one

  3. Get feedback on what worked and what went wrong

  4. Gather and analyse findings

  5. Iterate based on new insights

Task completion rate

Considered the tasks ‘extremely easy’ or ‘somewhat easy’

Found the website ‘extremely likely’ or ‘very likely’ to help them access services more efficiently

Final Screens

Mockup1
Mockup2 (1)
Group 35

Defining the visual feel of the website

I took care of implementing simple visual components as functionality and ease of use  in medical websites are vital.
It was very essential not to use jarring colours or overcomplicating things by using a variety of stylistic web design aspects.
There are no animations of transitions to help visitors to access information much faster. White space was carefully used to balance design elements and better organise content.

When rolling out all the screens, careful attention was paid so that white space was used generously to keep the layouts uncluttered and to balance out the heavy content pages.

The font Inter has good readability and its similar to NHS’s font Frutiger

These colours where picked to prioritize and differentiate information, for example yellow is used to emphasize important messages

Icons were used to reinforce website content, it helps users quickly identify common features

Reflections and lessons

The user experience of a medical website is very different from other industries. Users are not expected to spend a lot of time on the website, come for very specific information and are very often in a rush. The design decisions need to reflect those user needs, the website should be minimal, logical and intuitive for all kinds of users.

Working on this project brought a new opportunity to grow as a designer and allowed me to put aside the visuals and really work on my design thinking process.
If  able to collaborate with staff from the practice I would like to work on some more research and come up with a solution that would benefit both the practice and the users in the long term.

I made contact with the practice with some of my findings and am hoping we can collaborate together to create an intuitive and functional experience for their patients.