School of Architecture at UFMG

School of Architecture

Story

School of Architecture and Design at UFMG

UI/UX and Web Design

Solving core usability issues through an updated information architecture and a new visual design system.

An updated visual identity to accompany a company’s SaaS as it joins the web ecosystem.

The School of Architecture and Design at UFMG (EAD UFMG), home to its namesake programs, is a prestigious institution, but its official website was failing to meet its community’s needs. The portal, which is crucial for academic processes like consulting courses and registering for internships, was a source of frustration to many of its users. The interface was confusing, the navigation was fragmented, and the visual design was dated and disorganized.

The problem was critical, with 86% of students reporting difficulty finding what they needed on the site, forcing them to rely on informal group chats for essential information.

I led a voluntary UX/UI end-to-end project, and my challenge was to diagnose and improve its usability issues. This was not a re-branding project, but rather an exercise in pragmatic, research-driven design. The goal was to fix the experience under real-world constraints, not just provide a creative visual overhaul.

Core objectives:

Conduct deep research, including heuristic analysis, user surveys, and stakeholder interviews, to find the user pain points and define project requirements.

Use those findings to design a new, logical Information Architecture and a consistent, accessible UI Kit.

Develop and launch a functional beta to prove, with quantitative and qualitative data, that the new design solved the core problems.

Prioritizing a pragmatic approach

My research confirmed that the core problems were functional, not just visual. Users were frustrated by the chaotic navigation, the fragmented 12-category information architecture and inconsistent elements.

Therefore, I made the decision to adopt an intentionally pragmatic visual and structural approach. Instead of a significant break from the School’s visual identity, thus leading to a time-consuming creative rebrand, I focused my effort on systematizing and improving the existing identity. This allowed me to prioritize more pressing issues, such as fixing the navigation, improving usability and creating a logical site structure.

The new visual system

The visual approach was derived directly from the School’s strong modernist identity. I analyzed the existing logo, characterized by sharp edges and geometric shapes, and used it as the foundation for the new UI’s visual direction. This translated into a minimalistic and serious approach that favors expansive white space, low visual weight, and clean photography over illustration.

This philosophy of clean, structural design, which mirrors the school’s own architecture, was applied to every component.

LAYOUT AND COMPONENTS

As a direct mirror to the logo’s symbol, sharp corners were applied to all UI components, such as boxes and cards. Clean, single-pixel lines were also used to create division and structure, reinforcing the site’s architectural and modernist feel.

TYPOGRAPHY

I selected the DM Sans typeface for two reasons:

Brand harmony: given that the original website’s logo did not include a type component, it was important to choose a font that harmonized well with it. DM Sans, a geometric sans-serif, was a good fit.

Functional clarity: due to its tall x-height, DM Sans offers great legibility, even at small sizes, making sure that the website remains accessible and the text pleasant to read.

COLOR PALETTE

In order to maintain brand compliance with UFMG and maintain a good sense of familiarity, I intentionally adopted a monochromatic palette, maintaining the institutional red and expanding it into a fuller, more versatile palette (red, red vivid, grays). This helped create a clearer visual hierarchy, improving the color chaos of the original site.

UI COMPONENTS

My approach to building the UI Kit was very focused on problem-solving: every component was designed to solve a specific, researched problem.

For example, research showed that critical information and deadlines were being lost in long blocks of text. To solve this, I created a “page notes” component to visually highlight essential information, guaranteeing that critical warnings were seen immediately by students.

Impact and project takeaways

To validate the new design, I built and launched a functional beta version using Framer, releasing it to the student community. The beta received 196 unique visitors, and 43 feedback responses, which showed definitive improvement in:

Functionality: user ratings jumped from 41% negative (on the original site) to 88% positive (“Good” or “Very Good”).

Visual Design: user satisfaction improved from a 49% negative rating to 91% positive.

Overall experience: 93% of users rated the new design as “Good” or “Very Good”.

The data indicates that the pragmatic approach was able to improve on the site’s core usability and visual hierarchy problems to a great degree.

Personal takeaways

This project was a great exercise in balancing pragmatism and creativity, especially in complex projects that are under tight time constraints. Being able to tap into a more analytic and logical side of design, compared to branding-focused projects, was also a deeply rewarding experience.

NEXT PROJECT

Portal Bonito

Icon system design

Designing a custom icon system to translate unique local fauna and culture into functional UI assets.

NEXT PROJECT

Portal Bonito

Icon system design

Designing a custom icon system to translate unique local fauna and culture into functional UI assets.

About me

My work