Long Form Content Variant Test — A UX Case Study
Timeline: 1-week design/ 1-month testing • Materials: Sticky Notes, Pen, Paper, Adobe Xd
UX Techniques: Business Analysis, Secondary Research, Competitive/Comparative Analysis, Affinity Mapping, Sketching, Wireframing, Prototyping, Mockups, Optimizely for Variant Testing
Background
National University is a San Diego-based nonprofit founded in 1971 by retired U.S. Navy Captain David Chigos. As the largest private, nonprofit university in San Diego, our mission is to provide accessible, achievable higher education to adult learners. A pioneer in the digital space, we’ve offered online classes for more than 20 years.
The Problem
National University offers 100 plus online programs. Potential students would visit a desired program detail page in order to find out more information. To maintain consistency, a program detail page template is used for each of the programs offered. The page template was not super long– it did not allow for enough details about the programs and it functioned as just high-level marketing speak, with no real useful information. If a potential student did want to find out more about the program, they had to click into a static PDF that opened up a new tab, and would then have to look through to find more information regarding outcomes, classes needed, etc.
The primary elements needed to improve the page included:
- RFI
- Quick Facts
- Program Overview
- Unique Program Learning Outcomes [New]
- Related Downloads/Useful Links
- Why Choose
- Dean Quote
- Course listings [New]
- Larger PDF Button [New]
- Program Requirements [New]
- Faculty Info [New] – Name and Title that Hyperlink to Bio
The Solution
It was going to be challenging to balance all the required elements needed on the page while keeping the page relatively small in size. What we came up with was to use an accordion, a popular UI Pattern. Accordions are a great way to tell the user that there is more information if you’d like just click on the tab to discover more.
The 3 primary areas of focus for our program detail page
Hypothesis
The belief was that if students were given more information in the accordion UI pattern, then they would be more likely to submit the RFI.
Audience:
We ran the test on our top visited program pages (organic traffic):
- MBA
- BS in Biology
- Bachelor of Science in Nursing – RN Completion
- Master of Science in Nursing
Initial Sketches
Once we organized all our research and defined our solution, we began to explore potential designs for the page. To start this process, we started with sketches. This helps translate our thoughts into tangible ideas and better visualize our problem. This allowed us to quickly explore concepts for the page layout as illustrated by the quick wireframe below.
Wireframing
After we defined the core functionalities that we needed to include in our solution, we created quick, low-fidelity, wireframes. Using these wireframes, we were able to decide what to include in the final experience before jumping into the next iteration of our design.
Design
We designed a total of three page. One was already the control and the other two were new pages using the agreed upon accordion UI Pattern. Variations include:
- Original Version (control)
- Accordion Expanded Version (variance one)
- Accordion Collapsed Version (variance two)
Desktop mockup variations
Mobile mockup variations
Findings
The test was paused when we were seeing significant increases in both the Accordion Collapsed (+18.71% against original) and Expanded (+11.35% against original) versions. This was paused when we only had 3% statistical significance (or confidence in the data). It would be worth repeating this test on different program pages to validate results.
Findings snapshot
