Joshua Egon Hearn
Art Direction & Design

UX, Design

The agency's website had fallen behind the times — it needed a grid and it needed media queries, stat. I was tasked with redesigning the site to showcase large, edge-to-edge visuals while being mindful of the speed and functionality required of a responsive build.

Agency: Questus  \   ECD: Jeff Wagener  \   CD: Brian Hull  \   Copywriter: Carolyn Goldhush

I began by auditing the site content and building a new sitemap, identifying key page templates, and defining the basic UI requirements. From there I designed a set of hi-fidelity wireframes at multiple breakpoints. When it was time to transition into visual design I focused on defining the design system — the typographic, UI element, and layout rules across devices — and applied it to a number of pages before handing the project off to its dedicated team.

Extra wide and extra narrow layouts for the home page and case study template.

The case study template is modular — layout elements can be mixed and matched depending on assets available.

As the page designs were being developed, I began collecting the UI elements in a separate document. This helped us to track the overall system and informed the development of new elements.

Annotation sketch of the home page panels. The panels scroll normally until they reach the top of the page, where they become fixed in place and pass over one another like cards in a stack.

Browser sketch of the home page panels. We wanted a transition method that felt fancy but wouldn't bog down performance. Scroll it for yourself ›

Expandable home page promotion area, for breaking news and quick-hit projects that don't have a full-blown case study put together.

The case study statistics are illustrated by animating the agency logo.