Problem Statement
METU's digital ecosystem lacked a cohesive design language, resulting in inconsistent user experiences and inefficient development workflows. A unified design system is needed to standardise interfaces, improve usability, and streamline the creation and maintenance of digital platforms. Therefore, a question needed to be asked: how might we create a unified design system that standardises METU's digital ecosystem, enhances user experience, and streamlines design and development processes?
As a testament of its cultural values, 'Revolution' is written on METU's stadium.
A Brief Background About METU
Being a top university and pioneer of cutting-edge technologies in Turkey, METU is the institution that brought the Internet to Turkey for the first time. On the top of these, METU has a culture and a community within itself -- surrounding itself with a well-rooted heritage, imagery, tales, and customs throughout its 60+ years of history built by 100.000+ graduates.
This culture bears highly progressive, steadfast, compassionate, and revolutionary qualities (see image above); due to which, it created a significant impact on its stakeholders and the history of Turkey. This is why it was essential for this system to reflect the values of this institution form the start.
What is METU Design System?
The METU Design System represents an ambitious initiative to unify all information systems at Middle East Technical University under a cohesive design language. Its primary goal is to enable a consistent and seamless user experience across all systems, fostering coherence and usability.
To the best of my knowledge, the METU Design System is the first endeavour of its kind within Turkey's public sector. As a long-term project currently in its development phase (v1.0.0+), the system continues to evolve. Over time, it aims to integrate the entirety of METU's user-facing digital assets, ensuring they can be experienced as a unified and harmonious ecosystem.
A close peek at a few input elements of the Design System
Problem Background
Middle East Technical University (METU) has developed a wide array of systems since its early adoption of internet connectivity. These systems, while functional, exhibited significant eclecticism in their human-computer interaction design. Upon joining METU, I became increasingly aware of these challenges and conducted an in-depth analysis to identify key factors influencing the user experience and system performance:
Scope and Breadth: The extensive IT infrastructure of the university and its affiliates.
User Needs and Expectations: The diverse requirements of both internal and external user groups.
UX-Centric Design: The extent to which the systems were designed with user experience as a central focus.
Processes: The design, development, and maintenance workflows underpinning these systems.
Challenges and Opportunities: The interplay of social and technical factors presenting both obstacles and possibilities for improvement.
This exploration laid the foundation for addressing systemic issues and aligning the systems with modern UX principles.
After spending significant time for researching and understanding the state of the human-facing IT systems, I found a pressing need for consistency and a well-integrated design and development process due to the following reasons that pertain to 200+ systems.
- Significant amount of resources get wasted to maintain a degree of consistency
- Lack of a design pipeline and guidelines cause weaknesses in the outcomes
- Users become prone to mistakes due to the non-uniform behaviour of the systems
- Lack of a UX-centric approach cause significant usability issues
- Aesthetic divergences from the organisational image
After bringing the findings together and asking "How might we overcome these issues in a systemic way?", designing of a design system emerged as the foremost solution to start tackling those issues. In order to resolve the aforementioned issues, I proposed a design system and shared how it might benefit the overall situation of METU's IT systems. Step-by-step, the system's design process started to progress to the next stage as it got approved.
The Process: Research-Design-Test-Incorporate
Expanded design process of METU Design System, with the addition of two incorporation steps: Inclusion step and Expansion/Adaption step.
The design process of METU Design System evolved from implementation of the modern design process 'design thinking' steps. Even though the steps worked well as is initially, it became difficult and hard to apply systemically as what we did was designing for a design tool we utilised throughout the process. Because of that, additional steps (and protocols) were added to what comes after a tested element gets incorporated into the system (see image above).
The revised process became non-linear at this point, which allowed effective testing of the iterations in the expanded library of the greenlit element. Moreover, the incorporated elements became a critical reference when defining the requirements; thus, the subsequent items in the backlog.
Challenges & Design Considerations
Throughout the design process, several challenges influenced the project's trajectory, primarily stemming from resource limitations, organisational dynamics, and external crises. These challenges included:
Dependencies: A wide array of use cases with significant variance that required comprehensive consideration.
Resource Constraints: Limited availability of design and development resources at any given time, impacting the pace and scope of progress.
Social Bottlenecks: Complex bureaucratic processes and a vertically structured organisation, leading to delays and conflicting priorities.
System Conflicts: Multiple interdependent systems introduced constraints and frequent misalignments with the design system, sometimes making resolutions prohibitively resource-intensive.
In addition to these challenges, several critical factors informed decision-making regarding the introduction of new system elements, testing designs, and building the backlog:
Users: The presence of 6–7 distinct user types with diverse needs and interests, requiring tailored solutions.
Institutional Values: The cultural ethos of the organisation and the sentimental value ascribed to the system by its stakeholders.
Historical Context: Existing semantic and semiotic artefacts embedded in the institution’s campuses, histories, and the perceptions of stakeholders.
A still captured in a workshop facilitated in an early iteration of the Design System.
Evaluation & Validation
Evaluation and validation have been an essential part of the whole process. Those efforts justified themselves right from the start: helping in deciding on whether to validate or reject certain element, planning what to do next and preventing greater costs in the future, supporting the design direction through empirical evidence and preventing non-justified interventions.
The methods included participatory design workshops (evaluative and generative), 1:1 interviews, surveys, observations, expert inquiries, and user test sessions. Moreover, user personas were derived as a result of the initial research sessions that were utilised throughout the process. Moreover, analysis and modelling methods such as laddering, user journey diagrams, and cognitive walkthroughs were thoroughly utilised.
Harmony & Versatility: Tints and hues were derived from the main tones that sit at the middle. ↑
Designing I: Specifying the Atoms
Atoms, being the 'atoms', are critical in defining the overall aesthetics and usability of the system while also affecting all variants in the system.
While they go through lots of iterations initially in the progress, the changes made on them become more and more scarce as the system starts to mature. However, it is worth noting that the cost of each change made on the atoms down the line also increases, which also contributes of the scarcity of the later changes.
Designing II: Adopting a Systemic Approach
As the atoms come together, they become higher entities within the Atomic Design approach. The manner they are added together brings great value in terms of versatility, precision, and consistency with each added atom (or element) to the designs.
There are times in which some general rules need to be broken, yet are always broken within the combination set of the design system in which the atoms or elements come together.
Designing III: Building & Scaling-Up Libraries
To fully harness the potential of the METU Design System, a robust library was developed from the ground up, adhering to atomic design principles. This foundational library was meticulously crafted to ensure scalability, consistency, and reusability across all digital assets.
The process began with the smallest building blocks, or atoms, such as buttons, icons, and typography styles. These foundational elements were then combined into molecules, such as input fields paired with labels or navigation components. As the library evolved, these molecules were further assembled into organisms—complex and functional design patterns like headers, footers, and forms.
By following this systematic approach, the library enables:
Scalability: Streamlined development for new features and products, leveraging pre-defined components.
Consistency: A unified aesthetic and interaction pattern across all systems, ensuring a seamless user experience.
Collaboration: A shared resource for designers and developers, fostering alignment and reducing redundant effort.
Efficiency: Faster design-to-development workflows, supported by reusable, modular components.
The atomic design library forms the backbone of the METU Design System, empowering the project to scale effectively while maintaining harmony and coherence across diverse digital platforms. It ensures that every user-facing system, no matter how complex, adheres to a unified visual and functional language.
Shape library of the design system, including token variants: rounding steps, corner booleans, border thickness, border spacing, and (shadow) elevation levels.
Designing IV: Evolution from Atoms to Organisms
Various types of content cards for different use cases.
As the design process advanced to creating higher-level components, such as organisms and pages, user testing played a crucial role in shaping the outcomes. During testing, these components either required fine-tuning or fundamental adjustments to align better with user expectations and behaviours. This iterative process helped bring the designs together, making them purposeful and actionable.
The subsequent stages of the design process involved constructing tailored structures to address specific use cases. These bespoke requirements often revealed unique challenges and constraints, prompting further refinement or additional iterations of the components. In such scenarios, previously defined elements were adapted or expanded, ensuring the system remained flexible and scalable while accommodating evolving needs.
This dynamic refinement process not only enhanced the system's usability but also enriched its library of defined elements, enabling it to cater to a broader spectrum of user requirements and organisational contexts.
"Intelligent Search for Academic Resources": a tailored yet versatile organism.
Key Outcomes: Towards METU DS 1.0 Variants
The design system includes two primary variants, each tailored to specific usage scenarios:
Responsive Websites and Applications: Designed for everyday use, this variant focuses on creating engaging, user-friendly experiences for a wide audience. (See image below.)
Web Apps, Dashboards, and Forms: Optimised for practical, transaction-oriented purposes, this variant caters to systems requiring high functionality and data interaction.
Key distinctions between the two variants lie in their visual and functional nuances. For instance, the second variant employs the strategic use of borders and optimisations to ensure adequate contrast between nested elements and tinted backgrounds. These adjustments enhance clarity and usability in complex, data-driven interfaces.
One of the latest university main page iterations that's designed in v0.9.1 of the Design System.
Since my departure, METU Design System still continues to be developed and expanded by an excellent group of professionals since my departure from the position. Thanks to their efforts and the system's offerings, the system will set a precedent in its field among other education institutions and public offices in Turkey.