Six Degrees

Brand Identity, Visual Design, UI/UX Design

Overview

About the project

Brand refresh and full website redesign, from concepts to wireframes, prototypes to spearheading WordPress development.

Date
November 6, 2020
My role
Senior Art Director, Visual Designer
The background

One of my first projects when I came onboard the team as the Senior Art Director was to refresh the agency’s website. Because of the necessity of prioritizing client work on an ongoing basis, this was a project that was long overdue; the look and feel of the site no longer represented the brand personality and voice that the agency wanted to present to the world.

The process

I worked with internal stakeholders, including the Executive Creative Director and CEO, to distill the essence of the brand and create an overall visual language and design system for the new site. After this was set, I began the process of designing wireframes and page layouts, creating prototypes in Adobe XD that allowed the team to experience the user journey and test the user flow. While this phase was being carried out, I collaborated with our developer to create the new site in WordPress.

Fogarty_logo trials

I worked together with the developer to come up with a way to animate certain illustrations on hover, providing a piece of unexpected delight for the end user, and showing that we don't take ourselves too seriously.

Six Degrees website - animation 1
Six Degrees website - animation 2
No items found.
No items found.
After I set up a few pages of wireframes as a way of organizing the site content, I set to work on designing high-fidelity mockups. Here is a look at a section of the prototype design, showing the interactivity between elements and pages.
Prototyping with XD
No items found.
Here's a look at some of the components of the visual design system I created as part of the refreshed branding for the site.
Visual design system
No items found.
As part of the brand refresh for the new website, I cultivated a family of icons that showcase the agency's breadth of services, using the expanded brand color palette that I also developed for the website. Here are some of the icons, as well as a few more pages of the site itself.
Six Degrees icons
Six Degrees website screenshots-1
Six Degrees website screenshots-2
No items found.