Fiserv responsive

2014

UX Designer, Visual Designer, Design lead

https://www.fiserv.com/

Project Objective

Our long term client Fiserv needed to improve the mobile experience on their website in order to better serve their customer base. A full redesign was not in the cards, so we needed to define a set of responsive behaviours and design a navigation system that allowed users to easily navigate the large amount of content easily on mobile devices and tablets.

Design Solution

We were able to make their website responsive with relative ease, re-structuring the layout for different screen sizes. The biggest challenge was designing a navigation pattern that could handle the magnitude of the fiserv navigation. The Navigation has up to six levels, which makes exploring the site on mobile devices challenging. There are so many products and services that the navigation is not necessarily intuitive for users to udnerstand and users often have to use trial and error to explore the main navigatoin section to find what they are looking for.

The pattern I designed allows users to explore the navigation drilling into seb-sections and moving back to find more detailed information on the financial products and services offered by fiserv. To maxize the available space on tablet devices I designed a two column navigation that allows users to explore the navigation and see two levels of navigation at any point.

We provided the client with an interactive prototype built on invision, which allowed us to test the interaction patterns on phones and tables and refine the designs before implementing them.

Results

The main result is that they now have a site that is easy to navigate and explore on mobile devces and tablets. This has had a large impact on their mobile analytics across with an increase in visitors from mobile devices as well as an increase in pageviews per session on mobile.

Image Gallery