T-Mobile Website

01. Overview

Elevating the User Journey

In an effort to better tell the T-Mobile story and lead customers and prospects seamlessly through the selection of products and services, several specialized teams were enlisted to update both the structure and content of tmobile.com.

02. My Role

Content that Engages and Delights

Paired with a senior-level copywriter, I determined the layout of the T-Mobile Tuesdays page based on the hierarchy of user needs as determined by the UX team through user testing and analytics. Each component, image, copy block, and call-to-action had to maintain the flow and simplify the user's journey.

Much of my involvement in the project was sourcing and creating imagery that supported the brand guidelines that were evolving as I worked. "Next Steps" photos provide a smooth segue as the user clicks through to related information.

03. The Finished Product

I Built It and They Came

Branding was updated to better represent—and appeal to—the communication giant's diverse and growing customer base. CMS components were created and revised to maintain consistency throughout the site and simplify internal maintenance.

Allied Telesis Design System

01. Overview

The Brand That Wasn't

Lacking a creative director and having employed several designers over the years with disparate visions and skill sets, the global networking company's brand varied across departments, designers, and collateral. To complicate matters, there was no shared asset manager, so versioning was difficult and designs often had to be rebuilt in multiple applications.

02. Investigation

Determining Needs

Beginning with an audit of both the live website and all assets in the company's various repositories, I documented what I found and proposed a plan for consolidating, improving, or archiving the lot.

Choosing a tool for design and prototyping would be paramount, as this is where our new design system would live and grow as a shared responsibility. I was familiar with Setch and Adobe XD, but Figma was new to me. I evaluated all three and determined Figma would offer the easiest collaboration for our team of designers, developers, copywriters, and UX specialists as well as interdepartmental stakeholders.

03. Building the System

The Glow-Up Process, Step by Step

3.2 — Simplifying the Color Palette

There were so many colors in the existing corporate palette that they could barely be considered a palette. Taking my cue from the corporate logo and its family of product logos, I pared the approved colors down to a sophisticated, WCAG-compliant corporate palette that would translate well across media.

3.3 — Cleaning Up the Icons

An SVG token library in Drupal made it simple to insert our custom icon set anywhere on the site, but the graphics were inconsistent visually, and the code was written by several different design tools. In order for the icon system to be completely interchangeable and the colors to be swapped within the CMS, I contained each of them to a 100px square and revised stroke widths, layer groups, and spacing to produce Figma variables for page mockup and prototypes as well as a consistent set of web tokens.

3.4 — Building Components

Referencing the website audit I completed, I discovered there were many opportunities to simplify and consolidate recurring elements that were very similar but not identical. Working with Figma's amazing variant, auto layout, and animation tools, I built an atomic system of buttons, text fields, icons, cards, banners, tables, and navigation patterns that are visually engaging and consistent across devices and viewport sizes.

3.5 — Photography, Illustration, and Animation Standards

It appeared there was no particular direction for choosing the appropriate photographic style to represent the company. Because wireless networks are invisible, imagery for this industry is typically abstract, featuring businesspeople or equipment interacting with (Photoshop-created) light effects.

The quality of this sort of stock imagery varies, and my recommendation specified a few key characteristics: 1) that the colors be saturated and high-contrast to avoid a muddy, dream-like appearance, 2) that people appear to be candidly photographed, rather than posing for the camera (This feels less contrived and more honest and professional), and 3) that there should always be a background (no COB of subjects) to provide context and consistently fill our media cards with color on all sides.

I incorporated an existing library of bespoke isometric product illustrations, along with similar stock graphics, to create comprehensive animated diagrams. Animation settings such as speed and easing were included in the new style guidelines to ensure the overall effect was professional, rather than whimsical or emphatic.

04. Documenting and Evangelizing

Educating the Masses

A design system is pointless if no one knows it exists or understands how to use it. I wrote brand guidelines and published them on an ungated web platform. I held meetings and tutorials to explain the system's rationale and implemetation, and an announcement was shared companywide via internal newsletter and corporate email.

Of course, maintaining a design system is an ongoing effort. The system, designers, and users will continue to evolve. I'm confident the scalable build will serve the company well into the future.

Parallels Website

01. The Challenge

Updating the System...Without the System

Along with the upcoming release of the latest version of their virtual desktop software, Parallels needed some updated graphics to refresh the look of their website. Mockups were historically time consuming because no shared design system existed. Freelance designers typically worked from screenshots using the design tools of their choice, which was especially difficult when restyling components that existed only in the CMS.

02. My Role

Starting with a Source of Truth

Beginning with an audit of the existing website, I created a design system in Figma that mirrored the live site, allowing me to quickly revise and add content that wouldn't require development changes unless a new component was authorized.

Once I had a solid starting point, I used screenshots of the new software features as inspiration for several sets of custom graphics.

04. The Solution

Delivering Above and Beyond

I was ultimately able to deliver the updated layouts and graphics well in advance of the tight deadline, as well as providing the Figma design system file that would enable faster, more efficient revisions in the future.