Centralized place for managing social connections
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.
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.
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.
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.
Once the central layout for friend management was finalized, I worked on making the right rail more cohesive and consistent with the left content.
I refined and simplified the right rail module to reduce noise and enable users focus on the primary objective of the component.
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 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.