Toolbar scalability and menu design.
The design.
As our development of the new Confluence Whiteboard feature progressed, it became imperative to establish a scalable main toolbar that could seamlessly adapt to various browser sizes and accommodate the integration of future features.
I conducted an in-depth analysis of competitors and delved into the 'more menu' concept. I crafted a scalable framework for incorporating features within this menu, employing a breadcrumb-based design to mitigate information overload.
I also examined potential breakpoints for the 'more menu' and introduced a dynamic approach, wherein additional tools are seamlessly integrated as the menu size decreases. Moreover, I undertook the design of an entire outline icon set and generated variations for larger menu items to ensure future versatility.
The process.
-
I started the project by conducting a thorough examination of competitors, with a specific focus on their strategies for handling horizontal menu resizing. I observed a common approach involving the inclusion of a 'more menu'. I collaborated with the team to establish a clear scope, breaking down the essential user stories necessary for the successful completion of this epic.
-
I started the ideation phase, aiming to create a menu structure that struck a balance between usability and simplicity, preventing information overload and ensuring adaptability for future features. I created a strategy involving a gradual transition of menu features into the 'more menu' as the browser width decreased, establishing precise breakpoints to facilitate a smooth and user-friendly transition.
-
I collaborated closely with the engineering team to refine the responsive design, incorporating animations within the breakpoints to enhance the fluidity of the toolbar's adjustment as the browser size changes.
The impact.
This project established a scalable foundation for adding new features to whiteboards in Confluence. Futhermore, making the entire product more user-friendly and accessible through the introduction of new breakpoints.