Choosevsp.com Website Redesign
Project Brief
Overview:
VSP Vision Care (VSP) is a vision care health insurance company. It is a doctor-governed company divided into five businesses to strengthen the relationship between patients and their eye doctors: eye care insurance, high-quality eyewear, lens and lens enhancements, ophthalmic technology, and connected experiences. Choosevsp.com is a sub-brand website of vsp.com. This website was built specifically to cater to FEDVIP, which stands for Federal Employees Dental and Vision Insurance Program. The program not only caters to federal employees but also to certain retired uniformed service members, their families, and active duty family members. |
Role: UI/UX Visual Design Tools: Sketch, Invision, Jira Duration: July 2022-October 2022 |
Issues:
|
The old Website
The Process |
Competitive Analysis
To get insight into the other competitors on the field, I decided to start with a competitive analysis comparing four other competitors who are offering the Federal Employees Vision Insurance Program as VSP Vision Care.
To get insight into the other competitors on the field, I decided to start with a competitive analysis comparing four other competitors who are offering the Federal Employees Vision Insurance Program as VSP Vision Care.
Aetna Federal Plans Overview: Aetna Federal Plans are comprehensive vision care options tailored for federal employees, retirees, and their families. These plans provide a range of vision coverage, ensuring accessible and quality care for those within the federal employee benefits program. Strength: Responsive, forefront insurance plan information for users to find and compare. Weakness: As the homepage is saturated with information about the insurance plans, other content concerning insurance benefits can only be accessed through the top navigation. MetLife Federal Vision Overview: MetLife Federal Vision provides specialized vision insurance tailored for federal employees, retirees, and their eligible family members. With a focus on eye care, these plans offer coverage for eye exams, glasses, contact lenses, and other vision-related services. It's a dedicated solution to ensure clear vision and eye wellness within the federal employee benefits program. Strength: Modern, responsive, nice breakup of section for clear information. Weakness: Issues with visual cues. Lack of cues that help users interact with the interface and suggest what to expect and help users to explore more information. |
Blue Cross Blue Shield FEP Vision Overview: Blue Cross Blue Shield FEP Vision offers specialized vision insurance designed for federal employees, retirees, and their eligible family members. With a focus on eye health, these plans provide coverage for eye exams, glasses, contact lenses, and other vision care services. It's a dedicated solution to ensure clear vision and eye wellness within the federal employee benefits program. Strength: Modern, offer dental and vision combo plan, easy to scan content. Weakness: Even on larger screens, the top navigation wraps around, creating a visually cluttered and confusing scanning experience. United Healthcare Vision FEDS Overview: United Healthcare Vision FEDS insurance provides comprehensive coverage for vision and dental needs, serving both active and retired members, along with their eligible family members. It ensures accessible and quality eye care and dental services within the federal employee benefits program. Strength: Current users can search their provider faster. All the information and links are above the fold. Weakness: Not all of the content is responsive, leading to a cramped look and feel on the website due to an excessive amount of information placed above the fold. Users have no control over the carousel images. |
Heuristic Evaluation
Prior to commencing my research, I initiated the process by identifying potential issues with the existing website design, seeking gaps in user experience, and evaluating it against usability heuristics. This formed the basis for enhancing the overall user experience, with the identified issues being classified as low, medium, or high based on their impact on usability.
Severity rating:
0 = Not a usability issue
1 = Not urgent issue fix only when there's extra time
2 = Minor low priority issue
3 = Major high priority issue
4 = Extreme issue will have to be fixed before launch
Severity rating:
0 = Not a usability issue
1 = Not urgent issue fix only when there's extra time
2 = Minor low priority issue
3 = Major high priority issue
4 = Extreme issue will have to be fixed before launch
1. Visibility of System Status
Keep users informed about what is going on, through appropriate feedback within a reasonable amount of time. |
Issues:
The layout of content is not logically and visually organized. |
Recommendations:
Use different content block to help organize the content more clearly. |
Severity:
3 |
2. Match Between System and the Real World
Follow real-world conventions, making information appear in a natural and logical order. |
Issues:
Inefficient use of real estate at the expense of important information by grouping of elements that is not logical. |
Recommendations:
Maintain best UX practices for grouping elements, prioritize important information. |
Severity:
3 |
3. User Control and Freedom
When performing action by mistake users need a clear mark to leave the unwanted action without having to do extended process. |
Issues:
The blog page links redirect users to a different VSP blog site, causing them to exit choosevsp.com. The only way for user to go back is by clicking the previous page button on top of the browser. |
Recommendations:
All content related to information for the site should be available within the website, this will reduce confusion as well as the amount of time the user has to go back and forth between different sites to find information they need. |
Severity:
4 |
4. Consistency and Standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. |
Issues:
Insufficient contrast between background image and foreground color. |
Recommendations:
Avoid adding text on top of image. |
Severity:
3 |
5. Error Prevention
Eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action. |
Issues:
No issue found. |
Recommendations:
There's clear indication for user when they made a mistake on a filling a form or interactive content, but this still needs to be updated to match the new rebranding. |
Severity:
2 |
6. Recognition Rather Than Recall
Minimize the user's memory load by making elements, actions, and options visible. User should not have to remember information from one part of the interface to another. |
Issues:
Large block of informations, making the content harder to scan. |
Recommendations:
Split the content information into different block content to help user scan important information faster. |
Severity:
4 |
7. Flexibility and Efficiency of Use
Shortcuts may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. |
Issues:
User can't search for content they are interested to know. |
Recommendations:
Adding search bar to help user find the information they need faster. |
Severity:
3 |
8. Aesthetic and Minimalist Design
Interfaces should not contain information that is irrelevant or rarely needed. |
Issues:
No clear content hierarchy making the pages look busy with information overload. |
Recommendations:
Create emphasis within text for getting a message across. Optimize the landing page content with better hierarchy for the text to help customers scan the content better. |
Severity:
4 |
9. Help Users Recognize, Diagnose, and Recover from Errors
Error messages should be expressed in plain language |
Issues:
No issue found. |
Recommendations:
Update to new branding look and feel. |
Severity:
2 |
10. Help and Documentation
It’s best if the system doesn’t need any additional explanation. |
Issues:
A better Find a Doctor experience to help users find their provider faster. |
Recommendations:
Update the form, and create better and clearer hierarchy for user. |
Severity:
3 |
Quantitative Research
In collaboration with the digital strategist (equivalent to a product/account manager in other businesses), we conducted an accessibility audit, a basic SEO audit, and went through the analytics tracking reports to measure the website's performance.
Our assessment revealed that the choosevsp.com pages are responsive and mobile-friendly. However, the homepage is burdened with an overwhelming amount of text, which could potentially deter users. While header tags are present on all pages, the implementation and optimization of these tags are inconsistent. Notably, some pages lack the appropriate H1 tag structure, resulting in accessibility and SEO challenges. Lengthy headings exceeding 60 characters and the absence of H1 tags contribute to a less organized and user-friendly webpage. While minor accessibility issues were found on the backend, numerous concerns were identified in the page design itself. These include low contrast between background images and text, and the presence of unnecessary links that do not enhance navigation or provide vital context. These distractions lead to a poor user experience. Furthermore, the blog page links redirect users to a different VSP blog site, causing them to exit choosevsp.com. |
To improve the page's discoverability, key content elements and technical aspects had be optimized. Adding question-based headers on the homepage can guide users to answers and establish their expectations. For instance, titles like 'Not Sure Which Plan Is Right For You?' or 'How Can I Find My Providers?' could be beneficial.
Given that most users spend only around 10 seconds on the site before leaving, it was crucial to restructure choosevsp.com to enhance user-friendliness. Information had to be easily accessible to users almost instantly. Based on these findings, we had to create clear call-to-actions that resonate with users' search intent. This approach encouraged users to stay engaged on the site and reduced the frequency of bouncing. Improving returning visitor rates was imperative for retaining users on the site. |
The Mockup
Wireframe
Based on the research, I started to work on the page wireframe for the website. I started with basic wireframe mockup based on existing component in the brand DSM. Reorganize the page content, using best UX practices for grouping elements, prioritize important information.
Brand Guideline
Final Result
Desktop
The recent redesign helps users scan and digest the information easier and faster, dividing some of the long text content into flexbox grid columns which makes the information easier to read.
There wasn’t adequate contrast on some components. Replacing components that use text on top of background image helps with the site accessibility.
Adding new capabilities on the site. i.e.: Selector Tool, the tool help users find the content they need to learn more about VSP, how to enroll, and how to use my benefits