Branding and Website Design / Development

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.

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.

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.

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.

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.

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.

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.

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.

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.