3. March 2021

Product Design, UX Design

NWS Customer Center

UI Design System Development

Netways Web Services (NWS) offers managed open source tools as software as a service (SaaS). This means that they offer optimized standardized setups of open source software tools, that customers can subscribe to.

Starting up with simpler applications like GitLab, Rocket.Chat, Jitsi and of course Icinga, the offered SaaS products became more complex with the addition of Kubernetes and Virtual Private Cloud. The latter is based on the Cloud Computing Infrastructure Management tool OpenStack.

The Goal

The goal of the project was to develop a UI design system for the customer facing management interface. The management was designed to only handle basic configuration and info for the app offerings.

One key requirement was for the system to be scalable, so that the user interface was capable of managing the addition of future products.

My role was to develop the UI concept in cooperation with the product owners and implement a toolkit of reusable UI elements, so that the team can further implement new interface sections for the app, when new product offerings were added.

Requirements

Branding

Colors and type

I used the already available color set of the marketing pages for the branding of the customer center. For the font I was looking for a modern, sans serif typeface that is readable at smaller sizes. It should also look fresh and have character in opposition to commonly used UI fonts.

NWS user interface colors and typography
The color set was taken from the marketing website.

The products

Custom made icons brand the products as NWS offerings, while still maintaining the reference to the original tools.

Main navigation

The app features a sidebar, which made it pretty versatile in the amount of items it can hold.

The sidebar layout makes the main menu easily scalable.

The Sidebar

Besides the main menu holding the users products, the sidebar also contained a quick add menu. Not only does it give a quick overview about the offerings, it makes adding new products and resources easily accessible.

It should also make MyEngineer one of the key features easily accessible from each view. MyEngineer is the support feature of NWS and comes with every plan. The customer can get quickly in contact with one of the support engineers.

Clear Usability and User Guidance

Besides simple SaaS products, there were some more complex products offered. Even if the customer won’t grasp the full feature set and possibilities, the portal offers a streamlined onboarding for the latter. The interface directs the user step by step and offers descriptions of the attributes the user can set.

More complex products offer a variety of configuration options. With a set of standardized custom UI elements, the team could effectively build their user interfaces for new products.