Updated branding colour palette swirl graphic
CLIENT:
Jawbone
CATEGORY:
Website Design
Website Development
Art Direction
Digital Design
AGENCY:
Freelance

Agency brand refresher and punchy website

Re-working an activation agency’s website and branding to match their evolved business positioning.

TOOLS:

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M99.76,45.41c-1-10.55-4.93-19.89-11.83-27.92-7.09-8.26-15.98-13.64-26.57-16.17-2.76-.66-5.55-1.06-8.39-1.2-.2,0-.4-.07-.6-.11h-4.75c-1.15.12-2.31.23-3.46.37-7.61.88-14.64,3.38-21.08,7.52-7.78,5-13.75,11.65-17.88,19.92C2.44,33.35.78,39.23.24,45.41c-.07.74-.16,1.48-.24,2.22v4.75c.12,1.15.23,2.31.37,3.46,1.1,9.3,4.51,17.66,10.31,24.99,7.23,9.15,16.55,15.1,27.9,17.84,2.76.66,5.55,1.07,8.39,1.22.22.01.44.08.66.12h4.75c1.15-.12,2.31-.23,3.46-.37,7.61-.88,14.64-3.38,21.08-7.52,7.78-5,13.75-11.65,17.88-19.92,2.77-5.55,4.42-11.42,4.97-17.6.07-.74.16-1.48.24-2.22v-4.75c-.08-.74-.17-1.48-.24-2.22ZM37.48,70.86h-.89c-2.27,0-4.54-.01-6.81,0-.48,0-.64-.12-.64-.63.01-13.5.01-26.99,0-40.49,0-.37.01-.63.51-.62,2.5.02,5,0,7.5.01.1,0,.2.03.33.04v41.67ZM70.22,70.87c-7.92-.02-15.83-.02-23.75,0-.52,0-.67-.15-.66-.67.02-2.54.01-5.08.01-7.69h25.01c.01.21.03.41.03.61,0,2.35-.01,4.71.01,7.06,0,.5-.11.69-.65.68ZM45.85,54.13v-8.25h24.97v8.25h-24.97ZM70.86,36.83c0,.2-.02.41-.03.65h-24.98v-8.33h.7c7.85,0,15.71,0,23.56-.01.6,0,.77.16.77.76-.03,2.31-.01,4.62-.02,6.94Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M50,0C22.43,0,0,22.43,0,50s22.43,50,50,50,50-22.43,50-50c0-27.57-22.43-50-50-50ZM5.05,50c0-6.52,1.4-12.7,3.89-18.29l21.44,58.75c-15-7.29-25.34-22.67-25.34-40.46ZM50,94.96c-4.41,0-8.67-.65-12.7-1.83l13.49-39.19,13.82,37.86c.09.22.2.43.32.62-4.67,1.64-9.69,2.55-14.93,2.55ZM56.2,28.92c2.71-.14,5.15-.43,5.15-.43,2.42-.29,2.14-3.85-.29-3.7,0,0-7.28.57-11.98.57-4.42,0-11.84-.57-11.84-.57-2.42-.14-2.71,3.56-.28,3.7,0,0,2.29.29,4.71.43l7,19.19-9.84,29.5L22.46,28.92c2.71-.14,5.15-.43,5.15-.43,2.42-.29,2.14-3.85-.29-3.7,0,0-7.28.57-11.98.57-.84,0-1.84-.02-2.89-.05C20.48,13.1,34.3,5.05,50,5.05c11.71,0,22.36,4.47,30.36,11.8-.19-.01-.38-.04-.58-.04-4.41,0-7.55,3.85-7.55,7.98,0,3.7,2.14,6.84,4.41,10.54,1.71,2.99,3.71,6.84,3.71,12.4,0,3.85-1.48,8.31-3.42,14.53l-4.48,14.98-16.25-48.33ZM72.6,88.86l13.73-39.7c2.57-6.41,3.42-11.54,3.42-16.1,0-1.65-.11-3.19-.3-4.62,3.51,6.4,5.51,13.75,5.51,21.57,0,16.58-8.99,31.06-22.36,38.86Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 70.88 48.17"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M70.64,38.37c.01-5.65,0-11.3,0-16.94v-4.45c0-5.43,0-10.85,0-16.28,0-.66-.04-.7-.71-.7-2.62,0-5.25,0-7.87,0-.65,0-.71.05-.71.72,0,4.15,0,8.3,0,12.45,0,.36-.06.47-.45.44-2.66-.26-5.31-.08-7.89.6-5.91,1.56-10.07,5.15-12.27,10.89-1.21,3.16-1.27,6.43-.74,9.72,1.01,6.32,4.61,10.44,10.69,12.39,2.82.91,5.71,1.08,8.64.89,3.77-.24,7.42-.98,10.91-2.42.55-.23.65-.38.61-.98-.14-2.1-.24-4.21-.23-6.32ZM61.36,39.42c0,.31-.05.49-.4.53-2.46.28-4.91.35-7.23-.72-1.88-.87-3.09-2.36-3.79-4.27-.86-2.33-.95-4.73-.38-7.13.68-2.85,2.61-4.67,5.23-5.8,1.99-.87,4.08-.97,6.21-.59.29.05.37.16.37.46-.01,2.94,0,5.88,0,8.83s0,5.8,0,8.7Z"/> <path class="cls-1" d="M25.72,25.18c-.13-.22-.17-.38-.02-.63,4.11-6.75,8.2-13.51,12.3-20.26.09-.14.2-.28.09-.45-.11-.18-.29-.18-.48-.18-2.75,0-5.5.04-8.25-.02-.77-.02-1.13.22-1.48.9-2.63,5.13-5.54,10.11-8.03,15.31-.03.06-.07.11-.14.2-.08-.15-.15-.27-.21-.4-1.03-2.07-2.14-4.1-3.3-6.11-1.72-2.97-3.41-5.97-4.8-9.12-.26-.6-.66-.82-1.29-.82-3.06.01-6.11,0-9.17,0-.21,0-.44-.04-.57.16-.15.22.05.39.15.56,4.1,6.93,8.19,13.87,12.3,20.79.2.33.17.54-.02.85-4.19,6.85-8.37,13.7-12.55,20.55-.07.12-.16.23-.21.36-.13.34-.03.48.33.48,2.92,0,5.83,0,8.75,0,.19,0,.39-.02.58-.02.36,0,.58-.18.75-.49,2.84-5.16,5.63-10.35,8.31-15.59.05-.1.11-.19.2-.34.09.14.15.22.19.3,2.79,5.01,5.58,10.02,8.12,15.17.3.61.71.87,1.36.87,3.17,0,6.33.01,9.5.01.25,0,.6.12.74-.09.18-.29-.09-.57-.25-.83-4.31-7.07-8.62-14.13-12.93-21.19Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 60.15 44.95"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M23.25,1.83C20.57.6,17.72.13,14.8.03c-1.89-.06-3.77-.03-5.66.02C6.37.12,3.59.18.82.25.04.26,0,.29,0,1.09c0,7,0,14.01,0,21.01s0,13.98,0,20.97c0,.17,0,.35,0,.52.03.32.16.44.49.47.11,0,.22,0,.33,0,2.46,0,4.91,0,7.37,0,.13,0,.25,0,.38,0,.27-.04.43-.19.45-.46.01-.14,0-.29,0-.43,0-3.79,0-7.58,0-11.36,0-.44.01-.89,0-1.33,0-.24.07-.34.32-.33.55.02,1.11.02,1.66.04,2.7.11,5.39.01,8.05-.5,1.96-.38,3.84-.97,5.56-2,2.64-1.57,4.63-3.72,5.78-6.6.6-1.5.89-3.06,1.02-4.67.21-2.54-.1-5-1.06-7.36-1.38-3.39-3.83-5.73-7.12-7.23ZM22.17,17.27c-.24,1.03-.76,1.9-1.53,2.63-1,.95-2.2,1.53-3.52,1.88-1.36.36-2.73.57-4.13.57-1.17,0-2.35.05-3.52-.06-.38-.04-.38-.02-.38-.43,0-2.2,0-4.41,0-6.61,0-2.16,0-4.31,0-6.47,0-.6-.01-.48.51-.55.51-.07,1.01,0,1.52-.01,1.46-.03,2.92-.1,4.37.05,1.21.13,2.37.41,3.47.94,1.99.96,3.07,2.59,3.38,4.74.16,1.11.08,2.21-.18,3.3Z"/> <path class="cls-1" d="M59.91,32.13c-.51-2.46-2.02-4.22-4.1-5.54-1.77-1.12-3.65-2.04-5.63-2.74-1.24-.44-2.43-1-3.6-1.6-.54-.27-1.03-.63-1.42-1.1-.55-.66-.61-1.48-.16-2.21.28-.46.71-.72,1.21-.86.72-.2,1.45-.31,2.2-.32,1.88-.02,3.73.22,5.56.65,1.18.28,2.3.69,3.38,1.24.68.35,1.07.1,1.08-.64,0-.02,0-.03,0-.05,0-2.06,0-4.12,0-6.18,0-.13,0-.25,0-.38-.01-.39-.19-.66-.57-.79-.46-.16-.92-.34-1.39-.47-1.42-.42-2.89-.57-4.36-.7-2.12-.18-4.24-.2-6.36.12-1.99.3-3.85.94-5.49,2.12-3.36,2.41-4.7,5.73-4.07,9.78.4,2.61,1.96,4.53,4.07,6.01,1.69,1.19,3.54,2.1,5.48,2.82,1.2.45,2.39.92,3.53,1.52.54.28,1.03.62,1.42,1.09.91,1.07.29,2.38-.54,2.81-.22.12-.46.21-.7.29-.79.27-1.61.34-2.44.36-2.89.06-5.67-.5-8.35-1.57-.75-.3-1.46-.68-2.17-1.07-.32-.18-.51-.07-.55.3-.01.11,0,.22,0,.33,0,1.11,0,2.22,0,3.33,0,1.14.02,2.28,0,3.42-.02.56.22.88.72,1.09.79.33,1.59.64,2.42.86,3.19.81,6.43,1.07,9.71.77,1.88-.17,3.69-.58,5.41-1.36,4.56-2.08,6.71-6.48,5.71-11.34Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 73.24 44.58"> <defs> <style> .cls-1 { fill: currentColor; stroke-width: 0px; } </style> </defs> <path class="cls-1" d="M25.87.52C25.74.14,25.52,0,25.13,0c-3.47,0-6.94,0-10.42,0-.48,0-.59.11-.59.59,0,1.39-.26,2.72-.72,4.03C8.97,17.3,4.55,29.99.12,42.67c-.27.76-.12.96.66.96,2.44,0,4.89,0,7.33,0,.71,0,.86-.11,1.08-.78.99-3.07,1.98-6.14,2.96-9.22.1-.32.23-.42.57-.42,4.92.01,9.83.01,14.75,0,.29,0,.42.07.52.36,1.04,3.07,2.09,6.14,3.14,9.2.21.61.32.69.96.69h4.08c1.44,0,2.89,0,4.33,0,.49,0,.62-.19.49-.66C35.96,28.71,30.91,14.62,25.87.52ZM25.07,24.95c-3.3,0-6.61,0-9.91,0-.35,0-.44-.03-.31-.42,1.78-5.61,3.66-11.21,5.04-16.94.03,0,.05,0,.08,0,1.5,5.41,3.22,10.76,4.95,16.1.11.34.2.69.31,1.03.06.17.01.23-.16.22Z"/> <path class="cls-1" d="M59.12,10.04c-19.48-1-22.43,31.4-3.24,34.19,4.57.68,9.39.42,13.73-1.26.67-.28.76-.41.76-1.16,0-.99,0-1.97,0-2.96,0-1.08,0-2.16,0-3.25,0-.16.05-.46-.29-.32-1.21.49-2.48.78-3.77.99-5.38,1.17-13.01.32-13.9-6.32q-.09-.48.39-.48c4.22,0,8.44,0,12.66,0,2.28.17,4.54.21,6.82-.04.46-.03.64-.22.68-.68.07-.86.15-1.71.21-2.57.73-8.82-4.75-16.4-14.05-16.15ZM64.18,23.18c-2.01.48-4.16.09-6.22.21h0c-1.75,0-3.5,0-5.25,0-.19,0-.39.05-.34-.28.4-2.51,1.66-4.76,4.25-5.57,2.78-.87,5.74-.07,7.19,2.61.44.81.66,1.67.65,2.59,0,.23-.08.35-.28.44Z"/> </svg>

<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" viewBox="0 0 61.91 55.18"> <defs> <style> .cls-1 { stroke-width: 0px; fill: currentColor; } </style> </defs> <path class="cls-1" d="m6.31,55.06c-3.75.83-7.51-2.92-5.95-6.66,2.98-5.9,12.92-.94,18.25-9.65C27.41,27.43,30.3,11.14,43.29,3.41c18-9.8,24,4.44,13.36,6.55-25.15,1.11-20.38,45.54-50.34,45.1Z"/> </svg>

The project:
A branding and website refresher for activations agency Jawbone. Jawbone initially reached out to refresh their old static site. However, Jawbone had recently completed an internal brand strategy and positioning workshop so instead I pitched a mini branding and messaging update alongside ground-up website build.

Deliverables:
A mini rebrand (colour + typeface + tone) and a website (redesign + build + deploy) on WordPress. After wrapping up the project, the client also requested social media templates, pitch deck templates, print ads, email signatures and a few more odds and ends which I was more than happy to tac-on as additional projects.

Role:
Art direction, graphic and digital design, branding, motion graphics, frontend development.
Position: Freelance, sole designer and technical.

Jawbone needed to outwardly represent their recent inner brand positioning changes, and build trust and authority with current and new clients looking to reach a young, urban market. After assessing the existing website, messaging and branding, we agreed on a mini branding update, complete with a ground-up website redesign and rebuild.

Prototype mockups of the new landing screen for Jawbone agency on desktop and mobile.
New homepage landing screens.

With room to tailor-make an optimised solution for Jawbone, I set about wire-framing simplified page structures, messaging and user flows. Along with freelance brand architect, Zak Venter, we connected with the founders to hear more about the business, how they work, who they are as people, and what the website needs to achieve.

A key insight was that new clients preferred interacting with a founder directly and that most 'conversions' happened this way. This human contact point was integral in driving the primary website objective:  getting clients to (1) trust the brand enough to (2) contact a founder directly.

A grid of images showing the different slides of the landing screen background.
Multi-slider hero with rotating "we do—" text.

My role as both creative and technical on this project was to conceptualise, design, build and deploy the new website and mini re-brand. The rebrand included a new font-family set, minor logo tweaks, a fresh colour palette, and a bolder brand messaging style with the founders' personalities baked-in.

Website design and prototyping were completed in Adobe XD, video and animations in After Effects, and the WordPress site was built using popular visual builder Elementor Pro. Deployed to the client's servers in South Africa in January 2021.

A colour block or a red and blue swirl, the new brand colours for Jawbone agency, with the text "Strong. Bold. Energetic."
Example usage of new colour palette.

Prototype mockup of a website section outline Jawbone agency's approach to new projects.

Animated gif to capture a website section that contains multiple animations and a background video.
Micro animations, videos and scroll interactions to keep things exciting throughout the website.

Jawbone agency's case study page, a desktop and mobile prototype showing a list of past work.

"Digirential" animation, rendered using lottie.js — this was a new campaign term by Jawbone combining digital and experiential

Two website screenshots showing the desktop layout of a services page, and a services detail page.

Jawbone agency's contact page mockup for desktop.

After wrapping up the project, the client also requested editable social media templates, pitch deck templates, print ads, email signatures and a few more odds and ends which I was more than happy to tac-on as separate projects. It was great to work with an eager client to deliver a consistent recognisable aesthetic across all channels.