Capco usability analysis

Capco - a big financial institution approached us with a request for redesign. Their website was designed by a print designer and the client suspected that it wasn't operating effectively. So we did a usability review that exposed the worst ux mistakes.

Capco homepage

Capco's homepage - can you guess where the links are?

house inspired logos

Content is smaller than the footer.

Heatmap & loading speed analysis

Heatmap Heatmap

Part of the checklist was a Heatmap analysis. It exposed the issue of users focusing too much information on the photos, them being the only graphical elements on the page.

The long loading time of the homepage (as well as other pages) is mainly due to almost 3 seconds that are needed for the 25 css/js files to render. Non-compressed assets (images, css, js) and too many requests (77) on the server are also an issue.

The solution

Combine all css files/js into one, optimise images by re-saving and making sprites, use gzip for compression.

Usability review

After running through the 25 point checklist we highlighted the issues on one of the pages.

Capco usability study

Highlighting the UX issues

  1. Give the logo more white space and separate it from the navigation. Thus making it stronger.
  2. Move the navigation buttons to the right (and align with the bottom of the logo), combine the disjointed buttons, rename to industry standard and change the ghoulish green to another brand colour that is less aggressive.
  3. Change the font size to respect the typographic scale (Fibonacci, Renard or classical), use the title of the newest article instead of a section, and place breadcrumb navigation above the title.
  4. Make the photo smaller and insert it in the article instead of superimposing it.
  5. Use a different colour for the heading, see also 3
  6. Make the text into one column and respect the maximum line length.
  7. Move the breadcrumb navigation to its usual place – top of the content. And use arrows instead of the + signs.
  8. Structure the related articles in such a way that they don’t seem to be a different section. Use icons for different types of articles.
  9. This is the most important section from the point of the client. Make it more prominent and use buttons/icons to highlight it. Consider moving it to a different position.
  10. Get rid of this section, it doubles the navigation and distracts from the main objectives. There is zero effect in terms of SEO as the search engines only regard the first same link on a page.
  11. Join the navigation buttons into one section, see also 2
  12. Move the login/register and search to the top right corner. Get rid of the rounded corners on all forms. The design should be Modernist/Swiss and respecting a grid.
  13. Move the share, social media buttons to the bottom of each page. People want to comment/recommend/share only after consuming the content.
  14. Make the secondary navigation/Sections look like secondary navigation. Move them to the left of content and highlight the active section by connecting it to the main content area.

Design guidelines

We designed 16 web templates with all the usability and design mistakes fixed.
See the Capco web redesign project page for a project overview and Before & After layouts.