Start a project

You can also email me.

Boston Massachusetts USA 42°21′37″N 71°3′28″W

UX Design

Improving design consistency for a legacy project.

  • by Craig Witte
  • 16 September
Post title

Starting a project that hasn’t had a UX designer in over two years can be challenging. Add to that the fact that the development teams have been independently adding features during that time, and you’ve got quite a situation. While the team believes their past experience with designers counts, it’s essential to address the current state of the application.

Getting started

Upon reviewing the work, I immediately noticed several issues: complexity, confusion, and lack of intuitiveness. My task was to focus on new features, but the existing foundation needed improvement.

I proposed a UX audit, starting with an examination of the main navigation. After identifying quick wins and easy fixes, the team agreed. However, reworking an application involves prioritization. With limited time and budget, we needed to pinpoint high-impact areas.

The application comprises four distinct sections, akin to nested apps. The current layout features icons for these sections, along with additional icons for tools and actions.

The main toolbar, unfortunately, lacks hierarchy. Global and local actions are mixed in a single row, with no clear correlation between left and right. Furthermore, the icons lack tooltips or labels, leaving users unaware that the first three icons on the left represent navigation sections.

Key insight #1

Navigation Hierarchy:

  • Separate global actions from local actions.
  • Replace local action icons with tabs for clarity.
  • Post title
    Post title

    Key insight #2

    Side Panel:

  • The existing side panel is confusing due to information overload.
  • Implement progressive disclosure: show primary actions first, followed by secondary actions.
  • Clear labeling and appropriate UI controls (e.g., radio buttons) will enhance usability.
  • Post title
    Post title

    Results

    By addressing these issues, we can create a more intuitive and user-friendly experience.

    We’ve incorporated this very same navigation hierarchy pattern into our design system, and it’s now being used across various apps. Here is an example.

    Post title

    Related work.