Product Page Redesign

Discovery

Formative Usability Testing

With input from stakeholders I designed unmoderated remote usability tests to discover usability issues throughout the existing college website.

Qualitative

Using usertesting.com I was able to accomplish the following in 1 business day:

• design usability test
• recruit participants
• run test
• obtain results

Day 2 was spent analyzing results to understand what problems users were repeatedly having on our website and preparing a report. The study revealed users had trouble finding the product the college was selling: it’s programs.

Quantitative

To measure how big the problem was, I did a quantitative baseline usability study using Loop11. 33% of test participants failed to find a Welding program on the website.

Navigation Issues

The problem: To find programs people first had to choose the role-based link called “Future Students” in the top navigation bar. Besides not being intuitive, this label was incorrect for Current Students who also needed to register for classes. 

The fix: By restructuring the information architecture and putting program information under a goal-based link title; “Degrees & Courses”, people were able to find the programs in usability tests.

Old: Navigation was previously based on roles. Students had to determine their role before they could pursue their goals.

New: Navigation was restructured to match user’s goals. Usability test participants could successfully find the college’s programs.

Information Architecture Issues

The problem: Programs were hierarchically grouped by division name and department name to limit the number of visible choices. Categorizing choices should have made it quicker for people to find programs based on Hick’s Law, which states reaction time is based on the number of choices. However, 33% of test participants gave up before they found the program they were looking for. 

A study on Jakob Nielsen’s website explained why this categorization did not work: “48% of prospective students did not realize the university offered their major or program of choice. The main reason for these failures is that many of the websites organized academic programs by department names that were unfamiliar to new students.” 

The fix: By replacing the hierarchical with a matrix structure, users can search and navigate however they choose. The previous barrier that required users to be familiar with or first learn the college’s organization model to be able to find what they were looking for was removed. Follow-up quantitative testing showed that 100% of test participants found the program we asked them to find.

Summative Qualitative Usability Test

Information Architecture and Site Navigation Issues Fixed

After redesigning the program pages and site navigation, usability tests were run again. The same scripts were used for remote unmoderated tests of the new design. This time all participants were able to find the program they were looking for.

Old page: People had to guess the correct category.

New page: Search and filter capabilities added.

Price Transparency Issues

The problem: A selling point for this institution was it’s low cost. However, when asked how much it cost to complete a program test participants could not easily answer. It required cross-referencing multiple sources of documentation, tallying credits and multiplying by cost per credit and adding fees. Given that the average adult numeracy level in the U.S. is grade-level 5, Steve Krug (author of “Don’t Make Me Think!”) would be shaking his head.

The fix: I worked with the business department to do this math for the user. Now, the total cost of the program is presented boldly as a selling point (and greatly improves usability). This innovation was a first in the Minnesota State system of schools and was lauded and duplicated by many other schools in the system.

Look and Feel

The problem: In addition to navigation issues, the old program page design was not usable and accessible. Text was not easy to read and there were contrast issues. The pages also looked outdated and needed to be updated to align with brand standards.

The fix: A crisp new design with strong visual and informational hierarchy was created to more clearly explain the program. Higher contrast and larger fonts defined with responsive typography measurements ensure accessibility.

Program Page Before:

Program Page After:

Agile development

This was the first project at the institution to use Agile methodology. To ensure efficient development by a small team, we created personas in building user stories to ensure the user interface as well as content was created for both the primary personas (college students) as well as secondary personas (student’s parents) who often do college research for them. I trained the team on how to use Agile and served as the scrum-master.

Search Engine Optimization

An institutional goal was to increase the number of enrolled students. When rewriting descriptions of over 70 programs, keyword research was incorporated to improve search engine optimization and increase organic traffic. To improve SEO, long-tail keywords replaced official program names when Google indicated there was no measurable traffic for a term. For example, we replaced “Gas Tungsten Production Welding” with the keyword “TIG welding”, which is a common name that means the same thing. TIG Welding was searched locally 480 times per month whereas the official program name received only 10 searches per month.

Plain Language

Additionally, I used plain language to ensure content was easily understandable by readers. Buzz words and insider lingo were replaced with plain language. The average reading grade level was reduced from grade level 21 to 9.

Results

Quanitative Usability Study

After confirming with qualitative studies that the redesign had succeeded in fixing the previously identified gaps, we ran a remote unmoderated heatmap test to discover how our actual site users were using the new design. After a week we reviewed the heatmap and found that one of the new filters for completely online offerings was used often. We then created a new section of the site to elaborate on our online offerings.

64% increase in program pageviews

Overall program page views went from an average of 289 per month to and average of 475 per month.