Company Website & Rebrand

Client

Brunch Digital

Roles

Visual Design Lead, Creative Direction

Medium

Wordpress Website

The Problem

How do you rebrand yourself, launch a new company website, and balance the rest of your client work at the same time?

Easier said than done. But it starts with an intense drive to see the project through to the finish. Over the course of almost two years, our team at Brunch worked tirelessly to rebrand ourselves from JEL Creative to Brunch Digital – a new direction that we felt more accurately represented not only who we were currently, but what we wanted to be.

It became inevitable that creating our new brand guide ourselves would take significantly longer due to the constantly revolving door of client work. This, combined with the objectivity issues inherent in branding yourself, led us down the path of working with an independent designer, Christopher Scott and creative director John Zajac who gave us fresh, experienced perspectives and got us moving in the right direction.

Once we had our new visual brand in order, our team had what we needed to create our new website – the first forward-facing application of the new Brunch Digital brand.

Phase 1

Visual Design & Prototyping

I led the visual design production, which allowed the rest of our creative team to work on the behemoth task of copywriting and content development. Andrew Morgan provided invaluable creative direction, while Alice Packard created various brand assets and illustrations.

One of our first goals in the website redesign was to let our audience get to know us a little bit. We wanted to reintroduce ourselves to the industry and be clear about who we were as a company.

That being said, the most important part of our website rollout was not who we were, it was the quality of our work, first and foremost. In our case studies, we wanted to highlight our succesful recent projects right away on our home page, but also experiment with dyamic, interactive ways of displaying our work. Initially, we landed on a manipulated scroll feature that would allow for an interactive, animated way for users to scroll through our body of work.

We jumped constantly between Sketch and InVision, and even Principle for animation concepts. I worked closely with our development team to design and prototype interaction and animation concepts. This proved to be extremely helpful when it came to user flow and page architecture, too.

In our team's initial website redesign, we landed on a manipulated scroll feature that would allow for an interactive, animated way for users to scroll through our body of work.

Our design team designed this interaction to quickly toggle between the different services our company has to offer.

The design and development teams worked closely together to design a full screen pullout navigation animation. Check out the little burger in the top right.

We utilized a javascript library to make the elements on the page move with the user as you scroll. We wanted to explore the web browser's place as an elongated canvas, rather than a static window of content.

Phase 2

New Iterations & Refinement

After launching our site, we reconvened as a team and identified a few areas of improvement. We included more client work earlier on the home page to allow users to see our work more quickly – and articulated our case studies more succinctly, realizing that we only have so much of users’ time to make an impression. We also realized that there was no way for users to see all of our case studies at once without skimming through them individually. It was important that users could see all of our work at once and choose what to look at on their own.

Additionally, we concluded that "scroll-jacking," or manipulating the DOM to achieve a desired scroll effect, actually creates confusion and more unecessary work for the user. In short, we learned through trial and error that overengineering user scroll can actually create more usability issues than interesting interactions. Jay Bisaga and I elaborate further on this in the Brunch Digital blog.

Next Case Study

Hummingbird Inn Website & Brand Design

I'm always looking to connect with fellow designers and developers.

Email Me