The New Codeship User Interface

Codeship News

Reading Time: 3 minutes

At the end of April 2017 we rolled out improvements to the UI of the Codeship application. As we continue to make improvements to Codeship, it is also crucial that we iteratively improve the design and user experience as well.

Staying true to our Core Values, we’ve carefully tracked our users’ feedback and used it to help shape the designs you see below. Special thanks to all our users who have submitted feedback, and also our customers like InVision who provided input in the prototyping stages of the design process.

Updates for the New Codeship UI

  • Redesigned navigation
  • Redesigned Organization Dashboard
  • New Projects overview page
  • Redesigned build detail page for Codeship Basic
  • Redesigned build components

Redesigned navigation

We redesigned our navigation to provide easy access to the most important pages and actions.

The most important changes are outlined below:

  • Dashboard: Overview of all builds happening in your organization
  • Projects: Overview of all projects and the most recent build activity
  • Support: Find help, resources, further information, and application health status
  • User Settings: Configure your user settings

Redesigned Organization Dashboard

The updated Organization Dashboard provides a simple build list for better readability and build overview. We’ve also taken the opportunity to make the Organization Dashboard mobile friendly.

Desktop view

Mobile view

The redesign of this page focused on the following features:

  • Simplifying build list for better readability and build overview
  • Auto-updating build statuses
  • Auto-incrementing timestamps for running builds
  • Reduced clutter by removing the sidebar
  • Responsive design that works on any screen size
  • Clearly indicating Basic or Pro builds

New Projects overview page

The updated Projects page provides a simplified overview of all your projects in the order of the most recent build. We’ve also built the search on this page to be lightning fast so you can find the project you’re looking for faster than ever.

Redesigned Build Detail page for Codeship Basic

The Build Detail page for Codeship Basic has been redesigned with these features:

  • Coherent and consistent design of the build component
  • Improved context of what build/branch/project you’re looking at
  • Improved log file readability by removing the sidebar and increasing space for the log
  • Responsive design that works on any screen size

Redesigned build components

Build components and actions are now easier to use and are consistent throughout each page of the application.

Keyboard Shortcuts

On pages except /projects/ page: Go to /projects page: gp On /projects page: Return from to previous page: ESC Navigation between projects: arrow keys Selection of active project: Enter

This update was the first change in an ongoing series of improvements we plan to roll out to Codeship users in 2017. Every change we make is to improve your Codeship experience, and we appreciate your patience as we roll out these changes.

As always, if you have questions or comments for us, we would love to hear from you. Please send us an email at design@codeship.com.

Subscribe via Email

Over 60,000 people from companies like Netflix, Apple, Spotify and O'Reilly are reading our articles.
Subscribe to receive a weekly newsletter with articles around Continuous Integration, Docker, and software development best practices.



We promise that we won't spam you. You can unsubscribe any time.

Join the Discussion

Leave us some comments on what you think about this topic or if you like to add something.

  • Eros Stein

    Looks amazing :) I’ll be F5’ing codeship’s page daily this week =D

    • Eros, feel free to try again now, if you haven’t yet ;)

      • Eros Stein

        Yeah, I had seen it already! Looks amazing :) Congrats!

      • Eros Stein

        I migrated from circle CI because CodeShip has gitlab integration, but I must confess I always missed circle CI modern interface. Not anymore! :) Now codeship is not only my preferred functional choice, but it also looks great! :) kudos!

  • Cristiano Carvalho

    I really liked the new look!

  • joshuapinter

    New UI looks great.

    Curious, how much more complexity does offering users the option to use the old UI add? And is it worth it?

    • Ryan Wilke

      Thanks Joshua. We’re glad to hear you liked it.

      To briefly answer your question. Your instincts are spot on — supporting the old UI does add quite a bit more complexity in a large release like this one, but it’s not as bad as it probably seems on the surface. Essentially we’re just adding in a new layout file (along side the old one), and some new templates for pages like the org dashboard, project pages, and build pages. We definitely think it’s been worth the extra effort as it’s allowed us to test and iterate easier without affecting the old UI.

      Thanks for asking! Hope that helps.

      • joshuapinter

        Thanks for explaining that. We’ve thought about doing something similar but then decided against it because of the overhead of doing it. But we did the rollout all at once so I could see the added benefit of testing and iterating would tip the scale. Thanks again!

        • Ryan Wilke

          Sure thing. We certainly discussed the pros and cons before moving forward with this plan. Luckily for us, we are already well practiced in this as we use a similar workflow for many of the features we rollout as well. It wasn’t really anything out of the ordinary for us :)

  • Guys, I like the new UI, but PLEASE can you add back the section that shows the hash of the commit being tested. It used to be displayed in the main ‘header’ of the build, next to the branch name and the name of the committer, both on /projects/:project_id/builds/:id and on the list of all builds at projects/:project_id.

    It was really useful being able to see the hashes on the project page, e.g. if I want to ctrl+F for a hash, or if I have two builds with the same commit message and want to know which is which. The new UI removes this; if I want to see it now then I have to click ‘View on GitHub’ in the dropdown menu, or click through to the build’s page and look at the step which says `git checkout -qf abcdef“, neither of which are very user-friendly. Why was it removed?

    Other than that, the UI looks great. Thanks!

    • Alex Tacho

      Hi George,

      Happy you like it and thanks for your feedback. We have an active tasks to investigate that based on feedback we received during the beta and will add improvements.

      Best,
      Alex

    • Simon Garner

      Second this, the commit hash should be shown on the build, as that’s what the build actually relates to.

      It would be nice if the branch name could link to the branch on Github, too. Or even to a pull request, if that’s possible – as that’s where conversations usually happen.

      • Ryan Wilke

        Thanks for the additional insights, Simon! It’s definitely on our list of things to explore as well soon to add a link to the PRs.

  • Any plans to fix the issue where the accordion collapses every time a task/process logs a new message? It’s pretty frustrating to not be able to read through the output until a build is completely finished.

    • Roman Kuba

      Hi Jonathan, Actually yes :)
      We Plan to fix it pretty soon. The behavior was based on the technical implementation that takes rendered HTML from the server and replaces what you are looking at on the client. That’s kind of stupid, I know, as we loose the scope of what the page is looking like right now. So we plan to make this View smarter as we’ll and fix that behavior, by changing how we show updates on the page.
      It’s sadly not super trivial (even if it should be) so I hope you bear with us, and trust us, we’ll do our best in fixing it. I am personally really sorry for that.

  • “The new Projects page provides a simplified overview of all your projects in the order of the most recent build. We’ve also built the search on this page to be lightning fast so you can find the project you’re looking for faster than ever.”

    Except that it was faster than ever in the old UI because the project switcher (including lightning fast search) is available in the header of every page. When you’ve got lots of modules building this really makes a difference.

    • Simon Garner

      Totally agree, we have several projects in Codeship and it used to be easy to flick between them from the header with a couple of clicks. This now requires loading the Projects page as an intermediate step, which is far slower.

    • Ryan Wilke

      Thanks for the feedback gentlemen. We certainly appreciate the points that you’ve raised, and it’s on our short term list to make some significant speed improvements so we can speed up that workflow that you were used to in the past.

      That said, it’d be very helpful if you could share a little more insight into the workflow that you were used to. Were you commonly switching between specific projects to view your recent builds or was it more to look at the recent builds of your team as a whole?

      Thanks in advance!

      • Thanks Ryan. In our case we are switching between specific projects. I get that the new interface allows us to see the entire team’s builds, but we rarely find that useful because no-one in our team cares about every build in the company. Different systems and builds are only relevant to certain team members, and so we need a way to very rapidly switch between the builds that are relevant to us. Our work is very modular and we often need to know the status of more than one project (modules and dependencies), but never the status of all the projects.

        • Ryan Wilke

          Thanks for providing some more detail into your workflow, Nik. I’ll be in touch shortly to see if we can gain some more perspective from your team. Cheers!

  • Also note that you have doubled the number of clicks required to stop/start/restart a build. Not only that, you have added the cost of reading, processing and the imprecision of navigating and clicking a drop-down menu. This at least triples the time taken to change a build’s state, and also greatly increases the cognitive load. The old UI was much simpler in this respect.

  • Jason Whittle

    Personally, I think it’s ended up design over functionality. You’re looking to read the output of the build. I have quite a few build steps, so now my build output appears below the fold with this new non-compact design, at least display the build steps in reverse order. The output window also feels like it loads a little slower. This has always been the case, but when you have an exception and the build dump masses of data there no line by line fetching on the build output so if the page ever does load it takes forever. Looks pretty, but actually a step backwards. I want to quickly work out why my build has failed, that’s what the UI should aim to do.

  • Peter Dinklage

    my dudes you got rid of the project dropdown. it’s important to be able to switch between projects quickly. project overview is overkill and too slow!

    • Eros Stein

      Project Quick Switcher!