Colorado State University
Housing & Dining Website
Project Overview
As Assistant Director of Creative Design at Colorado State University, I led the redesign of the Housing and Dining Website for the Division of Student Affairs. My aim was to implement a comprehensive User Experience process using Design Thinking, rather than just a UI refresh. This approach brought UX Design to the forefront of our organization and enabled a more inclusive process for managing and launching websites. I plan to use this case study to collaborate with other departments and improve the overall user experience for our audience.
Problem
The Housing and Dining website, within the Division of Student Affairs at Colorado State University, serves a large audience including students, parents, and staff. However, the current website is not mobile-friendly, lacks personalization, and results in a poor user experience and low engagement from the target audience.
Opportunity
The redesign of the website allows us to pursue several opportunities:
-
Redesign the website for Mobile-First
-
Identify and tailor the user journey and content to the audience
-
Create a single sign-on to enhance user engagement
-
Enhance brand experience through design system consistency and appealing UI tailored to the audience (18-24)
How Can We?
...make a seemless experience?
...provide pertinent information?
...cater to specific users?
...reorg and expand content?
...give users value?
Deliverables
-
Prototypes that demonstrate user flows, content organization of site redesign
-
High fidelity mockups to hand over to web dev team
Design Role
UX Design
Visual Design
Research
Marketing
Prototyping
Wireframing
UX Advocate
Creative Direction
Mobile-First
The mobile version of the website has elements that overlap, margins that are inconsistent, and text that doesn't scale accordingly. The desire is to have the experience between devices to be seamless, familiar, and intuitive.
-
Creating a consistent grid will lay the foundation for the mobile and desktop sizes.
-
The grid will serve to size our various templates and components.
-
It allows us to standardize design systems and declutter the site which will strengthen trust and usability.
Conducting Research
To gather insights for the web redesign, we conducted research and collected data to support our proposed solutions. In addition to Google Analytics, we used Hotjar as a secondary data source to perform a thorough analysis of our website. After several weeks of data collection, we found that most users visited the website through mobile devices and identified specific pages that caused pain points and increased page bounce rates.
Card Sorting
Prior to designing the information architecture of the website, I conducted a card sort with students and staff who were familiar with the RamCard section. The goal was to reorganize the information on the website. The collected data confirmed my assumptions about the current sitemap of the website.
Information Achitecture
After conducting an audit and initial research, we recognized the necessity of redesigning the website with a focus on the audience. To add value to our audience, we began by identifying and understanding them. Our audience includes two main categories: students and guardians or parents. From these categories, we can further segment our audience into current students, prospective students, transfer students, and undecided students. Additionally, we have a smaller audience of visitors, speakers, and event attendees who use our website for services.
Identifying the User
Wirefames
The audit and research revealed that creating the new website from a mobile-first perspective was a crucial goal. To achieve this, we created wireframes with a focus on mobile devices and then scaled up to desktop sizes.
Screens
These are the first set of screens for mid-high fidelity mockups. After the prototype is finished we will be conducting user testing.
Iconography
The audit revealed that the website contained too much text, so we decided to include more visuals using iconography and illustration. Leveraging my illustration background, I created custom icons that enhanced visual appeal and resulted in easier navigation.
Design System
There are dozens of websites within the division of student affairs and currently no design system. Along with the redesign of the website I will be identifying elements that can be standardized across the division for easier maintenance and consistency. These changes will enhance user experience and usability of all sites.
-
The design system was built upon Feather Icons
-
Each piece fits together to form a cohesive ecosystem
-
After components are finalized they will be documented for each use case
Next Steps
This project is currently in the second diamond of the design phase. Early mockups and prototyping is being developed and it will then go to the web committee for feedback. The next step will be development, refinement, and testing. Throughout this process I will continue to develop the design system and look to new features of the website.
