![\"Two](\"http:\/\/blogs.bath.ac.uk\/digital-content-and-development\/wp-content\/uploads\/sites\/188\/2022\/09\/Before-after.png\")
<\/a><\/p>\nThe hero sections on our course pages (that\u2019s the large image and title at the top of the page) have always had a single call-to-action (CTA) button. For that matter, so have the hero sections on all our other pages. This is for good reason \u2013 it\u2019s standard convention to have a single CTA associated with a screen. You offer your users a proposition, give them all the relevant information they need, then ask them to decide if they want to act on this proposition. If you can do this with a single button, that\u2019s great as it removes ambiguity and confusion.<\/p>\n
However, sometimes one is just not enough.<\/p>\n
A single button offers simplicity at the expense of flexibility. Most of the time prospective students want to apply to a course or register for an open day so this was what our single CTAs did. However, sometimes they may want to order the prospectus or sign up for updates if the course isn\u2019t accepting applicants.<\/p>\n
Sometimes faculties run timed events like webinars or virtual experiences. With a single CTA, we have to make a choice between allowing students to apply for a course and signing up for these events from the course page.<\/p>\n
Allowing our web editors the flexibility to offer prospective students multiple options related to the course of their choice is the driving force behind this project.<\/p>\n
<\/p>\n
Design, development, and testing<\/h2>\n
This project was mostly concerned with functionality \u2013 offering students more options so that we can improve their experience with our course pages. Therefore, we decided that we didn\u2019t want to introduce any radical changes to look and feel and instead stick with our current styling. However, introducing more choice can also introduce more confusion \u2013 the takeaway menu problem if you like.<\/p>\n
When there is more than a single CTA on a screen, it\u2019s good practice to indicate to your users which is the primary action, and which are secondary, tertiary etc\u2026 To accomplish this, we chose two contrasting styles - the existing hero CTA styling for the primary action as it has a nice bright background colour which stands out against the hero image, and our ghost button styling for the secondary actions.<\/p>\n
This style uses only a white outline and text which makes it stand out less than the primary button. However, the lack of background colour on ghost buttons does mean that they are less readable when used on top of images like the hero. To overcome this, we applied a blur filter to the hero image. This wasn\u2019t without objection as it means that focus is taken away from the subject of the image. However, we felt that readability is more important. In time, we may well revisit this and come up with a more elegant solution.<\/p>\n
Next, we needed to find out if our new designs were feasible. As we\u2019ve already mentioned, it\u2019s typical to have only one CTA, so we needed to make sure that having more would not confuse users. To validate this, we created a series of A-B tests using Google Optimize, comparing variants of four different course pages, each one from a different faculty, to reduce the bias that we might get from only testing visitors to one course from one faculty.<\/p>\n
Each variant had a different number of CTAs \u2013 one with four, another with three, and the final one with just the original single CTA which acts as the control. Optimize works by randomly assigning one of the variants to page visitors. We then record the percentage of visitors who clicked any of the hero CTAs vs those who did not.<\/p>\n