Codeship

Codeship is a CI/CD tool that enables engineers to track their pipelines. I was tasked with creating a UI that quickly shows the progress of the pipelines as they are running or if any errors occur.

Client
CloudBees
Date
12.28.18
Based In
Raleigh, N.C.
Tools Used
Figma, Axure
Scroll Down

Phase 1

For this particular project, I needed to complete it under a tight deadline (24-hour sprint). I was tasked to re-think the onboarding flow for Codeship's setup. This involved some upfront research as to how their flow currently operates when setting up a repository. I signed up, added a demo repository from GitHub, and started to take notes. I found there were definitely some areas that could be improved. I noted each of these under "Research" and started to create alternate flows to fulfill some of these gaps. After validating these flows, I created wireframes, putting ink to paper. This helped me better understand what the user would actually see.

Phase 2

Visually speaking, I was able to use a lot of their current marketing patterns from their site, with a bit of a twist. I tried to modernize their current elements and palettes using the power of Axure. I found that there was a lack of vital visibility when it came to presenting the information on the page. Therefore I was able to update the Nav, footer, font, buttons, containers, etc. I added in micro transitions when stepping through the process to assist with the user's presence so they would not be lost or confused. I assumed that there would be some type of confirmation at the end of the original flow letting the user know they have completed the account set up but there was not. Because of this, I added success toasts once the user completed the set up, which confirm creation and next steps.

arrow-up