WWU Housing Website Redesign
As a web & graphic designer at Western's ResTek (residential technology), I was one of five student designers tasked with a total redesign of Western's on-campus housing website. This project began over ten years ago, but it wasn"t until 2017 when the ResTek team actually started coding.
Before
The previous housing website was confusing, oversaturdated with information, not up to date to Western's brand guidelines, and difficult to navigate. The website was also not mobile responsive at all.
Goals
1. Improved, consistent navigation
2. Serve the needs of our audience (provide core functionality clearer)
3. Presentation of useful personal information (e.g. dining balances, job applications, etc)
4. No inaccurate/stale content
5. No internal content (that's what the intranet is for)
6. Pragmatic design (eschew javascript, flash, etc. in favor of simple functionality)
7. Application/Website design consistency
8. Market housing services to intended audience.
Competitor Housing Sites of Interest
Users
Future Students
Future students needed to find information about living at Western when deciding which school to go to, and easily find information about different residence halls to make decisions about where to live once they started school.
Current On-Campus Residents
Current on-campus residents visited the site to get information about what to do if they are locked out, their RA and RD office hours, policies for living on campus, and events happening in University Residences.
Parents & Families
Parents & families need to know information about housing costs and payments, safety for on-campus living, and how to support their kids while they are at school.
Mockups
Production Tools
To create the different elements on the housing site, the team used a design library tool called Pattern Lab. Using priciples of Atomic Design, we were able to code small elements of the site (referred to as atoms), and nest them inside of each other in molecules, organisms, and eventually page templates and fully realized pages. This systems allows one to make changes to just one pattern (for example, a search bar), and see the changes implemented on every search bar used in every other pattern and page.
To code the site, we used several languages:
- Sass, a CSS extention language
- Mustache, a logic-less template language
- JSON (JavaScript Object Notation), a lightweight data-interchange format
- jQuery, a simple Javascript library
Final Design
Our final design includes the main page, two content templates (one with side navigation and one without), and a residence hall template. Using our growing library of patterns for different types of content, the team can combine different page templates and patterns with revised content and information heirarchy, resulting in over 200 cohesive pages.
Scroll to see full page
The main page includes links for our three main user groups so they can easily find what they are looking for. A trending section and calendar can keep residents up to date when they live on campus.
Scroll to see full page
The main content template includes a side navigation for related pages.
Scroll to see full page
Content without related pages uses a template with no side navigation.
Scroll to see full page
The residence hall page includes all the staff that work in that hall, the amenities available for residents, and information for future students to decide where to live.