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)
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.
- 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
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)