Vermeer

The challenge

• Understand the pain points of preplanning a shot for creators in the film industry.

• Design a solution that removes the friction in planning a shot.

MY APPROACH

I approached this challenge in five parts.

• Context
  Problem, Constraints, Assumptions

• Understanding Users
  User Research, Competitive Audit

• Ideation
  Requirements, Sketches

• Design
  Wireframes, Mock-ups

• Wrap Up
  Next Steps, Final Thoughts

PROBLEM

The world of eSports is growing rapidly and there hasn’t been a breakout product that captures what eSports fans want and need. Instead, their usefulness only comes around when we’re on the cusp of a big tournament featuring their favorite games and players. Thus, a product is needed that is useful every moment of their gaming career. The product must also speak their language because eSports fans are an elusive target and are quick to call BS when brands or products don’t speak to them on their terms.

The goal is to design Upcomer as the keystone eSports product beyond score updates. It’s a one-stop shop for everything they need to know about their favorite games, players, and teams in the world of eSports.

CONTRAINTS

Medium & Format - Native iOS App
eSports apps typically come in mobile and desktop web interfaces in order to suit the environments that gamers use the most. For this exercise, I’ll primarily be focusing on the mobile interface keeping in mind that a desktop interface will become priority in the future. Additionally, the mobile experience will serve as a proxy for a future sprint of the desktop application.

Production Timeline - 1 Month
Keeping in mind that design and production are combined into 1-month agile sprints, it’s imperative to not over-design the current product to encumber the production team. Design should be limited to native components and animations. However, changes need to be drastic enough to ensure users realize the new design changes, but subtle enough so that they’re not confused. The 1-month sprint is designed to receive quantitative feedback on what’s working and what isn’t.

ASSUMPTIONS

Engaging Content Trumps
For this design, we are assuming that content is king and is the key to catalyzing continual and habitual engagement for Upcomer. There may be other methods of catalyzing continual user engagement such as gamifying the platform or creating social groups, but finding justification for utilizing these methods takes extensive research.

Designing for Future Monetization
In its current form, Upcomer is an end-to-end free mobile app. However, with the plans to monetize with custom brand integrations in the future, it’s important to establish Upcomer as an authority in the space, not only to users but to potential ad buyers. Knowing that the eSports audience is quick to call BS, we need to establish Upcomer as a brand that speaks to their wants and needs which will ultimately make the product more attractive to advertisers. To tee-up this promise, Upcomer’s design should be rewarding and engaging for users to come back. Users expect a quick, easy, and delightful experience in order to access the content they need.

Audience Segmentation - Casual vs. Hardcore Spectrum
The eSports audience is diverse. According to research firm NewZoo, the target audience tends to skews millennials and early GenZ (A10-35) which is 80% of the total market, with a skew towards males.

In addition, beyond the professionals who play them, there are casual spectators, hardcore fans, and the people working behind the scenes. Since there are many different segments within the eSports industry each with their own diverse set of needs, it is best to target the audience that will give us the biggest bang for our buck. I’m making the assumption that there is a greater number of casual fans vs. hardcore eSports fans within the target audience A10-35 audience. For the purposes of this exercise, I will focus on the casual spectator audience. However, the variance of casual-to-hardcore is a spectrum so we will need to dive deeper to learn more about the underbellies of each of them.

USER RESEARCH

Through listing the assumptions I uncovered some key questions I needed to learn through user interviews. For example, one of the assumptions is that content will drive continual engagement. But does that really? With the time available, I interviewed one individual for 30-minutes who likes to casually follow the eSports scene.

I asked questions like:

• How do you stay up-to-date with what’s going on with the eSports of your favorite games?

• When it comes to gaming, what types of content do you like the most?

• What players and teams do you follow the most?

I was able to nail down his user behaviors, goals, and pain points. I then synthesized them to place his persona on a casual-to-hardcore spectrum.

RESEARCH TAKEAWAYS

Speaking with Arman gave me invaluable insight on the type of value that eSports followers look for. They’re not only looking updates on the scene eSports for their own personal knowledge, but they use this new found information to gain bragging rights and respect among his peers, fueling their already competitive mindset. They primarily prioritize video content as its quick and engaging and delivers the most fun and insight in just 30 seconds.

How might we give gamers and eSports followers the ammunition and tools to become the all-knowing alpha-nerd among their group of friends?

Caveat
Due to lack of time, I was limited to talking with one person. According to Nielsen Norman Group, 5-users is the ideal amount of users one must interview and test to achieve maximum insight. As a result, we’re only uncovering 25% of potential insight.

COMPETITIVE AUDIT

I took a quick look at some of the current apps on the market that rival Upcomer, the biggest competitors being theScore and Strafe.

Reviewing the competition gave me a better understanding of the current heuristics in eSports products. Both theScore and Strafe have a similar style to Upcomer’s current value proposition.

• Find out the scores of the games and teams I care about.

• Deliver the biggest news of all things eSports.

However, from the previous research, we know that there’s much more that people care about beyond faceless results. We can do better.

IDEATION

Ideation stems from the user needs of the individual I interviewed. The goal was to make him feel powerful among his group of friends using media content as his ammunition. I also didn’t want to destroy the integrity of what already created and give developers a hard time with a huge redesign. I constrained myself to using the elements developers would have on hand.

I took a look at Upcomer’s current design and highlighted the key points where we could add ways to make content front-and-center as well as general usability improvements.

My Events

• Swap search and notification icons. Users tend to type with the search icon on the right. This interaction needs to feel more natural

• Reduce the clutter of the calendar carousel. I particularly like the organization of Strafe’s solution. However, even that can be improved with better signifiers for swiping through.

• Organize matches so they look like individual cards that can be clicked on.

• Tie media content to matches so users have direct access to relevant media content for a particular match

My Feed

• Swap search and notification icons like the in My Matches.

• Replace the current filter system with a component that can be used more ubiquitously across the product.

• Make posts more scannable so users know which game is attributed to each post. In its current form, there is some misattribution with the game and the post.

• Remove the bots. If we want to catalyze more reaction, could we have community managers post instead? Or could we create the illusion that real people are posting this content?

• Reduce the size of the headliner text for each card. Eyes are more drawn to images, so the hierarchy should be adjusted accordingly.

• Remove the floating action button (FAB) and place it within the navigation. According to Google’s Material Design, FAB’s are best not used in tandem with bottom navigation components as they collide with the main content.

With all the considerations above, I started sketching out different ideas with two primary objectives.

• Make media content the star.

• Reduce clutter in order to draw the eye where it needs to be.

WIREFRAMES

After sketching things out, I went straight to mid-fi wireframes because I had a strong idea of how things would be laid out from my sketching sessions.

My Feed

• Streamlined scalability by placing all relevant information on in the sub-header.

• Moved the game icon on the left side of the media so games are easier to attribute to their relevant post.

• I designed the filter system to be closer to what Reddit uses in their mobile UI. It’s best not to reinvent the wheel and give users something they’re familiar with.

My Matches

• Swap and notification icons swapped.

• Calendar carousel uses a box system as appropriate signifiers to be clicked on.

• Matches are organized with embedded cards so they look like they can be individually clicked on.

• For noteworthy matches, I added CTA media buttons which highlights content. These buttons click out to a slide-up overlay which highlights Tweets from influencers and clips directly from that match. The copy style is also done very tongue-in-cheek, utilizing lingo from the eSports world. The actual copy will arise from a comparison between the calculated odds of the match vs. actual outcome. For example, if Player 1 was favored to win but lost instead, the CTA media copy would be “Upset!”

During my wireframing process, I realized that the trickiest part would be creating contrast between the embedded matches and their cards in the My Matches screen. I had to play around with different colored grays in order to get the contrast I was looking for. Going into the mock-up process, I knew that this would be a particularly tricky piece to juggle. In the end, I came up with practical solutions to the design problems I was facing.

MOCKUPS

In this iteration I focused on adding the branding colors and typographical hierarchy I also realized that there were certain sections that needed additional feedback for users. For instance, the calendar carousel needed stronger contrast between dates selected vs. not selected.

I also added a few animations through Invision to showcase how some of these features would work in the live app. Check it out!

NEXT STEPS

Projects never go according to plan. There’s always failures and pitfalls along the way. The next step would be to test these screens with a current user of the app to see if it satisfies their needs. I’d remind myself of the original goal:

The goal is to design Upcomer as the keystone product beyond score updates. It’s a one-stop shop for everything they need to know about their favorite games, players, and teams in the world of eSports.

In order to test for success and efficiency, we would need to track the engagement rate of the new CTA media buttons and if that has a correlation with daily engagement. I would also love to use an eye-tracker to see how users scan through the “My Feed” screen if my proposed design is easier to digest.

Next design iterations would also go more in-depth with the “My Matches” screen. For example:

1. Sorting. How would the CTA media buttons change if the matches were live events vs. completed? Could we instead highlight some reddit comments or integrate a Twitch feed? Also, how does the overall card system work when we sort by time vs. games?

2. Overview, Bracket, & Comments. I didn’t explore the screens beyond the main “My Matches” screen. How could we integrate more media content within there? Can my same design of the CTA media button still apply in a certain way? Or does this warrant a deeper redesign?

I’m also curious to know how else we could catalyze more social interaction. Previously, I highlighted that since the posters are primarily bots, users may be less willing to engage if they feel like they’re shouting into an empty room. Could we create the illusion that real people are posting by changing the bot user names and avatars? Could we go the extra mile and hire community managers or other people to populate the feeds?

FINAL THOUGHTS

I was surprised to learn that the user I interviewed wanted to see himself as the alpha-nerd in his group. I would expect that users didn’t want to be seen that way. However, since this is only one user I may have been exposed to an edge case despite him fulfilling the casual segment. Regardless, the alpha-nerd mindset is a very interesting one that I would like to explore further. Who knows? Maybe this could be the niche target we’re looking for. Why else would people care about scores? I imagine the same mindset translates from traditional sports.

How will eSports apps continue to evolve as the industry changes? In this exercise, I chose to design for current needs of individuals to satisfy business objectives. However, I expect the needs of eSports spectators, players, and business owners to change as we learn more about this growing industry. Ultimately, I learned that the industry is so new and people’s behaviors are only beginning to take shape. It’s imperative to stay vigilant and our ears to the ground as users grow with this new form of media and entertainment. Because the results of this case study may not hold true in one year’s time.