Brands to interfaces, how we do it at Butterfly

A couple sits down at their laptop looking for the perfect wedding venue. It’ll take them a while to find the right one, but it’ll only take them a few milliseconds on a bad website to put a venue on the reject pile.

Image includes a white lightbulb graphic on a cyan background with star and scribble graphics to the side

a good first impression.

We have just one fleeting moment to make a good first impression.

It takes about a tenth of a second for us to assess the trustworthiness, likability, competence of others and just a tenth of a second more to judge a brand online.

First impressions set the tone for all interactions that follow and are nearly impossible to undo.

A website’s interface is often the user’s first connection to a brand, it is here where business is either lost or put on the path to being won. So, when it comes to designing interfaces we go hard.

How we brand an interface

A brand is more than a logo, it is a set of colours, lines, and shapes, but it’s also people, a service or a product. A brand has the power to build associations, evoke emotion, and trigger memories.
An interface should bring all these aspects of the brand to life and it can’t be done by slapping together all the elements of a website and praying it works.
Getting the interface right is a process we’ve honed through decades of collective experience in the design team, and we are proud to always be evolving.
Our first step is always to get to know the brand we are working on. We have a set of probing questions to throw at organisations helping us understand the users needs, and the client’s business requirements.
Then, we key into what the client’s competitors are doing. This is an important step in understanding the industry, where it’s going and how we can make our client a leader.

The more we know the better we can design an interface capable of communicating to the audience.
This research matters because every decision, no matter how small counts. There’s heaps to it, but for example think about the home page’s hierarchy, if you displayed the elements in an order that doesn’t make sense, or worse, includes more elements than necessary, then you run the risk of frustrating your users. Have you discovered what their needs are and what they are looking for on your website?
These days the best websites are beautiful, but never at the expense of usability. Our mentality is always user-first.

Our favourite tools to get the job done

As designers we don’t convert brands into interfaces all on our own. We use Figma, it’s perfect for our agile, collaborative processes.
In a nutshell, Figma lets you build and share the design in situ allowing for a real-time client to designer feedback loop. It’s kind of the Google Docs of the design world… on steroids. You can even give clients tours of the website as you build it.
And, it makes a developer’s life so much easier by spitting out the code they need. It becomes the project’s one source of truth as any updates are synced straight to Figma.
To us seeing an interface in its natural environment is the best way to know if it’s going to work. An interface, and by extension a brand is something you experience, it’s not two dimensional.
We know what it takes to create an awesome looking user friendly interface, and we build it with joy.

Like this article? Share with friends and colleagues


About the Author

Staff Photo Darryl Dillon-Shallard

Darryl Dillon-Shallard

With over 25 years of expertise in web development, encompassing design, software engineering, DevOps, and business management, I am passionate about collaborating with clients to deliver inventive digital solutions.