My Role
Business Research, Website Audit, Quantitative User Research, Responsive Design, Website Redesign, Infographic Design
Tools
Adobe XD, Usability Hub, Google Forms, Google Spreadsheet
About This Project
The Healthcare Practices
Cornerstone Asthma and Allergy Associates is a medical group practice located in Medford, NJ that specializes in Allergy & Immunology. Advanced ENT & Allergy is an Ear, Nose, and Throat practice with nine different locations throughout South Jersey.
Medical Practice logos for Cornerstone & Advanced ENT
The Situation
The medical practice, Cornerstone Asthma & Allergy Associates, recently joined another practice, Advanced ENT & Allergy. As a result of this, Cornerstone Asthma & Allergy Associates is now a division of Advanced ENT & Allergy.
Although the practices still have separate websites for the time being, the goal of the Cornerstone website redesign aims to provide clarity for patients during this transition period.
The Challenge
Cornerstone Website
Although the current website announces the join to Advanced ENT & Allergy, the structure and hierarchy of the website is not clear at first glance. Also, browsing information on a tablet or mobile phone can become difficult because all of the announcements appear at the top of each page, consequently involving more scrolling for actual page information.
Current landing page for Cornerstone Asthma & Allergy Associates
The Solution
Landing Page Redesign
Provide better clarity for patients during the joining of two healthcare practices by redesigning the Cornerstone Asthma & Allergy Associates landing page.
The Results
After the redesign was complete, I compared the initial landing page user feedback with the redesigned landing page user feedback. Below are the key improvements as a result of the redesign:
Key Improvements
• Over 35% increase of people understanding what the website was in the first 5 seconds.
• Over 50% increase of User's ability to recall name of the business on website in 5 seconds.
• Over 40% increase of User's professional impression of the website
• Over 60% increase of information clarity able to be found on website.
The Redesign Process
1. Understanding the Medical Practices
2. Understanding the Patients
3. Analyzing the Website
4. Discovering Visual Problems
5. Redesigning a Solution
6. Comparative User Feedback Report (Infographics)
Understanding the Medical Practices
In order to gain a better understanding of the medical practices that are joining, I took a look at their websites. More specifically, I looked at their mission and about content.
Cornerstone Asthma & Allergy Associates
“Our doctors are committed to providing the most comprehensive and compassionate care for patients struggling with allergic and respiratory disorders and to ensure your quality of life and health are optimized.”
Advanced ENT & Technology
“Our mission is to provide effective, compassionate and responsible medical care and surgical treatment related to ear, nose and throat disorders.”
Understanding the Patients
User Personas
After making note of the medical practice content, I decided to define the types of people that would visit the Cornerstone website. I designed two personas. One for returning Cornerstone patients and one for potential Cornerstone patents. This helped me identify the user needs further when designing.
Returning Patient User Persona
Potential Patient User Persona
Analyzing the Website
Website Audit
I gained a better understanding of the Cornerstone website by going through the website myself and conducting a test using Google Lighthouse tool. Although the website shows up toward the top of most search engines, things like performance and accessibility could use some work.
Results of Cornerstone website from Google Lighthouse
Information Architecture
While analyzing the information architecture of the website, I was able to find and make note of potential problems with things like repeated information or call to action patterns. You can see my full audit notes HERE
Analysis of Cornerstone's information architecture on website
Key Findings
The home page has many announcements, so it is not surprising that participants patients may be confused or overwhelmed at first.
The most important announcement seems to indicate that Cornerstone Asthma & Allergy Associates is joining Advanced ENT & Allergy to “to help provide more comprehensive care to our patients.”
Solution Ideations
Layout a better hierarchy for announcements, placing the “breaking news” and insurance information as a top priority.
Establish more clear call to actions for reduced chance of bounce rate.
Create familiarity for returning patients by placing either a Cornerstone logo variation or a photo of Dr. Bantz (Founder of the practice) toward the top of the home page.
Discovering Visual Problems
Quantitative User Research
In order to get a better understanding of a patient’s clarity and impression of the Cornerstone website, I conducted a series of Five Second Tests and Design Surveys. I used that objective data as a starting point for measuring success on future iterations. This also helped me eliminate my own bias toward the current website design.
Current Cornerstone landing page used as reference during user research
Five-Second Test
Five-Second Testing is a research method that helped me gauge the first impressions of Cornerstone’s website design. For this test, 30 participants were shown an image of the Cornerstone landing page for five seconds, and then asked brief follow-up questions about what they saw. This test was conducted through the tool Usability Hub.
Five Second Test of initial design done with Usability Hub
Design Survey
I created a Design Survey to get feedback on parts of the Cornerstone landing page design. For this survey, I recruited 30 participants to answer questions that I created with Google Forms. Unlike the five-second test, the participants got to reference the landing page image while answering the questions.
Design Survey of initial design done with Google Forms
What Participants Said About the Initial Website Design
"Too much information, my eyes don't know where to look, something with Advanced..."
"there was so much text I didn't know were to start..."
"The design was very complex to navigate myself to the logo. I didn't even see if there was any actually"
Questions Considered Based on Participant Feedback
How might the Cornerstone website better display announcements and communicate the recent joining of Advanced ENT & Allergy to new and returning patients when the office is closed?
How might Cornerstone optimize the clarity of their website and be less overwhelming for potential patients looking for a healthcare provider?
Redesigning a Solution
Paper Wireframes
To begin the visual aspects of the redesign, I gathered some inspiration and started to draft low fidelity wireframes with good old pencil and paper.
Landing page low-fi wireframe
Responsive design for landing page wireframe
Cornerstone Logo
Upon calling the Cornerstone office number, I was greeted with the following statement before receiving menu options:
"Welcome to Cornerstone, a division of Advanced ENT & Allergy"
I used this statement to frame the tagline for the landing page announcement and also for a more condensed logo. Instead of "Cornerstone Asthma & Allergy Associates", the new logo would simply read "Cornerstone"
I also used the colors green, dark grey, and white throughout the design, so I could stay consistent with the current Cornerstone logo
Digital Wireframes
After tidying up the paper wireframes, I translated them into digital wireframes by using a 12 column grid. Extra time was needed in order to find the correct imagery for allergy, ear, nose, and throat purposes. I used images from the Cornerstone website and stock photos for the time being.
Responsive Design
Designing a responsive solution was also important as the patient's preferred browsing device may vary upon situation. While redesigning the landing page I made sure to keep the following goals in mind:
1. Provide clarity for current Cornerstone patients about the joining practices.
2. Create a one stop page for a potential patient looking for a new doctor.
Computer Breakpoint
Tablet Breakpoints
Mobile Breakpoints
Comparative User Feedback Report (Infographics)
Infographics
I compared the initial results from the Design Surveys and Five-Second Tests with the redesign results. I created the following infographics for a better visual representation of the data comparison.
Key Improvements
• Over 35% increase of people understanding what the website was in the first 5 seconds.
• Over 50% increase of User's ability to recall name of the business on website in 5 seconds.
• Over 40% increase of User's professional impression of the website
• Over 60% increase of information clarity able to be found on website.
Retrospective
Initial Design
Redesign
Lessons Learned
I was able to make real progress by getting participants involved in the process. User feedback was extremely helpful in indicating success metrics for the website while avoiding my own bias and preferences during the redesign.
In the future, I want to continue to get participants involved and eliminate the need to assume or guess while coming up with a visual design solution.
Next Steps
Although this redesign is not live, I hope to present this design to the Cornerstone medical practice and get even more feedback and insight from staff members and returning patients for further iteration.
Thank you for scrolling!
