Recent Work

Content
Strategy and
Modular
Design

Tasked with building a new website for a company of 18,000 employees and countless network partners spread around the world, we designed both a content strategy and a system of modular components. Our approach can be used by contributors to create an infinite number of combinations of templates while keeping the brand in tact and information organized. The success of this project led to furhter work designing tools for our client's internal teams.

My Role

Design Direction
Modular System Design
Prototyping
UX Design

Team

Nick Spriggs
Design Management, Discovery, Team Leadership
Allyssa Price
Content Modeling, Visual Design and Brand Application, System Design
Allison Hurley, Project Manager

Problem

A global commercial real estate firm has a site that no longer works to communicate effectively or keep content organized.

Approaching Content and Layout with Systemic Design Thinking

This client came to us with a loosely-defined set of problems with their current website and internal tools. Their web content had become disorganized and ungovernable. Content contributors came from diverse professional backgrounds in offices around the world. Each team needed to create pages of content, specifically tailored to their audience. Teams from the global headquarters in New York needed to review and approve content.

Someone on the team envisioned hundreds of potential page templates, but this was not a reasonable solution to the content problem. We needed something better. The company came to our team because of our experience in modular design. We could design a system of modular components to assemble infinite page types. This might sound like a simple idea but often the execution can be difficult. On top of these challenges, the client suggested that a rebrand might be around the corner, and we should try to design something that can adopt a new brand design – should it need to in the future.

We began a process of systemic design to solve these design challenges and eventually create a new modular website, content management system and asset management tool.

The first step had two aspects: to begin a process of understanding users, along with a content audit and a model for the future.

A modular system of components would be designed to mix and match content types across pages. The modular design creates a non-linear environment for connecting pieces of content to each other, avoiding the traditional limited number of templates. I must give extra credit to designer Allyssa Price who paid impeccable attention to detail on these modules.

Systemic Design for Grids, Color Palette and Typography

A strong responsive grid and typographic system was required to ensure visual hierarchy from one module to the next. Assembling pages from modules requires that modules always work together. We tested many combinations but ultimately the success of the project relies on the systemic design approach.

The color palette was taken from the existing brand specifications with only minor additions to fill out and modernize. We paid careful attention to designing a color application system. Red is used for emphasis and calls to action throughout modules. Near-black, white and slate-greys helped contain modules and contrast them against other modules. A careful approach to system design is necessary on modular designs, including time spent stress-testing your system so that it can hold up under the pressure of hundreds or even thousands of content contributors making their own layouts.

By designing atomic nested components in Figma, I was able to build rapid prototypes, first as low-fidelity wireframes. Minimal work would be required to increase fidelity through iterations, as the root UI element could be edited and components would populate automatically through the design system.

Using our nested components to assemble wireframes and eventually designs allows for rapid iteration of ideas. Using the latest Auto Layout feature in Figma enables quick reordering of UX components. We were able to create shareable prototypes for testing many iterations of modules such as asset filters and forms. As designs become higher fidelity, we can incorporate them into our prototypes.

Sharing our content model with the client and using collaborative tools (Google Sheets and AirTable) transformed content creation into a collaborative exercise. Different teams were given access to contribute content and content managers could give editorial approval. Everything collected and tracked in one space.