Center For Sight
Patient Portal Redesign
A redesigned Center For Sight with an improved online experience and refreshed visual design
Context
Centre for Sight is amongst the most advanced private eye care hospitals in UK.
They have an online portal for patients to communicate with CFS, which has received many complaints recently for it’s difficulty to use.
Objective
To enhance the experience of patients on the CFS portal by:
Redesigning their existing email interface making it more useful, easy to use & delightful.
To create a dashboard for patients for a quick overview of their details.
Timeline
Nov 2021 to Feb 2022
Role
UI UX Designer
Tools
Adobe XD
Old Portal
Problem
Based on the feedback received by Center for Sight from portal users, they came with the following problems:
Cluttered UI, difficult to make sense of how things functions.
Difficult to find things like ‘doctor’s info’
Basic tasks like ‘Send a message’, ‘Checking appointment status’ takes time.
Unfamiliarity, users have to learn how to use it.
Not delightful to use
Which leads to the following problems:
Users abandoning the portal and switch to calling the CFS helpline number instead.
Need Assistance from CFS to perform basic tasks on portal.
Delay in communication.
The Process
Why users are facing those problems?
Areas of improvement in the current UI which is leading to user problems & frustrations
‘Messages’ is kept as a part of dashboard
Inconsistent spacing, relatively huge buttons and icons
Poor layout, Absence of Hierarchy
Email type not intuitive to interpret quickly
Irrelevant fields while creating a new message
Irrelevant actions like ‘troubleshooting’
Outdated styling
Use of colors creating ambiguity about the purpose of a UI element
Changes & Features
I divided the contents into two separate pages for Dashboard & Email as both serve different purpose for the user which on the same page was creating a lot of confusion & distraction
Search things using search bar
View List of message along with a single opened message
Create message, formatting options
Inbox, Drafts, Send
Unread, Overdue
Message chain, Reply to message, Forward
Media & file attachments
Dashboard
Check my upcoming appointment
Check my profile & edit my basic details
Details of my Doctor(s) attending me
Know status of my forms
Any new messages while checking other details
Center For Sight differentiates their messages into three categories. A message can belong to any of these:
Correspondence
Medical
Finance
I introduced a theme for each category to be easily distinguished by the user, and take desired actions. User should be able to filter the messages by category
Correspondence
Medical
Finance
Sketches as Lo-fi Wireframes
To get a clearer vision of content and information layout across various screens, I started off with a few sketches to explore the overall composition and refine my design direction. I sketched for dashboard
Final Design
Utilizing Adobe XD, I translated my wireframes into high-fidelity designs, bringing the user experience to life.
I targeted the user pain points uncovered through usability testing. My goal was to create a visually harmonious interface, establish ease of discoverability, provide structured, relevant information for users to achieve their desired goals on the portal.
Old CFS Portal
New CFS Portal
Summary
My primary objective was to create a messaging interface that looks familiar to use, so that the users can focus on their primary objectives on the portal. I avoided creating an entirely unique interface, but utilized the existing mental models of users.
I established themes & layouts for easy recognition & recall. I segregated & grouped elements based on context of use.
My approach ensured that my design decisions were not only desirable from a user experience perspective but also feasible within the context of the company's operational realities.
I learned that Destructive action items should not be kept close to constructive action items
Get in Touch
shraddhaup99@gmail.com