Identity for City of Springfield, MO

Glass and vinyl installation

I didn't design the vinyl decal here—that's from Etsy (as are the bubble planters). But I did spray paint the little plastic fishies, which are wired to the nails to achieve the free-floating look.

Redapt Website

---

The Problem

After 20 years in the infrastructure business, Redapt gained clout in the Cloud Services market with the acquisition of two new companies—Attunix and SDN Essentials. This broadened their expertise and services offerings, but introduced inevitable growing pains. How would Redapt colnsolidate and package three brands, each of which had equity in their own respective niches?

The Solution

We added a content strategist and copywriter to our team and I worked closely with them to develop our brand story and partnered with outside agencies to migrate our web content and begin the process of rebranding the growing company.

My Role

Being Redapt's sole visual designer, I've had a hand in every aspect of their marketing efforts, from sales collateral to email campaigns to trade show graphics to web design. I provided creative direction to our web partners as well as sourcing and creating visual content. During the brand transition, which remained ongoing after my departure, I worked with the company's sites in Webflow and WordPress, using existing theme components and styling as well as adding various customizations.

Tools

HTML, CSS, Webflow, WordPress, Adobe XD, Photoshop, Illustrator, Wrike, Teams

Collaboration

---

We wanted to maintain the graphic styles we'd been working with while combining them with the new branded elements and color palette. The following screen shots represent a combination of layout and graphic elements I created and new visuals supplied by our partner agency.

Working with the leadership and sales teams, as well as SMEs, I ensured the site maintained consistency across event messaging and emiail marketing campaigns to connect the user to the right person or information along their journey toward cloud adoption and advanced data management.

The companies are now fully merged, and (as should be the case with all websites) both the content and structure of redapt.com continue to grow and evolve.

SomniGel Email Campaign

Seeing is believing, and Leggett & Platt's bedding division went to extremes to prove the strength and durability of their premium mattress comfort product. The "Extreme Testing" campaign included print and digital ads, mass email, direct mail, and a responsive video landing page.

The campaign consisted of print and digital ads, an email targeting manufacturers and retailers, and a video web page that housed the series.

Research

---

Market

The historically 30-to-40-something male clientele for craft beer has shifted in the last decade to include women and millennials, and Seattle is home to many young tech professionals. Coastal Washintonians seem to love their boats, and will likely spend a good deal of time on the water during the (upcoming) sunny summer months.

Brand

The illustration style is earthy and textural – a combination of cut paper, pen sketches and paint spatters – and the color is bold. Set in all caps and loosely letter-spaced, the text provides sophisticated contrast to the whimsical artwork.

Ideation

---

More Research

So we have young professional craft beer drinkers on the ocean all weekend. Let’s offer them a light, easy-drinking beer with just a hint of apricot. Refreshing, like a sea breeze. According to this handy wind chart I found, five knots seems pleasantly brisk.

Sketching

Wind and waves, boats, sea birds, compasses and nautical knots have a traditional correlation to the ocean.

Color Palette

Nostalgia is powerful, but we’ll need to freshen these slightly cliché symbols up with some vibrant summer color: blues, greens, and pale yellows.

Final Artwork

---

Product

The first concept puts the new product identity front-and-center to acclimate the target audience with the brand. I used photos of glass with lots of condensation to convey a refreshing chill.

Lifestyle

To create a strong association between being on the water and drinking this new beer, I really focused on the freedom and relaxation of boating.

The bottle is screen printed, rather than wrapped in a paper label like the other Mollusk brews. This is because when the bottles are submerged in ice water for extended periods, the paper dissolves, leaving paper pulp in the ice. Instead, the textural artwork will appear on the box.

T-mobile Website

---

The Problem

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.

The Solution

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.

My Role

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.

Tools

HTML, CSS, Adobe Experience Manager, Digital Asset Manager, Sketch, Photoshop, Illustrator, After Effects, Workfront, Confluence, Slack, Teams

Collaboration

---

This was and enormous and time-sensitive effort that involved project management, branding, marketing, user experience research and design, content strategy and copywriting, web design and development, cretaive leadership, visual design, corporate leadership review and feedback, and customer insisght. As these efforts progressed simultaneously, each team member was required to work quickly and iteratively, cooperatively but in ambiguity—all within the project timeline.

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 support page content and provide a smooth segue as the user clicks through to related information.

The Cutting Room Floor

The freedom to experiment resulted in an inspiring and energetic collection of concept imagery.

The Problem

Lacking a creative director and having employed several designers over the years with disparate visions and skill sets, design styles at Allied Telesis varied between collateral types. To complicate matters, there was no standard software suite or asset manager for designers, so versioning was difficult and designs often had to be rebuilt in multiple applications.

The Solution

Designer and developer needed a shared language that could be applied to the same elements in mockups and on the website. Colors, for example, were assigned a variable that would serve as a CSS class as well as the traditional hex or RGB color value.

My Role

Step 1: Investigate

Beginning with an audit of both the live website and all assets in the repository, I documented examples of typographic styles, images, icons, and components to determine what needed to be consolidated, improved, or archived.

Step 2: Pick a design and prototyping app

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 stakeholders with disparate backgrounds.

Step 3: Establish a typographic scale

The font family and type styles in use were appropriate for the company, but were used casually and inconsistently. This resulted in a subpar user experience, compromised brand trust, and complicated site maintenance.

I settled on a Major Third type scale (a scale factor of 1.25) and created sizes, weights, and carefully calculated spacing for the 5 adaptive breakpoints on our site, each of which had a different root element.

The styles were named with CSS classes I worked with developers to create; "fs-3 fw-500 lh-6", for example, would be a combination of modifiers to identify and potentially override the default styles.

Step 4: Clean up the icons

An SVG library in Drupal allowed for the creation of "tokens" that could be inserted anwhere on the site, but both the graphics and the code were inconsitent. In order for the icon system to be completely interchangeable, I revised stroke withs, layer groups, and padding to create a cohesive collection. In Figma, I used the same files to create components for page mockup and protoyypes.

Step 5: Build the right components

As I worked, I discovered there were many opportunities to simplify recurring elements that were very similar but not quite the same. Working with Figma's auto layout tool and component variants, I built a system of buttons, icons, cards, banners, views and navigation patterns that are visually engaging and consistent across devices and viewport sizes.

Step 5: Document and educate

A design system is pointless if no one understand how to use it. I created documentation and held meetings and tutorials to explain the system's implemetation and rationale. This, of course, is an ongoing effort as the system, designers, and product users continue to evolve.

Leggett & Platt Bedding Group Website

As it grew over the years, the Leggett & Platt Bedding Group website became a confusing hodgepodge of campaign pages, PDF downloads, ads and videos. The group had no real identity; it was represented by a diverse collection of product logos and graphic styles. My job was to consolidate the website by establishing a cohesive parent brand and improve the user experience by simplifying navigation and grouping assets.

The site is now composed of different row types that allow infomration to be assigned to one, several, or none of the group's products. Restful blues and grays provide a consistent, low-contrast backdrop for campaign assets, which are updated quarterly. Styles were established for product images, icons, and other supporting elements to maintain consistency as the site continues to grow. These updates carried over to the group's print projects, signage and merchandise at trade events, and will be reflected in product videos going forward.

Leggett & Platt Automotive Group Website

The Automotive Group is a lucrative and steadily-growing piece of Leggett & Platt's portfolio, but their outdated website failed to convey the advanced nature of the products they produce. In addition to reassuring existing customers and attracting new ones, the group wanted to recruit the best engineering talent to their workforce.

The new design features artistic photography, a responsive layout, and a branded map that illustrates the breadth of the company's global presence.

Engagement with the new site is estimated to have increased by 40% over the previous year.

PhoneFactor iPhone App

Acquired by Microsoft in 2013, PhoneFactor pioneered two-factor phone authentication. This was my first project designing for iOS, and it was quite a learning experience. In addition to maintaining brand consistency, I created all of the UI elements as images in their many different states of activity.

LP Aerospace Website

Leggett & Platt owns four companies on two continents that specialize in high-strength tubing and ducting for many markets – primarily commercial and military aerospace.

The challenge was to rebrand the four disparate companies and consolidate their online content to create a single, cohesive presence. Existing product photos were converted to grayscale or duotone to bring their respective styles together. CSS-animated buttons and backgrounds enhance the user experience without detracting from the content. A Google Maps API was integrated and customized to fit the brand.

Folding Guard Website

Allied Telesis Website

Parallels Website

My work with Parallels (part of Corel) consisted mainly of web page layout and image creation, including screen shots and custom icons.