Western Carolina University Website Homepage

In the summer and early autumn of 2019, I redesigned and developed the Western Carolina University (WCU) homepage. WCU is a a mid-sized, regional university located in western North Carolina. I worked on user experience, designed the new homepage from scratch, and completed prototyping and development for this homepage overhaul. Below I walk through the process of this project. You can jump to the end to read the project results.

Visit the Site

Problem Statement

As part of an update to the WCU website, WCU needed to change the content on their homepage, using this as an opportunity to improve a noticeably repetitious experience and refresh the design.

Project Goals

Reduce content repetition
Surface key audience and marketing links
Modernize the design while maintaining brand consistency
Improve site speed
Remove or reduce hidden content

Process

User Experience Research

Screenshots of the old homepage that are marked up with feedback comments. These comments are listed in the page text.

Prior to beginning the design process we conducted user testing with individuals in external prospective student and prospective parent demographics. We also received feedback from within the department and institution.

Some examples of feedback:

Story content was hidden in a carousel
Links to important content were getting missed
Redundant or repeated text and image content
The social media feed sometimes looked broken
People were seeking Youtube and Twitter posts in the social media feed
Events were repeated multiple times and web editors were unable to curate the events feed

Hand drawn sketches of different page layout ideas.

Early Design

After gathering all of the data and feedback I began designing, starting with hand drawn sketches to quickly iterate through ideas.

Prototyping

A screenshot of various page layout designs in a web design software window.

I then developed a handful of different design versions using Adobe XD and sought feedback from collegues in my department. We selected one design with which to move forward.

Refinement and Responsive Layouts

A screenshot of a web design software window containing the page layout at different device widths, like mobile phone and tablet.

I took the selected design and worked out all of the details, determined how the layout would respond, and added some prototyping interactivity to show how the page would function.

Development and Launch

In this project I managed and participated in the entire development process. I first developed the page layout locally. I then collaborated via git with another front-end developer to integrate the code into the CMS in a test environment, which included building new elements into the site’s XSL. After repeated testing and working out the bugs, we replaced the homepage with the new code. Finally, we published the new page!

Results

Results summary: Improved UX, new content areas, modernized style

Results for improved user experience:

Reduced load time of the page
Surfaced important links for different audience groups
Reduced content repetition
Cleaner interface
Improved event representation and information
Provides a sense of familiarity in the updated design

Additional benefits of the new page include:

An added promotional area for important non-story content
Surfacing of content marketing and news content
Inclusion of sought-after social media accounts
A refreshed look and feel of the page to modernize the style and provide more breathing room while staying true to the university's brand

Side-by-side comparison of the old homepage layout with my new design. — The old homepage design vs. the new homepage design.

Visit the Site