Background

Williams Helde needed a new website to show off its credibility as a creative agency. That means walking the walk and showing your clients you can do cool stuff, from videos and animations to strategy and UX.

The Project

Williams Helde Site

Williams Helde has gone through a few web site design changes in the past few years. Recently, the agency focused efforts and updating its Active Explorer research and wanted to incorporate the updates into an agency site update.

At the same time, the agency was also making big pushes to get new business, and was open to updating the content and strategy going into the site.

My role

I was the UX designer, and also developer on this project.

Challenges

In building the WH site, I had to address multiple assumptions:

  • Who are we building this for?
  • How are users interacting with the site?
  • How are they getting to the site?
  • Who will be updating the site?

Additionally, I was responsible for developing the UI library based on our new Active Explorer theme and turning it into animated buttons, panels, and other components that would be used regularly on the site.

Solutions

The other stakeholders and I collaborated on personas for the agency, including their backgrounds, identifiers, goals, challenges, and how the agency could help them. This was combined with research into the previous site’s Google analytics to see how the users were currently using the site.

One previous version of the site was built on WordPress, with the assumption that employees other than developers could edit the content as needed (such as copywriters). Since, in practice, this was rarely the case, I convinced the stakeholders that we could develop the site from a (mostly) static site builder using JavaScript and Node.js to build the site folder.

This gave us a platform where we could make, at a quicker pace, design changes that were more versatile than what you could quickly get from a WordPress builder. For this, I started coding with the Furtive micro-framework, which is an open-source project to which I have contributed documentation. It has some quick utilities for setting up flexbox columns.

However, Furtive is only concerned with modern and bleeding-edge browsers. For our audience, we might expect some users of less-than-modern browsers, even older versions of Internet Explorer. Fortunately, this is easy to account for in the build process, where I can auto-prefix our newest styles and add polyfills specifically for the features being used.

The site’s content is organized to teach the potential client about the agency’s focus on the active explorer demographic. Much of the site hierarchy is geared towards funneling the user into learning more about the agency’s demographic research, by filling out contact forms or directly contacting us, either way giving the agency the means to procure and manage leads.

The site styles are coded with a mix of BEM and atomic ideas. Often, I used SVG animations for different UI components and background effects. Components like buttons were given different color options that could be chosen for variety, and often I suggested additional effects to match the outdoorsy setting of the theme, to add little moments of delight for the user looking at the site.

Much of the fun of animating the site came from the client case studies, where I could latch onto the client topic to add wiggling worms on the side of the screen (for a product involving worms), or to completely transform a logo to demonstrate visual aspects of a brand the agency created.