The first thing I did was conduct a product style inventory looking at every individual item from drop downs, to cards, to radio buttons. Every component and how/where they were being used. I looked at my product, other company products and the marketing site. I compared branding elements like iconography, colors, buttons, etc. to see how we could better align and make a more cohesive experience for users.
‍
I knew once we got to the development stage I'd want to begin at the component level so started creating shell pages for every component we would need. Before I finalize any component I like to experiment with various designs first to ensure that it works throughout the application and/or across products.

The scope of this project was largely focused on redesigning the ui from a visual standpoint vs a functional redesign. Product owners did not want users to have to relearn a completely new interface. Where it made sense I was able to add some small ux improvements here and there but this was mainly a visual redesign. 

The new design uses a prominent single line header to help offset it from the main content areas, and disappears when the user scrolls down, but quickly reappears when the user begins to scroll back up. The left navigation panel is no longer pushed below a bulky header area reducing some amount of scrolling, and is also collapsable to maximize vertical space when viewing on smaller screens. Key information is displayed in large prominent fonts making it easier to locate.

While largely similar, the new design offers a much cleaner header. It now has a clear primary action along with secondary actions. The multiple buttons for creating lists has been replaced with a singular button with clearly labeled drop downs. The CTA for saving the search is now much more prominent and is closely associated with the search criteria. The results themselves now better utilize the available vertical space.

Adding horizontal tabs for each list type serves two purposes. One, the tabs help the user to more easily hone in on the list they're looking, and two, this also provides an opportunity to create informative empty states that can help educate a new user on the distinctions between list types.

Since lists can contain a variety data types, using iconography that represents the content, makes it easier to scan and quickly identify the specific list they're looking for.

By simply adding a left nav to house all administrative pages and then grouping related pages accordingly, this made it much easier to quickly navigate between pages.

We wanted to release the new ui in phases and offer the option to switch back and forth as needed. As of now, of the users that have switched to the new ui, 87% have stayed despite the many lingering bugs.