Seibun UI
Telus Digital is a customer experience innovator that designs, builds & delivers next-gen digital solutions for global and disruptive brands.
Location: Finland
Date: Feb-Dec 2024
Context
Our platform has gone through different transitions and rebranding processes. All UI components previously used in the platform were coming from a legacy and third-party libraries.
A design system was identified as a critical need for our platform to achieve unification and ensure a consistent user interface across all features and components. By establishing a centralized repository of design guidelines, reusable components, and standardized patterns, the design system streamlined the development process, reduced inconsistencies, and enhanced the overall user experience.
Key stages
EXPLORATION
Our team conducted extensive exploration and benchmarking, using established design systems as references to guide our process. This research informed the creation of a design library with UI components that aligned seamlessly with the company’s brand. The library ensures consistency, scalability, and a cohesive user experience across all products and platforms.
REFERENCES
The main references used for creating the components were:
- Carbon Design System – IBM
- Dell Design System
- Material Design – Google
STRUCTURE
We divided the components in different categories:
- Style Tokens
- Input controls
- Data display
- Information components
- Navigation
- Layouts
BUILDING COMPONENTS
I played a key role in building the foundation for our design system by creating reusable components, writing comprehensive guidelines, and defining styles for the design library.
I created components across various categories, with a particular focus on navigation, layouts, and input controls. Additionally, I optimized existing components by enhancing their responsiveness, ensuring they function seamlessly across different devices and screen sizes.
These components and standards ensured consistency across the platform while providing developers and designers with a unified framework to accelerate their workflows. This foundational work established a scalable and cohesive design system that improved collaboration and maintained a seamless user experience.
ITERATIONS & FEEDBACK
I organized collaborative sessions between the design team and developers to align and iterate on the UI components we created. These sessions ensured clear communication, streamlined implementation, and allowed for real-time feedback, resulting in a more cohesive and functional design system.
The final design
A comprehensive and consistent library with reusable components, well defined styles and guidelines for developers. This library not only improved visual and functional cohesion but also increased efficiency for teams working on the platform.
Learnings and next steps
Through this journey, I have developed a deep understanding of design systems, writing guidelines, and the meticulous art of crafting pixel-perfect UI components. This knowledge has enabled me to create cohesive and visually precise designs that align with brand standards and user expectations.
In addition, I have gained valuable management skills by fostering effective communication channels with developers, ensuring alignment and smooth collaboration throughout projects. I also took the initiative to organize structured feedback sessions, which have been instrumental in refining designs and enhancing overall project outcomes. These experiences have strengthened my ability to lead cross-functional teams and deliver results-driven solutions.