Front End Coding

TINYCI is a github CI tool that provides an easy way to specify, manage and execute parallel runs. Using the same specification, leverage your diffs to isolate what tests actually need to be tested based on the changes you made.

My Role - UI/UX Designer

The user experience for other CI systems has not historically been a positive experience for our team, so we wish to change that. I led the UX for TINYCI as we want to provide a consistent and easy to use CI tool.

It's a Team Work

Working with two very well experienced and amazing developers. Find them on Github

Erik Hollensbe Christopher Maujean

Brand Identity

Planning & MVP

As we want to make our user flow as simple as possible, we have defined our three key features for tinyCI during the planning phase: monitor the runs, submit the test, and find the errors.

Design Iteration 1 - Navigation

As we want to show all the mandatory information to the developers at the first sight, the main design challenge of this software is how to use minium UI elements to achieve clear user cases.

1. For the first design draft, we decided to go with traditional side bar menu to manage our navigation.

The Problems:
  • We found the the navigation causes a lot of confusion and users might get lost on which directory they were at.
  • It will get very hard to manage if the users have numberious repos and branches.

2. For the second iteration, we are exploring finder styled UI which displays the github in a clear structure.

The Problems:
  • UI navigation takes too much screen space when fully expanded.
  • Although the navigation is much clearer, users feel they are taking too many steps to find what task they want to watch.
  • It's not easy to understand the functionality of the menu for the first time users.

3. For the Final iteration, we want to reverse all the changes we made previously and try to keep all the UI elements minium.

The Results:
  • We are able to show all the task info in the full screen view
  • Break down the mvp functionality to achieve more streamlined navigation

Design Iteration 2 - UI Evolution

At the very beginning, the UI elements are based on the React UI. Our developers are trying to show all the necessary information to the user at once. During the UX improvement process, we have rearranged and reprioritized most the elements, so all the information has a clear structure. Finally, we have tested different color codes to make sure users get noticed on the task status.

Information Table

Log UI

As a main feature of TinyCI, we also provide user a clean log on each of the task runs.

UI Elements - Design + Code

As we are a team, it's very beneficial for me to provide the visual guides for my teammates. Additionally, I also have a great to chance to learn the React based UI environment. Trying to customize the style is rather challenge for me.