Article

Have you ever visited a website that felt like a totally natural extension of a brand? I’m thinking about sites that communicate with a consistent and unified voice, compelling visuals, and a clear personality — all of which transition seamlessly across platforms, products, and physical settings.

I’m often inspired when I come across cohesive and compelling brand experiences. Brands are often broad, expansive, evolving things, and it’s challenging to design a connected experience across myriad touchpoints. Knowing that there are so many angles we could take to address “brand experience,” I want to talk briefly about how our team at Foster Made channeled the McKinnon and Harris brand in the design of their new website. But first, a little bit about our design process and the things we look for.

Finding Points of Connection

When we design websites at Foster Made, we recognize how important our work is on a brand-level, and we’ve crafted our process to ensure that we have the opportunity to get to know our clients in a way that enables us to design cohesive digital experiences. We allow ample time for discovery so that we understand who we’re working with, what their goals are, and what their audiences need; we establish structure and priorities alongside our clients throughout the strategy phase; and then we get to visual design. While many aspects of the strategy and design process directly impact brand experience, UI design is where everything starts to come together in a visible, tangible way.

Of all of the steps in our process, UI design is most connected to the visible expression of a brand. This is the step in the design process where we start working with logos, color, typography, photography, and graphic elements, closely referring to the style guides and brand documentation that our clients provide. I consider this to be baseline information — a starting point. We need to consider concrete, tangible things, like print and marketing collateral, products, showrooms, and physical space. But we also need to keep in mind things like history, customer support, in-person and remote customer interactions, process, philosophy, and values — often more subjective and intangible.

Working to Identify the Intangibles

As a designer, one of the questions that I always look to answer is often a challenging one: what are the intangibles? What are the things that I can’t quite put my finger on that come together to really set a client apart? Or give them a certain je ne sais quoi? And how might I tap into those to pull a physical, personal, holistic experience into a cohesive digital one?

We can start to do this by reviewing materials — these provide a helpful reference for visual design. But the most valuable insights often emerge during the discovery process — through stakeholder interviews, workshops, research, and the occasional opportunity to meet with clients in their own spaces. We want to design a connected, unified experience, which means we need to immerse ourselves in our clients’ work, expression, and thinking. With attention and care, the subtleties will start to emerge. And then it becomes our job to translate those findings into a compelling digital experience.

Practical Application: Designing for McKinnon and Harris

All of this might sound great in theory, but how do we practically pull it together? Depending on the industry or type of business we’re doing work for, we might choose to prioritize different aspects or expressions of a brand. In the case of McKinnon and Harris, a luxury outdoor furniture company, their products and physical spaces largely set the visual tone for the UI, while a greater aura of kinship, familiarity, and care (the intangibles) filled in some of the gaps. Here are three ways we used our understanding and experience of the McKinnon and Harris brand — considering both the tangible and intangible — to influence interface elements.

Connecting the Physical and Digital

During the discovery process, we had the opportunity to visit McKinnon and Harris’ Richmond headquarters. The space was immaculately white, modern, and light-filled, with wooden floors and potted trees that provided a natural warmth. Their furniture could be found in every room, used by staff and craftspeople day in and day out. We had known that showrooms are the primary place for McKinnon and Harris clientele to see and experience their furniture, and we wanted to see it for ourselves. These are meticulously edited spaces, only displaying furniture in varying shades of white so that the eye is drawn to form rather than color or pattern. These spaces feel more like galleries than storefronts, and we knew immediately that the furniture page on their website needed to function the same way. Our goal was to make the visual transition from physical space to digital as seamless as possible.

The showroom at McKinnon and Harris’ Richmond headquarters.

Product images are kept to light neutrals, the white cards provide a subtle structure, and the page maintains an airy gallery-like quality. ​

Naturally, we decided to incorporate this openness into the design. Unless we were showcasing immersive, contextual imagery, the UI needed to be bright, white, and airy. We used elevations on furniture and product pages to provide a subtle structure that would delicately anchor product imagery to the page in a refined and unobtrusive way. Like the showrooms, our desire was to create a grounded and hospitable environment so that the focus could be on the forms themselves.

Unveiling the Source of Inspiration

In reading through printed material, speaking with the McKinnon and Harris team, and visiting their headquarters, we learned about the founders’ love of collecting, and recognized a deep affection for place, history, and the natural world. We could see this clearly in their interior design — their offices featuring olive trees, natural objects, and artfully displayed antiquities — but it became particularly evident when reading about the inspiration behind their palette. Each color was taken directly from nature — inspired by shells, lichen, stone — so, when the time came to design the experience for their palette page, we wanted to find a way to incorporate this source of inspiration.

In hover and focus states, the palette cards shift to reveal the natural elements that inspired the finish.

We proposed photographing small collections of natural objects to supplement each finish color. These are used in hover and focus states on the finishes page to generate interest and encourage exploration. On the individual color pages these photographs are accompanied by brief descriptions of the elements that inspired them.

Channeling Narrative Detail

Founded by two siblings, so much of the McKinnon and Harris brand is about family and story. This is something that truly sets them apart as a company, and it permeates every aspect of their brand — from the contours of a piece of furniture to the ways Anne and Will speak about their staff and craftspeople. Content-wise, we knew that we wanted to lean into this familial and attentive aspect of the brand to create a set of narrative-driven pages. We decided that the Story, Craftsmanship, and Home pages would be the perfect place to introduce a more robust page style with a distinctly immersive feel. 

We wanted to design a narrative-driven, immersive experience for three key pages that would invite visitors deeper into the McKinnon and Harris story.

With access to a beautiful collection of photography, we embraced full-screen feature imagery and custom scrolling animations to invite visitors into meaningful aspects of the McKinnon and Harris story and brand. These are just a few small ways we applied our knowledge and experience of the McKinnon and Harris brand during the design process. In the end, we designed a digital experience that is an extension of the physical — where thoughtful details come together to set a mood and mark an invitation.

Making it Count

When you look at Foster Made’s design process at a high level, the UI phase might only account for one quarter of design time overall. It’s the last step in the design process, pulling together weeks of research and strategy, wrapping everything up with a tidy branded bow. It’s certainly not as simple as it sounds, but it does feel markedly easier to pull off when we have a rich understanding of our clients, their stories, and priorities. When equipped with that knowledge, we’re able to design resonant, cohesive digital experiences that align with and actively advance our clients’ work and brands. We genuinely love this process — and are just as thrilled as our clients when we see refreshed sites go out into the world.