EXECUTIVE SUMMARY

A leading global manufacturer of dairy products partnered with CleanSlate to conduct a Product Design assessment on 2 of their key digital platforms. Both platforms support overall operational processes from production to inventory management. The applications are crucial and have many interaction points to ensure operational processes are managed appropriately.

The Client is working to modernize and transform their applications into SaaS platforms and have started with an overall product design assessment. CleanSlate needed to evaluate the overall user experience, visual hierarchy, design system, color palate and overall functional design views across mobile, tablet, and desktop machines.

The results of the assessment have been a success, with a completely redesigned UI and rethought user experience, they have received high marks from users and key stakeholders. These platforms are well-positioned for future growth and expansion of features and market share.

THE BURNING PLATFORM

This Wisconsin-based global enterprise knew it needed to rethink it’s platforms as it began on its journey to fully modern SaaS platforms. This journey started out with Product Design as a key element to its future success. They partnered with CleanSlate to fulfill this mission. The underlying platforms are quite vast in their functionality but were suffering from bolt-on syndrome and had not benefited from a consistent and well thought out design system guided by a Product Designer. They also knew they needed to up the production quality of the user experience and UI to be on par with other top-notch WMS systems to compete in this space as a SaaS offering.

Some of the largest challenges to overcome were the overly complicated and verbose user interface, lack of visual hierarchy and space allocations in the views. With such a vast feature set, some features were obscured, user controls and the data they affected were not close in proximity, and the types of controls and the patterns employed needed to be rethought as well.

There was a great amount of tribal knowledge around the platform and it had incurred a steep learning curve for new users. After careful inspection of the UI it had become apparent that the filters were in the incorrect position and dominated the available space pushing the data set to the bottom of the viewable area, often times only showing a few rows of data. This was a major issue and contributed to users feeling overwhelmed and mired in option fatigue by the UI and it’s various options.

Users were presented with a main nav, a dynamic menu system of breadcrumbed tabs of page view history, plus a utility nav and other global controls. The base shell presented users with 20 navigation options between the utility nav and main navigation. At times there are 20 plus filter fields so users could be presented with 40 options or more at any given time. This coupled with the lack of visual hierarchy and some key misses with color that brought secondary and tertiary elements to the highest level of visual attention. This worked in concert to make users feel uncertainty about where to look and how to move through the application effectively.

Both apps needed to be rethought to unlock their full potential, this included several discovery sessions with the team to uncover the pain points, strengths and opportunities for growth in the platforms. During the discovery workshops key personas were identified and developed out, the WMS platform has extremely unique key personas, and this was crucial to make sure the proper lens was viewed when executing planning and design. The platform is completely different from a functional standpoint when used by the warehouse operators for picking and putting product but is the same codebase.

Several other factors had to be accounted for such as the users environment, which is low light and a refrigerated physical environment. The tablet users wear gloves so all interaction points had to be large enough to accommodate this and still provide clear direction in the UI. The low light scenario also dictated a need for a high contrast color palate. The current state did this, but the execution needed to be softened up and the iconography was due for a redesign for color, consistency, and clarity. The icon set included 40 unique icons specific to warehousing operations.

MAJOR CHALLENGES & PROBLEMS TO SOLVE

The lackluster user experience and user interface was holding the platform’s potential back and leaving a less than desirable perception with users. Users were frustrated with the systems, overwhelmed by options and had to resort to workarounds in the UI to accomplish tasks.

• A scalable design was needed to easily adapt and grow with future plans
• Visual hierarchy needed to be established within the application
• Consistent branding to align with corporate branding
• Poor user experience was leading to frustration within the user base
• Multi-device design was lacking in presentation and experience

SOLUTIONS

Equipped with the large amount of information gathered during discovery CleanSlate set out to modernize these platforms and take them to the next level. The UI shell was streamlined via a utility nav icon that presented users with the menu elements, eliminating 10 option points and exposing them to users only when needed.

This is an important feature in the platform providing a custom “shortcut menu” of places they visit frequently. The redesign aligned this functionality to the area it interacts with and the vertical nature of the new filtering location made those options fundamentally clearer and groupings were used for related fields. Before they were presented in columns but read as rows creating a disconnect and lacked groupings for further clarity.

The next big evolution was to move the filtering options to the left rail of the view from the mid-top of the view, this served two purposes. The first was to gain significant space back in the main area for the data sets and other information users are seeking. Its new position also gave the ability to have vertical scrolling of the filters as there are pages with greater than 20 filter options.

Secondly, it moved the dynamic breadcrumb menu from the left rail where it had more space available than necessary, to the top of the main view and was redesigned into proper tabs. This moved the control adjacent to the area it affects and gave it prominence and position that users are generally used to.

Visual hierarchy and brand consistency was achieved by moving the brand color of yellow to active states only in the outer shell which utilizes a gray and black palate. Light shadowing and layering were incorporated to guide users eyes around the interface and break up sections. A secondary color was introduced for the lighter areas of the UI to alert users to buttons and other actions they may need to take.

The rearrangement of the UI gave users back 1/3rd of the screen vertically to view and interact with the data they are seeking. The new visual hierarchy gave users a clear understanding of where global elements reside and framed the dynamic portions of the view. A new slightly condensed font face was introduced to reduce horizontal space taken by buttons and other text-based entities and to closer align with corporate branding.

SUCCESS METRICS

Through our successful partnership, CleanSlate garnered the information and mindsets of the key users and company goals. The redesigned experience has gained high marks from users and key stakeholders. The platforms have reached a new level of maturity in user experience and overall refinement of the user interface.

• A clean concise user experience and interface were developed
• Users gained a large amount of screen real estate back to view data
• Option fatigue was dramatically reduced with the updated menus and filtering system
• The UI shell was designed to be flexible and scalable for future modules
• The overall presentation of the SaaS platform was increased giving users confidence in it
• Outdated and confusing UX patterns were eliminated boosting ease of use
• Increased contrast scores across the platforms