ENVE

Web Design

The Environmental Engineering (ENVE) program is a joint degree program between the University of British Columbia and the University of Northern British Columbia.

The decision to redesign was initially based on the website's outdated look. In auditing the website, we found that the information architecture and content design was lacking as well.

Designer &
Project manager

Figma, Google Analytics, Wordpress

After discussing with stakeholders, the goals of the project were established:

1) Apply and integrate the APSC Design system to make the website consistent and easily maintainable in following years

2) Improve student and faculty user journeys to make it easier to find the information they need

goals

To provide some context, the ENVE website was launched many years ago. Directors and visitors of the site felt that it was too “old-fashioned” and wanted to upgrade the site to adopt the UBC Applied Science (APSC) Faculty’s new design system look.

This screenshot features the ENVE website when the project first started.

The ENVE website's design was not coherent with the APSC Faculty's new design system look, which has been implemented in other program sites like Chemical and Biological Engineering.

content audit

To inform the 2 goals, I first conducted a content inventory and audit. The goal of the content audit and inventory was to understand existing content and uncover areas of the site that could be improved, and removed.

Take aways

There were a total of 48 pages existing on the website, “Poor” or “Average” quality ratings were assigned to ~half of those pages due to the following:

Poor layouts for information presentation --> which made it overwhelming to scan through content
Confusing information architecture --> which made it difficult for users to navigate the site
Duplicate, irrelevant, or outdated pages --> which cluttered search results and reduced content relevance

competitive analysis

I examined 7 APSC program websites + other Canadian Environmental Engineering program websites to 1) provide a benchmark for evaluating ENVE, and 2) identify innovation opportunities where ENVE could be updated. I noted the following common features:

Facts and figures

Other programs used short, concise facts and figures to market their themselves. Clear keywords let users quickly digest information, instead of having to read through a long paragraph.

Student and faculty news

Other programs provided up to date news of the students and faculty involved in their community. Photos and news titles help users quickly understand what's happening with the program.

Strategic linking

Other programs invite users to explore the rest of their site through strategic linking. These CTAs offer more entry points to direct users to relevant and valuable information.

design

Knowing what we learned in the content audit and competitive analysis, the designs focus on improving the site's content layout and elements and navigation bar structuring.

Content layout and elements

I designed new APSC design system components previously not found on the site,

Snapshots at a glance banner

Banner CTA

News cards

updated outdated elements to the existing design system,

Side menu

and improved readability by shortening text width and content.

Navigation bar structuring

To restructure the nav bar, I first started off by seeing what pages could be combined together. For example, previously there were program requirements and degree requirements, but in restructuring we decided to combine these pages together for less redundancy.

Then I looked at the site's analytics information. I noted the pages that were getting very little views and then pushed for the removal of 7 pages, which the stakeholders agreed to.

48 pages -> 22 pages

Referencing the menus on other APSC pages, we also noted down what the commonly used menu headers were. The end result was a revamped top level menu structure that reduced its pages by half.

Final designs

The images below show some of the before and afters of ENVE pages that I redesigned.

Home Page

Future Students Page

Student Resources Page

reflections

This project was the first time I took the lead on the redevelopment of a website (while also taking up the role of project manager at the same time), and I definitely learned a lot from it.

Time constraints

One thing I learned was that when working under time constraints (as designers always are), it’s important to divide my time up at the beginning so that I don’t spend too long on one thing. I spent more time than I should have on certain things because I wanted the outcome to be better. But it's important to be able to let go of certain tasks, and make compromises so I'm not stuck on the same thing for too much of my work hours.

Keeping an open mind

Since this project was completed in a small team, I had to develop some flexibility with my skills in that I learned how to do things that developers would typically be in charge of. The lesson that I learned here is that in order to achieve a successful project within the constraints that I'm given, keeping an open mind to learn new things outside of my typical responsibilities helps to 1) support the members of my team, and 2) get things done.