Methods: Double Diamond, Atomic Design, benchmarking, component inventory, requirements definition, user interviews, usability testing

Tools: Figma, Google Docs/Sheets, Coda, Notion

Access the prototype / Read the documentation

Context

The Design course at the Federal University of Santa Catarina (UFSC) already had a consolidated visual identity for analogue and audiovisual applications, but faced difficulties in standardizing it for online environments due to the technical limitations of the internal system used to create the university's websites. This situation resulted in pages that were inconsistent and out of line with the course's visual identity.

The challenge was to create a robust and modular design system that would integrate the visual principles of the course into the online environment, while respecting the existing technical restrictions and enhancing the digital experience for teachers, students and visitors.

Methodology

The Double Diamond methodology was used to structure the project, expanding ideas in the research and development phases and focusing more on the definition and delivery phases.

In addition, Atomic Design was applied to create a modular system, where basic elements are combined to form larger, more complex components.

Project stages

Research and Benchmarking

• Survey of existing materials: the course's consolidated visual identity was gathered to understand how to integrate it into the digital environment.

• Benchmarking design systems: design systems from public, educational and university institutions were analyzed to identify essential characteristics and necessary specificities. A comparative framework was created to map recurring components, elements and patterns.

Component Inventory

The current course website was evaluated to understand how the content is organized and to identify patterns and inconsistencies in the visual and functional elements.

Requirements definition

Based on the findings, the necessary components and elements were listed, establishing functional and visual requirements for the design system.

Structuring the Design System

The design system has been organized into five main parts:

• Design principles: the philosophical basis that guides all the other elements, ensuring consistency and alignment with the brand's values.

• Design language: visual fundamentals such as color palette, typography, spacing tokens and visual hierarchy.

• Components: modular elements such as buttons, inputs, checkboxes and selects, each with variants and detailed specifications.

• Templates: functional prototype of the course website, showing the practical application of the design system in desktop and mobile versions.

• Documentation: detailed guide to the use and application of the design system, ensuring consistency between different users and teams.

Tests and results

After development, user tests were carried out comparing the prototypes created with the design system of the current site.

Results:

• Ease of finding information: users reported greater clarity and agility in navigation.

• Improved visual appearance: the new design was described as more modern and in line with the course's visual identity.

The design system brought consistency, accessibility and modernity to the UFSC Design course website, as well as simplifying future implementations and adaptations.