Have you logged into FullStory lately? It looks a little different from what you might remember.
The new, subtle changes belie grander works in progress: we’ve applied some small and large UI updates in an effort to unify our design language, pave the way for a few soon-to-be-released FullStory features, and of course, make your experience in the app smoother.
To help explain the title of the blog post: this arc of design work was originally entitled Baby Gray, since we were dropping a lot of soft grays into the UI. But shortly after embarking, I read Gray as Gary and it all went downhill from there. The other office weirdoes and I couldn’t stop calling the project Baby Gary, which inevitably spawned fevered, Busey-inspired internal memes.
Before digging into what we actually did, it’s important to note that we took the time to gather a solid collection of whys to justify Baby Gary. As a designer, I’m wary of the fallacious scratch to the redesign itch. Things may look different, but this isn’t a mere redesign.
Why is the most important thing.
We, the design team of Josh and Adam, asked ourselves, with new features coming in, why should we make visual and (some) functional changes?
To ourselves we answered:
- to establish more visual, interactive consistency within FullStory;
- to identify small footholds for implementation best practices in our UI;
- and, focusing on Highlights, to come up with (and implement) a new look for Highlights that accommodates a variety of content.
For bonus justification, we spent time watching humans using FullStory (in FullStory). We watched as brand new users quickly clicked in and out of the empty Highlights view. We saw trepidation when interacting with some of our favorite features in playback (if they weren’t neglected altogether ?). We also saw subtle differences in our app’s sub-navigation and many other little things that nagged us the more we saw them.
What we did exactly.
Armed with our whys and our learnings from FullStory sessions we marched forth into our work cycle. We had seven weeks to bring our ideas to life. We spent about 10 days ping-ponging high-fidelity mockups in Sketch and then much more time implementing looks in the UI, continuing to visually iterate within the styles and markup.
We wanted to make this a gradual change, rolling it out to customers as a beta feature. As we dug into the implementation without adult, engineer-supervision it became clear that we’d need to tear apart some fundamental structures and behaviors. So we did.
Introducing some healthy constraints.
We made some firm decisions regarding implementation in the FullStory UI. From now on there will be fewer little png icons and their @2x twins were running around in the UI. We’re going to use artisanal html + css where possible and SVG sprites where we have to.
Play, pause, rewind seven seconds, open the console in session playback and you’re clicking HTML elements (or pseudo-elements). Additionally, all of our navigation icons are either parts of an SVG sprite or stylized html. It’s a slight performance win with fewer things to load and less media to query.
New look navigation and segments.
Getting around FullStory remains the same, but we tightened up our visual treatment of the app’s navigation. You’ll find smaller icons, clearer text and uniform behavior of navigational elements.
We did away with the My Segments/Team Segments tabs opting to list all segments within relative subsections: default segments, your segments, and the segments your team makes. The list all the things approach to segments was enabled by a beta segment quick-find feature that is now live in the wilds of production.
Baby steps out of the basement for Highlights.
Highlights received the most attention. We’re rolling out new types of Highlights (in addition to Session Notes and FullStory (mis)Configuration Highlights) and need a more extensible Highlight container.
FullStory Highlights are about discovery: you don’t have to read everything to learn something important about your app or site. We didn’t want to give our users another list or inbox to fret over.
We went with a grid layout over the existing linear, vine feed layout. Scanning the grid is not as easy as reading left-to-right, top-to-bottom, but it’s a much more manageable layout when there are a lot of highlights. The cards and the grid layout give us more effective ways to differentiate types of highlights. Now we can employ colors and vertical heights to emphasize things that are important to know.
For a subtle, small personal touch we assign Gravatar-less users a color and a monogram. This makes differentiating notes by author a little bit easier.
Better first impressions.
Working on Segment navigation and Highlights in Baby Gary also enabled us to take alternative passes on empty states. We’ve included more helpful text, tooltips and Huggerlights to help new users find, use and make the most of some of our existing features.
And, bonus, prettier playback controls.
Cleaning up the playback controls has been on our to-do list for a while and figured this was a small aside to apply Baby Gary refinement principles. We decided to use words over icons where possible and give a (mostly) uniform treatment to our playback controls. I say mostly (parenthetically) because some controls have visual connections to the actual timeline and we wanted to preserve those cues.
Big conclusion: more to be done.
We still have a lot of room to improve our styles (please do NOT read our css) and much of what’s gone into Baby Gary is just a start. Baby Gary gave us a chance to establish some best practices and take a more consistent approach to basic interactive elements, while making room for some new, exciting functionality.
I sometimes like to muse with my colleagues that the day will come that the software is finished and we can crack some coldies and high-five each other for infinity. Thankfully that day is never coming, the software is never finished. Each day, each work cycle provides chances for improvements in the software and in our own practices as designers and engineers. Baby Gary3 is just one chapter in the ongoing pursuit of making FullStory radically awesomer.
I’d be deeply saddened if some of our favorite Baby Gary inspirations were never shared, please enjoy: