Background
In March 2023, I was approached by Miranj, a strategic web design and development studio, to collaborate on branding and website design for Adroit Associates. We had previously worked on a pitch together, where we found our project interests and goals were well-aligned. This shared vision made it an easy fit to work together, and I was glad I could contribute to this impactful project.
CLIENT
SECTOR
Consultancy
AREAS
Brand Design Strategy
Identity & Brand Design System
Website & Web Design System (UI/UX)
Brand Assets
Brand & Web Guidelines
PERIOD
April 2023 – March 2024
RELEASE
January 2024
VIEW WORK
project partners
Souvik Das Gupta, Prateek Rungta, Paul Manem (Miranj)
key client personnel
Swati Rao, VP, Marketing and Communications, Adroit Associates
Overview
Adroit Associates (formerly AACS) is a global development firm working with communities affected by conflict and its aftermath.
Their mission is to help these communities reclaim agency, build prosperous economies, and create resilient societies. Adroit Associates collaborates with governments, civil society organizations, international aid and development agencies, and corporations, offering robust, data-driven research to support sustainable development.
Old name and logo alongside new name and logo
When AACS initially approached Miranj, the redesign required first reworking the brand identity design and system. Miranj invited me to develop the brand strategy, new identity, and website for Adroit Associates. This collaborative project had me leading the branding and website design, while Miranj managed the overall digital strategy, web development, and end-to-end project coordination.
Crafting the core idea
Through rigorous research, workshop sessions, and discussions with AACS, we established a guiding principle to drive design explorations, tone of voice, and identity. During this process, AACS also decided to adopt a more transparent name, changing from its abbreviated form to the full "Adroit Associates".
This branding exercise led us to articulate a purpose that would inspire not only the team at Adroit Associates but also their partners and the communities they support, aligning with the organisation’s goal: ‘empowering communities through evidence’.
With this purpose in place, our next step was to align it with the brand identity and experience, helping shift perceptions across every brand interaction—from physical to digital and tonal elements. This comprehensive approach ensures that the organisation’s research and evidence empower affected communities to build resilient futures.
Purposeful directionality
The identity and design system were developed around the concept of ‘empowering communities through evidence’. This identity captures Adroit Associates’ strength—its deep understanding of local contexts—symbolised subtly through a compass representing purposeful direction and focus.
A holistic brand ecosystem
A rich tapestry of visuals was created to support the new identity, including an extensive colour palette, a scalable illustration style, graphic patterns, containers, iconography, and a distinct photographic style.
Colour palette
Following the workshop, AACS expressed a strong interest in moving away from purples towards fresher, livelier greens and blues. To further refresh the brand and reinforce the new identity, we decided to infuse this shift into the colour palette.
Once the primary tones were finalised, we focused on building a versatile, extensive palette to serve the various functions of the brand.
The transition from purples to livelier greens and blues
The resulting palette includes solid and gradient tones that reflect the logo’s style. It offers a broad range of colours for different scenarios: primary tones to communicate core brand ideas, secondary tones to complement the primary palette and address accessibility concerns without sacrificing brand integrity, and accent colours for highlighting key messages like warnings or errors on the website. Neutral tones were chosen for backgrounds and subtle information blocks, helping to create visual hierarchies when needed.
The final set of solid and gradient colours that became integral to the overall identity system
Typographic System
The typographic system for Adroit Associates was designed to reflect the brand’s voice and personality, ensuring readability and strong brand recall across digital and print mediums. The primary and secondary typefaces—Red Hat Display and Red Hat Text—were selected to complement the letters of the logotype, which were created using Commuter Sans.
Red Hat Display & Red Hat Text
Originally commissioned by Paula Scher of Pentagram and designed by Jeremy Mickel of MCKL for Red Hat, Inc., the Red Hat family was carefully chosen to represent the brand. Red Hat Display is the primary typeface, used for print and website headlines, as well as large body text. Its geometric sans-serif style, with even strokes and tall letterforms, makes it bold and impactful. Red Hat Text, the secondary typeface, is ideal for smaller text sizes, ensuring clarity and complementing Red Hat Display for consistent readability.
Commuter Sans
The letters of the Adroit Associates logotype are derived from Commuter Sans, a geometric sans-serif typeface designed by Ryoichi Tsunekawa and released by Dharma Type in 2017. With its wide proportions and clean, modern aesthetic, it was carefully chosen to complement the logo symbol and strengthen the overall brand identity.
Together, these typefaces form a cohesive visual language that balances bold, impactful headlines with clear, legible body copy, capturing the essence of Adroit Associates’ mission.
A sample newspaper ad that uses a combination of Red Hat Display and Red Hat Text for writing heading and body text
A sample page from the website and a sample business card that uses a combination of Red Hat Display and Red Hat Text for various content types
System Typeface
For applications that rely on system fonts, such as PowerPoint, Microsoft Word or even Newsletter templates, Verdana was used as a substitute for Red Hat Display and Red Hat Text. This ensures the brand’s visual consistency, even when the intended typefaces are unavailable.
Left: Red Hat Display used for text on a merchandise;
Right: A sample newsletter template that uses Verdana in place of Red Hat Display or Red Hat Text
Patterns and illustrations
Illustrations are a powerful tool for storytelling, offering a unique ability to convey concepts that go beyond the capabilities of photography or icons.
For Adroit Associates, illustrations are used to convey conceptual narratives and articulate nuanced ideas in a relatable, approachable way. The style is vector-based and rooted in the brand’s colour palette, especially the signature gradients. This ensures that illustrations are adaptable. This allows for stock images to be recoloured or custom illustrations to be commissioned, all while maintaining a cohesive brand identity.
Illustration developed for a sample website banner and poster, created to articulate a specific topic
Patterns are employed as a complementary visual element in the brand universe, in addition to illustrations. When applied with restraint, continuous patterns are used to bring a decorative quality that adds relief to layouts. Like the illustrations, patterns are also infused with the brand’s unique colour palette, giving them a distinctive look.
Overall pattern of the company profile's book cover create a distinct and ownable look
GRAPHIC DEVICES
To add emphasis and visual interest in communication materials, Adroit Associates incorporates distinct graphic devices inspired by the logo symbol. While most layouts maintain a clean, minimalist design that allows content to breathe, these devices are selectively applied to draw attention to key elements, lending impact to specific messages.
Empower Device
Derived from the directional arrow in the logo, the Empower Device is designed to highlight content with a sense of forward movement and purpose. This upward-pointing arrow, paired with a larger content block, emphasises areas that connect to specific regions or individuals, symbolising the brand’s mission of empowerment.
Empower Device applied on a sample presentation cover slide to emphasise the title
Capsule Forms
Inspired by rounded elements of the logo, Capsules add a softer touch to layouts. These come in two forms: the Pill and the Block.
Pills are used as a text container, it functions as a button on the website or as a highlight for display text in posters, social media posts, and covers.
Blocks act as a background element, it provides separation and focus within layouts. Often used for Calls to Action on the website, it guides user interaction by breaking up content flow and emphasising key actions.
Left: Block devices used to highlight CTA components on the website; Right: Block device as a container for a photograph on an employee ID card
Iconography
The iconography for Adroit Associates takes inspiration from the bold elements of the logo, aligning with the brand's visual language. Two icon types are used:
Signature Icons: These icons appear in brand-specific contexts, conveying important ideas with distinctive forms and a precise design approach.
Standard Web Icons: Designed for web interface needs, these compact icons use familiar forms.
Photography
Adroit Associates' photographic style emphasises authenticity, warmth, and empowerment, capturing people and environments essential to the organisation’s work. This style, present in their existing image bank, was retained for its sincerity and genuine storytelling.
People photographs highlight environments individuals inhabit, focusing on resilience and triumph, with a warm, natural mood that avoids sensationalising hardship.
Location photographs provide local context, capturing natural and built environments. Wide-angle compositions with focal points—like landmarks or figures—suggest positive change, with soft lighting creating an inviting aesthetic.
Cards created for the website uses photographs from Adroit Associates existing bank of photographs that offers a window into all the ground-level research undertaken by Adroit Associates and closely showcases the communities that they work with.
A content-driven web experience
Guided by Miranj, the web design system was crafted to support Adroit Associates’ diverse content needs—from written articles to podcasts, videos, and audio stories. The CMS was tailored for flexibility, enabling Adroit’s team to easily produce and manage varied content types based on context and purpose.
Designed with accessibility in mind, the website prioritised ease of use for both end-users and Adroit’s internal team managing content. Miranj’s digital and UX strategies provided Adroit with a website aligned with their long-term digital goals, while the design and components were tailored to ensure an intuitive and adaptable experience.
Website homepage featuring an auto-play video on the first view
Desktop mock-ups created based on the new branding identity system, following the web strategy and wireframes developed by Miranj
Mobile mock-ups developed following Miranj's guidance
A few website components designed: Button and Link styles, CTA scenarios, and Summary Block variations
Three footer component scenarios, designed in collaboration with Miranj to maximise space while ensuring clear visibility of information
A comprehensive brand guidelines document
Adroit Associates recognised the importance of an in-house design team and invested in building one over the years. The final deliverable for this project was a detailed brand guidelines document, designed to capture all visual and tonal aspects of the brand.
This guide serves as a resource for both the current and future design teams, as well as external agencies, ensuring consistent implementation of the brand’s vision across all platforms.
It includes clear instructions on applying the new design language, covering typography, colour schemes, tone, and messaging. Additionally, the team requested an audit document to review initial collateral, identifying areas for refinement to better align with the brand's goals.
For access-permission, please write to hello@anoopajohn.com
