Timeline: 1 month total, start to finish, including development

My Role: Principle designer (sole designer)

Team size: Web manager, Developer, Designer (me), University Consultants

Research: My team did a deep dive on competing university pages and homepages. We identified strengths and weaknesses, metrics, tested the new page with students.

From our data, we knew that students used the homepage to go to other pages, but our direct competitors were in a different league. Homepage traffic was down 11%, and core page traffic was down across all pages.

A competitive review of other university homepages

My team identified strengths and weaknesses, metrics, and more. I researched different universities and news sites, keeping in mind that we needed to include more photography and the ability to curate specific magazine content.

Goal: change the target market from current students to prospective students/parents

• Switch the focus from news and campus events to broader marketing goals and messages

• Quickly show university’s key metrics and strengths with scannable, compelling stats

• Keep content fresh by curating stories, photography and art from the University’s award-winning magazine

• Clear calls to action, encouraging prospective students to apply, visit and enroll

University-specific UX challenges

• Web components are outdated, yielding poor layout options

• Universities often have a mix of old and new, evolving content

• Strict accessibility requirements

• Complex navigation, with sites within sites with hundreds of pages

• Multiple owners and editors of content

Wireframing and planning six new sections

We collaged a wireframe from our research, outlining sections we wanted to include, with strategically chosen content ideas that fit our marketing objectives.

My design goals:

• New components would need to be able to be reordered and reused again throughout the University’s sites and work cohesively.

• Streamline the page’s pathways to action

• Eliminate long-form, outdated, and redundant content

• Create a stronger University brand experience through photography and messaging

• Conform to T4 (and bootstrap-compliant) CMS, accessibility, and accelerated time constraints

Iteration and finesse

I created multiple designs and iterations of six new homepage sections.

I started with the News/Stories section because it needed extra attention as to how it would stack in mobile view.

There were also multiple new text styles that needed finesse, so it was a good jumping-off point.

Unveiling the new design

The six new sections can be reordered and reused, sections are titled, and I decluttered the stories, including curate-able photos. Large, intentional, spirit-filled photography throughout evokes a vibrant campus experience.

I’ve added a new color to the University palette, Marina, to increase visual options across the brand. It’s classic, can act as a neutral while adding depth, and plays well with our University red.

Old homepage

New homepage

The Admissions site targeting prospective students saw a 17.9% increase in pageviews coming from the new homepage in the first 25 days after launch.

Intentional detail

Each element on the page is a carefully designed multitasker. I had to balance the tension of wanting the design of the whole page to flow, but needing to design each section individually, because I knew we’d need to be able to reorder and reuse the components for different sites and pages across the University.

1. Prominent brand statement sets the tone, and allows users to immediately see a key draw to the University

2. New numbers component shows key metrics with scannable, compelling stats

3. New call to action component, encouraging prospective students to apply, visit and enroll

1. Headings help people create a mental outline of the content on the page

2. New News/Stories section, with added topic indicators to allow users to filter news sections based on their area of interest

3. I worked with our developer to make sure featured stories and photos could be chosen strategically by the writing team, as opposed to appearing in order by date

Turned Why Choose SCU into a marketing-focused “SCU mood board” to help our prospective students visualize themselves at SCU and show more of the diverse student body.

1. Thought Leadership section, which I designed to highlight our distinguished faculty writing, was added the next month

2. In the wild: The new marketing ad component I created for fundraising being reused nicely as a presidential announcement

“The actions are emphasized very clearly. If I want to move forward, I know where to find the right buttons to do so.”
- Student tester after the launch