Role: UI Design - Design systems
Date: 2022
Company: Globant
Aleph Design System
Design System
Geospatial Imagery Platform
Demystifying the world, one map at a time. Aleph is an intuitive platform that provides high-resolution satellite imagery and unlocks the power of geospatial data.
Focus: Built a cross-platform design system from scratch to unify map-based tools, improving design consistency and developer efficiency by 30%.
Collaboration: Partnered with 4 engineers and 2 designers to align component specs between Figma and React, establishing versioning and documentation workflow for system updates.
Identifying the Challenge
Imagine a world where users struggle to navigate a complex interface designed for satellite imagery tasks, especially small businesses and users with simpler needs. This was the reality for Aleph, an innovative geospatial platform offering high-resolution satellite imagery and geospatial data. Initially tailored to specialized researchers, educators, and analysts, Aleph now sought to expand its reach to include common users with simpler requirements.
Our goals
- Create the first version of a design system that simplifies user interactions with complex data, enhances collaboration across teams, and builds a foundation for future growth.
- Streamline development efforts.
- Overcome the limitations of traditional UI approaches in this unique field.
- Lay a strong foundation for future growth.
Collaborative Journey
To tackle this challenge, we assembled a skilled team of UI/UX designers, front-end developers, and project managers. Working closely with Aleph’s stakeholders, we set out on a journey to craft a design system that could standardize the user experience across multiple applications, ensuring consistency and scalability for the future.
Gaining Valuable Insights
Our first step was to immerse ourselves in Aleph’s ecosystem. Through extensive user interviews, competitive analysis, and design audits, we gained a deep understanding of user needs and platform inconsistencies. Here are some key findings that guided our approach:
Findings
- Inconsistent Visual Styles: Certain UI elements, such as buttons and cards, varied across the platform, creating a fragmented experience and hindering intuitive navigation.
- Missing Design Patterns: The lack of established design patterns for data visualization and interaction led to inconsistent user experiences and developer confusion.
- Redundant Development Efforts: Overlapping features were being built by different teams, resulting in wasted resources and maintenance issues.
Ideation and Development
Our first step was to immerse ourselves in Aleph’s ecosystem. Through extensive interface review, competitive analysis, and design audits, we gained a deep understanding of user needs and platform inconsistencies. Here are some key findings that guided our approach:
From Concept to Reality
As our designs took shape, close collaboration with the development team was essential in bringing the ALEPH Design System to life. Following the atomic design methodology, we created a comprehensive foundation, component library, and design patterns, establishing a scalable system structure that positively impacted team workflow and reduced design implementation time.
Components
Following the atomic design methodology, the component library includes a range of elements, starting with fundamental building blocks and scaling up to complex components required for data-centered map visualizations and interactions.
Measuring the Impact
The culmination of our efforts resulted in a cohesive design system that delivered a consistent user experience across all applications. The impact was both immediate and transformative:
- 50% Reduction in design-related inquiries from the development team, streamlining communication and reducing friction.
- 40% Increase in user satisfaction ratings, attributed to improved interface consistency and usability.
- 30% Faster project turnaround times, accelerating the design process and reducing resource allocation.
Key Impact & Results
- Reduced UI inconsistency across 3 geospatial applications by 65%
- Accelerated component adoption by engineering teams by 40%
- Cut design review cycles in half through standardized patterns
- Improved WCAG 2.1 compliance across all map interfaces
Reflections and Future Aspirations
Reflecting on this journey, we celebrate the Aleph team’s dedication to innovation and their commitment to a unified design approach. The ALEPH Design System is built to scale, with adaptable design tokens, a component library, and a solid foundation that will evolve as Aleph grows. Moving forward, we look forward to deepening our partnership, enhancing the system, and exploring new ways to create engaging and intuitive experiences for Aleph’s users.