How do you refresh the web presence of an infrastructural federation built around a global commodity?

The American Cotton Shippers Association (ACSA) were in the process of refining the way they presented themselves to the world, and asked for our help. After the creation of a new logo and basic branding elements, I stepped in to translate and expand this new identity to the web.

With design and application of a new art direction, ACSA wanted to make sure that their raison d'etre came across to visitors on the home page regardless of who they are, or how they got there. On top of this all, the site was long overdue for a restructuring of its navigation and content infrastructure.

All of this needed to be designed for Wordpress in a modular fashion; simple to update for anyone who was tasked with adding to the site in the future.

My Job

I led the information architecture, wireframes, built the web-facing design system, and created all design artifacts necessary for dev handoff.

My Tools

Sketch, InVision, After Effects, and Photoshop.

The Deliverables

A responsive design system permutated for all major pages across multiple breakpoints.

Hierarchy was lacking.

The primary navigation was unclear to new users, and didn’t align with the priorities of ACSA or their users. Content throughout the site wasn’t often scannable or simple to digest.

We aimed to simplify.

Before anything else, the site’s content was reorganized into more a more intuitive navigational structure. Then, we accommodated for a more user-focused home page and the content that it would lead to.

…starting with the wires.

With the IA well-received, I created a small series of desktop wireframes to help express the implications of the sitemap we’d discussed. We shared a mobile permutation of the home page as well, to convey the translation of our modules across devices.

Due to the visual simplicity of the site content, we moved through wireframes quickly to allow more time to explore comp design.

High-fidelity comps were the next step.

With the client’s go-ahead, I started iterating the flesh and details of the page design. With brand assets at a minimum, we had to decide where we would go to add character and set the tone of ACSA as the user navigates content. Should it be photo-heavy? Maybe illustrations could help? If we used photos, what should they look like?

Over time, the group and I found the right mix of rules defining a design system that would come to fit ACSA appropriately. Making use of illustrations, some vector animation, and selective use of some top-down imagery with a little parallax led us to an approved product I was excited to send to development.

After a handoff call I shared some guides and annotations.

First, a general style guide to parse all swatches, typefaces, and other building blocks.