PROJECT OVERVIEW
Redefining the healthcare experience for NECC patients
Northeast Community Clinics (NECC) is a non-profit healthcare organization that primarily provides health services for the low-income, uninsured, and underserved communities in Los Angeles County since 1971.
This is a website redesign project to address navigation issues, streamline content, and enhance overall usability.
👩🏻💼 Role: Lead UX/UI Designer
🗓 Timeline:
June 2022 - October 2022
💻 Tools: Figma, Miro, pen, and paper
THE PROBLEM
NECC’s current website is currently experiencing major usability issues that hinder our ability to effectively deliver health information, resources, and services to our current and new patients. These issues are adversely affecting the user experience, leading to compromised new patient enrollment rate and patient retention rate.
BEFORE
Understanding Users
I. GOOGLE ANALYTICS
Objectives
Our process began with using Google Analytics to gain an overview of how people are using the site before moving on to identifying potential problem areas.
The metrics that we used and findings are as follow:
NECC current website's Google Analytics overview
Insights
Our findings have revealed that the website has a number of usability issues that are contributing to its high bounce rate, exit rate, and short session duration.
II. SURVEY
Assessment
To further explore these issues, we conducted a user survey that consisted of 16 questions to assess the following:
Patients’ motivation in using our website
How frequently they use our website
What specific tasks or activities they usually perform on our site
The device they use to access our website
How easy is it to understand the information on the site
Whether patient trust the information on our website
Patient’s frustrations
What improvements or changes they would like to see on the website
Results
Confirmed there is an immediate need for improvement as 96% of participants rated the website's usability as a 3 or less out of 5 in terms of ease of finding information
Revealed that there is a concerning lack of trust among a significant portion of users regarding the information provided on our website
III. QUALITATIVE INTERVIEWS
After wrapping up the surveys, our team proceeded with conducting user interviews with 5 selected participants to obtain a more in-depth and qualitative understanding of user experiences and preferences.
User interview questions broken into categories.
Analysis
To identify user needs, pain points, and potential design improvements, we collaborated and created an affinity diagram using the insights and data gathered from user interviews to identify patterns, common themes, and key insights from users’ feedback.
Insights Gathered
Patients use our website to gather information about providers, clinics’ contact details, location, available health services, billing, and insurance.
Inconsistencies in design elements and layout can make a website look unprofessional and can lead to a lack of trust in the information presented.
The website low color contrast between text and background can make it difficult for users with low vision to read and understand the content.
Our current website isn’t optimized for mobile devices and can be challenging to use, leading to a poor user experience for a significant portion of the audience.
User Flows
Purpose
To ensure that users able to find what they need, I created user flows to visualize how users would interact with each screens to help our team design an efficient and intuitive navigation structure.
User flows of the website.
Wireframes
After creating a visual representation and defining the routes that our users might take while exploring our page, we proceeded with the ideation process.
However, during our ideation meeting with the stakeholders including the directors of NECC, our team was informed that the timeline of our project had changed. As the next COVID vaccine booster dose was scheduled for imminent release, our team was urged to expedite the website redesign to ensure it is ready promptly for our patients to access essential information concerning the availability of COVID vaccine boosters at our clinics.
This led our team to decide on bypassing the sketching process and moving directly to the creation of low-fidelity wireframes.
NECC redesigned website's wireframes.
Usability Testing
To gather initial feedback on the designs our team had created and confirm that our website was intuitive, I led a team with 2 other designers to conduct guerrilla usability testing with 15 random employees from different departments at NECC.
Participants were asked to talk aloud while completing a quick assessment on the low-fidelity prototype.
This allowed our team to gauze overall product comprehension.
Task success rate for the 5 tasks given to participants.
After testing our basic flows, validating our earlier assumptions, and ensuring that the website would meet users’ needs and expectations, our team eventually moved forward towards creating high fidelity screens.
Affinity Mapping
After finalizing the design, our team conducted 5 moderated usability testing sessions to validate the effectiveness of our redesign and uncover any usability issues or challenges that users may encounter while interacting with the redesigned website.
Usability testing summary.
Insights Gathered
There were no significant usability issues that were uncovered.
All participants stated that the design resonates with them and enhances their overall experience.
All participants gave great feedbacks about the navigation, layout, content clarity, and overall user experience.
Most participants could easily find the information they were looking for and move through the website without confusion.
Participants spent an appropriate amount of time on tasks, and there was a balance between efficiency and thorough exploration
The redesign resulted in a reduction of user errors. Lower error rates indicate that users can navigate the website with minimal mistakes
Final Product
Live Website
Impact
Bounce rates reduced to 40%.
Average session duration increased by 30%.
Patient enrollment rate increased by 25% after 3 months.
Reflections
Due to the urgency of rolling out the website for COVID vaccine booster registration, we couldn't implement any iterations after finishing the high-fidelity design in this project phase. However, prioritizing these iterations will be our immediate focus as we transition to the next phase.
While this was not ideal to forego the sketching, our team mutually agreed that we could still deliver a high-quality end product by maintaining clear communications and effective collaboration throughout the design process. This also allowed our designers to quickly visualize and refine the layout and functionality, making it easier to address potential issues early on. Lastly, it also saved time, which was redirected into comprehensive testing and fine-tuning to ensure a polished final product.
Reflections
Due to the urgency of rolling out the website for COVID vaccine booster registration, we couldn't implement any iterations after finishing the high-fidelity design in this project phase. However, prioritizing these iterations will be our immediate focus as we transition to the next phase.
While this was not ideal to forego the sketching, our team mutually agreed that we could still deliver a high-quality end product by maintaining clear communications and effective collaboration throughout the design process. This also allowed our designers to quickly visualize and refine the layout and functionality, making it easier to address potential issues early on. Lastly, it also saved time, which was redirected into comprehensive testing and fine-tuning to ensure a polished final product.