Challenges
Needed a Custom Design System
The engineering team recognized the need for a tailored design system. The existing system was cumbersome, contributing to code bloat and requiring extensive modifications to meet their requirements.
Accessibility Challenges in Brand Colors
Our brand colors faced accessibility challenges on various backgrounds and conflicted with informational colors like success and warning. These colors were widely used across the product interface and other assets such as presentations and documents.
Needed a Comprehensive Overhaul for Product Redesign
A comprehensive overhaul was essential, requiring a restructuring of the information architecture and a complete product redesign. The ambitious goal was to execute these changes and achieve an official product launch within the first three months of my tenure.
Needed a Design Sign-Off Process
The absence of a structured design sign-off process led to engineers independently designing pages they were developing, while product design contractors created one-off pages. This resulted in a lack of cohesive design across the product.
Phase 1: Design system building blocks
Kickstarting Custom Library Development
Recognizing the urgency for a custom library, I initiated the creation of foundational components, composites, and page templates. This provided a starting point for the engineering team’s immediate needs and ensured consistent design elements for contract designers.
Prioritizing overall usability, I focused on refining the user experience of these elements. While anticipating the need for a branding update and subsequent CSS changes, I ensured the UX foundations were solidly integrated, laying the groundwork for a streamlined and efficient redesign process in the future.
In prioritizing overall usability for this initial version of the design system, I focused on refining the user experience of these elements. While acknowledging the impending need for a branding update and the consequent CSS changes it would entail, I strategized to ensure that the UX foundations were solidly integrated into the product. This approach laid the groundwork for a streamlined and efficient redesign process in the future.
Crafting Comprehensive Documentation for Design Integration
I meticulously crafted comprehensive documentation to elucidate the utilization of each design pattern, providing clear guidance for designers and developers. This facilitated rapid onboarding and empowered product managers with insights into design decisions.
The documentation also served leadership and the wider company, offering visibility into design team activities and delineating best practices. It included directives on brand usage, ensuring consistency across all company assets and communications.
Phase 2: Applying the new system and launching
Comprehensive Page Redesign with Enhanced Engagement
Harnessing the design system’s capabilities, my contract design team embarked on a comprehensive redesign of our existing pages to align with the revised information architecture. We integrated more graphics and iconography into the interface, enhancing user engagement and making the product visually more approachable. This initiative aimed to alleviate perceived complexity, ensuring a more user-friendly experience.
Establishing a Robust Design Sign-Off Process
To ensure product consistency, we established a robust design sign-off process. Using user and customer data from Solution Architects, Sales Associates, and the Engineering team, our design team made swift, informed decisions. This collaborative approach enabled rapid progress while staying aligned with user needs and market demands.
Phase 3: Testing and iterating
Gathering and Utilizing Feedback for Strategic Pivot
Following the launch, my team diligently collected feedback from sources including the sales team, trouble tickets, user interviews, and usability testing. This comprehensive approach provided invaluable insights into the necessary evolution of the product and its components.
Research revealed a significant shift in our main personas. Initially focused on developers using the console for learning and issue identification, our primary users now demanded a no-code experience. This discovery prompted a strategic pivot in our approach to product development and user experience design.
Enhancing the Design System for No-Code Experiences
Following validation with customers, we made significant enhancements to the design system:
- Streamlined existing patterns into Atoms, Molecules, Organisms, and Templates for better reusability and customization.
- Incorporated new no-code patterns to meet evolving user needs.
- Introduced unique patterns that reflect Vendia-specific ideology, strengthening brand identity.
- Enhanced documentation for clearer guidance on pattern usage.
In total, my team developed and documented over 100 design system elements for the V2 iteration, ensuring a consistent and cohesive design across Vendia’s products and experiences.
Ensuring Seamless Branding Integration
The product design team collaborated closely with the branding and marketing teams to ensure seamless integration of new branding elements. This included adopting new colors, graphics, iconography, and messaging consistently throughout the product interface. This concerted effort ensured a unified and cohesive brand experience for users across all touchpoints.
Phase 4: Updating branding and product direction
Evolving Vendia’s Branding Strategy
In June 2023, we decided to iterate our branding strategy to better reflect Vendia Share’s core attributes: trustworthiness, security, and real-time capabilities. While our playful and friendly branding resonated with Vendia’s culture, it did not align with the expectations of our new target audience: enterprise business decision-makers. Elements like the wave design, isometric imagery, and softer color palette were not suitable for corporate environments. To address this, we aimed to evolve our branding to be more corporate-friendly while retaining the essence of our original designs.