To unify user experiences across Orka Works, Orka Check, and Orka Pay by addressing design inconsistencies, inefficiencies, and accessibility gaps
The Challenge
The Orka Technology Group's diverse portfolio, comprising Orka Works, Orka Check, and Orka Pay, had long grappled with the dissonance of inconsistent design elements across mobile and web platforms. The tribulations encompassed:
Inconsistency: A plethora of UI kits had fostered confusion among users and fragmented the brand identity.
Inefficiency: Redundancies impeded productivity, shackling our teams' creative potential.
Accessibility Gaps: A mosaic of UI components had inadvertently created accessibility challenges for users with distinct needs.
XFnet (Cross Functional Network) collaboration, I worked closely with stakeholders from various departments, gaining valuable insights into each team's unique needs and the distinctive functionalities of each product.
Forging a Unified Design Landscape
Solution
Our expedition towards the Orka Design System's harmonious symphony required meticulous deliberation of every design choice. Rather than imposing a monolithic vision, we sought to navigate the existing digital landscape, honoring each unique aspect (apps and platforms) while constructing bridges of uniformity and ease for our users.
Prioritizing the Core: A close examination of user research and pain points spotlighted the need for standardization in core elements such as buttons, forms, and navigation. These "core atoms" garnered our focused attention, facilitating a consistent user language across diverse platforms.
Embracing Flexibility: Recognizing the distinctive attributes of each aspect was essential. We eschewed rigid uniformity, opting for component libraries replete with customization options, catering to specific platform idiosyncrasies. This harmonious balance between uniformity and flexibility forged a cohesive experience while cherishing individuality.
Accessibility as our North Star: Inclusivity wasn't an afterthought; it was ingrained into our design system's very essence. The bedrock of our decisions lay in accessibility audits and rigorous user testing, ensuring that our interfaces catered to a diverse audience. This unwavering commitment to inclusivity not only enriched the user experience but also broadened Orka's reach.
Collaboration, the Guiding Constellation: The pursuit of a successful design system was no solo expedition. Collaboration with cross-functional teams (XFnet teams) was indispensable. Developers contributed insights into technical feasibility, product managers ensured strategic alignment, and customer support grounded our design in real-world user feedback. This collective approach ensured that our system not only exuded beauty but also upheld practicality and user-centricity.
5. Phased Rollout, the Steady Course: Rather than an abrupt upheaval, we adopted a phased rollout strategy. Initial implementation of core components allowed us to garner user feedback and refine iteratively before undertaking more intricate functionalities. This gradual approach minimized disruptions and facilitated a smooth transition for both users and teams.
To empower our teams and users, we meticulously crafted an array of resources that cater to diverse learning styles and abilities:
1. Core Principles:
Quick Reference Guide: A one-page document or pocket-sized booklet summarizing the key design principles, brand identity, and overall vision. Ideal for a quick refresh or on-the-go reference.
Foundations Figbook: A deeper dive into the rationale and implementation of the design system's core elements, best practices, and accessibility standards. Geared towards designers, developers, and product managers.
2. Building Blocks:
Component Library Catalog: A visual and interactive guide showcasing each component, its variations, and usage examples. Great for designers and developers looking for specific elements and code snippets.
Pattern Playbook: A collection of pre-designed UI patterns with customization options and best practices for implementation. Useful for both designers and product managers building consistent and efficient interfaces.
3. Voice and Experience:
Brand Tone & Style Guide: A comprehensive guide defining Orka's voice across different channels, ensuring consistent communication and user experience. Suitable for content creators, marketers, and customer support teams.
Accessibility Figbook: A detailed resource outlining accessibility standards, testing methods, and best practices for inclusive design. Valuable for designers, developers, and anyone involved in creating digital experiences.
4. Living System:
Release Notes & Updates: A dedicated space for tracking changes, new features, and upcoming developments within the design system. Accessible to everyone for staying informed and adapting their work.
Community Forum & Resources: A collaborative platform for users to share feedback, ask questions, and contribute to the ongoing evolution of the design system. This open forum fosters ownership and continuous improvement.
Results
Design Time Reduction: Streamlined workflows led to a 35% decrease in design time.
User Satisfaction Increase: Improved interfaces raised user satisfaction by 20%.
Brand Recognition Growth: Achieved a 15% increase in brand recognition.
Approach
Empathy & Analysis: Extensive user research and testing unveiled pain points and guided our design decisions.
Collaboration & Communication: Engaging stakeholders from various departments was pivotal in gaining buy-in and fostering understanding.
Flexibility & Adaptation: Balancing standardisation with customisation was key to accommodating the unique features of each product.
Prioritisation & Phasing: We implemented the design system in carefully planned stages to ensure a smooth integration process
Xfn Collaboration
Hurdles Conquered
We encountered resistance to change, addressed technical limitations, and had to manage user expectations. However, these challenges were not stumbling blocks but stepping stones for learning and adaptation.
Educating
To ensure the seamless adoption of the Orka Design System, we implemented interactive workshops, provided comprehensive documentation, and established dedicated support channels, making the onboarding and transition process smooth and efficient.
Components Library
Iconography
Badges and Trophies
Future steps
Continuous Iteration: Regular updates based on user feedback to ensure the design system remains responsive to evolving needs.
Community Engagement: Sharing our methodologies and best practices with the design community to foster collective growth.
Expansion of Scope: Integrating the design system with other internal tools, further enhancing its utility and reach.
Reflection
It challenged our problem-solving skills and enriched our appreciation for collaborative innovation. The success of the Orka Design System stands as a testament to the significance of user-centered design, strategic planning, and the fusion of technology and creativity in today's digital landscape. As we look back on this journey, it's evident that we've not only created a design system but also shaped a future where design is not an afterthought but a cornerstone of product development and user engagement. This journey with Orka Technology Group has been an invaluable experience, shaping our commitment to shaping a future where design is not just an afterthought but a cornerstone of product development and user engagement.
Drop me a line or give me a call
