Jack Zankowski, Creative Director, Experience Design


Tom, let’s start with you. Tell us how you define design language and why it’s so important to experience design in general.

TOM: Design language brings our brand to life across all of our products and experiences. It establishes the foundation, provides the continuity but doesn’t restrict creativity. It fosters consistency, which builds trust in our customers. This is what makes a really impactful brand experience.

Design language isn’t about style guides and rules, but more about creating a framework of experience design standards that promote unity across different products. It impacts UI layout and patterns, voice/tone, user input and product response, animation and more.

Jack, you’ve seen the evolution of our design language through a rebranding and the introduction of a slew of new products. What are some of the challenges in keeping a consistent language across different platforms and products?

JACK: The challenge is creating a system that balances discipline with freedom. By that I mean there needs to be rules in place so our experiences feel cohesive with enough flexibility baked in to allow the system to adapt to new trends and user needs. The goal is to inspire our designers to approach challenges with a common point of view, but still be able to express their unique talents.

Another tough aspect is scale. In order to create a functional design language, our culture and processes have to align. In a company of our size, that can be tough. We mitigate this by collaborating and encouraging contributions. When everyone is empowered to think like a designer, great things happen.

How does Xfinity XD define and create its unique design language?

TOM: We’re able to take complex problems and turn them into anxiety-free experiences. We have an evolving product personality, we have partners in brand… and we listen to our customers. All of this informs our guiding set of principles which our designers use to get up and running very quickly. From here, they can develop and enhance experiences that seamlessly fit into our entire ecosystem.

JACK: Totally agree. We give our designers a place to start with our Xfinity Design Standards site, our point of truth for high level principles and detailed components. We’ve taken the guesswork out so they can focus on designing products and features instead of buttons.

Let’s talk about the design language tool box. What’s inside?

TOM: Let me answer this by talking about what it helps enable… our skilled designers are able to take our design language, concept out possible solutions, and deliver experiences we can test and easily dovetail into our broader experiences. They’re able to develop a customer or a business solution either within the parameters of the language or by introducing something new to stretch the boundaries.

JACK: Right. When we get too templatized, that’s where we get handcuffed.

TOM: When we talk about design language, everyone thinks about fonts and colors and graphic elements but we’re really talking about the experience itself. The graphic elements are important but we also have voice, touch, gesture, sensors, sounds, haptics, etc. that are all a part of the toolkit.

How does technology impact our design language?

JACK: The more technology evolves, the more complexity it brings because we have to evolve at a pace that just keeps getting faster and faster. To me, this is the most compelling reason to have a strong design language in place.

TOM: I think technology has challenged designers, and designers challenge technologists. It’s a symbiotic partnership that empowers us to create completely new experiences.

Is design language a collaborative effort?

TOM: Absolutely. The design language is everybody’s toolkit. The reason we publish our design language is not just for a designer's reference, but as a way for everyone to see how we think, how we translate the essence of our brand with the customer always at the center.

JACK: And really, it helps everyone make decisions faster. A team can ask, does this execution align with our design philosophy? No? Then they need to rethink it. Yes? They can run with it. It’s a way of decision making that’s very specific and can easily work in a domain we may not have touched upon before.

Is design language a trend? And what’s the potential for design language in the broader picture?

JACK: It’s not a trend but a necessity. Successful products and brands are strongest when they’re a complete ecosystem. Having a consistent experience across touchpoints builds trust with the brand. The more we can remove the barriers to a clear design language, the more customers will be inclined to interact and enjoy the experience.

TOM: Things change. We’ll publish our design language this year, again in 2018, and we’ll take things away the following year. It’s organic and will continue to grow and shift as our products do.

JACK: Having the flexibility to evolve with new domains and trends, that’s what our design language gives us. It allows us that freedom but it will always feel Xfinity or Comcast.

When we thought about our approach to Xfinity Mobile, we looked at how our customers view the mobile industry, considering pain points as opportunities to make a difference, and maybe, possibly, even turn them into moments of delight. This helped us define what type of design experience we wanted to create: One capable of redefining customer expectations.

First and foremost, we wanted to simplify the experience, make it more human and less intimidating, with an approach that was fresh and relatable. To do this, we had to dig deep into a customer’s mindset and understand their expectations during each moment of the journey, then serve up the right choice of interaction patterns, colors, fonts, sounds and type treatment. We wanted to be different, visually sophisticated, but still staying in line with our Xfinity design ethos. And we knew the design language was the key to bringing it all together.

Take for example, the website experience. The look is light and airy to reinforce the simplicity and transparency of the service. When a customer is in the purchasing process and actually choosing a new smartphone, we celebrate the moment with colorful, beautiful photography of the phones themselves. In the Xfinity Mobile account area, we use fun, uncomplicated illustrations, rich iconography and a conversational and natural tone to clarify choices and make it easy for customers to move through each phase.

Our packaging is a big part of this story. Within our Digital First approach, the packaging is the first, and might be the only, physical touchpoint our customers have with us. We started with a plain, cardboard box—a strategic disguise if the package is left on a doorstep. Once the customer takes a closer look, a small cue invites them to rip the tear strip. The conversation continues with a fun reveal “Welcome :),” then leads into an Xfinity-branded interior, clean and simple, but thoughtful and elegant. We’ve used our Brand Blue as an action color, mimicking the same cues on our site. It all ties together, across platforms and marketing efforts, to express a distinctly new personality in the marketplace.

When it was time to prepare for launch, we worked with the Brand team, the Business Unit, Marketing and Communications and external agencies to ensure the Xfinity Mobile design language drove the visual execution of our marketing campaign and communications. Branded elements, like our symbol, and lifestyle photography visually distinguish our service while select keywords convey our value proposition. This is one of the first collaborative efforts of this kind so we developed a set of guidelines to ensure any creative execution matched the vision. While we don’t want to limit creative thinking in any way, these guidelines are essential to establish consistency and a strong brand presence out of the gate.

So far, we’ve established a solid baseline for the end-to-end experience and we’re getting positive feedback from our customers.

But our design language is a living organism, constantly adapting, evolving and expanding to account for changes in our customer, technology and the marketing landscape.

As we keep growing our digital experience to accommodate multiple input methods, like the combination of voice commands and onscreen UI for example, our design language will also expand to foster that sought-after, long-lasting customer connection.

The Customer Informs Everything

The next evolution of design language requires adaptability: to the user, situation, and environment. Personal interactions, style, and décor will help shape the interface in question, even in the absence of one. It actually becomes the connective tissue between the user and the environment they’re in at any given time.

The digital home becomes an extension of the user.

As technology takes a more behind-the-scenes role, with the user defining their own personal space, designers need to determine how to blend their brand with the environment. To avoid intrusiveness, it can opt to remain passive, only coming to life in the moments it's truly needed.

The design language has to factor in a variety of touchpoints that are yet to be solved for, including contextual awareness and emotional recognition. Picture a system that you control that is smart enough to recognize your mood if you set it to do so. Once you turn it on, such a system might offer up comedies when it notices a change in your tonal inflection, recommend family classics when everyone’s in the same room, and break from routine to create a cozier environment on a snow day. Tactful delivery can drastically affect a user’s perception of a brand. The language needs to be built people-first, with enough contextual awareness to know what to do, when, and why. So if you’re having a bad day, it can leave you alone or suggest a few activities or programs to brighten your mood.

Interconnected and Predictive

How do we get there? Well, instead of just screens, remote controls, and keypads, a user’s voice and gestures may eventually emerge as the primary controllers behind these seamless interactions. When users are on the go, the UI will come to life in the easiest possible way for a particular situation, whether via visual or audio cue.

Full 360º connectivity is just the beginning.

Take the example of augmented reality. In a world where AR is ubiquitous, it will take different forms in different settings. When you’re in the car or walking home, you can have news or entertainment streams fed through AR, allowing you to still focus on the task at hand. However, when you’re at home, that information could be delivered in a much more immersive capacity.

Simple cues become vital. In the physical world you can read another person’s mannerisms through conversation. Designers need to create similar objects in the digital space - feedback to let the user know it’s listening, or if it understands. Which object should I be directing my attention to? Where will I receive an audio response from? We take for granted the invisible language we’ve grown accustomed to in the physical world, and designers need to recreate that language as we move to a digital world.

Unseen but Not Invisible

Let’s take a closer look at devices to determine their value and role in this evolution. Consider, for instance, everyday objects in the home: lightbulbs, switches, outlets, sensors, USB ports. How can we merge hardware elements into these areas so they become more invisible? Brands need to strive for invisibility in the home, even while the experience we provide is felt throughout the connected home experience.

And in a world where the design language blends into a user’s environments, it may become synonymous with the user’s own décor or the architectural layout of a house.

We need to ignite all of the senses, examining how they feel in concert with each other.

One user’s preferences will be different from another’s, but that flexibility is what will define the design language. Our rules will have to be dynamic and adaptable to each user. And yes, every element of the UI must be optimized differently more than ever before. Our teams are working hard to deliver the digital home experiences of the future, and our design will have to evolve to keep pace.

Questions, comments or feedback about this edition of Inside XD?