The Squads Module is a newly designed social feature aimed at enhancing collaborative learning and problem-solving for the RadicalX platform. Modeled after hackathon-style teamwork, this feature allows users to form squads of up to five members to collectively embark on missions. The project successfully addressed the need for streamlined team interactions and income opportunities within the digital ecosystem. The module was evaluated through a user testing process involving 35 participants, leading to insightful feedback used to refine the user interface.
"The Squad feature provides an exciting way to collaborate and learn with peers, much like real-world hackathons." - Test User
RadicalX (now Reality AI Labs) is building an immersive digital world for next-gen developers, where they are guided by an AI Manager and work in teams at a fantasy company to earn money by competing in sponsored coding contests that simulate day-in-the-life scenarios. You can learn more about them and their amazing work at their Website.
Each team was assigned a user epic to be completed by the end of the internship. My team's epic was to Design an intuitive and engaging user interface for the squads feature.
The Squads Module is a social feature aimed at facilitating collective learning and collaborative problem-solving within the platform. Modeled after hackathon-style team collaborations, the Squads feature enables users to form or join groups of up to five members and compete in Missions as a team.
"How might we help users to easily join missions, work together as a squad, and also earn income?"
🔸 We started our research with competitor analysis and at the end, we narrowed our competitors and their key features down in a affinity diagram.
🔸 Simultaneously we looked to gather inspiration from online UX/UI libraries like Mobbin, Dribble, Behance etc.
🔸 The product already had similarities with a sports platform called 'Stadium Live'. So keeping in mind the company's young Gen Z audience, we looked for inspirations that was cool, gaming centric, had avatars but still keeping the familiarity of hackathon and team management platforms for the early to mid career professionals.
🔶 We divided our inspiration into 3 major themes
🔶 Analyzing all this, we then decided on 4 key features to design
.png)
🔶 To understand the flows better and design systematically we created user flows
🔶 We used a project management tool called ClickUp to divide and monitor our progress. I was assigned with designing:
🔸 Joining a mission as a Squad
🔸 Squad leaderboard
🔸 All Squads dashboard
🔸 Squad profile dashboard (Member View)
🔶 Utilizing the existing design systems, I started with designing my initial mockups.
🔸 My initial mockups had a lot of existing components and gaming heavy themes. I experimented with a few design layouts throughout but also mindful of the company's already established brand identity.
💭 My constant thought process was "How can we break the monotony of traditional coding platforms, make it cooler, but also familiar in a way"
🔸 Out of everything I designed, surprisingly designing the leaderboard was the most challenging. The original design by RadicalX was nothing like a traditional leaderboards. So for the initial mockups I tried to keep almost the same essence but tried re arranging things around. The feedback for my initial Hi-Fi mock ups were that they definitely needed more work but my ideas were in the right direction and inline with the company's brand.
🔸 To begin with, we held a design review session within our team and summarized everyone's feedback.
.png)
🔸 Using these initial feedback and later getting feedback from core team, I made several iterations of each UI
🔸 This was often mixed with re drawing my research board and get fresh inspirations.
🔸 In the final leaderboard design I added back the podium component as the core team felt it was essential to the design theme. Designed a list view in increasing order of rank and got rid of information that weren't relevant to a leaderboard.
🔸 Squad profile hero section was designed to look clean and convey most relevant information promptly.
🔸 The availability section was designed for the member view of the squad dashboard. Member can see each other’s working hours and sync accordingly. They can also edit their availability easily. We designed it to look and feel familiar to traditional calendars used in corporate world.
🔸 The MVP feature is something our team pitched to the core design team. Just like any other gaming or e-sport platform, we thought that it is relevant to our platform as well. Being MVP in online competing platforms gives users a little encouragement and sense of achievement.
🔸 On the side I also ended up making a few more squad dashboard feature for different use cases.
🔸 The join a mission flow was decided to be designed in form of pop ups as changing the already developed missions cards would be too much.
🔸 I made a small change to the starting point of the flow because this new starting point seemed more logical to me.
🔸 All 3 options for 'Join A Mission' flow was tested with 35 users and below are the results
🔸 The advance search filter was designed keeping in mind the industry standard best practices. There is scope to improve the search filters but the design in general blends in well the all squads dashboard
Reflecting on this project reveals lessons in balancing creative design with user-centric functionality. Moving forward, plans include expanding feature sets based on user suggestions, fine-tuning interfaces, and launching new missions to sustain engagement and growth.
Designing human-centered interfaces with a pop of color