TINYCI
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
Brand Identity
Key Words
Minimum, Collaborative, Scalable
This is the direction we want our final product to achieve. It has a straightforward UI for users to follow, easy for developers to collaborate with, and can be scaled in a large group environment.
Logo Variation
Experiment of different design of product logo
Final Decision
We finally decide to choose the logo that integrate type and icon
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.
- 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.
- 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.
- 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.