What is METU Design System?
METU Design System is an effort to bring all information systems of Middle East Technical University under a single design language for enabling a coherent way of interacting with all the systems and whatnot. Moreover, METU DS is the first public-sector design system creation endeavour in Turkey, to my best knowledge.
The system is in development process (v1.0.0+) as a long term project and continues to grow, it will bring together all the systems until the entirety of METU's user-facing digital assets can be experienced in unity and harmony!
As a testament of its cultural values, 'Revolution' is written on METU's stadium.
The Context and Design System
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.
A close peek at a few input elements of the Design System
Defining the Problem & Exploring the Solutions
METU, as mentioned above, accumulated lots of systems since the beginnings of its Internet-connected status. The university was and is being run on lots of systems that functioned in an eclectic manner in terms of human-computer interaction. Since starting to work for METU, these issues started to grab my attention; due to this reason, I examined the factors that included:
- Scope and breadth of the IT of the university and its affiliates
- The needs and expectations of internal and external types of users
- To what degree the systems were designed in a UX-centric way
- The design, development, and maintenance processes
- Social and technical challenges & opportunities
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+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 of the systems hurt 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
There have been a number of challenges that affected the process due to the availability of resources, crises, and the organisational composition. These are as follows:
- Dependencies: High number and variance of use cases that need to be addressed
- Resources: Limited development and design resources available at any given time
- Social Bottlenecks: Intricate bureaucracy and vertical organisational structure, causing hinderances in progress and synthetic conflicts in interests
- Conflicts: Lots of systems mean lots of constraints in their capabilities and conflicts with the design system, being too costly to overcome at times
In addition to these, there were a number of considerations that have been critical in making decisions for including new elements to the system, testing the designs, and building the backlog.
- Persona: Existence of 6-7 types of users (thus persona) with varying needs/interests
- Values: Cultural values of the institution and sentimental appraisal of system
- History: Existing semantic and semiotic entities/artefacts that exist in the campuses, histories, and minds of the stakeholders
Researching: Evaluation, Generation & Validation
A still captured in a workshop facilitated in an early iteration of the Design System.
Research has been an essential part of the whole process. Research 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.
Designing: Specifying the Atoms
Harmony & Versatility: Tints and hues were derived from the main tones that sit at the middle. ↑
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: 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: Building & Scaling-Up Libraries
To be able to utilise the potential of the Design System w/ atomic foundations, a library was needed to be built from ground-up -- beginning from the smallest atoms up until creating fully expanded organisms.
Shape library of the design system, including token variants: rounding steps, corner booleans, border thickness, border spacing, and (shadow) elevation levels.
Designing: Evolution from Atoms to Organisms
Various types of content cards for different use cases.
Upon building higher-level components that make sense to the users such as organisms and pages, either fine-tunings/rebuttals were required (in testing phase) or the designs started to come together to be utilised for a purpose. Rest of the design process involved building the structures tailored to certain use cases; however, some of the more specific requirements become apparent due to their unique requirements. In such cases, incorporated elements get refined or iterations are added to them: further expanding the system's defined elements.
"Intelligent Search for Academic Resources": a tailored yet versatile organism.
Designing: When the Things Come Together
The design system has two main variants for different use scenarios: the first one is used for designing responsive websites and applications for everyday use (see image below); on the other hand, the second one is for web-apps, dashboards, and forms, all of which serve practical purposes that involve transactions.
There are a few nuances between them: one is the utilisation of borders and optimisations that allow adequate contrast between nested items and tinted backgrounds in the second variant.
One of the latest university main page iterations that's designed in v0.9.1 of the Design System.
Nowadays, 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.