Cady faced a unique challenge: they had multiple digital properties, but lacked a unified design language. The absence of a single source of truth hindered brand consistency and user experience. We partnered with Cady to build a comprehensive Design System, helping define core design principles to implementing a cohesive visual language.
We were not only able to streamline their digital presence, but also enrich the storytelling experience for clients navigating Cady's unique photo offerings.
Vision
- Work closely with the Cady team to identify needs, address concerns, and provide insight where needed
- Establish a comprehensive Design System for Cady's multiple digital properties.
- Define core design principles to ensure brand consistency.
- Implement a cohesive visual language for a seamless user experience.
- Ensure that the design system will also support design to development handoff.
Victory
- Audit of existing digital properties to identify design styles and patterns as well as noting inconsistencies.
- Created foundational design elements such as: colors, typography, spacing variables, grid frameworks, etc.
- Established a core component directory to serve as the building blocks for all design decisions. This included elements such as buttons, logos, fields, icons, counters, tables, tabs, etc.
- Created more complex components and patterns for elements like navigation menus, cards, modals, etc.
- Established documentation on best practices and "how-to" when it comes to navigating, using, and expanding the design system.
Client Industry
National School Photography Company
Platform
Website
Services Performed
UI/UX Design,Project Management
Vision
Mission Brief
Cady is a premier school photography company with studios across the United States. Students and parents alike rely on Cady to deliver high quality school portraits, whether through their in-studio portrait sessions, school pop-ups, or Elite outdoor sessions. With multiple digital properties to provide a curated user journey, Cady was lacking a consistent visual language across those properties, resulting in an inconsistent user experience. Black Airplane recognized an opportunity to bring structure and consistency to the Cady brand with a design system.
Cady would need a proper design foundation to build their designs from as well as a directory of component building blocks that could scale with their growing brand. All of this while still maintaining the brand that had been established for over 20 years.
Challenges
Cady had multiple digital properties that created a seamless user journey, or so they thought. While first glance might have hinted at cohesiveness in the design across these properties, a closer examination revealed inconsistencies in the styles and patterns of design decisions resulting in a disjointed user experience. The challenge was taking all of these separate designs that had been made, meticulously evaluating each element, and ultimately creating a unified and single source of truth for each element. This required not only a keen eye for detail, but also a strategic approach to developing seamless visual elements, ensuring a consistent and delightful user journey across all of Cady's digital touchpoints.
Why Black Airplane
At Black Airplane, we pride ourselves not only on our expertise, but also on the relationships that we build with our clients. Having partnered with Cady in the past on multiple projects, we had a unique position of understanding the product, where it had been, and the potential it possessed.
Above & Beyond
The work done on this design system was not just about solving the problem of inconsistent design decisions; but about creating a new foundation that would support a better user experience moving forward. This included making decisions that could scale and evolve with the brands growth.
Flight Plan
Design
Embarking on a collaboration with Cady, we undertook the mission to streamline the visual identity of this premier photography company. Recognizing the challenges posed by differing web properties and a lack of a cohesive design language, our efforts aimed at introducing order, consistency, and a seamless user experience across Cady's user journey. From defining core design principles to crafting scalable components, implementing template patterns, and weaving a cohesive visual language, our partnership with Cady showcases the commitment to not only address current design challenges but also pave the way for a harmonized and sustainable brand identity that can evolve seamlessly with the brand's growth.
Establishing a Firm Foundation
We wanted to create a comprehensive Design System that would serve as the cornerstone for visual consistency across Cady's digital properties. We began by defining the core foundational elements such as colors, spacing, typography, grid systems, layouts, and more. By meticulously addressing the nuances of these elements, we aimed to develop a visual language that would help us build a more seamless user experience across Cady's expansive online presence.
Building Blocks for a Scaling Brand
Recognizing the need for scalability, our focus extended to crafting base components that would serve as the building blocks for designs moving forward. While first glance might have hinted at cohesiveness in the design across these properties, a closer examination revealed inconsistencies in the styles and patterns of design decisions resulting in a disjointed user experience. The challenge was taking all of these separate designs that had been made, meticulously evaluating each element, and ultimately creating a unified and single source of truth for each element. Collaborating directly with the Cady team, we identified and developed versatile components that could scale cohesively with the brand's evolving needs.
Developing Patterns & Templates
To further enhance user experience, our design system incorporated template patterns that facilitated the creation of predictable and user-friendly interfaces. By establishing consistent layouts and interaction patterns, we aimed to guide users intuitively through the digital journey, ensuring a cohesive and enjoyable experience. We achieved this by taking patterns that were existent on their various sites, and adapted them in a way that would be useable across platforms to achieve a cohesive look and experience.
Ensuring Smooth Transition and Implementation
Working closely with the Cady team, we prioritized a seamless design-to-development handoff. This involved providing clear documentation and resources to facilitate a smooth transition from design concepts to actual development. By fostering effective communication and understanding between design and development teams, we ensured that the design system not only met the immediate needs of Cady but also supported ongoing development efforts. The result was a holistic solution that not only addressed current challenges but also set the stage for sustained design and brand evolution at Cady.
Victory
Throughout the collaborative journey with Cady, our team ensured an end product that seamlessly encapsulates the essence of the Cady Design System. The process kicked off with an exhaustive audit of existing digital properties, identifying prevailing design styles, patterns, as well as inconsistencies. Armed with this understanding, we crafted foundational design elements encompassing colors, typography, spacing, and grid frameworks. Establishing a core component directory became pivotal, providing the essential building blocks for all subsequent design decisions. From buttons, logos, fields, icons, counters, tables, to tabs, these core components formed the cornerstone of the new Cady design experience.
Beyond foundational elements, our team delved into the creation of more intricate components and patterns, addressing elements like navigation menus, cards, and modals to enhance the overall user interface. This effort resulted in a comprehensive Design System that not only addresses current design challenges but also facilitates future scalability and growth for Cady. In addition, we established thorough documentation, offering best practices, "how-to" guides, and resources for navigating, utilizing, and expanding the design system. This documentation took various forms, including READMEs, component descriptions, video tutorials, and annotations; ensuring a user-friendly and accessible resource for Cady's ongoing design endeavors.