Guiding a digital transformation

  • Agency
  • FCB
  • Client
  • Cox Communications
  • Role
  • Associate Creative Director
  • Focus
  • Creative direction
  • Digital branding
  • User interface design
  • User experience design
  • Design systems
  • Front-end development (prototyping)
  • Design operations strategy
  • Design operations integration

A new brand, a new experience

The largest private telecommunications company in America has over 6 million customers across 18 states.

As the company's Agency of Record for over 8 years, FCB created campaigns for TV, digital marketing and out-of-home advertising. The success of consolidating all of their marketing and media accounts within one agency led to more work related to their online experience — the largest growing portion of the account since 2015.

Our team was in charge of making sure their digital products and e-commerce platform came together for customers in a coherent way. Creating a true end-to-end experience at an enterprise level required strategic and operational shifts. In the midst of those shifts, a company-wide rebrand was initiated.

The new brand was friendlier, more approachable and embraced the idea that technology could bring people closer together. Capturing moments of real connection was the inspiration behind the logo and a concept that was applied to every aspect of the brand. I traveled to San Francisco and met with their branding agency to identify the ways digital experiences could propel this idea.

The digital adaptation

Our team experimented with everything from typography scales to full responsive layouts while finding a balance between brand expression and realistic implementation. As refinement continued, the digital adaptation of the brand started to take shape. One of the biggest shifts from their previous design approach was a new way to think about layouts.

When a platform has hundreds of pages and ever-shifting content, layouts will move and expand. To prevent those layouts from breaking we created a system of visually wrapped containers. We could then anticipate dynamic content outside of our control, programmatically test multiple layouts in different markets and measure the effectiveness of each container.

The customer experience

Typography and interface components responded predictably inside of those containers. Photography required additional considerations, especially in responsive layouts when aspect ratios changed. We tested photography in layouts during photoshoots using prototypes that simulated our containers. This direct involvement greatly reduced the amount of post-production editing requirements.

As context for our design approach, we identified customer journeys to guide our decisions and measure progress. Customers didn't always start at the homepage and experiences didn't end on the website — they regularly included things like confirmation emails and text notifications. Effectively communicating the personality of the new brand meant updating all of those touch points along each journey to be more grounded, approachable and dependable.

Design operations

To better deliver design assets at that scale and decrease turnaround time I established a new way for designers to work. With so many software options and methodologies available, choosing a successful combination was determined by the structure of the team and the client. Does everyone on the team know how to code? How does the client want to review our work?

It was important for us to give more design control to a larger group. And most people outside of the design department could comfortably navigate the interface of Sketch. When paired with Abstract — a collaboration tool that controls versions of Sketch files — we didn't have to spend hours digging through file variations, hoping to find the right version. As resources changed, other people could jump in and start contributing faster than before.

Consistency enabled creativity

A ubiquitous term in the world of websites and apps, we adopted aspects of atomic design concepts in Sketch. We designed small pieces that merged to form larger components. If those pieces changed, updates were reflected in each instance. We then documented our atomic design approach in parallel with each asset we designed.

The standards manual produced by the branding agency was a good starting point for our documentation because it contained overarching brand guidelines. Our digital-specific documentation, paired with assets, incorporated the standards manual and grew to become our design system.

Our designers could put together pages with more speed and accuracy than ever before. The design files were version-controlled with Abstract and our styles were linked together. It was both efficient and consistent — but only for our team. Building on our success we opened our design system to other teams, too.

InVision's Design System Manager became the home for documentation, guidelines, design assets and development specs. It was quickly adopted as an essential resource in guiding many different teams — marketing, sales, front-end development, SEO, accessibility, design, UX and digital marketing — to ensure the brand's voice was communicated correctly.

Historically, a lot of time had been spent discussing and considering all the technical aspects of design. We wanted to change that and our operational shifts helped get us there. We found as we established more design consistency, we spent more and more of our time focused on creating the story of an experience.

Results

From purchasing products to paying bills online, we tackled all the complex design challenges of an e-commerce platform to improve the customer journey and ultimately drive higher revenues for our client. The business value of our design became clear. Our client began setting company sales records — and more specifically — online sales accounted for more transactions than ever before.

  • Online sales increased 23% and became the largest channel share in the company's history
  • 10% increase in self-service transactions online in 2019
  • 84% of customer service transactions were digitally assisted or self-service
  • My Account — the section of the site where customers can pay their bill and modify their services — saw a 62% reduction in bounce rate and subsequently decreased call center costs
  • The number of features completed from the previous year increased from 53 to over 800
  • Our design system grew to contain 900+ interface assets, 300+ layout containers and 48 pages of documentation
  • Our team was the largest contributor to our client's evaluation of agency performance in 2018 and 2019 leading to the highest rating in partnership history
  • In 2020, Adweek named FCB their Agency of the Year