Rollbar
Visit site
As lead designer on this project, I was responsible for designing all wireframes, UI specs, and pixel-perfect mocks. I worked closely with stakeholders at Rollbarand DT to design a conversion-oriented experience that successfully increased page views and conversion rates through the use of A/B testing.
Discovery & Exploration
The client came to us with wireframes and a very clear vision for what he wanted to accomplish. Based on this, we decided to begin the project with moodboarding in order to gain alignment and solidify direction. This really helped to clarify the client's vision, and set us on a good path for the rest of our discovery and exploratory phase. As we iterated on many successive variations of design, the moodboard was helpful to have as a baseline reference.
The client initially came to us with a set of wires that were very helpful in kicking off the conversation. Through a series of conversations, we were able to help the client to hone and focus the wireframes in an actionable direction. What we quickly learned was that the client was very conversion oriented, which helped us to focus our design strategy moving forward.
We created an interactive moodboard that allowed the client to toggle comments we had left (to remind them of what we had discussed in person). The client also had the ability to hide items they didn’t like, consequently helping us to narrow down a specific direction at the outset. While this is only one screen, we focused on several other areas in the moodboard including color, iconography, typography, and more.
Based on the feedback we got from the moodboard, we decided to begin by designing just the hero section, then letting the results drive the design of the rest of the page. The short amount of time invested up front by working through these iterations was very helpful in the end, as it helped us to quickly set the tone and visual style for the rest of page. This enabled us to put together a full page really quickly, then try out a bunch of different variations via A/B testing.
The client was a big fan of data-driven design, so he asked for several different variations of the full page so that he could A/B test them and optimize his conversion rate. This was a great opportunity to spend extra time on a single page and really refine it. In the end, the winning design is what you see below.
Winning Design
In the final design, we walked the line between serious and smart, but friendly and easy-going. Rollbar lives in an industry which can feel bland, technical, and overly serious. Our aim was to break that mold by using friendlier colors, better fonts (Avenir Next), fun iconography and illustration, and straightforward, no BS copy.
In order to walk the line between serious and friendly, we used a blend of dark blue and white (serious) with the light blue and green (fun & friendly). We also highlighted the product's simplicity, effectiveness, and ease of use through meaningful illustrations and iconography.