FRIEND  MANAGEMENT

Centralized place for managing social connections

The problem

The Rabble app needed a friend management section to allow gamers to manage their social connections in one place. Only players with a Rabble ID could be added as friends to prevent toxicity and unwanted friend requests. Moderation was planned for later in the roadmap, so for the short term, the social circle was limited to close contacts only.

Gamers need a way to effectively manage their social connections to promote a safe and inclusive gaming community.

Design principles

Seamless :- Most social apps offer a friend management feature that lets users add, accept, view, and remove friends. Rabble goes a step further by also displaying online status, enabling gamers to effortlessly form groups and play together.

Promoting safe environment :- To deter unsolicited friend requests, Rabble assigns each user a unique 4-digit ID linked to their username, thus promoting a safe and non-toxic environment. A shareable link is also available, making it easy for users to add each other as friends on Rabble.

Quickly accessible :- In the early stages of Rabble, the play component was paramount, making it crucial to prioritize friend management, allowing users to easily add friends and jump into gaming as soon as possible.

Intuitive, engaging & Immersive :- I explored various methods to enhance the interactivity and excitement of the friend management panel beyond simply displaying a list of friend tiles. The ultimate goal of Rabble is to create a welcoming and joyful environment for gamers.

Layout explorations

I started exploring the friend management panel on mobile first as its challenging to accommodate such a huge feature on a small screen space. After reviewing with designers and stakeholders, I came up with several different ways to include immersive personality in the friend management section.

Mobile

Desktop

Diving deep

After confirming the final design layout with stakeholders and users, I moved forward by establishing the visual styles of the components with the aim of infusing immersive personality, simplifying the user experience, and fulfilling functional requirements. I explored several ways of showing friends tiles in the friend management section.

Limitations

• All the options were highly regarded for their unique features and effectiveness in meeting functional requirements. While the team especially favored Module 1, Module 2 was selected for implementation due to its ability to reduce engineering effort and be executed within a shorter timeframe. Module 1 was planned to be realeased with 3D avatars.
• Module 2 is easily adaptable on smaller devices such as mobile, allowing for ample space to include maximum details.
• As Rabble is built using Unity, accurately implementing grid management in Rabble, requires significant attention and effort from engineers.

Driving consistency

Once the central layout for friend management was finalized, I worked on making the right rail more cohesive and consistent with the left content.

Iterations

I refined and simplified the right rail module to reduce noise and enable users focus on the primary objective of the component.

Final Prototype

After several iterations and simplifying the design based on UX and technical constraint I came up with this final design serving our first phase MVP and also getting gamers excited with 3D avatars and how it might shape the future product direction.

Final design

Final version of the design included a change in the left navigation rail due to business requirements. It didnt change much of the design in desktop but on mobile, the new header placement affected the friend management screen.