Global Nav Design
Global Nav Design
Global Nav Design
Passion project turned major navigation design overhaul to support product scalability, vastly improved IA, and enhanced utility.
Passion project turned major navigation design overhaul to support product scalability, vastly improved IA, and enhanced utility.
Passion project turned major navigation design overhaul to support product scalability, vastly improved IA, and enhanced utility.
Project Type
UI design • passion project
Tags
scalability • quality
Roles
design lead
Association
UI Design Lead
CallRail
in
2019
Project Framing
Problem
The current navigation was designed for a single product at a much earlier stage. Global navigation elements such as account dropdown, help button, quick creation button, and others were scattered across 3 corners of the screen. Our help button was often overlooked, likely due to “corner blindness”. With nowhere else to go, two new products being beta-tested were shoehorned into the remaining corner. This was the breaking point that lead me to wanting to find a new solution to each of these pain points.
Goal
Concept an entirely new UI and updated IA to better solve for current needs, allow room for upcoming products, advocate for new features, and set foundations for future scalability.
Project Framing
Problem
The current navigation was designed for a single product at a much earlier stage. Global navigation elements such as account dropdown, help button, quick creation button, and others were scattered across 3 corners of the screen. Our help button was often overlooked, likely due to “corner blindness”. With nowhere else to go, two new products being beta-tested were shoehorned into the remaining corner. This was the breaking point that lead me to wanting to find a new solution to each of these pain points.
Goal
Concept an entirely new UI and updated IA to better solve for current needs, allow room for upcoming products, advocate for new features, and set foundations for future scalability.
Project Framing
Problem
The current navigation was designed for a single product at a much earlier stage. Global navigation elements such as account dropdown, help button, quick creation button, and others were scattered across 3 corners of the screen. Our help button was often overlooked, likely due to “corner blindness”. With nowhere else to go, two new products being beta-tested were shoehorned into the remaining corner. This was the breaking point that lead me to wanting to find a new solution to each of these pain points.
Goal
Concept an entirely new UI and updated IA to better solve for current needs, allow room for upcoming products, advocate for new features, and set foundations for future scalability.
Process
Exploration
Initially, I just wanted to explore low-lift options to move things around and try new menu options to see how we might be able to solve the majority of our issues without a major overhaul. However, the more I explored, the more opportunity I found to push things further. Ultimately, the most successful approach was to collect global navigation items into a vertical bar on the left while leaving product-specific tabs along the top. This also helped us restructure our navigation IA based on hierarchy: primary (global) vs secondary (product-level) vs tertiary (page-level).
Research
Somewhat early on, we invited some of our customers to do some users interviews to collect feedback. We showed them a few different versions and asked for feedback. One of the specific questions we wanted to to answer was where they expected to find certain actions and whether our choices were intuitive. We got some great insights that validated our direction.
New opportunities
During early explorations, my director asked me to also explore ways to improve specific experiences such as switching accounts, which was a part of our existing navigation. If we were rethinking the general structure and UI, it made sense to explore related interactions and how those might be affected. Where this lead to was imagining an entire new panel pattern that could be opened adjacent to the new vertical global nav bar. The additional real estate and easy reusability made this a prime candidate for not only improving account switching, but other interactions stemming from our primary navigation: quick create menu, help menu, profile, sign out, and new opportunities such as surfacing account details and notifications.
What started as just exploring ways to patch a navigational problem was evolving into a much larger vision for overhauling our entire navigation experience. The additional impact and opportunities this project could unlock was extremely encouraging and motivated me to advocate for this becoming a larger shared initiative.
Getting buy-in
This project had already gone beyond some quick UI explorations but proved its potential to be a powerful and important UX improvement to our products. Going beyond a simple passion project of mine, It needed to become a larger initiative lead by the entire UX team. So I started seeking out more feedback and advocating for others to join, shifting ownership to the team to better support broader UX strategy, content, and research in addition to encouraging product and engineering partners to join in as well. I also pitched current explorations at our departmental all-hands meeting for more visibility and ensure more people had an opportunity to weigh in and consider how this project could fit into larger initiatives and roadmaps.
Hacking protocol
As weeks went on, this project continued to lack traction from department leadership and team leads. And I suspected it was because we had so many other urgent projects to tackle and plenty of other project ideas to compete with. And beyond that, I think at many people assumed the scope and difficulty of this work would be greater than what we had room for. But I was determined to help others see the urgency and importance of solving our navigation problem before the launch of our upcoming new products. And being so close to it, I was confident I had a good grasp of the scope. I knew we could do it. So I had one more idea up my sleeve to try: show this concept in action with a working (coded) prototype.
Through the support of my director, a product manager I had worked closely with, and 2 engineers I was eager to work with more, we had formed a small unofficial team that could facilitate design system-related work that we knew needed to get done one way or the other. We knew the value. And we had just enough free time to make meaningful progress. So we decided to take on building a working prototype of this new global nav concept. I worked closely with my engineering partner to get a coded prototype together. It only took about 2 weeks.
One of our engineering leads that had a ton of sway within the department saw our prototype. He was sold. And we immediately had the buy-in we needed to dedicate resources to finish the project and get it live. Not only that, he wanted it launched in just 1 sprint! So we had to work quickly to ensure other stakeholders who had not been directly involved were aware of the accelerated timeline so that they could weigh in and contribute before launch.
Process
Exploration
Initially, I just wanted to explore low-lift options to move things around and try new menu options to see how we might be able to solve the majority of our issues without a major overhaul. However, the more I explored, the more opportunity I found to push things further. Ultimately, the most successful approach was to collect global navigation items into a vertical bar on the left while leaving product-specific tabs along the top. This also helped us restructure our navigation IA based on hierarchy: primary (global) vs secondary (product-level) vs tertiary (page-level).
Research
Somewhat early on, we invited some of our customers to do some users interviews to collect feedback. We showed them a few different versions and asked for feedback. One of the specific questions we wanted to to answer was where they expected to find certain actions and whether our choices were intuitive. We got some great insights that validated our direction.
New opportunities
During early explorations, my director asked me to also explore ways to improve specific experiences such as switching accounts, which was a part of our existing navigation. If we were rethinking the general structure and UI, it made sense to explore related interactions and how those might be affected. Where this lead to was imagining an entire new panel pattern that could be opened adjacent to the new vertical global nav bar. The additional real estate and easy reusability made this a prime candidate for not only improving account switching, but other interactions stemming from our primary navigation: quick create menu, help menu, profile, sign out, and new opportunities such as surfacing account details and notifications.
What started as just exploring ways to patch a navigational problem was evolving into a much larger vision for overhauling our entire navigation experience. The additional impact and opportunities this project could unlock was extremely encouraging and motivated me to advocate for this becoming a larger shared initiative.
Getting buy-in
This project had already gone beyond some quick UI explorations but proved its potential to be a powerful and important UX improvement to our products. Going beyond a simple passion project of mine, It needed to become a larger initiative lead by the entire UX team. So I started seeking out more feedback and advocating for others to join, shifting ownership to the team to better support broader UX strategy, content, and research in addition to encouraging product and engineering partners to join in as well. I also pitched current explorations at our departmental all-hands meeting for more visibility and ensure more people had an opportunity to weigh in and consider how this project could fit into larger initiatives and roadmaps.
Hacking protocol
As weeks went on, this project continued to lack traction from department leadership and team leads. And I suspected it was because we had so many other urgent projects to tackle and plenty of other project ideas to compete with. And beyond that, I think at many people assumed the scope and difficulty of this work would be greater than what we had room for. But I was determined to help others see the urgency and importance of solving our navigation problem before the launch of our upcoming new products. And being so close to it, I was confident I had a good grasp of the scope. I knew we could do it. So I had one more idea up my sleeve to try: show this concept in action with a working (coded) prototype.
Through the support of my director, a product manager I had worked closely with, and 2 engineers I was eager to work with more, we had formed a small unofficial team that could facilitate design system-related work that we knew needed to get done one way or the other. We knew the value. And we had just enough free time to make meaningful progress. So we decided to take on building a working prototype of this new global nav concept. I worked closely with my engineering partner to get a coded prototype together. It only took about 2 weeks.
One of our engineering leads that had a ton of sway within the department saw our prototype. He was sold. And we immediately had the buy-in we needed to dedicate resources to finish the project and get it live. Not only that, he wanted it launched in just 1 sprint! So we had to work quickly to ensure other stakeholders who had not been directly involved were aware of the accelerated timeline so that they could weigh in and contribute before launch.
Process
Exploration
Initially, I just wanted to explore low-lift options to move things around and try new menu options to see how we might be able to solve the majority of our issues without a major overhaul. However, the more I explored, the more opportunity I found to push things further. Ultimately, the most successful approach was to collect global navigation items into a vertical bar on the left while leaving product-specific tabs along the top. This also helped us restructure our navigation IA based on hierarchy: primary (global) vs secondary (product-level) vs tertiary (page-level).
Research
Somewhat early on, we invited some of our customers to do some users interviews to collect feedback. We showed them a few different versions and asked for feedback. One of the specific questions we wanted to to answer was where they expected to find certain actions and whether our choices were intuitive. We got some great insights that validated our direction.
New opportunities
During early explorations, my director asked me to also explore ways to improve specific experiences such as switching accounts, which was a part of our existing navigation. If we were rethinking the general structure and UI, it made sense to explore related interactions and how those might be affected. Where this lead to was imagining an entire new panel pattern that could be opened adjacent to the new vertical global nav bar. The additional real estate and easy reusability made this a prime candidate for not only improving account switching, but other interactions stemming from our primary navigation: quick create menu, help menu, profile, sign out, and new opportunities such as surfacing account details and notifications.
What started as just exploring ways to patch a navigational problem was evolving into a much larger vision for overhauling our entire navigation experience. The additional impact and opportunities this project could unlock was extremely encouraging and motivated me to advocate for this becoming a larger shared initiative.
Getting buy-in
This project had already gone beyond some quick UI explorations but proved its potential to be a powerful and important UX improvement to our products. Going beyond a simple passion project of mine, It needed to become a larger initiative lead by the entire UX team. So I started seeking out more feedback and advocating for others to join, shifting ownership to the team to better support broader UX strategy, content, and research in addition to encouraging product and engineering partners to join in as well. I also pitched current explorations at our departmental all-hands meeting for more visibility and ensure more people had an opportunity to weigh in and consider how this project could fit into larger initiatives and roadmaps.
Hacking protocol
As weeks went on, this project continued to lack traction from department leadership and team leads. And I suspected it was because we had so many other urgent projects to tackle and plenty of other project ideas to compete with. And beyond that, I think at many people assumed the scope and difficulty of this work would be greater than what we had room for. But I was determined to help others see the urgency and importance of solving our navigation problem before the launch of our upcoming new products. And being so close to it, I was confident I had a good grasp of the scope. I knew we could do it. So I had one more idea up my sleeve to try: show this concept in action with a working (coded) prototype.
Through the support of my director, a product manager I had worked closely with, and 2 engineers I was eager to work with more, we had formed a small unofficial team that could facilitate design system-related work that we knew needed to get done one way or the other. We knew the value. And we had just enough free time to make meaningful progress. So we decided to take on building a working prototype of this new global nav concept. I worked closely with my engineering partner to get a coded prototype together. It only took about 2 weeks.
One of our engineering leads that had a ton of sway within the department saw our prototype. He was sold. And we immediately had the buy-in we needed to dedicate resources to finish the project and get it live. Not only that, he wanted it launched in just 1 sprint! So we had to work quickly to ensure other stakeholders who had not been directly involved were aware of the accelerated timeline so that they could weigh in and contribute before launch.
Launch & Learnings
Feedback
Our new global nav was a hit. Between customers and internal users, we had nothing but positive feedback! I was really proud of our work and felt really good about getting it out the door so quickly.
Praise
We had some excellent feedback from senior leadership and even our CEO. Specifically, they were impressed with how we were able to create such a big impact with limited resources and outside of the roadmap. It was celebrated as a great alternative to the typical process that got things done much more efficiently.
Pain points
Though the project was a huge win, overall, there was one big area of improvement that we learned. Due to the accelerated timeline and overall limited involvement of the broader team and other departments, there was some important communication that was left out. Our lead UX content writer was left underprepared for creating Support documentation that we needed upon launch so that our customers were fully supported with regards to a major UI update like this. So in the future, we knew we needed to be more mindful of ensuring all parties had ample time to plan and do their part.
Main takeaways
Looking back, here were my main takeaways from this project:
While passion projects don’t always get traction or go anywhere, they can sometimes become high-impact/high-visibility opportunities that are worth pushing for. So stick to your guns when you know you have something special. Don’t get too discouraged if you don’t get traction, even after trying for a while. Persistence can pay off.
While shared processes and protocols generally help teams work more effectively as a unit, it can sometimes be worthwhile finding an alternate path to the work you want to do. Creating a small team to work in the background that doesn’t interfere with everyone else’s work can be an effective option to accelerate a project from concept to prototype in a very short period. And the more teams are able to move quickly and validate ideas, the faster we can get to the outcomes we’re looking for.
Whatever your process, ensure you keep necessary team members in the loop so that you don’t unintentionally create a fire that could have easily been avoided.
Thanks for reading! As one of my more thorough project write-ups, I hope this was informative and helped you something valuable about a small part of my past work experience.
Launch & Learnings
Feedback
Our new global nav was a hit. Between customers and internal users, we had nothing but positive feedback! I was really proud of our work and felt really good about getting it out the door so quickly.
Praise
We had some excellent feedback from senior leadership and even our CEO. Specifically, they were impressed with how we were able to create such a big impact with limited resources and outside of the roadmap. It was celebrated as a great alternative to the typical process that got things done much more efficiently.
Pain points
Though the project was a huge win, overall, there was one big area of improvement that we learned. Due to the accelerated timeline and overall limited involvement of the broader team and other departments, there was some important communication that was left out. Our lead UX content writer was left underprepared for creating Support documentation that we needed upon launch so that our customers were fully supported with regards to a major UI update like this. So in the future, we knew we needed to be more mindful of ensuring all parties had ample time to plan and do their part.
Main takeaways
Looking back, here were my main takeaways from this project:
While passion projects don’t always get traction or go anywhere, they can sometimes become high-impact/high-visibility opportunities that are worth pushing for. So stick to your guns when you know you have something special. Don’t get too discouraged if you don’t get traction, even after trying for a while. Persistence can pay off.
While shared processes and protocols generally help teams work more effectively as a unit, it can sometimes be worthwhile finding an alternate path to the work you want to do. Creating a small team to work in the background that doesn’t interfere with everyone else’s work can be an effective option to accelerate a project from concept to prototype in a very short period. And the more teams are able to move quickly and validate ideas, the faster we can get to the outcomes we’re looking for.
Whatever your process, ensure you keep necessary team members in the loop so that you don’t unintentionally create a fire that could have easily been avoided.
Thanks for reading! As one of my more thorough project write-ups, I hope this was informative and helped you something valuable about a small part of my past work experience.
Launch & Learnings
Feedback
Our new global nav was a hit. Between customers and internal users, we had nothing but positive feedback! I was really proud of our work and felt really good about getting it out the door so quickly.
Praise
We had some excellent feedback from senior leadership and even our CEO. Specifically, they were impressed with how we were able to create such a big impact with limited resources and outside of the roadmap. It was celebrated as a great alternative to the typical process that got things done much more efficiently.
Pain points
Though the project was a huge win, overall, there was one big area of improvement that we learned. Due to the accelerated timeline and overall limited involvement of the broader team and other departments, there was some important communication that was left out. Our lead UX content writer was left underprepared for creating Support documentation that we needed upon launch so that our customers were fully supported with regards to a major UI update like this. So in the future, we knew we needed to be more mindful of ensuring all parties had ample time to plan and do their part.
Main takeaways
Looking back, here were my main takeaways from this project:
While passion projects don’t always get traction or go anywhere, they can sometimes become high-impact/high-visibility opportunities that are worth pushing for. So stick to your guns when you know you have something special. Don’t get too discouraged if you don’t get traction, even after trying for a while. Persistence can pay off.
While shared processes and protocols generally help teams work more effectively as a unit, it can sometimes be worthwhile finding an alternate path to the work you want to do. Creating a small team to work in the background that doesn’t interfere with everyone else’s work can be an effective option to accelerate a project from concept to prototype in a very short period. And the more teams are able to move quickly and validate ideas, the faster we can get to the outcomes we’re looking for.
Whatever your process, ensure you keep necessary team members in the loop so that you don’t unintentionally create a fire that could have easily been avoided.
Thanks for reading! As one of my more thorough project write-ups, I hope this was informative and helped you something valuable about a small part of my past work experience.