HQ Trivia

Pioneering an entirely new interactive mobile gaming experience

HQ Trivia  Hero

The year is 2017, and you’re huddled in your coworker’s cubicle with a dozen others. Their phone is on max volume, but it’s not enough to drown out the sound of your collective groans. The fifth question on the office’s new favorite game swindled you out of your chances of winning the day’s jackpot. Post-loss, you do a little online sleuthing and discover the circumference of the Earth is 24,901 miles. You all plan on convening again tomorrow for the same 15-minute emotional rollercoaster.

The phenomenon you waited every day for was HQ Trivia, a live interactive mobile game show that awarded cash prizes to its winners. At its height, HQ Trivia had 35 million downloads and 2.4 million players on the app concurrently. HQ Trivia was the result of in-house experimentation at Big Human. Inspired by Douglas Adams’ 1990 documentary “Hyperland,” our pursuit of creative innovation started with a question: “What’s next for interactive media?” Our answer ended up laying the groundwork for forward-thinking discoveries and future inventions.

  • Innovation
  • Invention
  • UX/UI Design
  • Product Design
  • Branding
  • Naming

Research

Making way for creative innovation

In 2016 (the era of Periscope and Meerkat), the leadership at Big Human jumped headfirst into the rabbit hole of live streaming. Curious about what was possible — and what was next — for video, we found ourselves on a streaming app that let multiple people go live at the same time. 

Seeing the potential of making it an actual production, the Big Human team began designing mockups of what mobile TV production could be like with a classic TV format, borrowing stills from shows we were watching at the time. The vision was to create a built-for-mobile network of shows across a variety of different topics (news, games, cooking, dating, reality, etc) where viewers could swipe through live and interactive shows running simultaneously. 

The experiment opened the doors for a new opportunity: pitching to the Center for the Advancement of Science in Space (CASIS), which manages the International Space Station (ISS). Our pitch included OpenSky, a Kickstarter-like fundraising platform that helped financially support projects on the ISS — a solution to the lack of corporate experimentation on the spacecraft. Big Human shared a few ideas the platform could champion (like a farming app that tracked the weather, coastline changes, and animal migration patterns) before presenting “Astro Hour,” a live mobile weekly kids’ game show hosted by an astronaut on the ISS. Streamed directly on children’s iPads and tablets, the show would help them learn fun facts about space. “Astro Hour” was essentially an adaptation of the earlier concept we explored, our way of chasing our vision and making it “real.” CASIS didn’t pursue the idea, but the team at Big Human couldn’t stop thinking about it. 

Inventing a new interactive media

If CASIS couldn’t help build Big Human’s vision, we needed a way to do it ourselves. To fully innovate and bring our idea to life, we had to raise outside capital and incentivize investors. This sparked the creation of Intermedia Labs, a business separate from Big Human that could focus solely on this new venture. 

With new company backing, we wanted to democratize the creation of interactive media, so we decided to make tools that helped consumers create live interactive shows themselves. That led to the creation of Hype (short for “Hyperland”), an app with rich creative tools that let users mix their photos with audios and graphics into live interactive broadcasts. The technical challenge with Hype was compositing the different media formats and allowing the front-facing camera to mix with the users’ roll of photos, videos, and a variety of other media formats.

However, after seeing users develop their own shows, we learned the app was too difficult for the average social media creator to use, so the app pivoted to focus solely on one game show in 2017.

Branding

Mixing the classic with the contemporary

The beauty of our partnership with Intermedia Labs was that another team was able to take on development, content execution, day-to-day operations, and business deals. This allowed Big Human to focus on design and prototyping — all with Intermedia Labs’ input, of course.

HQ Trivia’s design was heavily influenced by the classic game shows of the 1960s. Simple shapes and bright, poppy colors gave the brand a sense of playfulness, and we added a contemporary, 21st-century twist to make it approachable. To extend the look and feel of classic TV game shows, we also defined the look of motion graphics and video. The initial design of the logo was meant to be a placeholder, something that would be refined after solidifying the HQ Trivia brand. We went through additional branding rounds, but in the end, the first iteration was our last and the logo stuck.

UX/UI Design

Blending different elements

The challenge — and key innovation — of HQ Trivia was the blending of different elements and then solving the obstacles they presented (How do you make sure the user has proper feedback? How will they know what state the game is in? Are there enough clues or markers in the UI at the right time?). We needed to combine live streaming, live TV production, and mobile gaming on a single platform and have all three function seamlessly individually and together.

On paper, HQ Trivia had a simple, traditional format. The host would ask questions and the players would answer them. The game show itself operated in an elimination style. Players had to make it through 12 questions that increased in difficulty with each round; the moment a question was answered incorrectly, the player was eliminated, but they could still watch the rest of the show. Players who made it to the very end would split a prize ranging from $100 to $300,000.

If there were multiple winners during a game, they would split the prize money equally.

HQ Trivia is a mobile game, but it’s an entire TV production, too. While the game happens on the screen, there are multiple teams (wardrobe, lighting, sound) behind the camera working together to produce each show. Along with a group of writers that develop the script and questions, there’s also an engineering team that manages the tech infrastructure and real-time support.

Product Design

Producing an interactive gameplay experience

To bring that in-studio atmosphere to individual mobile devices, we wanted to include an in-game chat function where players could interact and talk about the game. The chat was the trickiest part of the design — it took up a lot of room. Our first step was figuring out what size the chat should be and then we designed everything else around it. If players decided they wanted to focus solely on the game, they could minimize the chat at any point.

After introducing the game and the prize, the host would be reduced into a timer circle. This transition allowed the player to always see the host but concentrate on answering the question. After the time to answer the question ran out, the host would reappear along with the question and results.

We wanted HQ Trivia to be a TV that users can interact with. To truly help the audience feel like they were participating in a real game, we incorporated haptic feedback; the phone would vibrate once per remaining second. There were also power-ups users could purchase in-app to extend their gameplay and chances of winning.

Results

Pioneering further innovation in mobile

Big Human pioneered a new interactive app and gaming format that has been replicated worldwide, opening the doors for further innovation on mobile. HQ Trivia was a cultural zeitgeist that brought millions of people together both online and in person. It now airs every Thursday at 9pm, with thousands of people still vying for the jackpot — and bragging rights. Astronauts in space may have passed on our idea, but humans on Earth helped it take flight.

More by Big Human

Designs we did for Vine
VineRedefining the creative video experience
Design
Branding
Development
Strategy
Designs we did for Lumiere
LumiereUnifying two different brand identities
Design
Branding
Strategy
Development
Content