University Department Website Design
University Department Website Design
A lightweight and optimized academic website that helps students and faculty access their needed information quickly.
A lightweight and optimized academic website that helps students and faculty access their needed information quickly.
Product Design
2023
Landed Professional Project
Website
My Role
Lead Product Designer
UX Research + Testing
Lead Product Designer
UX Research + Testing
Team
Dr. Kirsten Hodge (Project Manager)
Vincent Wu (Developer)
Dr. Kirsten Hodge (Project Manager)
Vincent Wu (Developer)
Timeline:
Sept 2022 - Sept 2023
Sept 2022 - Sept 2023
Overview
My Impacts At a Glance
My Impacts At a Glance
As the Lead UX Designer in the team, I…
As the Lead UX Designer in the team, I…
Designed and shipped end-to-end flow for Home, Undergrad, Grad, About, and Research Pages.
Designed and shipped end-to-end flow for Home, Undergrad, Grad, About, and Research Pages.
Conducted 8 in-person moderated usability tests to observe usability issues for the new design. (SUS 84.5)
Conducted 8 in-person moderated usability tests to observe usability issues for the new design. (SUS 84.5)
Promoted the importance of accessibility in UX design, using WCAG standards, real-time searches, and pagination.
Promoted the importance of accessibility in UX design, using WCAG standards, real-time searches, and pagination.
Outcome
University Department website used by all department current & prospective students and faculty members
University Department website used by all department current & prospective students and faculty members
Hi-fi Prototypes of Home Page, Prospective Grad Students Page, and People Page
Business Goals
Success Metrics
Success Metrics
Objectives
Objectives
Our main goals for this project
Our main goals for this project
Give a distinctive voice to the website
Be explicit about how the work of EOAS connects to people
Showcase the faculty members, research groups, and department achievements.
The end product has to be lightweight yet usable.
Give a distinctive voice to the website
Be explicit about how the work of EOAS connects to people
Showcase the faculty members, research groups, and department achievements.
The end product has to be lightweight yet usable.
Constraints
Constraints
What are the restrictions we need to balance?
What are the restrictions we need to balance?
There are a lot of department stakeholders
Adhering to an existing brand guideline while still designing a unique look in mind
To achieve a lightweight website, certain pages can not be hosted.
There are a lot of department stakeholders
Adhering to an existing brand guideline while still designing a unique look in mind
To achieve a lightweight website, certain pages can not be hosted.
Business Outcome
Business Outcome
How might this project benefit the team / EOAS department?
How might this project benefit the team / EOAS department?
Increased MAU - achieve this by working with social media team to promote the website.
Increased student registration for EOAS courses
Increased user retention per session
Increased MAU - achieve this by working with social media team to promote the website.
Increased student registration for EOAS courses
Increased user retention per session
Discover
Research Goals
Research Goals
Identify usability issues of the current website
Identify user pain points when using the current website
Identify how users overcome the issues they meet on their own
Observe how UBC students are interacting with department websites in general
Identify usability issues of the current website
Identify user pain points when using the current website
Identify how users overcome the issues they meet on their own
Observe how UBC students are interacting with department websites in general
Methods
Methods
Online Survey
Interview
Existing website analysis
Online Survey
Interview
Existing website analysis
Discover
Research Findings
Research Findings
Survey Finding 1
82%
of students use department website to look for courses to take
of students use department website to look for courses to take
Survey Finding 2
55%
of users feel frustrated when trying to find needed information on the website
of users feel frustrated when trying to find needed information on the website
Survey Finding 3
37%
of students find current website confusing to navigate
of students find current website confusing to navigate
Interview Finding
I am an EOAS grad student looking to start my research under a professor, but I have trouble knowing which professor is open to accepting new research students. The current website does not offer this information unless I click into EACH professor and check one by one.
It's so time consuming!
I am an EOAS grad student looking to start my research under a professor, but I have trouble knowing which professor is open to accepting new research students. The current website does not offer this information unless I click into EACH professor and check one by one.
It's so time consuming!
Interview Finding
I am a professor at the Department of EOAS and I am the PI of a research group full of hardworking student researchers. I need a space to host all of the projects and achievements from my research group. But I am too busy to build my own website. I also need a way to tell everyone that my group is hiring new student researchers.
I am a professor at the Department of EOAS and I am the PI of a research group full of hardworking student researchers. I need a space to host all of the projects and achievements from my research group. But I am too busy to build my own website. I also need a way to tell everyone that my group is hiring new student researchers.
Discover
Initial Site Analysis
Initial Site Analysis
What it was lacking
What it was lacking
Initial Faculty Page
Messy site hierarchy: the faculty page is under About page, a tertiary page that has to go through 3 clicks to find. It is too important to be hidden.
Messy site hierarchy: the faculty page is under About page, a tertiary page that has to go through 3 clicks to find. It is too important to be hidden.
No way to tell which professor is looking for new research students.
No way to tell which professor is looking for new research students.
The filter options are out of date.
The filter options are out of date.
Confirmation filter button can be unnecessary in this case, it increases interaction cost since users already selected an option in the drop-down.
Confirmation filter button can be unnecessary in this case, it increases interaction cost since users already selected an option in the drop-down.
What it was doing well
What it was doing well
Initial Faculty Page
The menu bar displays clear options.
The menu bar displays clear options.
The emails can be spotted at first glance.
The emails can be spotted at first glance.
Breadcrumbs provides navigation help.
Breadcrumbs provides navigation help.
This is an sample of one of the many site analysis I did before starting to explore solutions towards our goal.
This is an sample of one of the many site analysis I did before starting to explore solutions towards our goal.
Discover
Site Mapping
Site Mapping
IA Map (partial)
Since this project has an extensive scope, we started by mapping out the entire original website to get a clear idea of the current information architecture. With the bird's eye view, we realized that:
There are too many sub-pages (even quinary pages!) and a lot of important information is buried within these pages, even when they are important enough to be in primary pages.
The current format of pagination breaks content from the same topic into multiple pages and tabs, which interrupts the user flow.
To create a light-weight and straight-forward website, we can consider different ways of organizing information.
Since this project has an extensive scope, we started by mapping out the entire original website to get a clear idea of the current information architecture. With the bird's eye view, we realized that:
There are too many sub-pages (even quinary pages!) and a lot of important information is buried within these pages, even when they are important enough to be in primary pages.
The current format of pagination breaks content from the same topic into multiple pages and tabs, which interrupts the user flow.
To create a light-weight and straight-forward website, we can consider different ways of organizing information.
Define
Problem Statement
Problem Statement
Students and faculty need a way to quickly and easily access high-quality information about the Department of EOAS, because the website is currently overwhelming and confusing, especially when students are selecting courses and finding a faculty member to research with.
Students and faculty need a way to quickly and easily access high-quality information about the Department of EOAS, because the website is currently overwhelming and confusing, especially when students are selecting courses and finding a faculty member to research with.
Define
Product Direction
Product Direction
How might we create a lightweight yet useful website with clear directions and information organization to help students and faculty access their needed information?
How might we create a lightweight yet useful website with clear directions and information organization to help students and faculty access their needed information?
Ideate
Infinite Scrolling or Pagitation
Infinite Scrolling or Pagitation
Trade-off Decisions were made…
Trade-off Decisions were made…
Option 1
Infinite Scrolling with Anchor Menu
Infinite Scrolling with Anchor Menu
We experimented with infinite scrolling to create a seamless experience for users, here are the pros:
We experimented with infinite scrolling to create a seamless experience for users, here are the pros:
Reduce interruptions: create seamless experiences with fewer clicks.
Reduce interruptions: create seamless experiences with fewer clicks.
Reduce interaction cost: by scrolling, the content loads continuously and lets the user stay engaged.
Reduce interaction cost: by scrolling, the content loads continuously and lets the user stay engaged.
Reduce tertiary pages: when sub-pages are merged into one page as different sections, the user flow become simpler.
Reduce tertiary pages: when sub-pages are merged into one page as different sections, the user flow become simpler.
Option 2
Traditional Pagination with Regular Menu
Traditional Pagination with Regular Menu
But we are also considering sticking with pagination because:
But we are also considering sticking with pagination because:
Goal-oriented finding: as a student-facing university website hosting important information, this is our no.1 goal.
Goal-oriented finding: as a student-facing university website hosting important information, this is our no.1 goal.
Clear site hierarchy: when each page is distinct, the site can be more organized than using infinite pages.
Clear site hierarchy: when each page is distinct, the site can be more organized than using infinite pages.
Reduced load for server: having separate pages is easier for SEO, and it takes the weight off from the server hosting heavy pages.
Reduced load for server: having separate pages is easier for SEO, and it takes the weight off from the server hosting heavy pages.
After many meetings with our developers...
After many meetings with our developers...
We can not use infinite scrolling because of technical feasibility. We were unable to code the anchor menu to display the user's current location in an infinite scrolling design.
Also, a user's sense of where they are is too important to give up.
However, we are able to make the menu on the left float on the center of the screen, so that users will not need to scroll up every time to find the menu.
We can not use infinite scrolling because of technical feasibility. We were unable to code the anchor menu to display the user's current location in an infinite scrolling design.
Also, a user's sense of where they are is too important to give up.
However, we are able to make the menu on the left float on the center of the screen, so that users will not need to scroll up every time to find the menu.
Ideate
Reorganizing Content To Encourage User Exploration
Reorganizing Content To Encourage User Exploration
Twitter Feed
Twitter Feed
Weather Forecast
Weather Forecast
Button: More Events
Upcoming Events
Button: More Events
Weather Forecast
Weather Forecast
Donation CTA
Instagram Feed
Upcoming Events
Original Content Display - Bottom of Home Page
Original Content Display - Bottom of Home Page
More Events Button placement is illogical, with Weather Forecast blocking it relationship with the Upcoming Events Section.
Content Boxes lengths looks imbalanced.
EOAS offers a one and only Weather Forecast that is considered as the department’s pride. The original design looks neglectable and does not feel clickable since this leads to it’s own page.
Proposed Redesign
Upcoming Events section is horizontal
Content Boxes are designed to have a balanced length.
Twitter feed is discarded since the Social Media Team is prioritizing Instagram content now.
Preview current weather forecast to give users updated information as the first thing they see. Also encourages the users to see more on EOAS’s weather station.
Adding a Donate & Give section per the request of the department directors, to raise more funds for the department in a less conspicuous place.
Original Content Display - Bottom of Home Page
More Events Button placement is illogical, with Weather Forecast blocking it relationship with the Upcoming Events Section.
Content Boxes lengths looks imbalanced.
EOAS offers a one and only Weather Forecast that is considered as the department’s pride. The original design looks neglectable and does not feel clickable since this leads to it’s own page.
Proposed Redesign
Upcoming Events section is horizontal
Content Boxes are designed to have a balanced length.
Twitter feed is discarded since the Social Media Team is prioritizing Instagram content now.
Preview current weather forecast to give users updated information as the first thing they see. Also encourages the users to see more on EOAS’s weather station.
Adding a Donate & Give section per the request of the department directors, to raise more funds for the department in a less conspicuous place.
Iterate
Help Users Categorize Information Using People Page Menu Bar
Help Users Categorize Information Using People Page Menu Bar
Iterate
Directing Users with Home Page Nav Cards
Directing Users with Home Page Nav Cards
Adding “Researcher” as an option to increase exposure to the researcher directory page.
Adding “Researcher” as an option to increase exposure to the researcher directory page.
Updated Graphics: from “briefcase” to “ a team of people” the graphic is updated to reflect a people-first working environment at EOAS. From “name-card” to “chat boxes, an updated form of communication is reflected on Connect with Us.
Updated Graphics: from “briefcase” to “ a team of people” the graphic is updated to reflect a people-first working environment at EOAS. From “name-card” to “chat boxes, an updated form of communication is reflected on Connect with Us.
Menu Cards: adding a light background to each section to make them in to cards for a more organized content hierarchy.
Menu Cards: adding a light background to each section to make them in to cards for a more organized content hierarchy.
Alignment: final design is center-aligned to provide a triangular hierarchy that looks the most balanced.
Alignment: final design is center-aligned to provide a triangular hierarchy that looks the most balanced.
Shadow is added to imitate a real-life card-like look and feel
Shadow is added to imitate a real-life card-like look and feel
Iterate
Showcase Events & Help Users Make Informed Decisions
Showcase Events & Help Users Make Informed Decisions
The Upcoming Events section went through 2 iterations. Version 1 emphasized the Title of each event, but these events imply attendance, therefore time and date should be the first thing that people need to know first - not the title.
Version 2 makes the time, date, and location more noticeable and right beside each other, it saves the user time to make a decision on whether they are going or not.
“Short-title & Summery” format is discarded, as these events are filled in by department staff and some events do not have a title. Some events, like Thesis Defense, has especially long titles. It is also time-consuming to track down Speakers and ask them to come up with a short title, there fore Version 2 is designed for longer titles (or summary).
The Upcoming Events section went through 2 iterations. Version 1 emphasized the Title of each event, but these events imply attendance, therefore time and date should be the first thing that people need to know first - not the title.
Version 2 makes the time, date, and location more noticeable and right beside each other, it saves the user time to make a decision on whether they are going or not.
“Short-title & Summery” format is discarded, as these events are filled in by department staff and some events do not have a title. Some events, like Thesis Defense, has especially long titles. It is also time-consuming to track down Speakers and ask them to come up with a short title, there fore Version 2 is designed for longer titles (or summary).
High-fidelity Design
Typography and Colours
Typography and Colours
We took the original department of EOAS forest green and made some variation of it.
We took the original department of EOAS forest green and made some variation of it.
Design
Final Solution Highlights
Final Solution Highlights
01
Turn highly used pages from secondary to primary pages.
Turn highly used pages from secondary to primary pages.
Mega Nav Menu Original
Mega Nav Menu Final
I moved things around the mega menu. The People page and News page were initially both secondary pages under About Page. They are the two most frequently visited pages on the website, therefore I turned them into primary pages and made design changes accordingly.
I moved things around the mega menu. The People page and News page were initially both secondary pages under About Page. They are the two most frequently visited pages on the website, therefore I turned them into primary pages and made design changes accordingly.
User Pain-point Recall: Confusing Information Organization
Students often find themselves buried deep in the website secondary and tertiary pages, there are many unnecessary sub-pages with important important that should be easy to find.
02
Find People In the Quickest Way Possible
Find People In the Quickest Way Possible
People Directory Page Final Design
People Page Final Design
People Page Final Design
Find People in the quickest way possible
Site hierarchy: initially a tertiary page, People Page became a primary page, visible at the topmost Nav menu.
Site hierarchy: initially a tertiary page, People Page became a primary page, visible at the topmost Nav menu.
Tab menu design: the tabs gives a cohesive feeling for each people category. The users will not feel like they are exiting a page to enter the next.
Tab menu design: the tabs gives a cohesive feeling for each people category. The users will not feel like they are exiting a page to enter the next.
Faculty as the landing page: a people landing page is discarded as it increased interaction cost. Now People page opens up with “Faculty Tab”, which is the most frequently visited tab.
Faculty as the landing page: a people landing page is discarded as it increased interaction cost. Now People page opens up with “Faculty Tab”, which is the most frequently visited tab.
Toggle design: on and off toggle can filter out professors who are accepting students. This makes them easier to find at a glance.
Toggle design: on and off toggle can filter out professors who are accepting students. This makes them easier to find at a glance.
Filter design: filter options are updated after hearing feed backs from the faculty.
Filter design: filter options are updated after hearing feed backs from the faculty.
Photo grids: the design is adjusted to accommodate the new head-shot initiative, now showcasing new photos for every faculty member.
Photo grids: the design is adjusted to accommodate the new head-shot initiative, now showcasing new photos for every faculty member.
accepting
students
User Pain-point Recall: Hard to find information
Grad students have trouble knowing which professor is open to accepting new research students.
Grad students have trouble knowing which professor is open to accepting new research students.
04
A Home Page as a User Directory and Showcases the Department
A Home Page as a User Directory and Showcases the Department
Home Page Final Design (Top Section)
Design Rationals
Direct Users to Find their Needed Information
Direct Users to Find their Needed Information
Site Hierarchy: Frequently visited People Page and News Page became Primary Pages, visible at the topmost Nav menu.
Site Hierarchy: Frequently visited People Page and News Page became Primary Pages, visible at the topmost Nav menu.
Above the Fold: Full-screen “Above the Fold” for immersive and inviting experience.
Above the Fold: Full-screen “Above the Fold” for immersive and inviting experience.
Easy to find: Direct buttons to Admissions for prospective students seeking information.
Easy to find: Direct buttons to Admissions for prospective students seeking information.
Fun interactivity: “Join Us” is an anchor which scrolls user to “Join Us”. The button name matches the section name.
Fun interactivity: “Join Us” is an anchor which scrolls user to “Join Us”. The button name matches the section name.
Organized directory: Menu Cards help users who are browsing with a goal in mind.
Organized directory: Menu Cards help users who are browsing with a goal in mind.
User Pain-point Recall: Confusing Information Organization
Students often find themselves buried deep in the website secondary and tertiary pages, there are many unnecessary sub-pages with important important that should be easy to find.
User Pain-point Recall: Confusing Information Organization
Students often find themselves buried deep in the website secondary and tertiary pages, there are many unnecessary sub-pages with important important that should be easy to find.
Students often find themselves buried deep in the website secondary and tertiary pages, there are many unnecessary sub-pages with important important that should be easy to find.
Home Page Final Design (Lower Section)
Design Rationals
Design Rationals
Showcase the Department and What They Offer
Showcase the Department and What They Offer
Upcoming events are grouped horizontally, with emphasis on Time and Date for easier decision making.
Upcoming events are grouped horizontally, with emphasis on Time and Date for easier decision making.
Department Branding: Showcasing the department’s pride in the EOAS rooftop weather station, encouraging users to click in and see more.
Department Branding: Showcasing the department’s pride in the EOAS rooftop weather station, encouraging users to click in and see more.
Working with cross-functional team, a preview of IG feed is shown instead of a Twitter feed.
Working with cross-functional team, a preview of IG feed is shown instead of a Twitter feed.
Department Growth: Donate Section is accentuated as a stronger CTA to invite more donations to help the department.
Department Growth: Donate Section is accentuated as a stronger CTA to invite more donations to help the department.
User Pain-point Recall: Lack of Style
Faculty members and students find the website lacking in representation of the look and feel of the department.
Take Away
In Retrospect
In Retrospect
Launch Date: August 30th, 2023
Launch Date: August 30th, 2023
Working as the only UX designer in this ambitious project is challenging, but I get to take initiative on many occasions and take full responsibility for my design.
Constant communication and clarification are the top priority when working with the engineers to ship my design. Fail fast and re-iterate.
The design thinking process is useful as a guideline, but there are so many factors needed to be put into consideration as well for real-life projects, such as technical constraints, stakeholders, budget and changes in the timeline.
I also need to present my design compellingly to stakeholders on countless occasions. I can see my growth as a public speaker and that also made me fall in love with UX design over and over again.
Working as the only UX designer in this ambitious project is challenging, but I get to take initiative on many occasions and take full responsibility for my design.
Constant communication and clarification are the top priority when working with the engineers to ship my design. Fail fast and re-iterate.
The design thinking process is useful as a guideline, but there are so many factors needed to be put into consideration as well for real-life projects, such as technical constraints, stakeholders, budget and changes in the timeline.
I also need to present my design compellingly to stakeholders on countless occasions. I can see my growth as a public speaker and that also made me fall in love with UX design over and over again.
Working as the only UX designer in this ambitious project is challenging, but I get to take initiative on many occasions and take full responsibility for my design.
Constant communication and clarification are the top priority when working with the engineers to ship my design. Fail fast and re-iterate.
The design thinking process is useful as a guideline, but there are so many factors needed to be put into consideration as well for real-life projects, such as technical constraints, stakeholders, budget and changes in the timeline.
I also need to present my design compellingly to stakeholders on countless occasions. I can see my growth as a public speaker and that also made me fall in love with UX design over and over again.
Back to Top