Housecall Pro • Left Nav

• Effective navigation should provide clarity on the user's current location and where they might accomplish their next task, but the existing left-navigation was overextending itself well past it's effectiveness. Each menu item featured up to four distinct elements: an icon, title, subtitle, and badge. The current navigation was overly cluttered, lacking true usability.
• The Fintech organization lagged in maintaining consistency with the "core" application's navigational components.
• The current navigation provided zero mobile web responsiveness.

• Reduce cognitive load, allowing users to easily find content and complete tasks
• Prioritize consistency across the product to prevent users from having to relearn new patterns throughout the application
• Map out the new left-nav with one-to-one functionality of the current navigation, simplifying the work into manageable, bite-sized chunks for efficient implementation.

Bite-sized chunks of work: When I arrived at HCP, the Fintech design team faced pushback when proposing broad revisions to the UX of the My Money section. For this project I adjusted our approach: let's divide our design vision into manageable phases.
In Phase 1, our focus shifted to aligning the left-navigation with the core product and concentrating on precisely matching existing functionality. This strategy prevented us from getting bogged down in the diverse future visions held by various Fintech squads.

Soft skills & team alignment: Despite framing the first phase as a bite-sized chunk of work, achieving cross-squad alignment posed its own set of challenges. This phase demanded a thorough inventory of each feature's navigational structure and edge cases, rigorous communication across teams, and the presentation of a thoughtful design proposal to key stakeholders and leaders within the Fintech organization.

• The updated navigation component provided functionality to collapse the left navigation for medium breakpoints (600px - 900px).
• To accommodate breakpoints smaller than 600px, the left navigation would simply display the page header and a chevron. Clicking on the page header will reveal the left navigation menu in a dropdown style, optimizing screen real estate for the main content of the page.

Truly, this initiative centered around fostering collaboration and alignment among various teams. To successfully conclude the project and propel My Money into the future, the active involvement and endorsement of every team was essential.

The updated navigation played a direct role in the increased engagement of several Fintech products. Line of credit applications soared by 150%, and card reader requests fielded by the support team decreased by 40%.

Ultimately, the former navigation was trying to do too much. Features were hidden and badges created a cluttered user experience. I was especially happy that a cherished design principle of mine, "Out of Sight, Out of Mind," proved itself once again.