Background
Skolla was growing rapidly. As an education technology platform, Skolla serves students, educators, and institutions through both mobile and web applications. With each new feature and service, the design and development teams faced increasing challenges. Different products looked and felt inconsistent, and the lack of a unified design approach was becoming evident. Designers were constantly reinventing the wheel, creating similar components from scratch, which led to inefficiencies and frustration.
Goals
Achieve consistency across all products, boost efficiency, ensure scalability for future growth, and foster collaboration between designers and developers.
Role
UI/UX Designer
Scope
Initiator, Contributor, Maintanance
Timeline
April-May 2024
Me and my engineer friend had a tough time. My work got hard because my mobile and web apps didn't match up. I wanted to do better, but I needed a design system to keep everything consistent. Also, whenever I did UI design, I kept making the same components over and over, which wasn't very effective.
The Problem
Lack of Consistency
Ineffective UI implementation
Thus, I took the initiative to develop one to solve the problem. It wasn't just about how things looked, it was about making them work smoothly too.
Doing Research
Design Audit
In this research, I first conducted a design audit by collaborating with brand strategists to review the existing design and align the components to be created with the Skolla brand guidelines.
Benchmarking
I explored design systems in other companies to understand how they document their design systems. This helped us identify areas for improvement and make necessary adjustments.
Setting Up the Foundation
We defined core elements (like colors, typography, and spacing) to ensure consistency across mobile and web platforms. We use variables to promote consistency by enabling designers to define and update values.
For colors, I've established three sets of variables:
Base Color
These are the primary colors defined in our brand guidelines, serving as the foundation for our design palette.
Alias Color
Not all colors from the base palette are utilized in component creation. Hence, it's essential to designate specific colors for use.
Mapping Color
These colors represent various components. I've categorized them into two modes: general and professional colors.
Making Variable Process
Creating Components
I'm improving and adjusting the current components to fit well with our existing foundation, making sure everything looks and works together smoothly in our design system. Also, I've included state and boolean features for more flexibility.
Building Visual Assets
A consistent set of icons was designed to align with our overall design language and ensure clarity and simplicity. We developed a cohesive visual style for illustrations and imagery used across our mobile and web platforms to enhance user engagement
Release and train the team
Once completed, I shared the components with the engineering team and explained to everyone how they work. I also provided guidance on how to implement and use these components effectively in our projects.
You can access and review the design system here
See Design System
Our products now have a consistent look across mobile and web apps. Design and development are faster thanks to reusable parts. Updating and maintaining design elements is easy, making it simple to add new features. Designers and developers work together better, creating a more unified team.
I learned that creating a design system is an ongoing task, that needs regular updates. Our system had to be flexible to handle changes in the future. Most importantly, focusing on what users need ensured our design system made learning better.
More Case Study
All New Live Class for Gen Z Engagement
See Case Study ->
Tracking Student Progress and Achievement through the School Dashboard
See Case Study ->
Empowering Education through Omni-Learning, Integrating Offline and Online Learning
See Case Study ->