To kick off the redesign, the design team completed a heuristics review on the existing website to identify the areas for improvement. We were working on a constrained budget, so it was crucial to focus on the areas that needed the most work first.

We evaluated the existing Tangerine site primarily on 6 of Jakob Nielsen’s Heuristics. The existing website passed on 1 out of the 6 categories:

Visibility of System Status

The site was missing breadcrumbs, menu items were disorganized, and some page URLs did not match page content. The navigation was missing a visual cue that there were more items in the dropdown, and relied solely on color to signify the selected page.

Match Between System and Real World

While the site had icons, they varied greatly in style and some icons were used multiple times for different things. Links did not underline on hover, menu titles varied grammatically, and link text was not descriptive. Content could also be hard to understand for people who learned English as a second language, which is many of the clients. Some pages also switched from third person to first person.

User Control and Freedom

This was the only section where the existing website passed the evaluation. The menu navigation was broad rather than deep, exit states were consistent and clear, and users could easily reverse there actions. However, it did not have the option of using a keyboard shortcut to click, and users may not realize they could scroll down on longer pages.

Consistency and Standards

The site used abbreviations properly and had a consistent design standard for headings. There was inconsistent formatting between page layouts, social media icons were not labeled, the design for subheadings, content, form controls, buttons, and stylistic treatment were not consistent.

There were several instances of font colors not having enough contrast to pass WCAG accessibility standards, and links were not easily identifiable, did not meet contrast guidelines, and did not change in color after being clicked.

Recognition Rather than Recall

The text did have ample breathing space, items were grouped into logical zones with headings, and the same color was used to group related elements. However, the site did not have breadcrumbs or prompts to lead the eye across the screen. The text extended across the width of the page, making it hard to read, color coding was not consistent throughout the system, and headers and links were the same color, making it hard to determine which were links.

Aesthetic and Minimal Design

Icons were bold and stood out from their backgrounds, but there were instances where the same icons were repeated for multiple different elements. The overall layout was disjointed due to a lack of balance and visual weight, with little structure to the page. Some pages were lacking in information, making it difficult to learn about the product.