T7 Chicken Plus UX/UI: Case Study and Retrospective
Imagine this: you've been practicing your Tekken 7 gameplay and decided to test your skills in a tournament near you. It isn't your first tournament; in fact, you entered one last month but lost to a strategy you've never seen before. But you did your homework, and today, you're playing great. You make it to Grand Finals, but, surprise: your opponent is playing with a character you're not too familiar with. You find yourself getting blown up with the same tactic over and over. You fail to find an answer in time, costing you the victory. That loss cost you about 150 bucks. It would have been nice to have a quick resource to help you strategize between matches, wouldn't it?
Back in 2017, Tekken 7 ushered in a new era for the riveted franchise, marking its grand entry into modern mass appeal and esports. A legacy game at heart, Tekken had a history of making important character data obscure and hard to find. This presented a big problem for modern Tekken players, who skipped the era of scavenging forums for information. Players nowadays compete for money, fame, or glory, which leaves little room for guesswork. They needed reliable, comprehensive, and conclusive information on demand.
What did I do?
As the Lead UX Designer, I brought TK Chicken into a new generation with an experience that matched the hype of Tekken 7 and met curious players where they were in their learning process. Players had many expectations when engaging with frame data, so plenty of research was necessary to determine best how to meet their needs. The result was a powerful, encyclopedia-style frame data app that connected thousands of players worldwide to a common objective: learn some good-ass Tekken.
What did we accomplish?
✅ We successfully launched and updated across iOS and Android platforms for 2+ years
✅ Maintained 4+ star ratings on iOS and Android during time active
✅ T7 Chicken Plus offered similar experiences across both platforms, which massively contributed to our success
✅ We reached over 36,000 unique users worldwide, marking a 1,320% increase in users over the brand’s prior iteration
✅ Maintained 300+ daily active users during our time active
✅ Secured multiple brand sponsorships allowed us to reach more people in new and unique ways
✅ We had multiple millions of clicks and impressions across GIFs and ads
✅ Made accessible frame and combo data for Tekken games a standard, leading to this information being finally made accessible in-game
What could have been improved...?
👎🏾 Better parity between mockups and production
👎🏾 We recorded our own frame data, which was arduous with a wide margin for error
👎🏾 Tekken 7 had a lot of downloadable content and patches, which made keeping the app up-to-date impossible
👎🏾 No monetization meant production eventually had to slow down
👎🏾 GIFs were a revolutionary feature, but they eventually broke, rendering them useless
Character Select
The Character Select screen provided a degree of customization to allow players to streamline their experience to their liking. Players could mark characters of interest as favorites and adjust the page view so they can access their desired character as quickly as possible.
Moves List
The Moves List allowed players to find specific moves quickly and easily. Players either knew the move name, notation, or animation of the moves they were looking for, so it was important that they could narrow their options down when they couldn't be specific.
Some players need specific information at a glance. A simple List view shows each move's 3 most impactful stats. Meanwhile, a more comprehensive Spreadsheet view showed more information and allowed vertical scrolling. For players who don't know the move details but know what the move looks like, a GIF can be played to preview specific moves.
Filters
As Tekken characters can sometimes have hundreds of moves, it was important that players could apply filters to each character's move list.
Detailed Move View
Upon clicking a move, the player was presented with a detailed breakdown of that move's in-game frame data. They can then cycle through the moves that are being displayed on the move list in the order that they are displayed. This was a simple but powerful feature when used with filters.
They could also access move GIFs from this screen! About those GIFs...
GIF View
This highly anticipated feature made a huge splash when it launched. Viewing GIFs in real time allowed players to visually confirm that the move they were looking into was the one they needed information on. This eliminated a lot of trial-and-error and helped players ensure that the information they were receiving was correct.
Dynamic Help Panel
The Help panel was intended to give explanations for the jargon that appears on that move. There was also a detailed explanation of what each bit of frame data means.
We weren't able to get the dynamic help feature working properly, so we instead showed a comprehensive Legend that showed the meaning of all of Tekken's main jargon.
Combo List
This page gave players combos to utilize while they are learning a character. Combos were categorized by combo starters (a type of move). Each list of combos was organized based on difficulty and damage output.
Player Spotlight
This page celebrated Tekken players from all around the globe who had the greatest impact on a character at a given time, either through knowledge or tournament placements. This hand-selected platform offered space for these players to talk about their in-game philosophy and list their top 10 moves of that character. Users could also connect with these players via social media, as those links were provided here.
Brand Sponsorships
The success of T7 Chicken Plus gained us access to deals that we exclusively offer our users.
Monetization Strategy
Our next step was monetizing so the app could live on. Our users explicitly did not want to subscribe to T7 Chicken Plus, but were open to paying a flat fee. So we explored ways to monetize the app without encroaching on our premiere user experience.