Heuristic evaluation of ARM Investment Center website

Heuristic Evaluation of the ARM Investment Center website

Goal

The goal was to critique the user interface and experience of any one of my previous works and provide recommendations where available. I opted for the ARM Investment Center website which was designed in H1 2019.

Methodology

For this evaluation, I’ll be applying the 10 Usability Heuristics for User Interface Design by The Nielsen Norman Group.

I decided to start on the homepage and then work my way through some key tasks on the website, while keeping a list of the heuristics handy.

As I discovered usability problems, I made sure to note them and take screenshots where necessary.

Once I finalised the list of violations, I gave a severity rating to each of them using the severity rating scale below:

No violations found
Cosmetic problem (fix issues if time is available)
Minor usability problem (fixing issue is moderate priority)
Major usability problem (fixing issue is high priority)
Usability catastrophe (imperative to fix immediately)

Heuristic 1: Visibility of system status

Inquiry

Are we clearly communicating the state the User is in throughout the journey? Are we presenting feedback to the user as quickly as possible?

Violation

Most of the pages are adequately labelled with titles and visual markers for categories and products. Breadcrumb trails exist on various product pages to keep the user aware of where they are at certain points in the user journey.

The progress tracker within the onboarding journey clearly shows the user what is needed to complete the transactions and where they are within the flow. However, the labels are not appropriate.

There aren’t adequate prompts and feedback messages when users complete certain tasks, especially during onboarding and registration.

Recommendation

1. Rename the progress tracker labels during the registration – checkout process to correctly reflect the stages the user has to go through during the onboarding process

2. Add informational prompts or notifications at the start and conclusion of the onboarding process

Heuristic 2: Match between system and the real world

Inquiry

Do the Users understand the words and terminologies used and are the words used in the right context?

Violation

The progress tracker within the onboarding process clearly shows the user what is needed to complete the transactions and where they are within the flow. However, the labels are more synonymous with ecommerce websites and could lead to confusion among some users.

Most of the icons used, including those used to represent Search, Help, Phone Support and Invest, are easily recognisable by the user.

Recommendation

1. Rename the labels during the registration – checkout process to correctly reflect the stages the user has to go through during the onboarding process

2. All in all, the digital experience does not replicate real-life investment actions and behaviours and the payment process is too similar to that of an e-commerce website.

Heuristic 3: User control and freedom

Inquiry

Is it easy for the User to back out of a process or undo an action?

Violation

The site navigation seems fine. However, there are some essential flaws in the navigation of the product pages, particularly because the breadcrumbs aren’t clickable.

There are no prompts or dialog boxes that give the Users the ability to undo or back out of an action.

The user is able to visit core pages, use all the core functions and get all relevant information without signing up

There are no options (other than the browser back button) for users to go back to the previous screen.

Recommendation

1. The navigation can be greatly improved by the addition of a sitemap, back buttons at various locations and making the breadcrumbs clickable

2. There should be sufficient pop-ups and dialog boxes to confirm actions and help users back out of processes

Heuristic 4: Consistency and standards

Inquiry

Is there a consistent design standard used for all the design elements including the buttons, fonts, form fields and Call to Actions?

Violation

There are a number of discrepancies in the shape, size and behaviour of buttons and Call to Actions across the website.

There is a general design consistency for the typography, headings, icons and colour scheme.

Recommendation

1. Create a design system and abide by the standards and boundaries of the system.

Heuristic 5: Error prevention

Inquiry

Are there measures in place to prevent errors and slip-ups by providing helpful constraints?

Violation

There are no UI constraints to prevent the user from entering incorrect values in the onboarding and contact forms, until after they submit.

There are insufficient guidelines within the various data entry points on the website.

Recommendation

1. Include clear guidelines to guide the user in what type of information is needed for each specific action during the purchase of investment products.

2. Add contextual field validation to check the information filled in instantly, and not after the user has submitted the form. Any input rules should be highlighted, especially when they are not fulfilled.

Heuristic 6: Recognition rather than recall

Inquiry

Is the information required to use the website regularly visible to the User or is it easily retrievable when needed?

Violation

The user is presented with navigational items and category labels that reduce cognitive load and aids recall on all the product pages e.g. labels for categories such as Mutual Funds, Real Estate e.g.

Navigation, menu items, search, contact details and login information are easily accessible and are at recognisable portions of the website.

Recommendation

1. Icons should be used alongside button labels to further aid recall

Heuristic 7: Flexibility and efficiency of use

Inquiry

Is the user presented with shortcuts to help them achieve their basic and frequent goals quickly?

Violation

There is no measure of personalisation present on the website and the user isn’t presented with a list of recently viewed actions, products or pages.

Recommendation

1. Some levels of personalisation, such as a ‘recently viewed’ section, need to be added to the website to enable recall and make information more accessible

Heuristic 8: Aesthetic and minimalist design

Inquiry

Is the interface clean, uncluttered and easy to understand?

Violation

The wholistic visual design of the website is simple and professional, the green accent colour of the brand is used for important information. The use of white space also gives the content breathing space and makes it easy to read and understand. Although the font size, spacing and button styles can be improved upons.

The social media share buttons overlap some useful information on the homepage.

The banners on the homepage do not blend well with the rest of the website and are not generally helpful and relevant for the user

Recommendation

1. There’s no mechanism in place to detect and help users recover from errors encountered.

2. The error messages are not very helpful and there is a lot of technical language used.

Heuristic 9: Help users recognize, diagnose, and recover from errors

Inquiry

Are error messages expressed concisely and in human language to precisely indicate a problem, and are they helpful in solving problems?

Violation

The labels used during the onboarding process are more synonymous with ecommerce websites and could lead to confusion among some users.

The form fields have error messages that feature after the user sends the message. However, these error messages are not helpful in preventing errors.

Recommendation

1. There should be hints provided everywhere and the error messages should be in more informative human language.

2. There should also be an error message library with error codes and their meanings to enable users to understand the causes of their errors, and first-level actions they can take towards solving them.

3. The form fields should have live validation and necessary guidelines where necessary.

Heuristic 10: Help and documentation

Inquiry

Are there any necessary guidelines on how to use the product? or any form of documentation to help them achieve their goals?

Violation

There are no walkthroughs or pop-ups that guide the user through the usage of some of the core functions of the website.

The Frequently Asked Questions (FAQ) section is readily available in the footer navigation and is easy to use to clarify common issues and questions.

The user has the option to contact ARM via multiple channels with the Phone call channel conspicuously present at the top right of the homepage.

Recommendation

1. There should be walkthroughs, pop-ups, and tooltips at the relevant locations to guide the user through the usage of the product.

2. The FAQ page can be more organised and filtered based on the categories and frequency asked.