Heuristic evaluation of PNC’s Choice Home Equity Line of Credit page
Tasks
Heuristic Evaluation
GlassBox Analysis
Timeline
July - August 2023
(2 weeks)
Team
Eileen Yan (UX Intern)
Patrick Hodge (User Researcher)
Context
This was a project during my summer internship at PNC Financial Services.
Background
Heuristic evaluations are a UX assessment method for discovering usability problems and other issues in interfaces. We evaluated the following heuristics, which were based on Jakob Nielsen's 10 general heuristics for interaction design:
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Allow users to start & stop, anytime, anywhere
Think inclusively
Match between system and the real world
Discoverability
User control and freedom
Consistency and standards
Error prevention
Each heuristic was given a severity rating between 1 (low level issue) to 5 (high level issue) so that stakeholders could determine how to prioritize our recommendations.
1/5 - UI issue (cosmetic). This may not need to be fixed unless timeframes allow.
2/5 - Minor problem. This is a low priority fix.
3/5 - Usability problem. This may be important to fix soon depending on the scale at which the issue is taking place.
4/5 - Major usability problem. This is a high priority fix.
5/5 - Usability catastrophe. This must be fixed before the product is launched.
Match Between the System and the Real World
4/5 - Major Usability Problem
The webpage’s verbiage caters toward financially savvy customers
The rate options copy, which includes terms such as “variable and fixed rate options,” “draw period,” and “qualifying balances,” could be confusing and intimidate users unfamiliar with these terms. While some users may understand them, they will deter many away from the page. This is almost an inclusivity concern.
Recommendation
Revise the wording to be understandable by anyone. When financial terms must be used, they should be presented from an educational standpoint.
Discoverability
4/5 - Major Usability Problem
Lack of discoverable elements on mobile view
When the users land on the mobile page, there are no discoverable elements for them to interact with. Furthermore, there is no immediate visibility of the in-page navigation. This lack of discoverability could be why users are rarely interacting with the mobile navigation.
Recommendations
The navigation must be consistently above the fold for all devices. The current caret signifying the navigation is not visible enough - it must be more prominent. Consider adding additional language such as “jump to” or “navigate to” to draw user attention.
Consistency and Standards
2/5 - Minor Problem
Inconsistent button titles
The “Check Rates & Apply” and the “Get Started” buttons direct users to the same page, but they have different titles. Users might also be confused as to why there are two CTAs in the first fold. “Check rates” signifies that users can immediately check their rates by clicking the button - however, this is not the case. Instead, they land on a page asking them to fill out a form and apply. This is inconsistent with their expectations, which could cause frustration and confusion.
Recommendations
The CTA titles must be adjusted for consistency and to better set user expectation of what will happen upon being clicked.
Aesthetic and Minimalist Design
3/5 - Usability Problem
Lack of clear information hierarchy and duplicate language
There are inconsistencies in spacing and font sizes throughout the page. This makes the hierarchy of information within sections difficult to differentiate. There are also several instances of duplicate language. For example, the full phrase “renovate your home, consolidate debt, etc..” is mentioned several times in many variations.
Recommendations
Create consistency in spacing, font sizes, bolding, and other design elements so that the user has an intuitive understanding of headings versus sub components as they navigate through different sections. Long phrases can be shortened if repeated multiple times throughout the page.
Allow users to start & stop anytime, anywhere
2/5 - Minor Problem
The placement of buttons in the calculator feature is unintuitive
The calculator feature on the page has a confusing “Code” and “Recall” form at the top. Because this is at the beginning of the experience, many users will interact with this first, which drives their attention away from the main calculator features. The use of the word “recall” is unintuitive. Furthermore, the location of the “Save” button on the bottom right is unexpected.
Recommendations
Provide written context around the code/recall section - the revised copy could be “resume your saved application.” Place the “Save” button next to the “Continue” button, as this is the expected location for it.
Think Inclusively
3/5 - Usability Problem
The closed captions in the video are not accurate
Within the video on the page, the closed captioning text is different than what is being narrated in the video. This could be very confusing for a deaf user, since the text does not align with the content of the video. Additionally, the text is too small, which makes it very difficult for users to see.
Recommendation
Update the closed caption text to match the language in the video and increase the size of the text. The text should automatically show on the video without having to click on the closed caption button, as users might be viewing the video in public settings without sound.
REFLECTION
Although I’ve done heuristic evaluations for school before, this was the first time I completed one in an industry setting! While completing the evaluation, my co-worker and I first evaluated the webpage separately before compiling our findings together. I found that this method was very effective - we found areas of overlap and were inspired by each others’ findings as well. This shows how many non-ideal usability issues and a robust amount of knowledge can be discovered without the need for a usability test.