Portland Community College homepage - desktop web design

PCC website

Category: Web design
Client: Portland Community College
Year: 2013-present

Working as the one-and-only web designer for Portland Community Collage since 2013, I’ve done a complete overhaul of the pcc.edu website and front-end codebase. I maintain the CSS libraries and content components for our team and a large body of editors.

Web design for a higher purpose

Portland Community College (PCC) is Oregon’s largest higher education institution, serving approximately 71,000 students. What does that mean from a design perspective? That my team and I have to provide a website that is usable for everyone, everywhere. It needs to be responsive, fully accessible, look good, and be intuitive to use on any semi-modern device. Sound like a tall order? It is.

PCC homepage on phone and tablet

pcc.edu homepage mobile web designs

Our thousands and thousands of pages need to be easy to navigate, and our thousands and thousands of users (current students, prospective students, faculty, staff, parents, partners, and the public) need to be able to find what they need, fast.

Our team of seven, including me, do keep busy.

PCC programs page - desktop web design

Academic Programs page

PCC programs page - mobile

Academic Programs page – mobile web designs

Usability is at the heart of what we do

Alongside my team members (our manager, two developers, one web analyst, and two content specialists), I work every day to make our suite of websites and applications as usable as possible. Ease of navigation, accessibility, a clean design, and student-focused content are some of our largest goals when working on the website ourselves and with staff around the college.

PCC content page examples on mobile

Get started mega menu, content page, tile layout

Organize, organize, organize

I’ve created an assortment of content components to make sure that content is easy to scan and read. The correct use of headings is important, but the ability to break up content with callouts, lists, tabs, expandable accordions, images or icons, calls to action buttons, and more are even better.

PCC about page

Basic content page

PCC financial aid page web design

Content page with various organizational components

PCC tab interface web design

Tab interface and callout box

PCC accordion / expandable sections interface

Expandable accordion sections