Redesigning the HWC Website

Problem

HWC was a consulting company that was growing from a small to medium-sized company. In the world of Federal consulting, this meant that HWC would be competing with large, established companies with more teams and resources. It needed a website that would better position it to compete against those juggernauts, show off its staff’s capabilities, and attract top talent.

Solution

We restyled the HWC website to present itself as a sleek, modern company and re-organized pages so that their staff’s skills and talents would be front and center.

My Role

I worked with our web developer to design a style and pages for the site. I also worked directly with the Chief Marketing Officer and Chairman of the Board to implement their vision.

How might we redesign the HWC website to better position us against big business competitors?

Gathering requirements and setting priorities

Since HWC had grown, we could no longer compete for contracts set aside for small businesses. Now, we would be competing against huge, billion dollar companies. When we looked at websites for large companies, it was obvious that those companies served many clients and markets and offered a range of services. In comparison, HWC’s site felt like a small business’s site. HWC’s website at the time highlighted its mission and some of its core capabilities, but didn’t go into depth. Compared to larger sites, it didn’t present itself the way a large company did.

My teammate and I met with the Chief Marketing Officer (CMO) to discuss her vision for the new site. We came up with a list of priorities:

  • Show up “big.” We needed to present ourselves as capable of delivering at the same level as its large, established competitors with huge talent pools and resources. We also wanted to present ourselves as modern thought leaders that other companies should want to partner with.

  • Highlight a range of in-demand capabilities. Our growth also meant that we had more to offer as a company. With more talented staff, we had more in-demand skills than we did as a small company.

  • Showcase HWC’s culture and talent. HWC prided itself on retaining its culture as it grew, and wanted to highlight key personnel at the company. We wanted to present ourselves as a diverse company where someone could bring their whole self to work.

  • Reflect HWC’s matured brand identity. Before we started redesigning the website, we had updated the HWC brand’s font palette and color scheme. HWC wanted to update the site to match its new brand.

Clarifying our aesthetic

We needed to move quickly to deliver a set of three high-fidelity wireframes within two weeks, so we skipped sketches and low-fidelity wireframes. Instead, the CMO, web developer and I surveyed websites we liked and discussed what we wanted to incorporate into the HWC site.

What we liked

  • Motion, especially slow-panning videos

  • Depth, texture, and transparency

  • Elements of surprise and delight

  • Gallery of staff

  • Strategic uses of accent colors

  • Narrative structure and clear communication

What we didn’t

  • Stock imagery. We wanted our image use to feel thoughtful and to show our actual work.

  • Prezi-like animation. We wanted animation to feel organic and intentional.

  • Reliance on our customers’ reputations to show our importance rather than the impacts we made.

Developing high-fidelity wireframes

I developed a set of three high-fidelity wireframe options. Below is each option I presented as well as feedback I received on each.

Please note that all of the text below is placeholder text, and some of it is very silly. Some of the sillier text was written by the web developer and me, all in good fun.

Option 1

For this option, I created a few different blocks with the idea that we could arrange them as we saw fit. I organized the site to prioritize Capabilities, Our Work, Our Values, then Our People.

Feedback:

  • Like the treatment of “Our Work” section.

  • We want to avoid big blocks of solid color.

  • Like the editorial feel of the “We Bring Our Whole Selves to Work” block, but the font feels out of place.

  • Don’t like the heavier weight on body font: prefer the contrast between thick headers and thin body type.

Option 2

I wanted to create an option that felt layered. This option would allow the user to see content without needing to click blindly through a carousel.  I organized the site to prioritize Our Work, Capabilities, then Our Values.

Feedback:

  • Thick underlines don’t feel “us.”

  • Like the visible layers.

  • Dramatic angle on the footer feels like it has too much blank space.

  • Like the treatments of the areas without pictures.

Option 3

While talking about a vision for the site, we kept coming back to the idea of different “cards” that represented each subsection. I wanted to create a version that spoke to that. I organized the site to prioritize Our Work, Capabilities, then Our Values. 

Feedback:

  • Like the text treatment.

  • Like the “card” elements.

  • Like the layers created by shapes.

  • Not sure that they like the organizational structure.

Final high-fidelity wireframe design

For the final design, we combined Options 1 and 2. We chose to order the homepage content to prioritize Capabilities, Our Work, then Our Values. We ordered the content this way after a card-sorting exercise with the Business Development team.

Home Page

Our People

Expanded Hamburger Menu

Contact Page

Final Result: Before and After

AFTER

BEFORE

When the final design was implemented, we stripped back many of the elements that we had wanted to include. At the time, HWC didn’t have full-time staff dedicated to maintaining and updating the website. Reducing some of the visual elements for the final design to make it easier to implement and update.

We also ended up stripping back the sections we had planned about our work to include just one impact case study. At the time, we also didn’t have the manpower to produce videos or in-depth case studies about our work. We planned to create additional case studies after the launch of the site.