I'm starting a series of blog posts focused on website usability audits and I think it's appropriate to start with an exemplary sample. The subject of today's usability test is the landing page for Marylhurst University's Online Degree Programs (ODP).
Technical side: "KISS" CMS
Used theme is responsive - it's absolutely a must these days, especially when it comes to a university. The majority of young people uses smartphones intensively.
Front page elements
Hero shot (1) depicts university campus during a graduation ceremony day. People are standing in a small groups near the campus fountain and talk to each other. Definitely, the picture creates the impression of a real place (I study online at a real university).
Below the picture are four columns (3) of study programs: Business, Health Care, Sustainability and Real Estate. The visitor sees only the essential details: Title, Icon and "Learn More" button. When he hovers with the mouse over the column, it expands and shows more details (2).
At the bottom of the page is a standard footer (4). It is worth mentioning that all the links in the menu open in a pop-up window (landing page stays still open).
Page with the program details
Each 2nd tier landing page (program details) has its own hero shot image (5).
Submitted "Get the Program Brochure" form (6) located below the hero shot is the main conversion goal. Form (according the small graphics above) has a three steps:
- Question: Why are you pursuing your bachelor's degree?
- Question: What is your highest level of education?
- Input fields for: Full Name, Email, Phone and ZIP Code.
When you complete the form, you'll see a link to the pdf brochure download. Booklet summarizes information about the online programs at Marylhurst University. I would rather expect more specific information about the chosen program (simply create a PDF copy of program details). Also, the text of the brochure is not clickable (when you write about particular program, link to its details).
Program description can be found below the "Brochure" form. In my opinion, it's a too big piece of badly formatted text. I prefer when I can read the paragraphs with a maximum of 2 sentences.
I'd also recommend using HTML formatting such as <strong> or <em>. The same situation with the copy is in the "Why choose Marylhurst University?" and "Why should I get a bachelor’s degree?" section.
Like any other proper landing page, also this one uses pictographs (7). They help highlight the main advantages. Testimonials (8) cannot be missed too. We have 2 of them. The first one is from a former student and the other from a current professor.
Page contains embedded video (8) with a real person representing the organization. It's not Youtube, it's Vimeo (Marylhurst University has a PLUS account).
Major Curriculum of the course is located inside intuitive double-tabs (10). Double-tabs allow to organize content efficiently and save the space (I prefer shorter landing pages).
In the desktop version, there's a special navigation menu on the left side. It appears when you start to scroll down and has a fixed position. Lightbox pop-up with the "Get the Program Brochure" form appears when you click on the "Get Brochure" icon - it's another little trick how to boost the conversions.
Marylhurst University's ODP is an example of a well made landing page. The only thing I suggest is to improve is text formatting.