The Button Website Illustration Journey

If you hadn’t noticed, Button’s new look website has some amazing new illustrations. These spectacular creations are not your average stock images either.

As an agency that specializes in delivering meaningful digital experiences and outcomes, we were passionate about our new look website reflecting our beliefs and culture. It was time for Button to, talk-the-talk, and walk-the-walk.

It started with the basic premise that personalized and custom images make a difference online for several reasons, primarily due to their ability to enhance user engagement, create more relevant and memorable experiences, and improve overall marketing effectiveness.

With that, we called upon two of our own incredible internal talents, Suha Fatima a UX Designer, and Zoey Li a Service Designer.

They collaborated on to create illustrations that would reflect Button the best. We knew early on we wanted to create something organic, unique and iconic. Something all Buttons would be proud about representing and resonate with. Clever imagery that distills all that we do in one was a challenge we wanted to take up.

To do so, here is the journey we went on:

Brand Survey sent internally: We started with an asynchronous brand survey amongst all Buttons, asking them to identify where Button falls in 6 categories according to them. It was important for us to get our team’s input before finalizing any concepts.

‍

‍

Branding Workshop: We gathered all of the Buttons into a synchronous workshop and learnt what each person envisioned Button’s brand to be; timeless, trendy, and so on. We did adjective word clouds, and grouped them into common themes we found across all of them. This let us collectively brainstorm what truly reflects us as a group.

‍

‍

Understanding the competitive landscape: We looked at other companies, did a comparison of all of them side by side and evaluated as to how we could position ourselves uniquely. We also shared our individual vision using reference images as inspiration.

Weaving illustration and website copy together: We created a story that we wanted to tell with our home page, about the outcome and type of work Button produces. The copy of our website was also written thusly and reviewed by every single one in Button. After that, we had a brainstorming session to identify the illustrative story each section of the website evokes. The goal was to communicate the copy with the illustration at a glance.

Defining Brand Colors and Style: Our illustration team then locked down on a color palette and a visual style after iterating through various concepts on mood boards. We decided on visual elements that had an organic feel to them and wanted to stay away from the ubiquitous vector graphics style. That is how we decided to create illustrations with a hand-drawn sketch effect.

Creating lo-fidelity wireframes: A skeleton of the website was created, highlighting only the story aspect of the website, tying all the illustrations on our landing page together.

‍

Sketch, sketch, sketch!: Multiple concepts were created on good ol’ pencil and paper to adequately supplement the copy. We started with a sketch for all of the illustrations. There was a lot we wanted to convey in a single image and the team would meet and discuss if all the components of the illustration iteration are relevant.

‍

‍

Finalized designs: From sketches, our talented team digitized them on Procreate and finally created vectors on Adobe Illustration for scalability and diversity of use. Having iterated the illustration concepts after locking down the design, we finally arrived at the designs we have now.

What do our illustrations mean?: The idea was to show a smart city that encapsulates all we hope to see in the world along with the technological aspect. We utilized the yellow thread motif to convey complications in the world of digital services and how we work to untangle them. It was necessary to us that there is always a human element present in all our drawings, be it hands, or the top half of the body. We wanted to ensure that the human element is as ambiguous as possible so as to include everyone and have an element of universality to it.

Aftermath: Our team found that the illustrations were a win, both in terms of engagement with potential clients and our internal team. We have since reused the illustrations for our mugs, water-bottles, trade show signage and more. They have helped distinguish us from a corporate space and served as a wonderful point of conversation as they also generated a lot of curiosity from others.

At the end of the day, personalized images matter online because they create a stronger connection between users and content, leading to higher engagement, improved user experiences, and enhanced marketing outcomes. By leveraging user data and tailoring visuals to individual preferences, we have built stronger relationships with their audience and are achieving our online goals more effectively.

And the best part? Button now has an identity it can proudly stand behind and share with the world.

‍

‍

‍