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.
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.
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.
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.
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.
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.