It's the end of 2017, and The Big Game is coming to Minneapolis at the beginning of 2018. Hosted at U.S. Bank Stadium. With a Nielsen Rating of 43.1 and an average of 106 million viewers.
This meant a lot of high profile projects needed to be aligned to our new brand and exceed the Web Content Accessibility Guidelines.
New Homepage #
When you have that many viewers that might potentially hit your homepage and you want to get everything above the fold? Well, you build a carousel. Not just ANY carousel. A personalized carousel. A personalized carousel that was one of the most accessible carousels on the planet on such a high profile website. We ticked every box back in 2018. You could:
- Pause and play the auto rotation
- Delete Slides
- Navigate through with tabs, arrows, access keys, voice commands
You heard that right folks, hand-crafted, bespoke, web code, no fancy added libraries. Yo' momma didn't raise no fool.
We actually uncovered a bug with VoiceOver when you would lock a viewport to 100vh and with dynamic and personalized content and sent it over to some accessibility engineers over at Apple to document.
The quickest of wins for Online Banking #
Our Online Banking portal was still using a slightly outdated brand. The trouble was that our technology partners had estimated that it would not be able to be done before our code-freeze date to make it in time for the Superbowl. I raised my hand, rolled up my sleeves and got to work.
One Button, Two Button, Red Button, Blue Button #
There were a lot of designers, and a lot of disparate versions of elements that looked close but not exact. I worked with a lot of visual designers and user experience professionals to help them better understand the grain of the web, how inline, block, margin collapse, line height affecting the box model, and all that good stuff that caused major headaches.
The culmination of the HTML can be found in places across the public marketing site, consistently sized buttons are my mark. Unfortunately the design system I worked on was lost to time, but shortly there-after the Omnichannel User Experience team launched Shield, but if you ever see a CSS class that has an override and is prepended with "mr-" you know that's me!