Porto Business School
A modular design system empowering a business school to build pages independently.
Year:
2018
Timeframe:
5 months
Tools:
Sketch, Photoshop
Category:
Design Systems, UI/UX
Overview
Building a Modular System for Business Education
Porto Business School needed a flexible design system that would let them independently create and manage pages for their diverse MBA programs, courses, events, and institutional content without relying on designers for every update.
Problem
Their original website severely lacked the information needed to effectively sell courses or promote events. Content was difficult to update, pages were inconsistent, and the site wasn't equipped to handle the variety of programs and events a business school needs to showcase. They needed autonomy to build pages quickly while maintaining quality and consistency.
Solution
Working with a team of 4 designers, 2 UX designers, and 4 developers, I designed modular website components including headers, navigations, content bodies, image galleries, event calendars, and signup boards. We also built an early AI chatbot. Everything was backed by a simple Umbraco CMS where the client could assemble pages themselves before publishing. The system gave PBS the flexibility to create whatever they needed while maintaining design consistency across the entire site.
Impact
Traffic increased 200%. Course enrollments rose significantly. The site earned an Awwwards Honorable Mention for Site of the Day and a Special Kudos from CSS Design Awards. Most importantly, PBS gained the autonomy to manage their own content and launch new programs without designer dependency.
Role
UI Designer
Responsibilities
Designed modular component library, established design system foundations, designed early AI chatbot interface and actively contributed to research efforts.
Collaborators
Worked with 4 designers, 2 UX designers, and 4 developers and frequently aligned with the client.
Key Challenges
Balancing flexibility and consistency across two fronts: designing modules that PBS staff could assemble without creating chaos, while coordinating with 4 designers, 2 UX designers, and 4 developers as the most junior voice on the team. Every decision required advocating for system-wide standards while ensuring non-designers could build professional pages independently.
Research
Stakeholder interviews revealed PBS's core workflow challenge: they were building new program and event pages constantly, but had no reusable system. Each page started from scratch. Through a content audit, we identified 8 core page types and 15 recurring patterns (headers, course grids, event calendars, faculty showcases). These patterns became our modular component library, designed to be assembled rather than redesigned each time.
Disconvery 1: Inconsistent Content Presentation
The original website had no content standards. Every program announcement used a different layout, stock imagery treatment, and text hierarchy. MBA Executivo, Pós-Graduações, Curso Geral, and Formação para Executivos all competed for attention with completely different visual approaches. There was no systematic way to present programs, events, or course information. Everything was custom-built, making updates difficult and creating a cluttered, inconsistent experience. The homepage alone showed five different content presentation styles with no unifying structure.
Disconvery 2: Recurring Content Patterns
Despite the chaos, patterns emerged from the audit. PBS needed to communicate 8 core page types repeatedly: program pages, event announcements, faculty profiles, course catalogs, news articles, research showcases, student testimonials, and institutional information. Within these, 15 content modules appeared consistently but without standardization: headers, course grids, event calendars, faculty cards, image galleries, quote blocks, signup forms, and navigation patterns. The elements existed, but each instance was built from scratch.
Discovery 3: Designer Dependency Bottleneck
PBS staff needed to launch new programs, update course offerings, and announce events constantly, but every content change required designer intervention. There was no self-service system for building pages, creating bottlenecks that prevented PBS from moving at the pace their business demanded. They needed the autonomy to assemble professional pages independently while maintaining quality and brand consistency. Something the current site structure made impossible.
Building the Foundations
Before designing individual modules, we needed to establish the system's foundation. We created a comprehensive style guide that defined typography scales, color palettes, spacing systems, and grid structures. This wasn't just about visual consistency. It was about giving PBS guardrails that made it impossible to create ugly pages, even when assembled by non-designers.
Creating Design Standards
These technical rules fed into a comprehensive style guide covering every design decision: typography hierarchies, color palettes with usage guidelines, iconography, button styles, form elements, image treatments, and component variations. The style guide became the single source of truth for the entire system.
From Modules to Pages
Before designing individual modules, we needed to establish the system's foundation. We created a comprehensive style guide that defined typography scales, color palettes, spacing systems, and grid structures. This wasn't just about visual consistency. It was about giving PBS guardrails that made it impossible to create ugly pages, even when assembled by non-designers.
Designing for Non-Designers
PBS staff weren't designers. They needed to assemble pages without understanding grid systems, visual hierarchy, or spacing principles. Every module had to work no matter how it was combined, requiring extensive testing of "bad" combinations to build in guardrails that prevented chaotic layouts without feeling restrictive.
Traffic increase
Honorable Mention - Site of the Day
Special Kudos
