Website Redesign Concept
Dr. Samuel & Dr. Khan Practice
Contributions
User Research, Information Architecture, Wireframing, Website Design
Timeline
Aug 2021 ( 2 weeks)
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 prioritized 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 out 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 organized my findings into affinity maps so that I could refer back to them 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 minimized.
An overwhelming amount of information is shown at once
The 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:
-
Create an inventory of all the pages and external links
-
Select representative content removed duplicate links
-
Fix biasing labels, where some words were repeated I used a synonym or reworded them to avoid bias
-
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:
-
Provide context of the website to users
-
Ask them to perform tasks one by one
-
Get feedback on what worked and what went wrong
-
Gather and analyse findings
-
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
 |  |  |
|---|
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.