Carnette U | Portfolio

Xfinity is the biggest cable TV and internet provider in the nation. It is also one of the fastest-growing mobile service providers in the US. Our award-winning team at Oracle Digital Experience Agency has serviced Comcast's various lines of business, from Customer Acquisition to Xfinity Mobile. Our team’s responsibility was to create and manage a robust design system that allowed us to build multiple campaigns for multiple lines of business each month.

Role

Senior Designer

Skills

UX/UI Design
Design Systems
Module Architecture
System Governance
Accessibility & WCAG
Creative Direction
Animation

Tools

Figma
Adobe Creative Suite (Adobe XD, Photoshop, After Effects, Illustrator)
Wrike
Slack

Collaborators

Patrick Colallio - Creative Director
Nick Cantu - Creative Director
Xfinity Creative Team

Problem

How might we represent the nuances of a variety of Xfinity campaigns while streamlining the design process, increasing send volume, and enhancing the brand identity?

Solution

A unified modular architecture design system on Figma that offers flexibility, customization, and scalability for all lines of business, while optimizing production processes.

Pain Points

Multiple softwares in use

Our team was transitioning files from Photoshop to Adobe XD as we were looking for the best platform to efficiently build on.

Photoshop was not ideal as it isn't built for UI/UX Design.

Adobe XD was a step in the right direction, but it still had its constraints.

Multiple large files were scattered across the team

There were separate Photoshop and Adobe XD files for the main architecture design system and templates for each line of business.

Large files caused lag and longer save times.

This also confused team members who would take on projects for multiple lines of business at a time and would need to ask around for the appropriate files.

Version management and collaboration were difficult

There was no single source of truth that was easily accessible to the team.

Opportunities

Transition to Figma

Using Figma as our platform allowed for better version management and collaboration across the team and served as our source of truth.

Quickturn templates all in one place

There would be no need to chase down files.

Mobile First & Accessibility

Including mobile versioning and annotations allowed us to keep consistent across various email platforms and ensured we were aligned with accessibility guidelines.

Audit

Auditing the evolution between the Photoshop and Adobe XD files,
I retained what was working well and what was being widely used by preserving essential components and high-performing modules

I consolidated redundant modules that could create confusion some modules had essentially the same properties, but could be made flexible with design tokens and inbetween handling my campaign projects, I collaborated with my internal team about any gaps that existed across the LOBs and integrated new components from their feedback of what needs were missing by validating their need and ensuring that it was aligned with the goals of the line of business that needed it.

Migration

I communicated with my leadership team to secure buy-in from our higher leadership to approve our department's plan to adopt Figma into our workflow.

Once our licenses and access were approved, I worked together with the Xfinity Creative team to update the architecture with their latest branding guidelines.

This started our process of migrating to Figma, as we built new campaigns in the new system and slowly phased out the use of the older system.

Priorities

Brand team needed to maintain visual consistency.

Marketing team needed speed and flexibility to execute campaigns.

Oracle team needed to align with email and accessibility best practices.

Documentation & Team Adoption

With my expertise in Figma, I started to lean in on becoming the Figma subject matter expert for my team and became the primary point of contact for system adoption and onboarding.

I documented changes through a change log and facilitated workshops in order to help my colleagues stay up to date and adopt Figma best practices.

I created hands-on exercises for them to practice with and opened my line of communication to have feedback sessions for anyone who wanted any help or needed any questions answered, and also for me to better understand any needs, pain points, and reinforce standards across the team.

I continued to take on the responsibility of asset management to ensure the design system worked as efficiently as possible and communicated changes to my team as soon as they were made.