I’m designing for a company wide brand refresh

SurveyMonkey went through a brand refresh this year. As Lead Designer for the Analyze section of the SurveyMonkey core application, I designed the full analyze results experience to align with the new visual brand identity and logged-in design patternry.

Scale & Time Constraints

Getting clarity and buy-in on where the boundaries were for a refresh vs a redesign took some effort as we were obviously energized by the unprecedented opportunity to touch every part of the logged-in experience.

In order to hit our 6-month deadline, we established that our refresh was defined as mostly CSS with some HMTL and possibly javascript.

Audits & Inventories

We started off with an excel spreadsheet that outlined the areas, pages, and screens that required the overhaul. Accounting for the UI in this manner also helped with estimation. But soon it became clear that this top-down approach was only half of the equation.

I then reframed the effort with the wider team using Brad Frost's atomic design approach. Creating an inventory of everything in Analyze using the atomic design approach, enabling a more rapid, systemic change to the UI. This unlocked similarities at the molecular level and we could recognize and leverage similar elements across the full platform where possible.

An example of this structural UI breakdown:

Atoms

• buttons

• status indicator

• inputs (radio, check, drop downs, etc.)

• chart elements (bars, lines, areas, pie sections, etc)

• card headers

Molecules & Organisms

• drop-down menus

• interactive filters

• empty filter states

• tabs

• color swatches and pickers

• pagination

Page & Template

• global navigation

• global header/footer

• tab navigation

• left-hand panel sub-navigation

• shared and exported assets

Style Guide & Pattern Library

We started off with a baseline style guide that we used to stress test our UI area against. We were all challenged by working with a pattern library that did not exist yet and was actually being created during the execution of the Brand Refresh itself. Fortunately, there were plenty of opportunities to collaborate on the styles and patterns and we had just brought on board Mike Dick, our new dedicated design systems designer. Mike would go on to establish the team who would evolve this early work into a full-blown Design System Manager (DSM).

Six 1 Week Sprints

The lead designers for Brand Refresh, Lucia Ciccio and Jonathan Remulla had already broken down the entire core platform application into five main Hero Flows and delegated them to the corresponding product designer in those respective areas.

• New User

• Upgrade Account

• Returning Customer

• Respondent Experience

• Analyze Results (me!)

We front-loaded our efforts in a weekly cadence of design sprints for all the main hero flows. I was responsible for expanding the entire Analyze experience and presenting progress and iterations at each Show & Tell design session.

The entire design team collaborated, providing critique towards alignment and consistency, and Lucia and Jonathan were in a unique position to direct feedback at the top-level overview.

Outcome and Learning

I feel quite fortunate to have had the opportunity to go through something as colossal as a site-wide brand refresh. It was definitely a rite of passage, a baptism by fire, all of those defining moment sort of things, and I'll have a better understanding of what to look out for the next time I can contribute to the overhaul of the look and feel of a digital application.

I relied heavily on my hustle and a genuine fear of feeling like I didn't know what I didn't know. Executing on something at this scale is not a lean back or wait-and-see sort of energy, it's a forward stance with constant vigilance to then pounce on an uncovered, deeper feature unaccounted for, or another edge case that surfaced.

A Design Led Initiative

Because the pattern library was being built in parallel to the style and pattern design efforts, the engineering and product side of the company was not as engaged or invested in the Brand Refresh project as we would have hoped.

The mindset across the product teams was a bit lacking as though this was a design thing. Unfortunately, this put extra work on the designers to project lead their work without the support they were used to with, say, a roadmap objective. However, we were able to showcase our talents and moxy as a design team and SurveyMonkey saw one of our first ever design-led projects delivered on time and to critical success.

Are your UX walls working hard enough?

There’s nothing new about putting all your stuff up on a wall to try to figure out the bigger picture of a design. We often do this instinctively without really knowing why. Last month Laura Busche wrote an article for Smashing Magazine called, Up On The Wall: How Working Walls Unlock Creative Insight, which went to the trouble of listing out some of the reasons why working walls can be so powerful. And in the process it appears she’s coined the phrase, working walls, which at least in my mind gives this technique more weight as a proper UX design activity.

Busche defines a working wall as a large vertical surface on which ideas, data, and work in progress can be displayed, rearranged and extended. A working wall externalizes your work and can empower different types of design thinking whether it be divergent or convergent, critical or sparking, and most important to me lately is that working walls can support an holistic view of your design; a map of the world (MotW) so to speak. MotWs can lead to breakthroughs because you can easily rearrange concepts at any scale.

The scale at which you design a MotW should allow you to zoom in and frame a section at a time. If it’s been designed BIG, you’ll also be able to step back and view the design holistically, ideally surveying your design as a system of interconnected pieces. This technique supports agility in your designing thinking so that you can avoid making bad decisions because you’re trapped in a myopic viewport. Often times we’re designing way up too close and it’s difficult to ensure that we’re not adding complexity or designing in additional patterns that would otherwise be challenged in the holistic view.

A working wall can also provide a physical space to co-create with your peers. Design becomes more inclusive in this environment so others have the opportunity to contribute their thoughts and ideas. Your team can build up and support conceptual mental models together. You can capture reactions and focus them back onto the wall which helps you learn effectively. The walls work in your favor if you can steer the feedback constructively back onto them, which takes the pressure off you especially if the conversation is heated. Getting peoples’ controversial opinions out and onto the walls, even just by making a notation with the proverbial red pen, allows you to take everything into account whilst keeping defensiveness or hurt feelings at bay.

Working walls can also serve as scaffolding to support and amplify the talents of others. Sometimes it’s more of a matter of framing the problem statement to then jumpstart a riffing session of ideas between the entire team. Walls with added contextual information provide a rich narrative of what we’re trying to solve and getting everyone in front of that wall can get all our minds collectively honed in on exactly what the issue is.

Ideally you set the stage, create an atmosphere and observe how others can find their wings. Hopefully, you all lift off and take flight at the same time. Now all you have to do is react to and leverage from each others ideas. By amplifying the talents of others, in a focused manner, you can achieve a sort of resonance, similar to how an improvisational jazz ensemble might innovate through a song together.

Working walls can no doubt help to improve design. They give you the opportunity to deliberate with all the relevant information in a strategic manner. You can take into account a zoomed in and a zoomed out view allowing your design thinking to shift from micro to macro (and back again) more readily. Working walls help you to maintain consistency of visual elements or UI/UX patterns across the site.

You can also address strategic work such as user testing more readily by referencing the bigger picture in a MotW. Working walls can result in a deeper understanding of a problem by refreshing the wall each time you iterate; the more design iterations you go through, the better chance you have of reaching a more profound simplicity in your design.

And finally, by using the walls as a physical container in which to bring the team together, you can facilitate more intense dialogue which although painful at times, can result in better design because you’ve taken on board and sifted through everyone’s thoughts and opinions. By making the design process more transparent and arguing your points and assumptions from a bigger vantage point you can end up with a much more solid and influential platform from which to negotiate your design solutions into the wider team.