- My role
- Branding, Illustration, Website design, Pattern Library, Front-End development
- This Little Duck
This Little Duck are a small team of highly skilled, multidisciplinary designers and developers, who are passionate about building the next web.
As part of my work with This Little Duck over the past two years, I led the company through a rebrand. This included a new visual language and website.
The first step I took was to run a brand workshop with my colleagues, to facilitate a conversation about where we were going as a company, where our true value lay and what this meant for the visual identity. I extracted key ideas about our vision, mission and values from the workshop and used them to build a “Core Identity” which was more in line with who we were as a business.
Afterwards, I published some posts detailing the process:
After social media and business cards, the website was the next space to be refreshed with our new identity. This allowed us to expanded on the core visual identity, including typography, use of space, UI elements and illustration.
One of the biggest challenges I’ve faced when designing a web presence for a company or portfolio is the lack of a brief, or of any clear requirements. This project provided a striking example of what that challenge can look like, and how it can be handled. I wouldn’t start designing for a client without interrogating the problem or starting with a brief and a strategy in mind, so why would it be any different when designing for our own company?
I worked closely with our director to develop the concept for the homepage. We decided to base the website around a simple idea, a message to clients and potential clients—“The web isn’t just your website”. We encourage our customers to fully leverage the magic of the internet where it will provide value to their product.
First, I mocked up the homepage for the site. This is where I was able to lock down the typography, the overall look and feel of the site, as well as global components such as the navigation. As our web presence was especially lacking before this point, we worked iteratively, first creating the smallest thing we could launch to get it live as quickly as possible. This gave us a great opportunity to get lots of feedback, to add new components, and to flesh out pages as needed.
After design, I developed responsive templates (HTML & CSS) and a pattern library of components. The development team then fitted out the site in static site generator Hugo.
For the case studies, we needed a system of components that anyone at the company could use to create a new case study page, without requiring any design skills.
For the case study header, I took part of the wave element from the logo and blew it up. This created a solid coloured block for the header, and provided a background for the device screenshots to float on top of. Anyone creating a new page could then choose from any of the 6 brand colours.
The wave became a recurring element throughout the design of the site. I used this as a visual divider with a subtle grey tone to sit behind sections of content.
Illustration is used throughout the site to enhance and visually explain ideas. I developed a series of simplistic characters and then used them in illustrated scenes using the branding colours.
I based the homepage animation on a story of an online shopping experience. The illustration shows visitors how technology can be used to add value to the customer throughout the experience–from easy purchasing by credit card, to instant chatbot customer service, through to delivery tracking with notifications and even product ratings.
I used Adobe Animation CC and Snap.svg Animator to create the animation. I wrote up a tutorial on it: