Navigation Panel
Improving navigation to align user goals with product strategy
Improving navigation to align user goals with product strategy
Date :
Sept 2021–Nov 2021
Role :
UX, UI Design
Competitor Research
Information Architecture
Team :
CEO
Product Manager
Deskpro is a helpdesk software that allows companies to provide better support, sales, and customer engagement. To update the user interface and improve the current ticket navigation/display system, we explored ways to restructure the navigation panel.
Objective
Among the whole interface, the navigation panel is heavily used. Not only is it an important immediate experience for first-time users, the content hierarchy and structure are also vital for everyday users.
With this project, we aim to simplify navigation across our software, create a consistent design for future feature implementations, and enhance the interface’s look and feel.
Research
There have been previous attempts and inputs from internal teams on this specific problem. Therefore, I began by compiling and updating previous research work, before doing the following:
• Competitor analysis
• Collating feedback from our sales and support teams (on previous designs)
• Understanding the major pain points we have discovered
• Understanding our preferred system of filters, facets, and views
• Understanding the new functionalities (for MVP and upcoming iterations)
Key Findings
Powerful, intuitive, and highly customizable are the main product differentiators that Deskpro stands for. In line with our product vision and roadmap, we have decided to implement the following in this project:
• Reduce cognitive load (i.e. amount of content shown by default)
• Introduce a refined and quality look
• Enable both global (for brands and teams) and private saved views (for individuals)
What’s Next?
We have some brief ideas about what we want to do content-wise. However, a lot of this project comes down to exploring different designs. I started doing a lot of iterations on each component.
Content Restructure
• Adding a title / header to enforce content structure
• Separate ticket filter groups on different pages to keep the navigation clean
• Adding a collapsed navigation bar for quick access to sections
• Moving call / chat notifications, controls; profile settings; and organisation settings together in one place
Design Exploration
• Experiment with typography and icon sets to achieve a quality look and feel
• Add a uniform consistent tab design if we need to further separate content
• Created prototypes for micro-interactions (tab selection, dropdown menu)
• Proposed implementing animated icons to encourage users to explore different sections
New Design
General Improvements
• Improved spacing and content structure for ease of use
• Improved colour contrast
• Utilised tooltips to clarify sections
• Implemented animated icons in the navigation bar
• Improved typography — using one new font (Inter) in place of the previous two (Rubik, Noto Sans) for better readability and tidiness
Ticket Navigation
• Grouping on queues is easier to perform with the new action menu
• Lower cognitive load as interface shows the most relevant section
• Higher visibility as all queues are shown by default, whereas previously we show a maximum of 5 with an expand icon
Design QA
Working with the developer and product manager, we refined the design implementation in the actual product. Communication and feedback were exchanged via Zoom calls, Slack, and Shortcut. The video above shows how it’s currently implemented in our product.
Design System
As with other designs, the components are documented in our design library and used in the specific file. The components are using Auto-layout and combined into Component Sets as Variants. This is for both development use and future product mockups in Figma which shows the navigation panel.
Reflection
Compared to my first attempt at this design problem in 2020, I’m more satisfied with the approach, design, and implementation of the new navigation panel. Given more thoughts, research, and time, this project not only considered the current use case but also upcoming features.
Considered Use Case
• Commissioned animated icons (to use in navigation) for upcoming features
• Designed the navigation in Dark Mode for future use
• Responsive design: navigation panel collapses automatically given a certain width
Feedback
Throughout the design process, I have been able to collect feedback from our internal teams with prototypes and MVPs. In the coming days, I’m looking forward to launching the new interface and further improving the navigation based on more user feedback.