Analytics 10 has a lot of amazing features, but the one that has probably attracted the most attention is the visual design. While the design is a huge leap forward from the products that Analytics 10 replaces, the change didn’t happen overnight. For more than a year, a diverse cross-functional team has helped refine the visual design using the iterative design process employed in the development of Insight and Segments. This long, sometimes grueling, process has taught me a lot about how a design comes to be. It’s hard to capture everything I’ve learned over the course of this project, but I’ll try to touch on some of the highlights.
I work with some of the most talented CSS and HTML5 gurus in the biz, as well as a team of database and UI masters. This is a team of developers that can turn a Photoshop file into a fully functional application that often looks better than what I gave them. And they don’t just look better, they work fantastically. Knowing this, my possibilities are endless. So, when I looked at visual direction for Analytics 10 I knew I wanted to do something that pushed boundaries.
Diving In Head First
The first thing I did was jump straight in to Photoshop. Yes, I know… this usually isn’t a good idea. But after months of paper prototyping and dozens of ideas floating around in my head with every new sketch, I just had to get in there and start experimenting.
The initial designs took inspiration from around the web. At the time, textures were hot, and recreating the feel of an office seemed like a good place to start. I was also in love with Mad Men. Looking at the gorgeous minimal style of the 60s it was hard to resist bringing in some of that influence.
Taking a Step Back
I know—I wish we still had woodgrain in Analytics 10 too. This experimentation was fun and it inspired a lot of treatments that made the cut in the final design. I was free to try new colors, typography, and design concepts. Inspired by design trends on Dribbble and elsewhere, I tried to push the Webtrends design aesthetic in to new directions.
However, design trends are just that. Trends. While it’s important to be current and fresh, it’s also important to balance the hip with the classic and timeless. With Insight, we defined a minimal design aesthetic inspired by the New York Times, Stephen Few, Tufte and Digital SLR cameras. This foundation stood the test of time and many of the design patterns still exist in Analytics 10. It was also important to look at the design from the Webtrends brand perspective. Does woodgrain and parchment fit in to the brand? Maybe, but we wanted to be sure.
So what is the Webtrends brand expressed in our products? A lot of thinking had already gone in to that with Insight. With the core brand attributes defined, I began to map them to visual design. First, I developed a set of mind maps that helped focus and clarify the essence of the Webtrends brand:
The mind map set the stage for visual exploration that took me around the city of Portland and the web searching for imagery that embodied these concepts. The result was four distinct mood boards that represented the feel we wanted to convey with the design.
One of the most striking things I noticed during my walk around town was the juxtaposition of natural and man-made materials. Cement and wood, grass, sky reflected in glass, brick and living trees. This intersection, and the idea of harnessing nature and molding it to our whim was compelling. We’ll probably never have a cement and wood interface, but I liked the idea of data as something natural and organic, housed in a finely crafted, artful structure.
My personal favorite. This direction has deep roots in the hipster counter-culture of Portland. The world of fixed-gear bicycles combines old world craftsmanship and detail, artful expression, and uncompromising commitment to speed and grace. While, on the surface, these rolling pieces of art appear to eschew modern accouterments, they often incorporate the latest in technology. They are simple and highly effective. Their basic form represents exacting standards and razor’s edge performance.
Old world craftsmanship and worn, weathered textures give a feeling of timelessness—a time that has gone by but left behind a rich sense of history and blue-collar work ethic. I can see this direction influencing the voice as well as the visuals.
Refined, well-rounded and infused by youthful exuberance. Bright colors and dark patterns with curated typography create an Ivy League academic quality.
We reviewed these as a team and began to distill the ideas down to a single choice. They all resonated in some way with all of us but the consensus was clear. The academic elements combined in Prep really captured a lot of the essence of the Webtrends brand while introducing visuals from fashion that applied well to the Analytics 10 UX.
From Moods to Code
Now that a direction had been set, all I had to do was hit the ole Photoshop “mood board apply” button, right? Wrong. But now at least I had a clear focus on the overall design vision. Initially, designs incorporated fabric textures and a variety of analogous colors. I also started to think of the dashboards more like infographics, incorporating different typefaces to highlight different data. The initial designs were far from where we ended up but many of the core concepts and more importantly, the thinking behind them, made it in to the final product.
The BIG Difference
In past projects, we have comped up full workflows in Photoshop. This causes a couple problems. First, I disappear for a couple weeks. Taking the paper prototypes from paper to Photoshop is a lot of work. There is a lot of filling in the blanks. Meanwhile, the developers are sitting around twiddling their thumbs.
Second, after I spend all that time making pixel-perfect comps, I’ve usually found some fatal flaws in the workflow. And the developers weren’t really twiddling their thumbs. While I was busy pushing pixels, they were starting to implement the design based on a couple of comps. Plus, the developers aren’t just developers. They’re UX Designers just like me.
We build upon each other’s work and inspire each other. I work with some of the most talented minds in the industry and they make my designs better. Leaving them out of the design process at this point just doesn’t work. A simple, yet great example of this is the search functionality. This is one of the features that doesn’t get a lot of attention, but in my opinion will change the way you work with Analytics 10. Just like the Spotlight feature on a Mac, our search quickly retrieves results as soon as you start typing. It looks at all of the meta information in your account so finding that random report you looked at last week but can’t seem to recall the name is now easy to find.
But from a visual perspective, search is essentially an input field and some results. The design for search involved much more than that. The speed in which the results come back, what is displayed, and how the user interacts with them. Much of the design process was working with the dev team to understand these pieces and make sure the design accounted for it. The performance of the system and the nature of the data has a profound impact on the user experience and the approach we take to designing it.
In the design Analytics 10 we employed this methodology throughout the process. Instead of creating pixel perfect versions of complete workflows, we focused on about 12 keyframes. This allowed me to create several versions of each design while the developers began to prototype workflows in their entirety. Seeing the workflows in action, sometimes with real data, informed the design decisions. We iterated on the designs quickly instead of waiting until the entire workflow was comped up to make a change.
New Product and a New Way to Design It
Analytics 10 represents a dramatic shift in the way our users will interact with their data. For our team it is an equally dramatic shift in the way we make our products. We are constantly looking at our products and refining them. If something doesn’t work, we change it. Our focus on collaboration and modern design and development techniques allows us to move quickly and innovate where others aren’t. It sounds a bit dramatic but it’s true: This is only the beginning.