🎨 User Interface Design

Like a PR makeover, I translate brands and messages across media in a way that speaks to an intended audience.

This page discusses the process tips ↓ then gives four examples ↓.

UI for websites & beyond

For the last 6 years, I’ve been dedicated to one industry: Marketing for Home Contractors. With a focus the mini design system which is a website.

But the umbrella of UI is wide and in my experience also includes:

  • Dashboard design
  • Internal marketing for social, ads, print
  • Style guides
  • Email marketing
  • Really, any work that involves visuals

Crucial pieces to a successful design solution

Before we jump to the screenshots, I wanted to share a few techniques to avoid conflict during the design process. There's a story behind every dribbble shot and design processes are more squiggly than linear.

Discovery.

Direct communication is key to uncovering what the client wants their site to do and be. Our design team used to sit in the corner, shielded from client interaction. Each design had a game-of-telephone between us and the client’s vision. This created obvious gaps in understanding, on both ends.

The best things that come from discovery meetings are the things you don’t plan for. Naturally, something comes up during the conversation you didn’t anticipate. Having them in the first place creates the environment and opportunity for serendipitous findings.

Trust.

I’ve experienced the client’s loss of trust in our expertise a few times, and it’s tough to win back. When it’s bad the owner swoops in to caress the relationship. 

Once, a client felt uncomfortable about offending the designer so much that they approved the design they didn’t like. No one knew they weren’t satisfied with the direction, so months later when the topic was finally broached, we made the updates at a more costly stage of build.

To avoid this, I now mention a variation of these lines: “Critique away. we’re critiquing the design, not me”, or “This is a partnership, we both want to create a good looking site that makes your phone ring.”

Focus.

When discussing, presenting, or explaining your design, it’s best not to rely on subjective. It’s key to the work, but carries less weight here.

Whenever possible, tie reasons for design choices on achieving goals that are directly impactful to the audience. “We moved the promotions to the top of the page in order to highlight this high-conversion tool that your users love.”

This works wonders when responding to questionable feedback because it removes the subjective. Yes, it's a creative idea, but how will making the logo bigger help achieve our 3 objectives?

4 Examples

Client
Contracting companies (3M-20M)

Timeframe
1 week each

Role
Design

Impact
20%+ Conversion Rates

Nautical-Themed HVAC

My agency didn’t offer branding, so I have lots of experience making sub-par logos shine. Charter, on the other hand had a fresh rebrand, which helped me tell their story.

Link

Retro HVAC Brand

One constraint we had was only using google fonts. Here, I spice things up with a graphic of script not available from google. Mobile design was considered upfront, during the creation of the pattern library. So, when a dev builds something like this, the responsive breakdowns are mostly complete.

Link

A Plumber with Serifs

We don’t see many serif fonts in this industry so this was a bit of a novelty. Designs are created in adobe XD and take advantage of their ‘smart’ components, colors, and character styles. View the site to see animations like the truck sliding in.

Link

Textures, Angles, and Gold Galore

A facelift for an HVAC company full of richness and character. Now, instead of only using the logo and yellow on marketing materials, they can use any and all textures and gradients from the website. Beyond the shine and gold, this site has other updates: WebP images, a truly mobile-first process (I provided full mobile mockups in addition to desktop to the devs), and if you look closely, a few SVG icons.

Link