Browning Environmental Communications
Led design system and site redesign end to end. Collaborated with stakeholders to develop design principles, patterns, constraints, and documentation using Atomic Design. This ensured consistency and made the system intuitive and scalable.
The brand had depth, the site didn't
Browning Environmental Communications works exclusively with clients driving positive environmental change, moving the needle with a network of public officials, NGOs, investors, scientists, activists and journalists, at every level from global to local. The brand had the depth. The digital presence didn't.
The foundation before the first page
Before touching a single page layout, I built the foundation, starting at the atom level.
- Color
- Typography
- Spacing
From there I worked upward through molecules, compounds and full organisms, validating every layer before the next one began.
By the end, the system included 34 components across five categories.
Inputs
Controls for user interaction
Navigation
Patterns for moving through the site
Surfaces
Components that define and separate content areas
Feedback
Responses to user actions
Data display
Structure for presenting information
One signature, a different value per page
Home, Services, Case Study, Careers and Contact were each designed at desktop and mobile breakpoints. The "be:" hero became the signature element, a flexible pattern that anchored every page with a different brand value: be credible, be strategic, be talented. It gave the site a distinct voice without leaning on copy alone.
A digital presence that matches the brand
Every page draws from the same shared system, so future updates don't require starting over. The system reduced decision overhead and gave the team a consistent, scalable foundation to build from.
