The Problem

Each client had a support person assigned to them in order to teach them how to use the product. This of course was expensive and the company wanted to invest into user experience and get a fresh new look that would help users navigate and use the product on their own without the need of a person to help.

One of my first tasks was to improve the navigation, because users were getting lost in all the dropdown menus and needed a better way to navigate through the platform. There were 50+ links in each tab and finding what you needed took quite some time.

The Solution

The old horizontal menu proved to be difficult to navigate and couldn't handle a lot of links inside the dropdown itself. After a few iterations and collaborating with the Regional Manager and Head of Development, we decided to use a vertical menu on the left side to save some space on the page itself and have a more tree-like structure to the whole menu, where the user could see all of the links at a glance. The menu helped us separate most of the links into their own “Entity” category and after releasing it to some of our customers we saw an increase in performance, measuring in less clicks and less time spent to do a certain action. It was observed via Google Analytics and Hotjar recordings.

At a later stage we made the menu customizable, allowing the users to control which links they see and organize them to their liking.

The Research

Since the company never had a designer before and hadn't based their decisions on test results, but on direct customer feedback (i.e. "I need this, put it in the software" and they did so without asking), researching who the user is and what they need was rather difficult.

At that time the only tools I had at my disposal were Google Analytics and direct chats with some clients that were willing to help with feedback. Later I convinced the company to start using Hotjar , but because of the old architecture of the product the tool was only used on certain pages due to slow performance on the pages themselves.

Heat-maps and user recordings were used to validate certain changes to the UI and UX of the product. Some clients were a part of a "beta" version of the product where we would release new features and changes and get their feedback through the Hotjar system or through 1-to-1 chats with clients.

Flows

In close collaboration with the Regional Manager and Head of Development we managed to categorise the menu in something more usable and understandable. Flowcharts were created to better visualise the clutter and help remove it.

Most pages in the system contained only a set of fields and were usually not accessed directly through the navigation. Those and other pages were converted into modal windows and the rest were categorised better and combined with other pages for easier access.

Initial Sketching

After validating the problem with the Regional Manager and Head of Development I started sketching out the UI of the system with some base UX patterns for the Dashboard, Search and Product detail pages.

Wireframes and Micro-Interactions

The management wanted to see results fast and the mockup and design phases were combined to show them a sample of how it would look and function. To achieve this, most, if not all, of the elements were made into master components for an easier and faster process.

💡 Micro-interactions were created in the form of gifs to show the developers how certain elements would work and how their animation would look.

The result

Initially some users got to experience "parts" of the new design such as the navigation. They could use the product as is and still access every page, but with a different navigation. It didn't look pretty at all, but we had the ability to test it out get customer feedback.

The Old

The old system and design were very outdated. Created around 2010, the whole product was implemented by developers without any design intervention.

The new

Based on Material Design, the new product was running on Angular and had a radically new interface with new features and options for the clients to use in their day-to-day business.

The main focus was to make customers self-service themselves and use the product without any need for a support person.

‍

💡 The login screen was simplified and the background was made blue to help with the contrast of the login inputs in the middle of the screen.

‍

‍

💡 The whole product was made full width and the Dashboard was updated to fit the Material Design theme with Widgets and Graphs showing the user their most important data.

The Manage Orders and other Manage pages's filters were redesigned from scratch and made into a 'node' system where there are defaults for each page and the user can add custom ones that filter out the grid below. They could also save those filter groups and load them from the Dashboard at a later stage.

‍

💡 The Product pages were split into different tabs for each channel.

The customer could search, add and remove those tabs from the "Toolbox" feature on the right hand side under the main page controls. Other pages with more detailed information for the product were also put inside that "Toolbox" for the more advanced users.

The Components

Inspired by Atomic Design, elements were created and defined for easier repeated use. A Style Guide & Brand Book were also created to demonstrate to the developers how those components are built, what they do and how they can work together. The developers could use that Style Guide & Brand Book to build pages (convert old pages to new ones) by themselves without the need of a designer to help them.

💡 All of the old Dashboard elements were kept and improved to provide more information to the user.

New ones were created using the already available information, which enabled me to create list and graph widgets, showing things like the New, Recent, Shipped and Per-Channel orders as well as other useful information for sellers.

‍

💡 The Controls were based on Material Design and modified to fit the needs of the product. They were defined in the Style Guide for developers to use and to keep consistent.

💡 The Item Grid panel was a combination of other small elements to make this complex organism.

Because of how the old product used to work, there needed to be a guide as to how to build an item grid panel in the future or what it could contain and what it does.

The Finished Product

The new interface was delivered to most of the customers in Q1 of 2018. A promotional video was made, which was sent out to help advertise the work we had been doing for the past 2-3 years.