UBC CCEL Website Redesign

Overview

UBC CCEL is a branch of UBC; in collaboration with university and community partners, CCEL provides opportunities for students to apply their knowledge and skills to address critical social and environmental issues. In my role as a student worker, I was tasked with the design and development of the CCEL website.

Problem

The old CCEL website was static, difficult to navigate, and didn’t provide strong value for UBC students, faculty, or community partners. Hosted on WordPress and built with the Gutenberg block editor, it proved to be a tricky website project, requiring an approach that emphasized addressing the existing UX problems. With such an extensive range of programs and resources under CCEL’s portfolio, the project required reorganizing information architecture and determining how such a large quantity of content would be housed on the site.

Process

1. Establish Website Purpose and Goals

‍One of the first steps of this website project was determining the key audiences and engagement goals for CCEL. Understanding who would be going to the website and how they would be using it would be critical for the UX design.

‍2. Map out Website and Wireframing

‍After mapping out the user flows, our team used InVision to create wireframes for the new CCEL website and layouts for content.

3. Draft Pages on WordPress‍

From there, I transformed the InVision wireframes into pages on WordPress using the Gutenberg block editor.

4. Populate Content, Implement Feedback and Launch‍

The final step was meeting with different CCEL teams to get content for the website and implementing their feedback on the website layout. Pages of the new website were launched on a rolling basis.

Solution

The new CCEL website was dynamic, user-friendly, and had more intuitive user flows for finding critical programming information or resources. I focused especially on eliminating unnecessary scrolling, including only information most relevant to the intended audiences, and setting up a website that would be easy to maintain. Of particular note is the new home page, which featured a video to “put a face to a name” for CCEL.

Challenges

• Working with different teams to get their content for the website and integrating all the content into the new design of the site.
• Critically assessing the existing infrastructure to determine what would stay and what had to go — the extensive body of resources and content created by CCEL meant that it was difficult to simply start from scratch.
  
• The Gutenberg block editor was hard to work with, what I saw on the backend was not what I would see on the frontend preview.

Key Learnings

• Know the purpose of a website, who the intended audience is, and how it should serve that audience.
• Gutenberg is painful.
  
• Read more: What I Learned as a Work Learn Student at UBC CCEL