WHAT IS GRUBQUEST?

Grubquest is a web and mobile application that sends players discounts on local restaurants for playing video games.

Through Grubquest, players participate in daily and weekly quests such as “Deal X damage” or “Play Y character”. Rewards for individual quests scale off the quest’s size and difficulty – a ‘Solo Quest’ that can be completed alone would give a $2 reward, whereas a ‘Duo Quest’ completed together by two users together would give $4 reward.

As a product, Grubquest achieves the following:

WHY DID I BUILD GRUBQUEST?

For me, gaming has always been a deeply social experience. Whether it was playing a game of Smash with the kids from the neighborhood or spending an entire afternoon competing at a local League of Legends tournament – gaming has always been just as much about how I’ve interacted with the people I’ve played the game with as it has been about the game itself.

I have met and made over half of my friends that I know today through a game called League of Legends. While these friendships were born through League, they continue extend beyond the game. And it is so much of what we do together outside of the game that keeps me coming back to the game. It’s watching Tarantino, it’s getting late-night pizza, it’s discovering Korean fried chicken, and post-break-up-pick-me-ups that keeps me, that keeps us, as players - continually engaged.

The gaming experience has evolved beyond the virtual bounds of the online experience, but no game studio or company has really focused on addressing out-of-game engagement. This is why I built Grubquest, because I think it's time to start thinking about expanding the gaming experience offline. 

roadmap

PHASE I: Discovery

My love for interactions outside of the game is one shared by many. I conducted over 40 customer discovery interviews with potential users and transcribed over 100 quotes from those interviews. Here were some of the quotes I found particularly powerful:

"When you spend time together in real life, you get closer to someone, so when you log on you're that much more pumped to be hanging with your friends."

"I don't go look for coupons. I don't cut coupons. I would [use them] if I had one. I just don't."

"I never eat alone."

I took the quotes I collected, sorted them, and created the affinity diagram below to identify key patterns and insights:

takeaways (discovery)

Food is a core component in offline interactions for gamers. Furthermore, they look forward to these interactions.

For many of the interviewees, food was an essential part of how they connected with their friends offline. They would play together online, hang out together offline, and talk about the games they just played online while they were hanging together offline. It make their experience more powerful and it kept them more engaged with the game.

Gamers go out to together often, but rarely ever use coupons when they do because they are hard to obtain.

Despite several subjects identifying as budget conscious, most college students don't use coupons. The idea of coupons themselves are still tied to physically clipping them from brochures they receive in the mail.  Most users had heard of discount sites like Groupon, but none of them had used them within the context of their peers. 

Gamers enjoy playing games with their friends overwhelmingly more than playing with strangers.

The game is just more fun with more friends. Some users even went as far to say that they would only play the game with friends because it was just such a better experience. When good things happen in-game, they're more celebrated, when bad things happen in-game, they're less damaging.  

phase II: SOFT LAUNCH

The most interesting feedback you can get is always from live product. After conducting initial research to validate the space, we moved to build an MVP to test our core assumptions. It took some cold sales pitches, but we locked down our first restaurant partner (shoutout to Kelly from Hunter House Hamburgers) and did a 2-week soft launch.

This is what we launched with:

The core of our web application was the quest page shown above.  Unlike the UI elements for quests traditionally found in RPGs, whose origins are often more skeumorphic and text-heavy, we opted for a visual-heavy card based layout instead.

These card UI elements were inspired by a combination of different UI elements from both discount and gaming related fields such as: Groupon, Pinterest, and World of Warcraft. The front and back of the individual cards and broken down below.

quest card (front)

1. Full card product image

Conversations with restaurant owners and managers revealed that they see Grubquest not just as a promotional channel for deals but also as a marketing channel. Integrating that feedback with UI elements from Pinterest and Groupon, I made the decision to have a full-sized product image as the background for the card. The visual impact both grabs the attention of the user and highlights the deal they'd be getting for quest completion.

2. Restaurant and Deal Information

There are key components of information that needed to be communicated up-front. Namely, the restaurant, it's address, the deal, and the value of the deal are all necessary pieces of information for the user to make an informed decision on whether or not they find the promotion appealing. These are featured front and center so that users have all the information they need to make a decision on whether or not they'd be interested before seeing what the exact quest conditions are.

3. Quest Attributes

In the bottom right corner, there are icons indicating 'Quest Attributes' for a given quest. While the focus of the front of the card is on the restaurant and deal in question, I felt it was still necessary to provide some high level information on the quest itself.  By providing these attributes, users can distinguish what 'Game' this quest is for, how many people it takes to complete ('Quest Participants'), and the level of 'Difficulty' they can expect from the quest.

quest Card (back)

1. Quest Timer

At the top of the card there is a simple timer that counts down. This is to let the user know how long they have to complete a given quest. The intent here is to provide the user with enough information to plan when to complete the quest and also create a small sense of urgency to complete it sooner rather than later.

2. Quest Content - Non Player-Character (Grubster)

The majority of the card is of an explanation of what conditions the user has to fulfill in order to complete the quest. This is presented in the form a text-bubble directed from a cartoon character called Grubster. This is a popular RPG UI element used for quests that we re-applied here to reinforce the theme of gaming in a way that was familiar to the user.

3. Quest Reward (Displays on hover)

We also re-applied another RPG UI element from World of Warcraft to display the reward for quests. Again, this was to reinforce the theme of gaming within the design using an interaction that was already familiar to most of our users. The hover effect also let us conserve limited space on the card by not having to display all the information at once.

4. Progress Bar

At the very bottom, we have two buttons for users to choose whether they want to accept the quest. Upon hitting accept, the bottom of the card changes into a progress bar that displays the user's progress for the quest. The progress bar is a common UI element for advancement in general, but one particularly prevalent in gaming. 

Prior to launching with this version on live, here are some iterations I went through and tested with potential users during the design process:

takeaways (soft Launch)

We put a few posts up on Facebook, but sourced most of our users from local gaming events. Over two weeks, I dropped by various tournaments and local gaming meetups where I was able to sign on 80 active users. Of those 80 users, 12 of them (15%) went on to redeem the coupons they earned at Hunter House, as shown below. 

This was the feedback we got:

Users forgot about us.

As a web app, we lacked a form of consistent engagement. We didn't want to send emails and risk coming off as spam and as a result, users weren't making it a habit to re-visit the site. 

Quests were too hard. 

We made the mistake of gating quest completion behind a certain number of wins. This made the experience frustrating and added even more to the negative experience of losing.

Users hated extra clicks.

Users wanted to see progress for quests on the front of the card rather than the back of the card. Because the default load state was the front side of the card, having to constantly click to the back was un-necessary friction.

Users wanted more restaurants on the platform.

Many of our users gave us feedback that Hunters House Hamburgers was too far and that some of them had dietary restrictions that prevented them from going.

phase III: RE-LAUNCHING

Having proven that Grubquest could both facilitate players to play together online and translate that into an offline purchasing decision, we decided to expand our scope. Taking the research and feedback we received from the previous soft launch, here's what we did to prepare for the relaunch.

• Expanded our restaurant partnerships in town from 1 to 16 by partnering with Eatblue.com
• Redesigned Quest Cards with quest progress in front, adjusting other UI elements along the way.
• Reworked quest difficulty to be more accessible and less frustrating by moving away from strictly win conditions.
• Built a companion mobile application with notifications to re-engage users.

Let's start by looking at changes to the Quest Card:

Quest Cards 2.0 (Front)

1. We added a header section to each card

The addition of these header sections were inspired by trading card game design from Yu-Gi-Oh and Magic: The Gathering. We opted to include the 'Quest Attributes' in this headers in addition to the 'View Quest' button. Putting them at the top of the card against a red background serves to highlight them in a way that the previous iteration did not.

2. We changed Quest Attributes

Because we only had enough technical resources to support a single game (League of Legends), we removed the 'Game' attribute altogether. Furthermore, because 'Difficulty' can be very subjective we removed that attribute as well. In their place, we added a 'Deal Type' attribute to differentiate between coupons you would need to redeem in-store and ones you could redeem online for delivery and take-out.

3. We added a progress bar to the footer of each card

Taking direct feedback from our users, we integrated a progress bar for the front of each Quest Card so users could readily view their progress without wasting an extra click.

QUEST CARDS 2.0 (back)

1. Header and footer sections

By adding a header and footer sections to the front of the card, we decided to preserve continuity on the back of the card. In the header, users can access a 'Back' button to return to the front of the card, as well as 'Quest Attribute' information. This allows for smoother navigation as well as the ability to view all relevant quest information on a single side of the card. 

2. Updated Grubster and Quest Difficulty

We gave Grubster, our NPC, a quick visual update to fit the flat design of the card as a whole. We originally started with a pixel art based direction to keep in line with our logotype, but decided later on that it didn't look as good on the card.

We also adjusted the quest conditions to include 'Play X games' in addition to 'Win Y games'. In doing so, we still wanted to reward winning, but ensured that no quests were gated exclusively behind a win condition.

3. Quest Log Item Display -> Treasure Chest (Quest Reward)

We replaced the World of Warcraft inspired item display in favor of another familiar RPG element: the treasure chest. This had the advantage of being standardized across all cards. In the previous Quest Rewards iteration, I would have to create a custom icon for each deal that had a different reward. With the treasure chest, we had a single standard icon across all cards that was still familiar to the user.

Here are some additional iterations from Quest Card UI that I explored prior to going to live:

MOBILE 1.0

One of the most important pieces of feedback we got was that people forgot about us. With that in mind, we looked to expand into mobile. Notifications are much more forgiving as a practice for engagement than email. 

We wanted to build something native but had limited technical resources, so we had to choose one platform:

A simple Facebook poll revealed that roughly 66% of our users had an Android smartphone. So that's what we built Grubquest Mobile on.

Because the primary function we wanted out of the mobile app was notifications for engagement, we built it to facilitate the web application instead of replacing it entirely.  In the interest of getting something out as soon as possible, Grubquest Mobile only allowed users to view quest progress and store rewards for existing quests they had previously accepted via the web application. This would make it easier for users to track their progress and more importantly, allowed us to send our users notifications. 

Through the companion app, we were able to send notifications for when existing quests were about to end, when their rewards were close to expiring, when they've completed a quest, and perhaps most crucially, when new quests have been put online:

To source the first wave of alpha testers, I attended several local gaming events and tournaments, in addition to messaging over a hundred users online through Facebook Messenger. I created a spreadsheet from consolidating responses from individual interviews shown below:

I had four key questions:

1.  Android or iOS?

2. How many friends do you regularly play League of Legends with?

3. How many of those friends do you regularly hang out or eat out with?

4. Do you know any of your friends that you think would be interested in Grubquest that you could direct me to?

Based on their responses, I sorted them into 3 categories (Yes, Maybe, No) to classify how likely they would be to participate as an alpha-tester for Grubquest Mobile.

After identifying 43 likely candidates and reaching out to them individually, 25 ended up signing up for Grubquest Mobile Alpha.

takeaways (relaunch)

This re-launch took place over two months from February to mid-April with 16 restaurant partners and 120 users. Most of our promotion was still done in-person at local League of Legends meet-ups and tournaments with a couple of posts made on Facebook in between. At the end of these two months, this was the feedback we got:

1.  Users wanted full functionality on Mobile

Although we set out to build a companion app, we quickly heard back from users that while being able to view quests they had already accepted and receive notifications was nice, they didn't find themselves using it regularly because you couldn't view and accept new quests directly on mobile. They didn't want a companion app, they wanted a standalone app.

2. Users found it difficult to coordinate parties of 5 to complete 'Party Quests'

At this point in time, Grubquest offered 3 types of quests 'Solo', 'Duo', and 'Party'. These quests took 1, 2, and 5 participants respectively to complete. The discounts for these quests also scaled from $2 to $3 to $5 respectively. 

We saw much higher completion rates for 'Solo' and 'Duo' quests than for 'Party Quests'. Talking to our users, most of them gave feedback that it was very difficult to plan around coordinating a full team (5 Players), stating that when they had 5 players it was often more the product of coincidence than organized behavior. As a result, Grubquest often wouldn't be top-of-mind in those situations.

3.  Users still wanted more restaurants on Grubquest

While we expanded to many more new restaurants during this relaunch, it still wasn't enough for our users. While we were able to cover a much greater proportion of local restaurants both cuisine-wise and geographically, users still felt like they didn't have quite enough choices.

PHASE IV: NATIONAL LAUNCH

In am amazing stroke of luck, Eatblue our Ann Arbor restaurant partner we had previously mentioned, was acquired by Eatstreet. During the acquisition process, they also ported all previous deals we had ran through Eatblue. For better or worse, we found ourselves in a situation where we had national reach. So, we decided to go for it. 

Again, integrating feedback from all of our previous launched and iterating on it further - here's what we accomplished:

• Reworked Quest Card UI to reflect changes at a national level
• Upgraded mobile functionality so users could view and accept all quests
• Updated the website with a visual rework to reflect that Grubquest was a desktop and mobile experience
• Adjusted quest rewards to highlight Duo Quests

Let's start again by looking at the changes to Quest Card:

Quest card

1. Shifting focus away from the restaurant and onto quests

As a product of the our rewards being national via Eatstreet, we were no longer doing restaurant specific deals. As a result, our old model of featuring the product and restaurant no longer applied. Instead, we shifted focus to displaying information about the quest. The design of the front of the card is typically split into 5 rows in order to mirror the 5 different 'roles' there are in League of Legends, and to offer a visual suggestion for what character/champion player could potentially play to complete the quest.

2. We made the quest cards a little bigger

With the focus shifting from restaurants to quests and each of the quest images being divided into 5 rows, we thought it was appropriate to make the quest cards a little bigger so we had more visual real-estate to work with.  

No changes were made to the back of the card, as the way we handled quest content itself did not change for the national launch.

MObile & Web

Mobile Upgrade (Accept & View Quests):

Taking the feedback from alpha testers in our previous launch,  we added the functionality of being able to view and accept all available quests. In essence, Grubquest Mobile became a standalone application, not just a companion app:

For web, you can see the live site here. Our two biggest changes was adding a background video as well as implementing a Mobile section to highlight the advantages of the mobile app:

Background Video:

The decision to include a background video was because we wanted a very visceral and fun way to connect the idea of food and gaming. I cracked open iMovie and stitched together a series of advertisements, League of Legends highlight videos, and Gordon Ramsay cooking videos and optimized it for web. 

Mobile Section (Web):

Now that we had updated our mobile application to have all the functionality the web application had, we felt the need to highlight it to preserve engagement. We created a simple 'Learn More' section on the website that explained its functionality in addition to adding a few Google Play buttons that would direct to Grubquest in the Play Store.

Quest Rewards Update:

We adjusted all of our quest difficulties down from "Play 3 or Win 2" to "Play 2 or Win 1" in order to make quests more accessible as a whole. In addition to that, we adjusted the reward curve from the original $2/3/5 for Solo/Duo/Party to $2/4/5. 

We still wanted to fulfill our mission of bringing together players online, so we opted to break the linear progression in the rewards of 2/3/5 and make 'Duo Quests' disproportionately valuable compared to the other quests. Based on the feedback we received, we felt that it was appropriate to highlight 'Duo Quests' because their lower coordination cost made them more achievable than 'Party Quests'. We felt like this would also have the added benefit of helping drive Grubquest's growth through word-of-mouth between friends.

Takeaways (National Launch)

Over the past month, Grubquest has accumulated over 800 users nationwide through promotion in various Facebook groups as well as on the League of Legends forums. We have been actively collecting feedback from our users and have been implementing various bug-fixes and incremental improvements on the fly. Here are some of the reactions and testimonies from our users:

We wrapped up our national launch May 23rd 2016 (We ran out of coupons to give). Grubquest has always been a work in progress. It was an idea that a team of broke college students built from the ground up, and one of the proudest things I have ever worked on. As of July 2016, Grubquest has officially been put on an indefinite hiatus as most of the team transitioned to full-time jobs after graduating.

These were some future iterations that never made it to live: