10

Web design as troll: how The Verge Fanboys piece taunted the internet

How do you speak to a group of extremely passionate people? What kind of design would speak to them? When Joshua Topolsky approached us about creating three different layouts in the style of three mobile UI’s we were initially torn. Something about mimicking the UI of phones didn’t feel original. But more importantly, it presented a problem of presentation. There was an inherent a UX problem to solve: do you offer presentation options or do you trick the user? We decided to troll.

Speaking to our audience

Guillermo Esteves, the developer on this project, had the explicit insight of serving up specific layouts based on the visitor’s user agent. A user on a Mac would see the world through the eyes of iOS. On an Android device you’d see the world through Holo. In the spirit of the piece, we all decided to stay mum about this aspect of the experience, and just let the fanboys argue. What allowed us to risk such a move was a strong understanding of our audience. That is a major point of pride at Vox. We have passionate readers and we do our best to engage and delight them in a language familiar to them.

The Challenges

The challenge of this build was two-fold. First, we had to design 3 fully-responsive feature layouts. This meant looking at the three separate UIs, extracting the unique visual design elements and applying them to the parts that make up a feature layout (lede cover, body text, pull quotes, blockquotes, and photography).

We started looking at UI conventions on Windows phones, my Nexus 4, and in iOS 7. Then we decided how to translate elements into layout. The tweets became message bubbles; the PQs would be more generic tiles or app icons. We mixed the various app icons and used them as graphic elements.

The second challenge of this project was to complete it in a week and a half. We’re used to fast turn around times at Vox, but this was made more demanding because Guillermo and I had just spent a grueling week at CES in Las Vegas.

Mixing metaphors

The biggest and most thoughtful design process was selecting which UI elements to mimic and how to retrofit them to function like they might within in a passage of text. The PQs, headers, even the tweets were pretty obvious. The blockquote was the most challenging.

A blockquote is inherently a tricky thing: it’s function is two-fold, as it has to reference as well as quote. We played with using dialog boxes as a UI element, but since a blockquote has no inherent call to action, this seemed off. We tried just a regular popup alert, but that felt context-less and generic.

Josh Topolsky suggested the idea of using the copy/paste interface, and we knew we were halfway there. A lot of sites are beginning to adopt this single quote convention. I’m not normally a fan of this, as it turns a grammatical element into a decorative graphic element, but when applied in our layout it made sense. It now felt like we were translating the elements of the UI correctly without being too heavy-handed.

Making it responsive

Chorus has a "chromeless" layout option that provides us with an empty canvas to work with, consisting of little more than basic navigation, comments, and a few default styles. This gave us a good starting point in which to build the feature, writing markup and responsive styles for each of the three different designs, which was in itself our biggest challenge given the short timeframe we had to work with. In this regard our decision to not offer an explicit option to toggle designs helped us, since we didn’t have to worry about getting each of the designs perfect in every platform, and instead focused on making them as good as possible on their respective platform. This simplified our work because it meant that we didn’t have to worry about implementing each platform’s fonts on the others (which might not even have been possible, due to licensing limitations), and greatly reduced the amount of testing we needed to do on a variety of devices.

The reception

On publish day we were all ready to go, and were anxious to see the response. Twitter started blowing up immediately; the fanboys were ready to respond, but people were definitely confused. Why was this piece in iOS? We were right to mimic the lock screens, as people were a bit set off by them.

It took about an hour and a half for someone to catch on that we had separate layouts. But the fascination, surprise, frustration, and delight did not stop after this discovery; I think people also got a kick out of trying the layout on different devices. Guillermo did a great job in crunching the layout down so that the mobile experience was extremely smooth and elegant.

Some comments:

someone who didn’t like the design

guy who opened it up in terminal

1065 total comments

Risk and reward

This was an ambitious design and build. We spent a lot of effort in pulling off an elaborate trick. Sure, we could have achieved something similar by using one layout that mixed all three UI’s, but we knew that wouldn’t complete the story, since the whole point was to see the world through the eyes of a fanboy.

We were ambitious with this project because we were confident we had the design and technical chops to pull it off. More importantly, we felt we understood our audience (fanboy or not) well-enough to see that this effort would enhance their experience with the piece, and the conversation surrounding it. At Vox, we believe that design is content. In this case, were willing to risk infuriating our own loyal readers to underscore the Fanboy experience.

Sometimes, trolling makes for great content.

Home of the Vox Media product team. We help make SB Nation, The Verge, Polygon, Curbed, Eater, Racked, and Vox.com.

Follow us on Twitter

Flickr

view all

    Dribbble

    view all

      Vox Product Stats

      • 0Verticals Launched
      • 0Communities
      • 0Open source repos
      • 0Comments in the Last 24 Hours
      • 0Git Commits to Chorus
      • 0Product Team Members
      X
      Log In Sign Up

      forgot?
      Log In Sign Up

      Please choose a new voxmedia username and password

      As part of the new voxmedia launch, prior users will need to choose a permanent username, along with a new password.

      Your username will be used to login to voxmedia going forward.

      I already have a Vox Media account!

      Verify Vox Media account

      Please login to your Vox Media account. This account will be linked to your previously existing Eater account.

      Please choose a new voxmedia username and password

      As part of the new voxmedia launch, prior MT authors will need to choose a new username and password.

      Your username will be used to login to voxmedia going forward.

      Forgot password?

      We'll email you a reset link.

      If you signed up using a 3rd party account like Facebook or Twitter, please login with it instead.

      Forgot password?

      Try another email?

      Almost done,

      By becoming a registered user, you are also agreeing to our Terms and confirming that you have read our Privacy Policy.
      Spinner.vc97ec6e

      Authenticating

      Great!

      Choose an available username to complete sign up.

      In order to provide our users with a better overall experience, we ask for more information from Facebook when using it to login so that we can learn more about our audience and provide you with the best possible experience. We do not store specific user data and the sharing of it is not required to login with Facebook.