Improving Usability by Little Changes

Goal

Visual and usability improvements, and I also wanted to get more familiar with the existing style guide.

Role

Implemented a quick version in a hackathon and rolled out in a few months. This also allowed other designers to do quick prototypes with the style guide, and communicate more easily with engineers.

Fig 1. Before
Fig 2. After

During Addepar’s last hackathon, we decided to fix multiple small usability problems that our previous UI (Fig 1) caused.

The first issue that I focused on were the “floating islands.” The table and charts felt like they were draggable and resizable (they’re not) due to the different backgrounds and the drop shadow. Providing a full white background (Fig 2) allowed the gutters to be smaller.

Since the main view had a white background, the top navigation needed more distinction. The top navigation bar also needed to balance the left navigation (context chooser), and we decided that the tools should be the top level of the hierarchy. A secondary panel looked too similar to the table, so I provided some shadowing for a layering effect. This is a great example of how things can snowball because it’s difficult to make such changes in isolation.

Though the hamburger menu has become common to denote a menu in iOS devices, it doesn’t have as strong affordance in a desktop environment. I moved the collapse icon to be associated to the actual content that would be expanded or contracted.

I also cleaned up the toolbar, and the buttons now have a different background color and slight rounded corners to make them feel clickable. I streamlined these controls by removing superfluous secondary text

The tables also used to have dotted lines and spacing in between columns that broke up the flow of information (though the idea seemed to be provide affordance to resize the columns). However, indicating that the columns are resizable in that way is unnatural. I added some indications on hover (not pictured) that helped users discover this.

Validation and Undo Habits

I also did some explorations around validation and undo, below.

Fig 3. Changing the undo pattern
Fig 4. Validation explorations

Rapid Iteration

By getting more designers familiar with the style guide, designers could easily prototype different designs, using existing patterns. For example, I was able to prototype the three different designs below in an hour or so, and this helped me evaluate and communicate the different designs.

Fig 5. First option prototype
Fig 6. Second option prototype
Fig 7. Third option prototype