Look at Steve Harvey's Card – He Was Set up to Fail

A poorly-designed card led to Steve's public humiliation at the Miss Universe Pageant. The card even has spelling mistakes. Here's how it could've been prevented.


December 21, 2015

Steve Harvey messed up big time.

The Miss Universe pageant was down to the last two contestants and he crowned the wrong winner, leading to one of the most awkward moments I’ve seen on TV, on par with the cringeworthiness of Ms. South Carolina’s answer in the 2007 Miss Teen USA Pageant. Such as.

But as more information comes out, I’m starting to think that Steve here was set up to fail with bad design and it wasn’t entirely his fault even though the internet seems to feel otherwise.

Just look at this tweet of his reference card:

What do you see on first glance? I got a blank postcard addressed to Miss Universe 2015– a whole lot of negative space.

While simplicity can be good for maintaining clean, deliberate design, it should always take a back seat to functionality. Art can get away with it because it elicits personal emotion juxtaposing our own experience with the collective consciousness of societal norms. And private parts.

But if this card has one single task, to inform the host of the winners and losers, the only thing that matters is that the necessary information gets across as quickly and easily as possible. Steve needs to know who lost, who got second, and who won. That’s it. Everything else is superfluous since, assuming there’s no royal disaster, literally only 5 people will ever see that side of the card.

What the card should’ve looked like

First off, I gotta say the whole 2nd runner up and 1st runner up is unnecessarily complicated. It’s like ordering a coffee at Starbucks. Can’t we just say small, medium, and large instead of first loser and second loser?

Get rid of that “runner up” repetition and make it clear who won, lost, and hit the depression jackpot (according to psychology the Silver medalists are the least happy because they almost won).

But more important than the terminology is the font size and positioning of the information. Here’s the card Steve was given:

Assuming the you have full access to card’s entire area, let’s see how much space is occupied by the important information.

That’s where the contestant’s placement and associated country goes. When compared to the overall area of the card, these highlighted boxes account for only 5.8% of the available room. While unquestionably minimal and clean, there’s a lot of room leftover for activities.

So increase the font size, got it. The other consideration that could lead to confusion is the positioning of information on the card itself.

The title at the top is fine– it’s useful to make sure it’s the right pageant, year, and stage of the competition. But why does it jump from the top left quadrant to the bottom right? Aesthetically it would look nice if there were accompanying pictures but, again, thinking about functionality, there’s no reason why the eye should have to make that leap especially considering how damn small the country names are printed.

Here are two options for better layouts:

Option 1 follows a logical reading path (left to right, top to bottom) and you can read those country names all the way from Timbuktu.

Option 2 gets a little fancy with the positioning but the text is a lot easier to read, the arrow makes it like a fun little game, and there’s even a friendly reminder for the host to pay a bit more attention when announcing the winner!

These are 2 out of infinite designs you can play around with for readability but the results are the same: the crucial information in both of my suggestions takes up more of the surface area (15%) and is positioned logically.

Try to keep design in mind

Design matters but it’s easy to dismiss it by comparing it to putting “lipstick on a pig” or the inevitable “just look at Craigslist.” A middle ground will always exist between form and function and rarely do you want to go to either extreme. Like with most things in life, moderation goes a long ways.

Steve here got a rude reminder of Murphy’s Law so, even if you think something is absolutely foolproof, you can always hedge your bet by considering your design from a complete stranger’s perspective.

Take a step back, identify the purpose, highlight the core information, and then try to make it look like you put in a little effort.

Like double checking the spelling– eliminination? Really?

Get the 5-minute roundup you’ll actually read in your inbox

Business and tech news in 5 minutes or less

100% free. We don’t spam. Unsubscribe whenever.

Psst

How'd Bezos build a billion dollar empire?

In 1994, Jeff Bezos discovered a shocking stat: Internet usage grew 2,300% per year.

Data shows where markets are headed.

And that’s why we built Trends — to show you up-and-coming market opportunities about to explode. Interested?

We’re shooting our shot…

Start your mornings with The Daily.

Get the freshly baked 5-minute newsletter every day except Saturdays.

It’s filled with the most interesting stories on business, tech, and the internet.

And written for innovators of every industry. Sign up for the news that slaps.

If you don’t like it, unsubscribe any time. Privacy policy.

[email-submission-form redirect-to-home="true" button-text="Join Free" include-trends-opt-in="true" id="main-signup-form" fail-url="" success-url="https://thehustle.co/signup" default-source="thehustleco" default-campaign="home"]
<script type="text/javascript"> var onloadCallback = function() { grecaptcha.render('verify-your-humanity', { 'sitekey' : '6LdddrcZAAAAALyttpvOqiwQGwq5BNhgDz4tMQGE' }); }; function getCookieValue(a) { var b = document.cookie.match('(^|[^;]+)\\s*' + a + '\\s*=\\s*([^;]+)'); return b ? atob(decodeURIComponent(b.pop())) : ''; } function setHiddenFieldValue(wrappingDiv, searchParams, className, utmName, cookieName, defaultValue) { var el = wrappingDiv.getElementsByClassName(className)[0]; var existingVal = el.getAttribute('value'); var newVal = searchParams.get(utmName) || getCookieValue(cookieName); if ((existingVal == null || existingVal == '' || existingVal == defaultValue) && (newVal != null && newVal != '')) { el.setAttribute('value', newVal); } } function setHiddenFieldValueFromUtm( wrappingDiv, searchParams, className, utmName, defaultValue ) { var el = wrappingDiv.getElementsByClassName(className)[0]; if (el != null) { var existingVal = el.getAttribute("value"); var newVal = searchParams.get(utmName); if (newVal != null && newVal != "") { el.setAttribute("value", newVal); } } } function initForm() { var wrappingDivs = document.getElementsByClassName('email-submission'); wrappingDivs.forEach(wrappingDiv => { var sp = new URLSearchParams(window.location.search); setHiddenFieldValue(wrappingDiv, sp, 'funnel-source', 'utm_source', 'funnel_source', 'thehustleco'); setHiddenFieldValue(wrappingDiv, sp, 'funnel-campaign', 'utm_campaign', 'funnel_campaign', 'home'); setHiddenFieldValue(wrappingDiv, sp, 'funnel-medium', 'utm_medium', 'funnel_medium', ''); setHiddenFieldValue(wrappingDiv, sp, 'funnel-referral', 'ref', 'funnel_referral', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-a', 'a', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-c', 'c', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-o', 'o', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-oc', 'oc', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-e', 'e', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-f', 'f', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-r', 'r', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-t', 't', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-s1', 's1', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-s2', 's2', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-s3', 's3', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-s4', 's4', ''); setHiddenFieldValueFromUtm(wrappingDiv, sp, 'funnel-s5', 's5', ''); var error_message = getCookieValue('funnel_error_message'); if (error_message && error_message.trim() != '') { var error = wrappingDiv.getElementsByClassName('funnel-error')[0]; var prev_email = getCookieValue('funnel_email'); error_message = prev_email + " is not valid. Please try again"; error.innerHTML = error_message; error.style = ''; } }); if (false) { initCaptchaFormV2(); } } function initCaptchaFormV2() { var v3RecaptchaResponseEl = document.getElementById('recaptcha-response-v3'); v3RecaptchaResponseEl.parentNode.removeChild(v3RecaptchaResponseEl); var wrappingDiv = document.getElementById('main-signup-form'); var subForm = wrappingDiv.getElementsByClassName('email-submission')[0]; var captchaVersion = document.createElement('input'); captchaVersion.class = 'g-recaptcha hidden-input'; captchaVersion.type = 'hidden'; captchaVersion.name = 'g-recaptcha-response-v2'; captchaVersion.value = 'true'; subForm.appendChild(captchaVersion); var captchaEl = document.createElement('div'); captchaEl.id = 'verify-your-humanity'; subForm.appendChild(captchaEl); var captchaApiScriptEl = document.createElement('script'); captchaApiScriptEl.src = 'https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'; captchaApiScriptEl.async = true; captchaApiScriptEl.defer = true; document.head.appendChild(captchaApiScriptEl); } function appendCheckboxes() { var optInDivs = document.querySelectorAll('.trends-opt-in'); optInDivs.forEach(el => { if (el.getElementsByClassName('trends-opt-in-checkbox').length < 1) { var checkbox = document.createElement('input'); checkbox.setAttribute('class', 'trends-opt-in-checkbox'); checkbox.setAttribute('type', 'checkbox'); checkbox.setAttribute('name', 'trends_opt_in'); var label = document.createElement('label'); label.setAttribute('class', 'trends-opt-in-text'); label.textContent = "Yes, I'd like to receive updates on market opportunities before they explode from Trends by The Hustle"; el.appendChild(checkbox); el.appendChild(label); checkbox.click(); } }) } window.addEventListener('DOMContentLoaded', (event) => { var funnel_email_cookie = getCookieValue('funnel_email'); if ( (true) && (funnel_email_cookie != null && funnel_email_cookie != '') ) { window.location.replace('/home'); } initForm(); if (true) { appendCheckboxes(); } }); </script> <div class="email-signup" id=main-signup-form> <div class="funnel-error" style="display:none;"></div> <form class="email-submission" action="https://cms.thehustle.co/api/v1/contacts/wordpress_create" method="post" autocomplete="email"> <div class="email-form-wrap"> <input class="funnel-source hidden-input" type="hidden" name="source" value="thehustleco"> <input class="funnel-campaign hidden-input" type="hidden" name="campaign" value="home"> <input class="funnel-medium hidden-input" type="hidden" name="medium"> <input class="funnel-referral hidden-input" type="hidden" name="referral_code"> <input class="funnel-fail-url hidden-input" type="hidden" name="fail_url" value=""> <input class="funnel-a hidden-input" type="hidden" name="a" value=""> <input class="funnel-c hidden-input" type="hidden" name="c" value=""> <input class="funnel-o hidden-input" type="hidden" name="o" value=""> <input class="funnel-oc hidden-input" type="hidden" name="oc" value=""> <input class="funnel-e hidden-input" type="hidden" name="e" value=""> <input class="funnel-f hidden-input" type="hidden" name="f" value=""> <input class="funnel-r hidden-input" type="hidden" name="r" value=""> <input class="funnel-t hidden-input" type="hidden" name="t" value=""> <input class="funnel-s1 hidden-input" type="hidden" name="s1" value=""> <input class="funnel-s2 hidden-input" type="hidden" name="s2" value=""> <input class="funnel-s3 hidden-input" type="hidden" name="s3" value=""> <input class="funnel-s4 hidden-input" type="hidden" name="s4" value=""> <input class="funnel-s5 hidden-input" type="hidden" name="s5" value=""> <input class="funnel-success-url hidden-input" type="hidden" name="success_url" value="https://thehustle.co/signup"> <input id="recaptcha-response-v3" class="g-recaptcha hidden-input" type="hidden" name="g-recaptcha-response" value=""> <input class="signup-email" type="email" name="email" placeholder="Your email address" required autocomplete="email"> <input class="email-submit" type="submit" value="Join Free"> </div> <div class="trends-opt-in"></div> <div submit-success> <template type="amp-mustache"> <p class="c-message c-message--success">Thank you for subscribing.</p> </template> </div> <div submit-error> <template type="amp-mustache"> <p class="c-message c-message--failed">Your submission failed. Please try again!</p> </template> </div> </form> </div>