U.S. News University Connection Website

B2BMarketing StrategyUI DesignResponsive

Senior UX Designer

Providing an online presence and media kit for U.S. News University Connection was a crucial business need so that sales representatives could engage interest from potential clients and increase overall sales numbers. As the Senior UX Designer, I was responsible for the design effort in creating their responsive website which not only housed all the available online advertising opportunities but also provided an easily accessible way to connect with a sales rep.

Summary

Background

U.S. News University Connection (USNUC) was created to connect colleges and universities, as well as media vendors, to advertise on U.S. News University Directory, USNews.com/Education, CollegeClickTV and any other partner sites. At the time, account executives produced individual PowerPoint presentations for each prospective client and walked them through all the the various sites over the phone. This process was extremely time consuming, decreasing their availability to generate more leads, and the presentation they emailed was large in file size with a high probability of being flagged as spam. USNUC needed an online presence and a web-based media kit which would allow the sales representatives to direct potential clients to where they could see all the available online advertising opportunities and provide clients a way to reach out to an account executive through a lead form or a phone call.

My Role

In my role as Senior UX Designer, I worked closely with the copywriter and marketing manager on the content direction of the USNUC website. I needed to figure out how this content was going to presented and strategize how users were going to navigate through the various areas. As far as look and feel, I needed to expand upon on the existing USNUC advertising material and the U.S. News & World Report brand.

Goals

  • Create a responsive website for U.S. News University Connection to clearly communicate:

    • Why clients should do business with USNUC?

    • Who are USNUC and why they are different?

    • How USNUC make you successful?

    • What features and benefits are included when becoming a client?

  • Display all online advertising options for U.S. News University Directory, USNews.com/Education, CollegeClickTV and any other partners sites.

  • Include an accessible lead form for contacting an account executive.

  • Provide a link to the media kit which can be downloaded and printed..

  • Enhance SEO for organic search results by including an area for company-related press releases and news.

  • Also include a Contact Us page and Testimonials.

Structuring the Website

Information Architecture

Based on the content that was written by the copywriter, I started to put things into buckets and began envisioning how things were going to be laid out. I created a sitemap with indicators of the navigation needed and a proposed layout for the page.

Proposed Layouts

In general, many of the pages would fall into a left or full content layout with exception of the homepage.

Homepage layout

Left Content layout

Full Content layout

Navigation

Again, based on the content, there would be three types of navigation:

  • Global navigation and breadcrumbs

  • Secondary navigation displayed on the page above main content, if needed.

  • Tertiary navigation displayed in sidebar

Global navigation and breadcrumbs - shown on all pages included:

  1. Logo

  2. Primary navigation

  3. Breadcrumb

  4. Search

  5. Request Information form which will slide open after clicking on phone icon flag.

Simple menu dropdown from global navigation

Mega menu dropdown from global navigation

Secondary navigation - shown at the top of any level 2 full or left content layout pages.

Tertiary navigation - will only be shown on right as a sidebar of level 2 or level 3 left content layout pages.

Responsive Layout

The USNUC website is a responsive site. Below is how content will reflow based on the user’s viewport.

Desktop

Tablet (portrait)

Smartphone

Lead Form from the Global Navigation

When the client clicks on the phone icon flag, it will slide down to reveal a phone number and lead form to request further information. This form is accessible from every single page. Once the form has been submitted, it will be replaced with a thank you message.

Header lead form reveal

Global Footer

When the client clicks on the arrow in the footer, it will slide down to reveal all footer links, otherwise only the general info, social media links and phone number will be displayed.

Footer links reveal

Page Features

Homepage

  1. Homepage feature slider - area to house features each with its corresponding image, headline, summary and link to the appropriate page on the site. 

  2. Main highlights - static section to highlight audience profile, rate card and portal features.

  3. What Clients Say - slider to feature client testimonials that will be cycled through.

  4. What’s New - area to house the two most recent news articles or press releases.

  5. Our Network - section to display our education network.

Portal Features and Audience Profile Sliders

On U.S. News University Directory Portal features page, the slider will showcase the various resources available. The slider on the Audience Profile page will show the relevant site stats.

What’s New Main Page

This is where we can enhance SEO for organic search results by hosting exclusive content and press releases that engages visitors with relevant educational news and more..

  1. Most recent news article/press release - The very top of the page will highlight the most recent news article or press release with its corresponding image, headline, author, date stamp, summary, tags and link to the appropriate article or press release page. 

  2. All, News or Press Release filter - defaulted to show all news and press releases sorted in descending order. Clicking on “News” will show only news items. Clicking on “Press Releases” will only show press release items.

  3. Older button - Clicking on this button will reveal more items that will lazy load down the page.

New’s Article/Press Release Page

  1. News article or press release Information - All news articles and press release items will have a headline(h1), summary copy, author, date, image (or no image), body copy, and associated tags.

  2. Latest News sidebar - The three latest news articles will be shown in the sidebar with a link to view a listing of all news articles.

  3. Press Releases sidebar - The three latest press releases will be shown in the sidebar with a link to view a listing of all press releases.

  4. Tags sidebar - A listing of all tags will be shown in the sidebar. When the user clicks on a tag, they will be shown a listing of correspondingly tagged news articles and/or press releases.

  5. Pager - Navigate to the next or previous article.

The Vision

Based on everything, I came up with the following website design for U.S. News University Connection. Finally, sales representatives could direct their potential client towards a website to see all the online advertising opportunities available, download a media kit, see the value of doing business with USNUC, and easily contact someone for more information.

USNUC Homepage

What’s New, About Us and Contact Us pages

Advertise With Us pages

Media Kit pages