Administrator Portal

CTERA Networks

UX
UI
Web Application
Administrator Portal

Introduction

CTERA provides cloud storage solutions that enable service providers and enterprises to launch managed storage, backup, file sharing and mobile collaboration services using a single platform and based on the cloud storage infrastructure of their choice.

Administrator Portal is very important because all CTERA clients are using it for defining policy, users, cloud folders, portals, devices, servers, storage node and many more.

Administrator Portal redesign (update old running version) project had two main goals:

1

Fix usability based on clients' feedback

2

Switch from the old technology to Angular due to slow performance

My Role

Worked closely with project stakeholders (CTO and Product Team) on analyzing clients feedback, usability issues and how to solve them

Collaborated with GUI Team from the beginning by presenting mockups and verifying that new design solution meets developers schedule until final implementation

Design Process

Design Proces

Normally, before “Design and Mockups” I do wireframes, but this step was skipped due to tight deadlines and not needing to start from scratch. We had the old version and knew that we will use Angular technology with its' library

Problems & Solutions

Navigation Issue

Navigation Issue

Unintuitive portal navigation located on the bottom of the screen

Solution

The solution was to follow the existing navigation design pattern and to place portal navigation on the top

Cognitive Overload

Cognitive Overload

Data was not optimally organized. Result: too many columns causing a horizontal scroll

Too many empty cells that take up valuable screen real estate

Multiple icons that do not have any value and make layout visual clutter

Solution

Data reorganization and component creation displays data more cleanly. Result: the table is easy to read and is user friendly with real estate saved by removing many columns

Devices ScreenUsers Screen
Performance Issue

Performance Issue

Slow performance due to old technology

Solution

I reviewed the Angular library and used existing elements in my designs to make the implementation progress faster. I collaborated with the GUI team to create new components as needed

Settings Screens

Settings Screens

Setting screens were unnecessarily small and crowded, not utilizing the available screen real estate. Users were forced to scroll and click more than needed

Categories were not intuitive to use, frustrating users who can't find the correct settings

Solution

Reorganization of content was built by my working closely with the CTO and the Product Development Team. settings open in the full screen with horizontal tabs navigation. Almost in all cases, users will see all tabs without any scroll

Settings Screen Examples
Branding Issue

Branding Issue

CTERA provides white-labeled product to the clients. Then clients had to replace CTERA assets with branded assets, including updating CSS files manually. In addition, the fact that all assets were PNG/JPEG images made the process even more complicated. Many clients complained about this complex branding change process

Solution

In the redesign process, I used only vector assets, which allow color change by code, without replacing the asset itself. Also, I created a style guide with the color palette, icon sets, table elements, and typography and this allowed developers to link classes they use to the style guide. This is how we decided to develop Palette Generator. From the developer's view this feature wasn't too hard to implement, but brought huge value to CTERA clients. Now Admins can make fully branded skins for both Administrators and End User portals from one page

Palette Generator Screen
Palette Generator Screen
Preview Dialog: here admins could see the live preview and download branded CSS files
Palette Preview Dialog

Learnings & Takeaways

1

Collaboration is the Key to Success

This is not new for me, but worth mentioning. Working with other people directly, sharing the process, and getting feedback will help get better and much quicker results. I really believe that only with collaboration can we achieve a great product

2

Sketch is Awesome

Previously I worked with Photoshop, but this project I decided to give Sketch a try. I was very impressed with this app, it was made exactly for what I needed: designing mockups, syncing screens to InVision for easy presentation and feedback collection, creating the style guide, and exporting assets to developers. This workflow was productive and worked perfectly for all teams

I am sure, that if I was doing the same project in Photoshop it could take a much longer time to get all these things done

3

SVG is King

Using raster images in GUI can be frustrating. Monitors have become larger, some of them support retina, some of them don’t. This can be a reason that some JPEG or PNG images don’t look sharp, and this could drive a designer crazy. To verify this - ask your designer friend :)

In this project, I learned a lot about SVG files. During my work I came across new issues that have never troubled me before like: why are these vector icons looking pixaleted after implementation? Or, why are these icons not aligned? Now I got answers and know how to create a perfect icon set (even multi-colored)

Thank You!