Sungard

Server management application

Sungard is a US based company that provides IT production and recovery services that include IT infrastructure, Cloud computing, Disaster Recovery, and Workplace Recovery.

They help maintain servers for many global organisations and these servers are located across the globe. Our task was to redesign the web application that was used internally by Sungard team to manage & maintain these servers.

My role

We were a team of 3 designers, being a senior designer at the time, my role was to research on UX & UI and provide guidance to the junior designer. As there was already an existing portal, I also did a thorough analysis to understand the pain points.

While working in any domain, it is crucial to understand the background of that domain in order to provide the best customer experience. As this project fell into the domain of IT, and I, at the time lacked the knowledge about this area, decided to put in some additional time to learn. Luckily, my company had a vast development team, who helped me understand what each of the activities (disaster recover, cloud computing, servers, etc) meant and what was the importance of them.

Design process

While analysing the existing portal and understanding the business requirement, pain points and future aspirations, we came up with a concept model. Through this concept model, we were able to outline the possible courses of action and present our approach on this web application to the client.

Concept model

A conceptual model is a representation of a system. It consists of concepts used to help people know, understand, or simulate a subject the model represents.

Upon creating a concept model on the basis of our understanding, we concluded on the below pointers -

Unified Application - Viewpoint, RaaS, Webend (third part tools currently used)
Pull customer to the left - Provide customers the access to existing tools and services offered by Sungard AS.
Make unified application bigger - Cover more area of Sungard AS business under tools and expose those to customers.

Information architecture

An information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. The goal is to help users find information and complete tasks. To do this, we need to understand how the pieces fit together to create the larger picture. In this case, we had to understand how each of the modules relate to each other within the system, their importance and content.

We first started with a high level IA, listing down all the different modules to be incorporated in web app. Some of these were already existing and while some had to be newly introduced.

After multiples rounds of discussions with client and iterations, we finalised on the below structure.

Once we had a vision of all the modules, we tapped into 'Dashboard' further.

Dashboard was the most key module of this entire application. The idea was that through the dashboard, users should get the idea of everything they were managing. With different roles in the company, one would have different needs from the dashboard. The detailed IA, we created for Dashboard included elements for all roles and this could later be configured as per each role.

Wireframes

We started with creating wireframes for major modules to establish the structure and flow. As dashboard was the most complex and crucial feature, we first looked into the possible solutions for the same. After rounds of testing and feedback from client, we finalised the wireframes.

Shown below are few wireframes from various modules like

Asset dashboard - a server is referred as 'asset'. An asset dashboard consists of all details related to a particular server.
Asset tickets - a sub-feature of asset dashboard. All tickets related to a server can be accessed by using filter in Tickets module or via asset dashboard.
User management - a feature designed to manage the level of access a user has within the system and to store their basic information.

Visual designs

Before tapping into UI, we did a lot of research with similar products to understand the most commonly used visual representation. But apart from this we also studied the latest UI trends.

We needed to maintain the brand colours (red, white, black). As the entire product revolved on different statues like healthy, warning, critical, pending, in-progress, completed, new, etc, we wanted to bring in colour representation for easier differentiation and recognition of these statues.