About
CIRCULAR is an internal platform that provides a set of Continuous Integration and Continuous Deployment capabilities for teams creating digital products. It facilitates the process of app deployment to the cloud, provides the inspection of code quality and speeds up the delivery of software to the client.
My role
I was responsible for designing the system from the ground up. This began with UX research and information architecture strategy planning followed by wireframes and prototypes and finally the user interface design itself.
Design Process
The first step of the design process involved interviews, desk research and deep analysis to understand the business requirements and users needs. It was very important to explore the subject and gather all the necessary information for the further analysis. With all the information from the first phase I was able to write user stories and plan the information architecture. After I had these elements approved I started the process of wireframing and conducting usability testing to get feedback from the primary users. The final steps of the design process were user interface design and user testing.
Understanding the problem
Learning about and understanding people’s activities in a natural context was a key element for me in the research phase. This is why I decided to conduct contextual inquiry with primary users. I had lots of conversations with the users and had also observed how they work. Through these actions I have learned about their work process and their pain points.
My research encompassed:
- Understanding the process of software building in many iterations (code integration and testing, artifacts deployment and software delivery)
- Uncovering the pain points of the existing solutions that support Continuous Integration and Continuous Deployment (CI/CD)
- Understanding the task flow of building the software
- Understanding the user needs
Analyzing the information
After gathering the findings from the research, I started my analysis with defining the problem and the solution that the system would bring.
On the market there are a few solutions that provide CI/CD capabilities but the company wanted a system that will be able to respond to the their needs and will solve a few problems with code deployment, testing and integration and that would also speed up the delivery process (see the diagram below).
Based on research, I split the users into three different levels, which are defining the different types of competences: The third level users have access only to all primary functionalities. The second level users have access to primary functionalities and to the components and environments administration panels. The first level users have access to primary functionalities and to the components, environments and products admin panels.
Very important to me was sketching the main task flow. It helped me to fully understand the deployment process and was a direction indicator in the next steps of the process design.
The main functionality of the system is to provide continuous integration: developers submit the code consistently to the source code environment and the changes to the source code are made continuously (work in many iterations). Code is tested and if does not pass the tests it returns to the developer to implement the changes.
User Stories and Information Architecture
Contextual inquiry and its analysis provided me with a lot of information and thanks to this I was able to write the user stories and make a first sketch of the information architecture pretty quickly. It took me a while to shape the user stories into epics and came up with the final version of the information architecture.
At this stage I also categorized user stories on importance. I also set the scope of the work for MVP. I decided that I won’t be making the feature of the dark theme for now, because it was not something like a „must have” (although it will be very practical for the programmers).
The Idea of the system is very simple: Developer (as a user level 1,2 or 3) needs to get to the environment page of a certain component of the product to make changes on that environment. Administrator needs to be able to create or edit the product (as a user level 1), component (as a user level 1,2) and the environment (as a user level 1,2).
During this process I was still in contact with the primary users to ask additional questions and to consult my ideas.
Wireframing
I quickly mocked up some basic wireframes to gather feedback from the users on the overall layout and structure of the widgets. This involved establishing a standardised visual hierarchy and layout for the future screens.
Usability testing
The process of the code deployment in brief looks like this: developer is choosing the product, then the component and then the environment in which he would like to submit the code. I also knew from my research that it is very important for the developer that is deploying the code on one environment to be able to quickly check some particular information on the other environments of the component to be sure that he won’t make any mistake and to have full control over all environments.
At the stage of building the information architecture I had two ideas of solving this problem in my mind so I decided that I will make the usability testing on both solutions and check with the users which solution will suit them better.
First idea: When the user is on the component screen, when he chooses, for example, dev environment, the container with the dev environment is showing up below the component container and the page is scrolling down a little bit (the anchor is set on environments widget). At this point the user is able to see the most important information about the other environments on the top of the screen and at the same time he can deploy the code, check the history of deployments or make a changes in the config. The user can quickly change the environment by choosing it from the list of environments on the to of the screen. When he chooses, for example, qa environment, the container with qa environment is displaying instead of dev environment container on the same screen. There’s a lot going on this page, but the user has ultra quick access to all the important stuff that he is working on.
The second idea: When the user is on the component page and then when he clicks, for example, on dev environment – the subpage of the dev environment appears. The page is very clear, there’s not a lot of information and the user can focus on the single task at the time with no distractions. User can quickly change the environments by using the buttons.
The usability session revealed that the users preferred the first option. They indicated that they liked the idea that all the important elements were quickly accessible and they didn’t need to wait for the environment page to be loaded. They also indicated that this solution would speed up the work, and they wouldn’t have to open multiple tabs in the browser to check the important information.
Favorites feature
Because developers like everything to be smooth and quick I asked them if they would like to have a „favorites” feature in CIRCULAR. The idea was that they can mark their favorite components from the particular product and then the chosen component will appear on a dashboard screen in a list of the favorites – which means, that the favorite component will be available at a single click which will improve and facilitate the work process. In addition the chosen component will jump to the top of the list of the components visible on the component screen and will be sorted alphabetically.
Hiding unimportant information
I used the accordions to hide the information that needs to be on the screen but also has the lowest priority. In usability testing users indicated that they like this solution.
Dropdown menus and form validation
There are three types of fields in the forms: the input fields, regular dropdown menus and dropdown menus with the data synchronized with GitHub. Dropdown menus prevent the form users from entering incorrect data and speed up filling the forms.
The button which fires the action is disabled till all the form fields are correctly filled.
User interface
As CIRCULAR is an internal platform there was no need to create a super unique UI style. It was very important that it will be intuitive and easy to use with no distractions. We decided to use elements of material design.
Colors
For the leading color I chose navy blue. For the secondary color I chose gray which is the most neutral color. For text – dark gray and for hyperlins the primary navy blue.
Buttons
I made three types of buttons. The first type are the action buttons, the second are the warning buttons and the third ones are the buttons which lead to the specific place on GitHub, Jenkins or Sonarqube on each level of the product.
Lessons Learned
Ask the right question.
During the contextual inquiry I have learned about the importance of asking the right questions. In most cases users are giving answers that are most convenient for them and ones which don’t require any deep reflection at that. I believe that it is very important to ask additional questions to help them articulate what they are doing and why they are doing it in a particular way. It is very important to empathize with the user and really understand their needs.
Don’t do what the users say you should do.
During the user tests one of the users told me that he doesn’t like the blue color which was used in the layout because it reminds him of old style systems. I got this problem under my consideration and I thought that the color preferences are always an individual thing and there will always be a person which will tell me that he/she don’t like some particular color. What was important though – the user gave me a clue that in my layout there is something that reminds him of the old style systems. And he was right about it. But the thing that he didn’t know was that it wasn’t because of the color. It was because of the shape of the buttons. So I have changed the buttons to a more rounded shape and asked him again for his opinion. When I showed him the updated layout he told me that he doesn’t know what I have changed exactly, but now he likes it and he doesn’t mind the color.
View Circular prototype
You can view my prototype of CIRCULAR system here.