TransUnion Mobile Navigation
TransUnion is dedicated to being more than just a credit reporting agency. They are a global information provider striving to use information for good.
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)
To create a scalable navigation system that organizes the four levels of navigation on TUCM and also accommodates for new products and pages.
- design a navigation that will not overwhelm users
- create a scalable system that will accommodate for TUCM's growing products
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.
Straightforward organization and has consistent interactions
- 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
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.
- Using a drop down for tertiary nav. saved a lot of room for content
- Easy to navigate between secondary nav. with the swiping feature
- Swiping tabs took a lot of resources to implement
- Swiping between primary navigation pages wasn't completely clear
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)