Report Page Interface Enhancements

We are very pleased to present the first design update of 2016 to the Solano CI product: a new Report Page layout that is better organized, introduces new interface components, and is much easier to use.

The Challenge

The “Report Page”—as we call it here at Solano Labs—is the primary view into any given session on Solano CI. It shows every state of a session, from its initial creation, through to a complete collection of test results, build lifecycle timings, and build artifacts.

It has also served as a way for many users to navigate through their workflow, and view other pieces of information that relate to the state or configuration of the organization and repo. Over time, in an effort to provide as much information and control as possible over a growing number of factors, the interface had become less intuitive for long-time users and not as easily ’learnable’ for new users. This causes friction and inefficiency; it is, in a sense, user experience debt.

With so much data and navigation to present in one place, the challenge is this: how do we improve the usability of such a complex view? How do we introduce incremental enhancements while maintaining the best possible usability overall?

First, we listened to you, and we sat with you and watched you use the application; we challenged our own assumptions. We learned a lot.

Second, we reviewed both new and long-time users’ primary expectations of the view to ensure different team roles will be well served by the interface.

And third, we mapped out a plan to arrive at an overall redesign via a careful sequence of incremental improvements to specific areas of the interface.

Then we got to work on the first design update.

New Layout

The first thing you’ll notice about the new layout is that we have removed the sidebar. This is a major change in the interface, and it was made based on both our own use of the Report Page, as well as in response to user feedback. Many users found the placement of status and navigation related to other sessions distracted from the current session’s status and results. By focusing the layout on the current session status, and moving other status and navigation elements to more intuitive locations, we created a new view that is easier to understand at a glance, and affords more comfortable navigation.

Tabbed Sections for Supporting Information

In addition to simplifying the top of the Report Page so you could more easily focus on session status, we also wanted to simplify how you view and navigate the supporting information, such as setup logging, test results, important messages—everything below the main session status display. For complex builds especially, viewing these different sections resulted in lots of scrolling, and intra-page navigation that was often confusing to new users.

Through observation and research it became clear that you were interested in specific kinds of information at specific times, and being able to choose what information was visible by type or purpose would be very helpful. So we divided the supporting information into separate tabbed sections shown immediately below the primary session status. [see 1 below] Now, rather than needing to scroll the length of the view past info you may not need in order to find what you’re looking for, there is a clearly labelled tab such as ‘Build Artifacts’.

The tabbed sections also provide a flexible yet well-structured way for us to present supporting information that would have cluttered the view unnecessarily: the Session History that was in the sidebar is now shown in a tab; in the future important new features on our roadmap will also be found under a new tab.

report-page-update-new-tabbed-sections

Active Session Menu

Another new addition to the Report Page is the Active Session menu. [see 2 below] Having committed to removing the sidebar, we set out to optimize the usability around certain tasks. As mentioned earlier, various components on the Report Page became central to many user’s workflow, and we needed to make sure we didn’t break those flows while solving other things. We found that the most used element in the sidebar is the list ’Current Sessions’, and therefore it would be more useful if it was available on all views in the app. A simple solution emerged quickly: place a control in the header of the page that allows you to quickly see a drop-down that shows all active sessions from not only the Report page, but also the Dashboard, or any other section. The added benefit of this new component is that it provides a convenient way to quickly see just the number of active sessions without needing to click on the drop-down—and see at a glance from one session when the most recent session has started.

Session Navigation

While the Active Session menu allows you to quickly access the most recent build activity in your organization, we also wanted to provide a simple way to navigate to the previous and—when it exists—next builds on the same branch. We added text links in the heading of the Session component for paginated navigation so you can quickly move up and down the timeline of sessions. [see 3 above]

In the future we plan on providing richer controls for navigating the app, so this was an ideal time to step incrementally in that direction by moving the branch name up to the top of the page. Now you’ll see organization, repositories, and branches all in one line. [see 4 above] This will soon become convenient “breadcrumb” navigation into all three areas.

Support Drop-down

Consistent with the changes made to the Active Sessions component, we also moved the Notify Support form. We felt that having a control accessible near the Action menu for opening up a support form made the most sense—often the need for support arises once a user has taken actions such as rebuilding, or opening up a debug console. [see 5 below] In addition, for users on laptop screens the details of the report are now easily visible while entering the details of your support requests.

 

report-page-update-new-support-component

Visual Refresh, Part One

In addition to the new layout and navigation elements, we are also introducing a simplified visual style that is more clear and readable. While we won’t be embracing a trendy ‘flat design’, I’m a firm believer that too much design interferes with usability; by simplifying the visual styling of each component, a complex interface becomes much more clear, and as a result provides a much better experience. We’ll be transitioning to this new style in all areas of the app over the coming months.

One of the promises of Solano CI is to save you time; the more the interface gets out of your way and allows you get your work done quickly and efficiently—less scanning the page for the information you’re after, less searching for a control—the more design has helped deliver on that promise.

The Other CI

For all of us collaborating on design at Solano Labs, CI also stands for Continuous Improvement. This design update is the result of a continuous cycle of learning, ideating, and building: learning what you need to work more confidently and efficiently; ideating ways to meet your needs; building a reliable and usable product for you. As a designer, the most important part of this cycle is the learning: there is nothing that motivates me more than learning about what is and isn’t working for you when you’re logged in to ci.solanolabs.com. So log in, take a look at the latest updates, and please tell us what you think.

Send us any questions or comments via Twitter @SolanoLabs, email at support@solanolabs.com, or the comments section below.

4 Comments

  • Dave March 9, 2016 at 10:39 am

    Why is the results tab not the default tab, when I’m looking at a report 99 times out of 100 that’s what I want to see.

    • Colin Johnston March 14, 2016 at 10:30 am

      Thanks for your feedback Dave, we always appreciate it. We found that most users click on the status ‘badge’ (i.e. Passed, Failed) to jump down to tests, and usually only when there are failed tests. I completely understand that this might not be your preferred method. Our plans for next update is to show a summary of failed builds immediately above the tabs (along with other ‘important messages’) so hopefully this will provide a more ideal experience for those who want to see build info without a second click.

    • Leo Cheng April 18, 2016 at 3:17 pm

      Hi Dave – By now, I’m thinking you’ve seen the change roll out where we’ve got the test results tab as the new default. We hope that this works better for you now, and welcome any additional feedback that you may have for us.

      Thank you,
      Leo

  • Lenna April 28, 2016 at 1:35 pm

    I can’t hear anyithng over the sound of how awesome this article is.

Post a Comment