Gaming Platform Redesign- A UX Case Study
Through this Case Study, I’ll be sharing my detailed process and the reasoning behind the design decisions that I took to redesign a gaming platform named “Avatar”.
Overview 🌄
So, Avatar is an all-in-one social platform for gamers offered on various platforms- Web, Mobile, and Desktop Applications. Avatar offer features like automatic highlights recording which allows gamers to share their amazing gaming plays with the rest of the world. This makes the content on Avatar short and fast-paced similar to apps like Instagram or Tik Tok.
I got this project through Upwork and just couldn’t resist the opportunity to work on a project related to games.
Being a gamer and designer myself, this was simply a match made in heaven 😂. Jokes aside, the current version of the app was in dire need of a UI revamp as well as finding solutions to some significant usability issues.
Understanding the current problems 🧐
1. Accommodation of advertisement in the app.
Avatar is a free platform offering various features like automatic highlights recording, gaming tournaments, and social connectivity. The only source of its monetary income is through advertisement which is very common in this genre of applications.
We all know how much we hate to see ads disturbing our experience while going through our favorite apps. Being, in the designer shoes this time around, I had to find a solution to suitably display the ads for business survival, still providing the best experience possible to the users.
2. The content viewing experience on Mobile Displays.
Most of the gaming clips are generally in a 16:9 aspect ratio which is not the best experience to watch on mobile screens in a vertical orientation. Other apps like Instagram deals with this issue by only showing the content in a 1:1 aspect ratio and leaving the rest of it. This might be a valid settlement for Instagram but for Avatar which is exclusive for gaming content, we needed a better solution so users can go through gaming clips quickly without skipping off some of the content.
3. Discovering fast-paced content
The current version of the app had a game filter that allows users to discover the content related to a distinct game. Though a nice idea, implementation is where it failed. The filter was always present in the top nav but only usable during the discover feature. Also, the current discover feature offered small 3x3 game clips which made the user constantly click and view the content, not necessarily a good choice for fast-paced content consumption.
4. Viewing content from someone’s profile
The profile section was built on the similar fundamentals of “Discover”. This resulted in a basic UI, lacking crucial information, and inaccessibility to the content.
5. Cluttered User Interface
All those major usability issues aside, the main concern that clients wanted me to address was visual design. Given the number of features offered by the platform, made the UI of Avatar messy. The clients looked for a visual revamp which can make it look much more clean looking, while still being captivating for gamers.
Competitive Analysis 📊
Avatar is powered by Overwolf, a framework specifically created to develop gaming apps. It also boasts an Appstore that contains a lot of gaming apps offering a somewhat similar set of features as Avatar. I did in-depth research on some of these competitor apps to see how they are tackling the common usability issues under this genre. And, to my surprise, most of them are doing a pretty bad job at it.😂
As seen in the above images, apps like ‘fuze. tv’, ‘Outplayed’ are some of the most popular ones out there but they have handled ads rather poorly in my opinion. They have designated it as a separate segment, sometimes covering even 40% of the screen. 😧
I wanted to implement ads in such a way that it feels inclusive in the app design, instead of just accepting it as a different component. But doing so does bring other issues as well, like the recommended ad size by Overwolf for best monetary benefits is 400x300 pixels. This would prohibit us from using different-sized ads for diverse features offered on Avatar.
The Redesign 🎨
Based on the pain points identified, it was time to put my product designer hat on and ideate some features which could solve these addressed problems.
Information Architecture
I started my redesign process by defining an information architecture for Avatar. This allowed me to gain insight into every feature that the app would offer and how the user will go about using each of those. I made a few changes to the overall structure by removing the game filter from the top nav and reducing the number of tabs on the side nav by moving some of the secondary features like ‘Best Practices’ under the settings tab.
I also created a structured map of the current version of the app with images of how features are currently implemented in Avatar along with the problems identified.
Wireframing
This is the step where I started to visualize the product and ideating solutions to various problems defined earlier. As always wireframing involved a lot of trial and error, trying out various possibilities of one feature, and revising each iteration from the feedback obtained by clients and potential users.
High Fidelity Designs
And we’ve finally reached here, I know you’ve been waiting for this! (hopefully 😂)
I created Hifi-designs for two resolutions- 1280x720 and 1920x1080. Initially, we decided to work on 720p as the clients considered that it would be best to get an idea of what their app would be on smaller display size. And, it was surely difficult to include a 400x300 pixels advertisement in this small size but I somehow managed it. Later, I also designed the responsive version of 1080p followed by the mobile app design.
So, here is a side-by-side comparison of some of the most important features offered by Avatar. Presenting you an All-new Avatar. *drum rolls*
1. Newsfeed
Newsfeed is essentially the home screen of Avatar. It provides the latest gaming content from popular platforms like Twitter, Reddit, and Instagram along with Avatar native posts.
*Please note that the development of the feed can only be done through API which does not offer any customizability over the content. The best design decision I came up with was to create a clean container that can host these posts from various platforms.*
2. Discover
The discover tab allows users to view the latest gaming highlights posted on Avatar.
3. Highlights
One of the major features of Avatar is that it can automatically record highlights from your game. The highlights tab shows these recorded clips according to the user’s gaming sessions.
4. Profile
Profile as the name suggests is home for any content creator on Avatar. It shows all the essential information and features to start enjoying someone’s highlights.
Mobile App Redesign📱
The mobile app came with its own set of challenges mostly related to accommodating gaming content on a smaller-sized display. Let us have a look at the major features of the Redesigned Avatar Mobile.
1. Home
The home tab provides the user with different types of content like highlight clips, images, and news in one place.
2. Search
The search allows users to discover content from a distinct game or content creator.
3. Discover
This is somewhat similar to the “Tik Tok” feed to swiftly move through fast-paced content. This section was specifically designed for watching highlight clips which made the most sense in a horizontal orientation.
4. Profile
Profile is pretty similar to the desktop app version. It shows all the necessary information and features to start enjoying someone’s highlights.
There were loads of more screens and minor features that I designed for Avatar. Explaining all of those in-depth might just require me to write a small book. 😂
So, here is a preview of the rest of the redesigned screens of Avatar.
And… That’s a Wrap! 🎁
So that’s pretty much it. This was my entire process of redesigning the Avatar App for Mobile and Desktop interfaces. Hope these designs can get developed very soon so all of us can enjoy sharing our awesome gaming plays on Avatar!
Thanks for reading ❤️. I hope it was worth your time.
I had a lot of fun working on this project. Hopefully, you found this case study insightful. Be sure to 👏🏽 below (You can give 50 claps at once, just click and hold on the clap button). Looking forward to your suggestions :)
Wanna get in touch for a project or just wanna talk?
Hit me up at himanshuaneja99@gmail.com or connect via Linkedin
