06/2024
Creating the ErudiFi Design System
How we created a Design System for ErudiFi to standardize interfaces and streamline processes, leading to a cohesive user experience.
Problem
How can we create a design system that brings together all our platforms in the Philippines and Indonesia, making things better for users and helping us create new features more easily?
Solution
We implemented a unified design system called Sky, to ensure consistent and efficient development across ErudiFi's diverse platforms and products, enhancing user experience and supporting brand integrity.
Impact
The implementation of the design system, Sky, enhanced user experience, improved operational efficiency, fostered collaboration, and garnered positive user feedback, ultimately reinforcing ErudiFi's brand integrity.
Platform
Android, iOS, and WebApp
ToolS
Figma, FigJam, Notion, Google Docs
Skills
Design Systems, User Interface Design, Visual Design, Prototyping
Imagine you walk into your living room, and it feels cozy and inviting with a modern design. But when you step into the kitchen, everything is old-fashioned and mismatched. The chairs don’t match the table, the colors clash, and nothing feels like it belongs together. It’s jarring and uncomfortable. Now, think about building a house where each room is designed by a different person with no coordination or shared plan. Each room might look nice on its own, but without a unified approach, the house lacks harmony and feels disjointed. This is what it's like for a company that doesn't use a design system.
For a business operating across various platforms and regions, like ErudiFi, the lack of a design system can be even more problematic. Imagine trying to run a restaurant where every chef follows a different recipe for the same dish. The food might be good, but it’s inconsistent, and customers never know what to expect.
Danacita app in 2019
In a similar way, without a unified design approach, different teams create parts of the product that don’t align, leading to a fragmented and confusing experience for users. This inconsistency wastes time and resources, makes it difficult to maintain quality, and undermines the company’s ability to present a cohesive and reliable brand.
The Challenge
Enabling a consistent user experience across all platforms while fostering efficient development
Bukas app in 2020
Here are three high-level questions that our Design team needed to address:
1. How can we ensure a consistent and cohesive user experience across our Android, iOS, and Web platforms in the Philippines and Indonesia?
2. What strategies can we implement to streamline our design and development processes, reducing inefficiencies and enabling faster feature rollout across all platforms?
3. How can we maintain and reinforce ErudiFi's brand integrity while adapting to the diverse needs and preferences of users in different regions?
How might we create a unified design system that ensures a consistent user experience, streamlines development processes, and maintains brand integrity across our Android, iOS, and Web platforms for users in the Philippines and Indonesia?
My Role
As the Design System Lead for the Sky Design System at ErudiFi, I played a pivotal role in its successful implementation.
Ideation
Working closely with the best product designers in my team (Safrian, Ando and Eulo), UI engineers (Faisal and Jay), and product managers (Dino and Inna), we organized sessions to gather insights and requirements, and analyzed industry best practices to benchmark and guide development.
Vision and Strategy
Defined the overall vision for the Sky Design System and created a strategic roadmap aligning with ErudiFi's business goals and user needs across different platforms and regions.
Design System Architecture
Together with our UI engineers, I led the development of the design system’s architecture, including the creation and standardization of UI components, and style guidelines used across Android, iOS, and Web applications.
Documentation and Education
Oversaw the creation of documentation and educational materials to support the implementation and ongoing use of the Sky Design System. Conducted training sessions and workshops to onboard teams and ensure consistent application of design principles.
Quality Assurance and Feedback
I established processes for continuous testing and refinement of the design system. Collected and analyzed feedback from users and team members to identify areas for improvement and ensure the system evolved to meet changing needs.
How It Started
Platform Diversity
ErudiFi's product ecosystem includes a variety of platforms, each serving different user groups and purposes.
These platforms include:
• The Main Website, which serves as the primary interface for users to learn about and access Bukas and Danacita's services.
• The Partner Dashboard, a tool used by partners to manage and monitor their students' loans with ErudiFi.
• The Mobile Web App, which is essential for providing financing solutions to users on the go.
• The Integration System, which support processes and interactions between the university portal and our financing services.
Each platform has unique design and functional requirements, making it challenging to maintain a consistent style and user experience.
Aligning these diverse platforms under a single design system was crucial for creating a cohesive brand presence.
Each platform has unique design and functional requirements, making it challenging to maintain a consistent style and user experience. Aligning these diverse platforms under a single design system was crucial for creating a cohesive brand presence.
Multiple Product Squads
ErudiFi’s development and design teams are organized into multiple product squads, each focused on different aspects of the product portfolio. These squads often work independently, which can lead to divergent design practices and a lack of cohesion across products.
Establishing a common design language and shared guidelines was necessary to align these squads and ensure that all products adhere to the same high standards of design and user experience
Communication and Alignment
Communicating design guidelines and ensuring alignment across different teams and platforms were significant hurdles. Designers working on the main website, partner dashboard, mobile web app, and integration systems often faced difficulties in coordinating their efforts and maintaining consistency
A robust communication framework and tools for documentation and collaboration were needed to bridge these gaps. This would facilitate better coordination and adherence to the unified design principles across all teams.
Scalability and Evolution
As ErudiFi continues to grow and expand, the design system needed to be scalable and capable of evolving with new features and market expansions. The system had to support rapid development and ensure that new additions did not disrupt the existing design consistency.
Building a modular and scalable design system with reusable components was crucial. This approach would support future growth and facilitate the easy introduction of new features and products.
How We Built It
Foundation and Planning
We started by defining clear goals for the design system. These included ensuring consistency across all platforms, enhancing efficiency in development, and maintaining brand integrity while catering to the diverse needs of users in the Philippines and Indonesia.
The team adopted the Atomic Design Methodology, which provided a structured approach to building the design system. This methodology breaks down the design process into five distinct stages: atoms, molecules, organisms, templates, and pages. This modular approach allowed us to create a scalable and maintainable design system.
Atomic Design Methodology by Brad Frost
(https://bradfrost.com/blog/post/extending-atomic-design/)
Research and Discovery
The team performed a comprehensive analysis of competitors and leading design systems in the market. We studied their approaches to design consistency, scalability, and user experience to identify best practices and areas where we could differentiate ourselves.
We also evaluated our existing design assets, components, and codebases to assess the current state of our platforms. This helped us identify gaps and inconsistencies that needed to be addressed in the new design system.
Defined the Design System Architecture
The designers created a robust library of reusable UI components designed for flexibility and adaptability. These components were standardized to ensure they could be seamlessly used across Android, iOS, and Web platforms, providing a consistent look and feel.
We also developed a comprehensive style guidelines detailing the usage of components. These guidelines covered various aspects, including layout grids, typography, color usage, iconography and illustrations, to ensure a cohesive design approach.
Documentation and Iterative Development
We developed extensive documentation to support the implementation and use of the Sky Design System. This included guides on how to utilize the component library, and follow style guidelines across different platforms and products.
Introducing Sky Design Sytem
A unified design system that enhanced user experience, improved operational efficiency, and reinforced ErudiFi's brand integrity across all platforms and regions.
Sky Design Guidelines
The Sky Design Guidelines serve as the foundational blueprint for all design decisions within the ErudiFi ecosystem. These guidelines provide comprehensive instructions on the application of design principles across various platforms, ensuring a cohesive and harmonious user experience.
Sky Typography
Sky Typography defines the textual elements of our design system, establishing a clear hierarchy and consistent style for all written content. This includes a selection of typefaces, font sizes, weights, and styles that are optimized for readability and visual harmony across different devices and screen sizes
Components Library
The Components Library is a collection of reusable UI elements that form the building blocks of our user interfaces. Each component, from buttons and forms to complex interactive modules, is designed to be versatile and adaptable to various contexts.
This library allows for rapid development and iteration, ensuring that all elements maintain a consistent appearance and functionality across ErudiFi’s platforms.
Sky Color System
The Sky Color System defines the color palette used throughout our products, providing a cohesive and vibrant visual identity that resonates with our users in both the Philippines and Indonesia.
This system includes primary, secondary, and extended palette, as well as guidelines for their application in different contexts.
Our color system is designed to be versatile, ensuring that it enhances usability, supports accessibility, and aligns with our brand values.
Sky Grid and Layout
The Sky Grid and Layout system provides a structured framework for arranging visual elements on a screen. It ensures that our interfaces are organized, balanced, and visually appealing, regardless of the device or screen size.
This system includes guidelines for spacing, alignment, and grid structure, which help maintain a clean and orderly layout that enhances user navigation and interaction.
The Launch
Launching the Sky Design System was a significant step for ErudiFi.
It brought all our design elements together into a unified system, making it easier to create consistent, user-friendly experiences across our platforms in the Philippines and Indonesia.
Announcing the Launch
On Global Accessibility Awareness Day, we proudly introduced the Sky Design System at ErudiFi. This day was the perfect occasion to launch a system designed to bring a consistent and user-friendly experience to all our platforms, emphasizing our commitment to accessibility and inclusive design.
We set up dedicated channels where team members could share their experiences and suggestions about the Sky Design System.
Regular Alignment with the Engineering Team
We maintained regular meetings and check-ins with the engineering team to align on the implementation of the Sky Design System. This ensured that design and development were in sync and that any technical challenges were addressed promptly.
It allowed us to resolve issues quickly and refine the system continuously. This partnership was crucial in ensuring the system’s successful adoption and performance.
Phased Rollout
The rollout of Sky was conducted in phases, ensuring each stage was well-supported and fully integrated before moving on to the next. This phased approach helped teams adapt smoothly and ensured the system's effectiveness.
Launch of Sky Iconography
We introduced a unified set of icons used consistently across all platforms, providing clear, recognizable, and accessible visual elements that align with our brand.
Launch of Sky Illustrations
We established a cohesive style for illustrations, which added a unique and engaging visual element to our products. These illustrations were designed to resonate with our users in both the Philippines and Indonesia.
Launch of Sky Animations
By integrating smooth, intuitive motion design into our app, Sky Animations brings a new level of interactivity and visual appeal to the user interface. These animations not only make the app more enjoyable to use but also provide clear visual cues that guide users through various tasks, reducing confusion and improving overall usability.
Continuous Improvement
We maintained a strong feedback loop, collecting input from users and team members to drive ongoing enhancements and adaptations of the Sky Design System.
The Impact
Transformed our approach to design and development
Sky Design System brought numerous benefits that align with our goals for consistency, efficiency, and accessibility. Here’s a detailed look at the impact:
Enhanced User Experience
Our users have a seamless experience whether they are interacting with our main website, partner dashboard, mobile web app, or integrated systems.
By prioritizing accessibility in our design guidelines, Sky ensures our platforms are more usable for people with various needs.
Operational Efficiency
Our teams can develop and roll out new features more quickly and efficiently. This has significantly reduced our time-to-market and allows us to respond swiftly to user needs and trends.
User Satisfaction Scores
The enhancements provided by Sky have led to excellent user satisfaction scores. Our mobile apps, Bukas and Danacita, have received an impressive 4.5 out of 5 in user satisfaction surveys.
Additionally, our partner dashboard has received positive feedback for its improved functionality and user-friendly design.
Credits to my small but amazing ErudiFi Product Design Team (circa 2019-2024) - Safrian Jayadi, Ando Silalahi, Tian Marucot, Eulo Soriano, Vanessa Williams, in collaboration with our favorite product team members - Dino Alcoseba, and Inna Abadilla, and the best frontend engineers - Faisal Amir and Jay Prado.