Back

In-house Git CGI

CGI has developed an internal GIT with an open source project. With the need for assistance of a designer. I proposed to do UX research on the current design, to start with. So, I made use of an expert review and did an analysis on competitors. I asked myself some questions: Is the design user friendly? What can we do to improve the design? I talked to developers (the target audience), to get a feeling of their needs. With help of UX methodologies, I designed an improved version with the program Figma.

Working on this project, I made use of Figma. Figma works a lot like Sketch and is a really nice tool to share the work created.

Deliverables

Competitor analyse Expert review Sketches High-fi clickable Prototype UX improvements Style guide UI Design

This improved version was intended as mostly styling changes, to make the project more fit to CGI, because CGI cannot do drastic changes in the back-end due to time constrains. But due to my suggestions, bigger changes will happen. I now come with small chunks of human centered improvements, to make small steps towards a more user friendly website. I do this by researching best practices to solve a problem. For example: best practice to design a multi-select dropdown or creating the easiest page navigation. This is a way they are working step by step, what is the correct fit for this project.

Expert review

An expert review is analyzing the user friendliness of the website. With help of an expert review the pain points will be mapped. An expert review can be done in different ways. I chose to make use of the 5 E’s of Whitney Quesenbery. These are the five dimensions of usability, and help to look with critical eyes to a website. During this expert review, I came across a lot of interaction improvements. For example: this website has a lot of depth, but sometimes there was made use of too many clicks then needed. Also inconsistency in the UI and naming of the buttons as another example.

UX improvements

One of the main improvements on the page is unclear communication and amount of clicks on the website. An example of an unclear object, was the option to switch dashboards. In the old design there was just a dropdown where the user would see their own name. After clicking it there would appear a dropdown with: switch dashboard context. Before knowing this, it looks like the common ‘profile and settings’ option. Although it was not, because this was placed at the most expected place in the right corner. To make the difference more clear to the user, I made sure that they would see the difference at first sight. By giving it a different icon and a clear title.