University Website Optimization
Overview
I used artificial intelligence (AI) generated insights to recommend and mock up revised website designs.
With user-centered design principles in mind, I added and rearranged website elements to put more emphasis on the primary calls-to-action (CTAs).
I used Adobe Photoshop to mock up the changes quickly and inexpensively. While Photoshop may be an unusual choice for mockups, this platform allowed me to be nimble in creating and revising new design ideas.
Context
During summer 2023, I worked for AllCampus, a company that partners with universities to improve postsecondary education access. The company’s work includes developing webpages to recruit students for undergraduate, graduate, and certificate programs.
AllCampus works closely with university partners to design engaging, on-brand websites.
A core principle of AllCampus’s work is that design is not a one-time process. The organization uses an iterative process to continuously evaluate and improve their websites, maximizing the potential to effectively recruit new students.
To optimize partner websites, the AllCampus design team needs to analyze the current page’s performance and test potential variations.
Project Goals
Analyze heatmap and clarity data from Attention Insight, a platform that uses artificial intelligence (AI) to predict how users will make sense of a particular webpage.
Use the Attention Insight data to recommend split URL testing ideas. The split URL tests would determine if alternative layouts, colors, or other components improve user engagement. My primary goal was to draw the user’s eye to a call-to-action (CTA), which was either a button or a form.
Create design mockups in Adobe Photoshop. While Photoshop is an unconventional tool for creating mockups, we chose this method because Photoshop allows us to quickly display how small edits will look, without needing to recreate an entire webpage through more involved prototyping software. My company’s developers used the mockups to create alternate webpages for split URL testing.
Attention Insight Analysis
AllCampus uses Attention Insight to inform initial design changes because it is a data-informed, cost-effective platform.
Attention Insight uses real eye tracking data (from large data sets) to determine what website elements are likely to garner attention.
For example, people are naturally drawn to other human faces. One design implication is that if a website features a photo of a person, website users will look at the person’s face first, then look at whatever the photo subject is facing. This is relevant for AllCampus because our sites include photos of real people to create personal connections and encourage more engagement with our pages.
Using AI allows AllCampus to get an initial idea of what works without incurring significant research costs.
Attention Insight is only the first step in AllCampus’s ongoing user research process. After analyzing Attention Insight data and creating alternative designs, the AllCampus team creates split URL tests to evaluate the revised pages against the originals.
Split URL testing allows AllCampus to collect real user data. AllCampus can see how many users click CTA buttons and complete information forms for each version of the webpage.
For each partner program, analysis included two steps:
Reviewing the heatmap. Attention Insight creates heatmaps by predicting what percentage of users will look at each above-the-fold element. This helped me determine if there are too many elements competing for the user’s attention. The heatmap also showed whether our elements naturally lead the user’s eye to the CTA.
Reviewing the clarity score. Attention Insight also provides a clarity score, based on its predictions of user confusion. Attention Insight also shows whether the website is more or less cluttered than other websites. While the clarity score is only one data point, it provides a quick indication of whether users can follow along with the above-the-fold content. The clarity score also indicated whether our above-the-fold section might be too simple (i.e., there was not enough information to encourage people to click the CTA button or complete the brochure request form).
I analyzed Attention Insight reports for eight university program websites:
Adelphi University - Online Master of Social Work
DePaul University - Online Master of Science in Accountancy
Middle Tennessee State University - Master of Business Administration
Northeastern University - Master of Legal Studies
Northeastern University - Master of Laws
Northeastern University - Public Affairs Graduate Programs (College of Social Sciences and Humanities)
Pace University - Online Master of Business Administration
University of Arizona - College of Engineering Online Programs
Design Recommendations and Mockups
Using the Attention Insight results, I identified opportunities to improve website clarity and engagement. I mocked up my proposed changes in Adobe Photoshop to build team consensus and to communicate the intended changes to our developers.
Below are two example design mockups, informed by Attention Insight reports.
University of Arizona — College of Engineering Online Programs
The Attention Insight report indicated that the current page was too busy.
The AI predictive model indicated that users might be overwhelmed by the headline, subhead, and description that are in close proximity.
Additionally, the CTA button (“Request Brochure”) may get lost amid the other content.
To increase the emphasis on the CTA button, I recommended moving the description to a separate section that is just below the fold.
This has the added benefit of creating separation between the CTA button and its destination (which is a form to request more information about the program).
Original above-the-fold content for University of Arizona webpage
Original above-the-fold content for Pace MBA page
Design mockup for revising the page, where the description is moved to a separate section below the fold
Pace University — Online Master of Business Administration (MBA) Program
Unlike the University of Arizona webpage, the Pace MBA page was not too busy.
Attention Insight indicated a different problem with this webpage. The above-the-fold layout does not maximize potential engagement. The webpage includes a photo and a headline, but there is no clear CTA.
AllCampus’s primary goal is having users to complete the “Request Information” form. Currently, users have to scroll to even realize that the form exists.
To encourage more form engagement, I proposed adding a CTA button above the fold.
The button uses a bright yellow color that aligns with Pace’s branding guide and stands out from the surrounding content.
Design mockup that includes a bright “Request Brochure” button as a clear CTA
Implementation of Changes
Using my design mockups, the AllCampus design team is creating split URL tests to compare engagement on revised pages vs. the originals.
The team has already created split URL tests for three programs:
This is a three-way test:
The original webpage has a heading, subhead, and two yellow CTA buttons on the left side.
The primary challenge here is that some additional content pokes into the bottom of the above-the-fold section. Users can see the top of the “Excellent Outcomes” and “Become an Adaptable, Empathetic Leader” sections, which may also distract from the CTA buttons.
A secondary challenge is that the amount of above-the-fold content may distract from the main CTA. The primary CTA button is “Request Brochure,” as AllCampus encourages students to request a brochure and speak with an enrollment advisor before applying for the program.
One alternate version moves the “Excellent Outcomes” and “Become an Adaptable, Empathetic Leader” sections completely below the fold.
The second alternate version moves that content below the fold and also uses a ghost button for “Apply Online.”
The ghost button puts more emphasis on the primary “Request Brochure” CTA.
The original webpage uses a hero image of a real MTSU student smiling at the camera.
My team loved the authenticity of this photo. However, we hypothesized that we might get better engagement if the hero image’s subject is looking at the “Request Information” CTA button, instead of looking straight ahead.
AllCampus is testing an alternative version where the hero is looking towards the CTA button.
The original webpage has a heading and subhead overlaying the hero image. However, there is no clear CTA button.
The alternative version that we are testing introduces a “Download Brochure” button, using the university’s preferred language (instead of “Request Brochure,” as seen on the previous university pages).
This alternative version also uses slightly different colors than the original page. Ideally, we would not want to introduce confounding factors (like color) that could subconsciously influence user behavior. However, DePaul had changed its branding guidelines since we created the initial webpage. We used the new branding scheme for the alternative webpage to provide consistency with DePaul’s other webpages.
The AllCampus team is currently planning split URL tests for the following three programs:
Northeastern University - Public Affairs Graduate Programs (College of Social Sciences and Humanities)
Pace University - Online Master of Business Administration
University of Arizona - College of Engineering Online Programs
For the remaining two Northeastern University programs (Master of Legal Studies and Master of Laws), the team decided to implement minor website changes without split URL testing. The proposed change for both pages was to add a “Request Brochure” CTA button to increase engagement. The team plans to compare engagement before and after the addition of the CTA button.
Lessons Learned
Designers must be nimble and open to various methods. For example, Photoshop is not necessarily an intuitive choice for mocking up website changes, but it was perfectly suited for this task. By using Photoshop, I was able to quickly show color changes, new buttons, moved elements, and other quick changes without using expensive or time-consuming software.
AI-powered programs can provide a cost-effective starting direction for evaluating webpages. However, AI programs like Attention Insight should only be one step in the process. It is still critical to test webpages with real users; in turn, the real user data informs revisions and future testing.