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.