This REST service based application supports Git, Jenkins, Nexus, and Active Directory/LDAP.

To comply with my confidentiality agreement, I have omitted and appropriated confidential information.
Industry
Layer 3, Networking Telecom: Build and deploy tool
My Role
One of two UI/UX designers
Location
Broomfield, CO
Team
10

The Challenge

This project involved a UI re-skin and an information architecture overhaul. However, the most significant challenge was getting the buy-in of the developers who had grown accustomed to outdated technologies.

The Process

Starting with a UI audit, I familiarized myself with the tool’s features, look and feel. From this I created a current state dynamic model.

Current State Dynamic Model


Having a basic understanding of the tool, I then reach out to the user community and got their feedback. I ask them to perform and narrate various tasks in the tool. I chose to conduct these type of user interviews in their workspace because it gave me more information on how they are physically interacting with the tool. For this project, I noticed many users would have multiple tabs up to perform necessary task that were not apart of any feature of the tool.

After many rounds of interviews, I created a proposed dynamic model, trimming away all of the unnecessary clicks and states.

Proposed Dynamic Model

Conferring with my UI/UX colleague, we created an information architecture document to show the overall flow of the tool. This diagram showed the points at which data enters and leaves the app and the places where users interact with the tool.

High level information architecture diagram example

For more complicated UI and feature recommendations I created detailed mockups with resources for the developers. At times, I may propose to use a plug-in for interactions, so to make it easier on the developers I gave them a direct link to download the code. I also made my mockups look like Bootstrap and recommended the usage of existing components so the developers would not need to start from scratch. To further assist the developers, myself and my UI/UX colleague created an in-house website to standardize internal facing applications to reflect the broader organization’s DNA called CHUI.

Wireframe: Builds
Wireframe: Create/Edit Build