Terms and Conditions Updates — A UX Page Improvement

Timeline: 2-week design/ 3-month testing (in progress) • 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

We got word from National University’s legal department that how we displayed our terms and conditions needed to change to better align with the Federal Trade Commission’s newly passed ruling. This important ruling deals with ‘clear and conspicuous’ requirements that helps companies determine the validity of leads coming from online sources. Please note, this ruling was in regards to all lead generators, and is not specific to online universities.

Meeting with Legal

We set up a meeting to talk through what exactly needed to change; prior to that, however, I came up with several question regarding what compliance looked like in effort to balance the new language without looking overwhelming:

What are the minimum requirements?
What has to be on the page?
Could we use an asterisk?
Could it be a box with scrolling inside?
Does it have to be close to/ connected to the form?
What is the minimum font size?
Is it possible to revised language and shorten?

The Solution

It was going to be challenging to balance a well-designed page and the new ‘Terms and Conditions’ language which now had to be clear and conspicuous. I created a simple diagram to help me clarify the important features that needed to be on the page.

The 3 primary areas to focus on for the new terms and conditions language

Initial Sketches and Wireframing

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 helped us translate our thoughts into tangible ideas and better visualize our problem. This allowed us to quickly explore concepts for page layouts.

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. We designed a total of six potential pages that would satisfy legal’s requirement for a ‘clear and conspicuous’ terms and conditions layout.

After the meeting they expressed they would be more comfortable defending options one, five, and six.

More Wireframes

After legal signed off on what they preferred, it was on to the next iteration to really explore more of the elements and see what else we could be improved. Since one was not the most visually appealing, we ruled that one out. It was really going to be a form of option five and six. We had an internal meeting were eight iterations of five and six where up for debate.

Picking What Fits Best

Members of our team liked different elements from different pages, but the overall consensus was a hybrid of two pages: 5.5d and 5.5e.

The primary elements that changed from the old to the new page:

Full-width Image
RFI box & button at top
Image on quote section
Accreditation and accolades on light background
Two-Column form at the bottom
Sticky banner as your scroll

Design

After the wireframe was approved the next step was to skin it to the selected brand. In this case it was National University. We applied the correct web style guides and visual aspects to the wireframe, and came up with a high-end fidelity mockup and prototype.

High-fidelity mockup and prototype

A comp of the page and how how it would render on a screen

Testing and Results

This page was then to be tested against the control (original design) to see which performed better.The goal for test is conversion rates or RFI submissions. As of December 12, 2019, variation 1 (new design) leads by 15.76% over the original design. Testing will continue until the confidence rating is confirmed, and then a new variation will be tested against the winner. We are always continuing to iterate and improve performance.