Perhaps the most fascinating competition of the US 2016 election is the dynamics between the front-running candidates - Donald Trump and Hillary Clinton; and their supporters. This is probably THE hottest debate of the year but what is not much discussed is the website and it’s UX. So let’s do that today!
Have you walked around their website space? An interesting study when you go through both of them! Checkout their website prototypes right here (in order - 1. Donald Trump 2. Hillary Clinton)
1. Prototype of Donald Trump’s website
2. Prototype of Hillary Clinton’s website
Lets have a look at the structure of both these websites ( Donald Trump vs Hillary Clinton) -
So as we notice, both have a very similar structure -
- A big hero image of both of them as you land on their websites,
- immediately after that you see very distinct Call-to-Actions - “JOIN” and “DONATE“.
- followed by news and videos
What I intend to do is, walk you through the complete website and explore with you what works and what does not for these websites; with heat maps and other UX insights to support the clause.
#Splash Screen
Hillary Clinton uses a splash screen right at the beginning of the website to understand whether you are aligned to her vision or not - ” We need to break down barriers of race, gender and sexual orientation in America. Agree?” It is to get citizens join the cause.
It does have a small, a bit difficult to spot cross(x) to check out the website before volunteering. It’s not exactly a splash screen but a full screen transparent dark blue overlay.
Donald Trump does not have any such overlay to pleasantly distract the users on the website.
# According to the experiment done on the prototype of both, it’s obvious that people want to checkout the entire website prior to deciding whether or not to volunteer. As you could see on the heat map, higher interaction is recorded on continue to website rather than agree.
(Heat map showing higher interaction zone on “Continue to hillaryclinton.com” than “I Agree”)
#Landing Page
Donald Trump‘s website welcomes you with a smiling full width image of the man himself! A promising typography right next to him says - “Make America Great Again!”
Talking of the navigation on the landing page, Trump has divided his navigation bar into primary and secondary. The most highlighted tab on the primary bar is the “DONATE” button. On the narrower secondary navigation are - Issues, Schedule, About and Gallery. Nevertheless, putting the “About” tab on the secondary tab might not be a very wise step.
#According to the experiment done on both the prototypes, its indicative of the fact that people on the website are truly interested in reading About the presidential candidate.
(A relatively saturated heat map at “About” tab on the website)
Hillary Clinton‘s website similarly welcomes you with a full width image of her with the citizens of America. This certainly gives her an edge by adding a personal touch to her audience.
Similar to Trump, Hillary too highlights her Call-to-Actions as - “JOIN” and “DONATE”. The difference lies in the navigation bar- She manages to fit all necessary navigation on a single bar. No existence of secondary navigation bar.
Lets check out differences in text used on the two websites and which performed better during our experiment.
This clearly shows that “Volunteer” word has worked better for the users than “Get Involved”. Maybe that was more intuitive of the intent.
#Sticky Header with ready-to-use navigation
From an UX perspective here s a big difference between the two -
Hillary Clinton’s website has a sticky navigation bar on the top, which allows users to navigate to any page from any page.
On the other hand, Donald Trump’s website does not have a sticky navigation so user has to travel all the way up in case he wants to access the navigation on the top bars.
#Wrapping up
While Hillary Clinton’s website design is quite a beautiful and sophisticated one, with flat design elements and soft colors; Trump has a bold one with American flag colors used on the website. Hillary has opted for modern typography while Donald preferred the traditional font. In differences lie the beauty! And that too when we talk of differences between the two most talked about presidential candidates for America!
Your opinions on their UX is truly welcomed and needed. Do leave your comments below or drop me a mail at monika[at]canvasflip.com