CIP's App Redesign

Abstract

CIP is a US company that develops security software for different types of companies (Casinos, Malls, Hospitals and others). CIP has their own web application to create and personalize the software for their clients. This interface is used by CIP's developers.

My objective in this project was to redesign this app, from a UX/UI standpoint, understanding the logical process of CIP and the developer's needs to create a new and better experience for my users the CIP's developers

Process

The process of this project could be easily defined in three main parts "Understand, Propose & Test". First it's necessary for me to understand the logic behind the system, what do they actually want to achieve with it

Once I understand that, it's moment to confront what they want to do against how they are doing it, this way I can find the main issues from a UX & UI perspective.

After the main problems are identified, I design a new proposal, based on my UX/UI experience, wich will be tested to see its functionality. Then based on feedback I'll redesign the final proposal

1. State of the Art

Main page of CIP's app

CIP's system has three main areas "Users", "Reports" and "Logic & Interaction".

Basically the system works this way:
They have a group of "Users" that need to manage "Reports" with "Logic & Interaction"

The developers are in charged of create and manage all this three areas to create the client's system. This app has a lot of other areas, but during this project my main objective was to work only with the "Users", "Reports" and "Logic & Interaction" because those were the most important ones

2. Problems found

Even though, the 3 areas ("Users", "Reports" and "Logic & Interaction") had inner sections that were functionally dependents, there were no connections between them, so the developers had to go to the home page every time they wanted to go from one section to another.

The developers spend 8 hours a day working on this interface, that has no visual helps and it's completely gray, which makes it harder for the developers to work.
Another issue is that, the UI isn't using the screen as it should, there's about 30% of the screen that is wasted because it's not been used.

3. Wireframes

This is the first step of the proposal process. In this case in order to improve connectivity I added a navigation bar to the left side of the screen, this way the developers could move easily around the system. This navigation bar will only contain the sections that have similar functions, for example, in the User area, the navigation bar will only contain the sections related to the "Users". This way the developer would only see what he needs

4. First Test

After I designed the first proposals I proceeded to test them with the developers, in this case even though the UI was completely different from what they were used to work with, they understood the logic really fast.

With this test, I was able to confirm that the UX/UI that I was proposing was correct and that I could move on with the look and feel of the app

5. Look & Feel

The concept I chose for this app was "Clean Blue" in this case it was aimed to be a light and friendly UI. This because the user spends a lot of time in the app so it has to be a simple as possible so the user doesn't get tired fast. The chromatic would be used only to bring buttons and actions into the developers attention. The color blue was selected because the CIP's brand uses it and because is a cold color that wont stress the user

6. L&F Applied

After the Look & Feel was applied, I did the second test with users were I adjusted the finals details of the design and the new UX/UI of the app was done!

Before

After