threed_mockup1.gif
 

TransUnion Mobile Navigation

TransUnion is a global information provider striving to use information for good. They help educate people about their credit and provide services such as credit monitoring and identity protection.

During my time there as a product design intern, one of my first projects was to create responsive layouts of their existing pages. In addition to this, I worked with two other visual designers and was lead by our UX designer to create a new navigation system to accommodate mobile devices.

Click the button below to see the navigation in action (resize your window to simulate a smaller screen)

Company
Transunion, 2015

Team
Jianqi Chen (Lead)
Emily Wang,
Kirsten Jacobsen,
Doug Huynh

Project
Responsive/Web


 Web pages that were translated into responsive layouts

Web pages that were translated into responsive layouts

Challenge

Previously the product existed only as desktop web pages and were being converted into responsive layouts.
As a result we needed to build a new navigation system that will accommodate responsive and mobile screens. 

Goals

- To design a navigation experience that will not overwhelm users

- Create a scalable system that will clearly organize TUCM's current features but also accommodate for future products 

 
Nav breakdown.jpg
 

 

Idea One: Dropdowns + Nesting

Use a dropdown menu for secondary navigation and an accordion interaction for content (tertiary nav.).

Clicking on the hamburger icon opens a sliding-drawer menu that uses drop-downs to navigate between products and primary links. 

Pros:  
Straightforward organization and has consistent interactions

Cons: 
- Too much use of the drop-down and nesting features
- Pages with content can be incredibly long if all the tabs (Account summary, Personal Info, etc) are open

 
 
Flow 1.jpg
 Idea 1 Interaction Flow

Idea 1 Interaction Flow


 

Idea Two: Swiping Tabs + take-over menu

Swipeable tabs for secondary navigation and a drop down menu for tertiary navigation.

Clicking on the hamburger icon opens a take-over menu with links for the primary navigation.
Swiping on the take-over menu navigates between different products.

Pros
- Using a drop down for tertiary nav. saved a lot of room for content
- Easy to navigate between secondary nav. with the swiping feature

Cons
- Swiping tabs took a lot of resources to implement
- Swiping between primary navigation pages wasn't completely clear
 

 
 
 Idea 2 Interaction Flow

Idea 2 Interaction Flow


 

Testing:

Although I was not directly present during the later stages of our design, our UX designer ran usability tests on key stakeholders. This allowed us to test the usability of our solutions and assess the feasibility from a front-end standpoint before moving on with development. 

 

 

Proposed Final Design: nesting + take-over menu interactions

A drop-down menu is used to navigate through tertiary pages and its content.

Tapping on the hamburger icon opens a take over menu with the product navigation placed at the top. Clicking on it takes users to another page where they can change products.

Below the product navigation are  the primary links. Clicking on one of those links opens the secondary nav using an accordion interaction. 

 

 

Interaction flow (click to enlarge)