BarTender Cloud Navigation Redesign
This case study outlines my approach to redesigning and merging several disparate navigation structures and improving the overall usability of BarTender Cloud, the cloud-based offering from Seagull Scientific – a leading provider of printing and labeling solutions.
Background:
Legacy Navigation: This was the closest to the new design. This streamlined layout laid the groundwork for our unified navigation.
File Browser Navigation: A hierarchical, folder-based structure offering users a deep, detailed navigation experience, elements of which were incorporated into the new unified navigation.
Seagull Scientific sought to enhance the user experience of its BarTender Cloud software by redesigning the navigation. The software serves a diverse user base with varying technical proficiencies - however, users consistently reported difficulties with navigating the software due to inconsistent navigation patterns. This led to frustration and decreased productivity. The software is currently comprised of multiple modules that are built by different development teams, and each module has a unique navigation structure and style, which exacerbates the usability challenges.
Goals:
Unified Navigation: Merge disparate navigation styles across the modules into a cohesive navigation system. Ideally, the user shouldn’t realize they’re moving between modules.
Simplify Complexity: Streamline navigation to reduce cognitive load and make it easier for users to identify primary features.
Enhance Discoverability: Empower users to utilize the software's full capabilities by making the product more searchable and easier to find all of the functionality.
Maintain Flexibility: Ensure that the redesigned navigation system accommodates the diverse needs and preferences of different user segments, and can adapt based on future additions to the software.
Settings Drawer Navigation: A compact, side-panel drawer designed for quick access to settings, which influenced the new navigation's ability to be collapsed for more working space when needed.
Research and Analysis:
Conducted user interviews, surveys, and usability tests to understand current pain points and user expectations.
Analyzed usage data to identify patterns and areas of high interaction within the software.
Reviewed competitor products and industry best practices to gather insights into effective navigation design strategies.
Design Process:
Inventory of Navigation Styles: Identified and documented the existing navigation styles used across different modules of the software.
User Journey Mapping: Created user journey maps to visualize the typical paths users take within the software and identify navigation bottlenecks.
Information Architecture (IA) Redesign: Developed a revised IA that rationalized the structure and hierarchy of navigation elements to facilitate smoother user flows.
Wireframing and Prototyping: Generated wireframes and interactive prototypes in Figma to explore and validate different navigation concepts and layouts.
Iterative Design: Solicited feedback from stakeholders and conducted usability testing at various stages to refine the navigation design based on user input.
Accessibility Considerations: Ensured that the redesigned navigation system adhered to accessibility standards, including sufficient color contrast and keyboard navigation support.
Figma Prototype:
The Figma prototype on this page displays the revised navigation bar, which features a clean, modern interface focused on usability and flexibility. The navigation bar is anchored on the left side of the screen, with a collapsible menu to maximize workspace when needed.
Protype Key Features:
Collapsible Navigation: Users can click on the hamburger menu to toggle between a full and a collapsed view, allowing for a more streamlined workspace. In the collapsed state, icons represent each section for quick access, and hovering in the deployed version would reveal full section names. When the navigation is expanded, clicking on the pin icon allows the user to select whether the navigation will automatically minimize when they click away from it.
Hierarchical Structure: Inspired by a file browser, the navigation incorporates a nested structure where users can expand or collapse categories for quick access to related tools and settings. This helps maintain a tidy layout while providing depth and access to the program’s many features.
Global Navigation: The prototype consolidates various navigational elements (e.g., project files, designs, and settings) into a single, unified bar. This allows users to seamlessly transition between sections without the need for multiple sidebars or menus.
Responsive Design: The prototype is designed to adapt across various screen sizes, ensuring the navigation remains intuitive on both desktop and mobile devices.
Future Implementation Plan:
Collaborate closely with developers to implement the redesigned navigation system while minimizing disruption to existing users.
Conduct user training sessions and provide documentation to familiarize users with the new navigation structure and features.
Monitor user feedback and analytics post-implementation to identify any issues or areas for further improvement.
Future iterations of the navigation bar would possibly include advanced features like pinning favorite sections or pages, a search/filter function for the sections, and an additional dropdown to select between ‘Spaces’.
Conclusion:
By merging disparate navigation styles and prioritizing simplicity, discoverability, and flexibility, the redesigned navigation system for BarTender Cloud will greatly improve the overall user experience. Ongoing monitoring and iteration based on user feedback will be essential to ensure that the navigation system continues to meet the evolving needs of users and remains aligned with industry standards and best practices.
