University of California, Irvine (UCI)
Student Housing Website Redesign
👩🏻💻 Role: UX Designer & Researcher, Content Review, Accessibility Checking
👤 Team members: Fernando O., Corey T., Pechiney S.
✏️ Tools: WordPress, HTML, CSS, Photoshop, Google Drive
🗓 Duration: 6 months
Project Overview
The goal of this website redesign is to modernize the design of the website in accordance with University of California, Irvine (UCI) branding and allow our audience to efficiently find these sources of information. The UCI Student Housing website is used by students and parents to discover information on what housing options students can choose from, the pricing and rates of housing options, information on community life and services offered, and how to apply for housing.
Project Timeline
Research
As shown in Figure 1, the old website:
-
Was outdated in terms of layout design
-
Did not follow current UCI Branding
During the research process of this project, I conducted click-through comparison in order to analyze how other student housing websites were presenting their information, to better understand how others presented their web design and structure. In this analysis, I observed the number of clicks it took to get from the home page to the page that contained the wanted information dimension.
Figure 1: Original UCI Housing website as of May 2020.
UC Student Housing website clicks comparison.
CSU student housing website clicks comparison.
UC Student Housing website clicks comparison.
Figure 2: University of California (UC) housing websites click-through comparison.
Figure 3: California State University (CSU) housing websites click-through comparison.
After this click-through analysis seen in Figure 2 and 3, I learned the following insights for what attributed to a good user experience on a housing website:
A "Quick Links" section allows users to quickly find information rather than sifting through pages and through a lengthy navigation module.
Lead users through site navigation quickly by figuring out what type of user they are and redirecting them to pages of importance. At UCI, housing options are limited and based on the student's class level. We can present the most relevant information to our users by finding out their class level (since housing options at UCI based on class level).
The "Home" page is the most viewed and thus most important page that a user is likely to extract information from. Therefore, we should include time-pressing information such as "Latest news" and "Updates" on there as well.
Users of our website usually visit to find out where and how to apply for housing. We should abstract the view of all housing options pages and only present what class-specific options would apply to the user type, in order to reduce confusion over what housing options are available to users and minimize errors.
Through UI testing with our stakeholders (directors at UCI Student Housing, other employees at UCI Student Housing, and students) our team found that the pages Rates, Housing Guarantees, Housing Options, How to Apply, and Housing Contracts, were popular for finding information. With this insight, the team devised a sitemap that would make these information sets accessible through a "story-like" experience, where a user would first select their class ranking in order to find their class-qualifying information.
Design Ideation
Streamlined header elements in UCI color and typography branding.
Streamlined button elements in UCI color and typography branding.
Streamlined header elements in UCI color and typography branding.
(Left) Figure 4: Selected design idea of website redesign.
In this phase, our focus was to devise website wireframes for what redesign would like. This included designing multiple layouts and getting feedback from stakeholders on what they did and did not like about the initial design ideas. This was useful in understanding what our target audience would want to see and what would help them best to navigate the website. It was later decided that the wireframe in Figure 4 would be the redesign direction moving forward.
The lead web designer then created the website structure and layout using WordPress' Divi Builder features. Since one of our goals in this project was to make the website consistent with current UCI Branding, we produced a design system, consisting of page element components and conventions for using widgets, in order to align with branding standards of University of California, Irvine as pictured in Figures 5 and 6.
(Left)
Figure 5: Headers used throughout the redesigned website.
Figure 6: Buttons used throughout the redesigned website.
Content Review
Since the website was pre-existing, my next task was to transfer all content from the old website and into the new website, inserting content using the established design standards. My processes was as follows:
-
Navigate through each individual page on the old website and open the corresponding page for the new website in another window.
-
Use the website standards and page elements to copy over text-based content and links from the old website and paste it into the new website using the same module conventions.
-
Download all media present on the old page, such as PDFs, images, videos, and upload them to our "Website Redesign" Google Drive file folder structure. This was so that we could keep track of what media is being used on each page.
-
Re-upload media from each old page onto its corresponding new page.
When I was finally done with this process after completing a total of 110 page content transfers, our lead content reviewers then went through each page and made notes of what changes needed to be made. This included changes like updating text content to reflect changes such as terms and conditions, changing out-going links to open in another window, creating individual header images for each page, and fixing padding inconsistencies, all of which were assigned to me.
After completing the majority of the content transfer and review, we found that there were unexpected things that needed to be handled before we could publish the redesigned website. When the website had been checked by UCI Strategic Communications, we had found that it had lacked in user accessibility. To combat this, we needed to include alternative text to all images, utilize descriptive text when linking to pages, allow keyboard users to be able to tab through navigation, and ensure colors used on our website were contrasting enough.
"
Admittedly, this was the first time any of us on the team had ever designed a website before so we were unaware of these metrics and standards. To fix this, I was in charge of all tasks revolving accessibility, leading to the following notable changes:
This was interesting to me because as a UX designer, my job is to make design decisions that enable users. By not initially considering all kinds of users who might use our website, our team had unknowingly marginalized those who experience these challenges.
"
Alternative text added to nearly 400 images, so that when the website is accessed with a screen reader, it will be able to describe images to visitors who are unable to see them.
Changing text-based links so that they are descriptive of what website or page they redirect to. For example, a descriptive link could be "Learn more about Housing Rates" instead of "Click here to find out more about rates."
In comparison to the old website, our accessibility rating on the redesigned website had improved accessibility by 5% according to Web Accessibility, in accordance to WCAG 2.1 standards, as seen in Figures 6 and 7.
(Left) Figure 7: Accessibility score for old UCI Student Housing Website (2020).
(Right) Figure 8: Accessibility score for redesigned UCI Student Housing Website (2021).
Final Design: Live Website
Figure 9: Redesigned UCI Housing website as of 2021.
The following images are screenshots from the live website redesign:
After launching the completed redesign in late October of 2021, the website has received a lot of attraction. According to the website statistics in Figure 10, the website gained 311,640 unique users and 1,880,426 page views from October to December 2021 alone!
Figure 10: Website statistics of UCI Student Housing from October-December 2021.
Takeaways
This project was completed during my time as Student Housing Marketing Assistant at UCI Student Housing. When this project arose between my supervisors, I was initially not involved because it was not a part of my job description duties. However, because of my interests in UX design, I had asked my supervisors if I could join the team for the project and they had agreed.
I had lots of fun with this project, not only working within a team, but also working with real stakeholders. Working within a group of professionals of varying personality types and ages was rewarding to me because we were able to connect and complete the project despite these personal differences.
Through this project, I learned how to use WordPress and how to design for accessibility. Prior to this project, I didn't know that there were users who solely used screen readers or keyboard functions to navigate through webpages. For users who utilize these functionalities, a lot of information gets abstracted due to their experiences that don't allow them to perceive websites as easily as others might. With this acquired knowledge, our team worked hard to ensure that our website redesign included these user groups and when we brought our final website for checking by UCI Strategic Communications, the website passed with over a 90% accessibility rate during launch! With this knowledge gained on web accessibility design, I updated my website portfolio (this website) to include alternative text on every single image and used descriptive text for all hyperlinks. I look forward to continuing to utilize this knowledge of how to make design more accessible in my upcoming projects so that they are more inclusive to a larger demographic.