Project:

Branding and Website Design / Development

scroll icon
EC3 Logo - Color

Equipping an executive coaching company with a clean and professional look

As consultants who work directly with executive-level employees, EC3 needed a visual identity and website to communicate the modern, professional services they offer.

Technology:

Craft CMS

Bootstrap

HTML5/CSS/Javascript

Adobe XD

Adobe Illustrator

Roles:

Information Architecture

Web Design

Illustration

Frontend Development

Backend Development

DevOps Support

Project Management

Building the brand

Data Driven Design's team met with the client to kick off the project and collect oodles of information about the client's aesthetic and goals. The primary motif the client wanted to capture across all elements of the brand could be boiled down to one word — simple. We kept this in mind throughout the project, but applied it immediately to our first task: creating a signature mark.

We put pencil to paper to sketch out concepts that would be simple and communicative. Due to the business name itself being quite short, we knew we would be limited in the variety of marks we could make while remaining legible. In the end, we were pleased with the variety of iterations that were produced and the client was pleased to be able to whittle down their mark to exactly the right look.

EC3 Logo - Sketch Book Iteration
EC3 - Design Progression of Logo Ideas
EC3 Logo - Mark Customization and Construction

Crafting the brand mark

Given the simplicity of the name, we knew we wanted to incorporate subtle design tweaks that would make the logo feel ownable and unique to EC3. Small changes such as using the extension of the curves in the top right side of the "C" to cut into the top bar of the "3" resulted in subtle, ownable finishes that helped the logo come across as a crafted brand mark as opposed to simply typing the name out in a regular font.

Color Palette

Next, we created a color palette with consistency in mind, keeping the primary colors a muted blue that would be subtle, sleek, and modern. We included a vibrant yellow to work as an accent color in order to balance out the palette and allow it to be flexible as they apply brand colors to a variety of marketing collateral in the future.

EC3 - Website Color Palette

Designing the website

Data Driven Design also tackled all aspects of the website redesign + development project, starting with information architecture.

The information architecture phase included auditing their existing sites — one site used for their consulting services, and another site for their analytics services — in order to consolidate them into one, cohesive experience.

To ensure all information is accounted for, we created a sitemap to align with the client on what pages need to appear on the site and what the content on those pages should be speaking about. This approach allows our design and development team to create a holistic solution for the content and information that users will need to discover.

EC3 - Website Sitemap

Wireframing and Initial Concepts

After receiving client approval on the sitemap, we set out to wireframe the entirety of the site. This leveraged the audit of existing content and required stakeholder interviews to gain a better understanding of what services the company provides and how they speak about them to potential clients. This step is essential to creating a website that feels aligned with the company's other streams of communication and allows us to make sure we can rank the importance of content.

We built our wireframes using Adobe XD to allow us to quickly share a web-based review link for the client. Initially, we provided a quick turnaround with the concepts for the home page, to allow iterative feedback that we could then apply as we built out other areas of the site. This workflow also set us up to share the designs with our development team early on so they could begin roughing-in content blocks prior to receiving final designs on the user interface.

EC3 - Website Wireframes

While our web development team began working on setting the site's backend up, we worked with EC3 to hone in on their ideal minimalist look. Forgoing animation and additional complexity meant the designs were streamlined and approved quickly.

Full-out coding accelerated once we received design approval and outpaced content approval for the site. With the new website built in two weeks time, this was one of our fastest and smoothest projects to date.

The final site has unique and interesting designs for each page, with colors and styles providing consistency. Some of the section styles are used in multiple places, such as the case study callout. This style is used for the entire list of case studies as well as the featured case study that is shown on the home page.

Custom content entry

We added flexibility in three areas to allow EC3 to accommodate their use cases now and in the future. The first part of this flexibility can be seen in the services list on the home page of the site. Each of the services titles - Consulting and People Analytics - represents a page, with the Learn More button linking to the full page. However, not all service pages are required to be listed here - so EC3 could create additional service pages about their offerings but keep them hidden except for when they wanted to direct existing customers to additional solutions.

Secondly, we included flexibility for the honey-colored arrow links on the right. Each of these are anchored to a section on the service page itself, taking a user straight to information about that particular offering. This pattern is interesting and unique, but also allows specific services to be listed or not listed on the home page. For example, while People Analytics has only three anchored links on the right, the page itself shows five services and their descriptions. The last three are conceptually grouped together as "Compliance" on the home page because EC3 didn't feel the need to enumerate each of the compliance services they offer. This use case also created an opportunity to add flexibility for the title of the section on the home page - keeping it the same as the title shown on the service page or overriding it with a unique title as is needed for three services related to compliance.

Finally, we applied content flexibility on the service pages themselves in order to allow the addition of an optional button to each section. This button can link to a different page on the site, directing users to explore other related services.

Making the service listings and pages fully customizable was fun. Due to robust discovery guiding how each of the pages and sections was composed, we were able to develop flexible but standardized rules to allow each of these areas of the site to be tailored to EC3's needs.

Striving for simple

While development was taking place, the design side of our team continued to apply EC3's simple style to other assets expressly created for the new look. This vision guided the creation of custom graphics and icons like the line-art industry icons shown above.

We also added unobtrusive but visually interesting background graphics that stand out boldly against the mostly blue and white design. These range from zig-zags, to a column of plus marks, crosshatch patterns and others.

Custom Illustrations

Another really enjoyable aspect of this project was being tasked with creating several custom illustrations that depicted EC3's services offerings. Using the minimalist site design as inspiration, our team created 12 simple line-art illustrations to use across the service pages.

Next Steps

We're excited to go live with the refreshed user interface on EC3's website in the near future. We're currently working with the client to get fresh content into the new website and get approval to go live. We expect to turn a few heads with the polished new look that will roll out soon.

Ready to overhaul
your brand?
Get in touch

We proudly serve
the Pacific Northwest