RadicalX

RadicalX creates an immersive digital world for next-gen developers guided by an AI Manager. They work in teams at a fantasy company, earning money through coding contests that mimic real-life scenarios. This approach democratizes opportunities and empowers developers with an innovative learning environment that leverages technology to revolutionize their skills and growth.

By leveraging Figma, Miro, Notion, Click up, and Gather, I played a key role in designing the RadicalX Developers Metaverse and gaming platform.

If you want to see the prototype, please click the button below to access the Figma file.

Team

  • 2 Lead Product Designer

  • 2 Product Designer

Project Overview

My Role

  • Product Designer

Duration

  • 3 Months

Tools

  • Figma

  • Miro

  • Gather

  • Pitch

  • Notion

  • ClickUp

My Contribution

  • User Research


  • Market Research


  • Persona Development


  • Wireframing


  • Prototyping


  • Interaction Design

  • User Testing

  • Iterative Design

Problem

The problem to address is the current lack of a user-friendly and interactive platform that facilitates collaborative teamwork effectively. The challenge is to create interactive screens that enable users to seamlessly participate in missions as a team, fostering engagement, navigation, and connection within squads.

How might we help users to easily join missions, work together as a squad, and also earn income?

In our UX brainstorm, we crafted features blending gaming and professional development. These elements aim to create an engaging and collaborative learning environment, simulating real-world coding scenarios.

Solution

To address the challenge of fostering collaborative teamwork, an interactive screen system is proposed. This solution empowers users to seamlessly navigate, discover, connect with squads, join missions, and engage in collaborative teamwork.

The goal is to create an intuitive and user-friendly platform that enhances engagement and facilitates effective collaboration within squads.


1. The hero image with squad member avatars fosters a sense of community and collaboration, encouraging teamwork and connection.
2. This section keeps users informed about squad achievements, changes, and key metrics as soon as they log in.
3. It offers squad info and allows users to invite members. The hamburger menu icon provides options tailored to leaders and members, making it easy to access role-specific features and tools.
4. The availability table displays each squad member's schedule, aiding collaboration and facilitating easy communication.
5. The section with current, upcoming, and past mission cards lets users join, continue, or review missions, helping them stay engaged and track their progress.

Let's review the steps we took to reach this solution

In the project's early stages, our focus was to deeply understand the product and squads feature at RadicalX. I began with competitive benchmarking, studying the strategies of direct competitors such as Enboarder, HackerRank, TopCoder, Codewars, Kaggle, and HackerEarth. This helped me identify industry best practices and uncover insights to improve RadicalX strategies and offerings.

An affinity diagram was needed to organize and sort the data gathered by our team members

After conducting competitive benchmarking, I led a team meeting to analyze competitors in-depth. My role involved identifying similarities, differences, strengths, and weaknesses to extract design inspiration from those closest to RadicalX. Synthesizing this data, I aimed to draw meaningful conclusions that would guide us toward a more refined vision for RadicalX's design.

Analyzed competitors to find key features and micro-features

I collected screenshots from competitors to find the best features for the RadicalX squad dashboard. This research gave me several insights for the wireframing process.
Features:

  1. A dynamic task assignment system that enables squad leaders to distribute tasks effectively.

  2. Real-time progress tracking bars that visualize individual and team progress on coding challenges.

  3. An integrated communication hub, combining chat, video, and resource sharing, tailored for collaborative coding sprints.

  4. Customizable user avatars and profiles, offering a personalized touch to each member's digital presence.

  5. Gamified achievement badges that recognize skill development and milestone completions.

  6. A flexible notification system that allows users to set and manage alerts for task updates, squad communications, and event reminders.

    These insights guide us to create a user-friendly, engaging dashboard that combines gamification with a productive learning environment..

User persona provided valuable insights into users' needs, preferences, and behaviors

After gathering insights from user and market research, each team member created a persona to outline our target user. This user persona helps guide us in making design decisions that align with user needs throughout our process.

The sequence of actions a user would undertake to complete a task

We developed separate user flows for 'mission participation' and 'joining a squad' to better understand users' actions and journey through these processes. By mapping out these flows, we gained valuable insights into the steps users take to accomplish tasks, helping us identify potential obstacles and opportunities for improvement.

The wireframing process begins with sketches to create a solid base and focus on a user-centered design from the start

The team and I brainstormed sketches based on the user flow. We presented each design idea in a meeting and chose to move forward with a flow suggested by our Product Design Lead after incorporating feedback.

High Fidelity Design & Iteration

Let's review the progress and outcomes of our design phase

The goal of the iterative design process was to progressively improve the platform by incorporating feedback from the product design leads and stakeholders. We aimed to create a more engaging and user-friendly experience with enhanced visual cues, a more intuitive layout, and a shift towards immersive, interactive design. These changes were designed to boost efficiency, make navigation smoother, and enhance overall user satisfaction.

Check out the Figma file to see the complete design.

During the first iteration, we focused on a clean, streamlined design with essential features like member invitations. We added a banner at the top of the page with key squad info and prioritized 'profile management' and 'team management' in the first tab for easy access. Additional tabs such as 'collaborate' and 'message' were included to facilitate collaboration and joining missions.

In the second iteration, we enhanced the hero image by incorporating user stats and revamped the banner. We replaced settings icons with a hamburger menu to offer more options beyond settings. We shifted the 'collaborate' tab to 'statistics' as requested by team leads, while also placing 'missions,' 'availability,' and 'members' on the home tab for better user experience.

In the first iteration, the second tab included a 'task' section and an 'availability' section for managing tasks and tracking team members' availability. Users could move task cards through 'to do,' 'in progress,' and 'done' stages, and tasks were organized by mission in separate tabs.

In the second iteration, task management was removed based on feedback from team leads. They preferred focusing on displaying statistics for more valuable and motivational information. However, the availability section was retained as it was deemed important for the home tab.

For the third iteration, we made the hero image more engaging and vibrant. We replaced 'team stat' with 'recent squad activity' for better insight. To avoid a lengthy home page, we removed the 'member section' and created a separate tab for it. We also rearranged the order of 'missions' and 'availability' to prioritize users' needs for checking availability and collaborating with team members.

In the first iteration, we created a messaging section in the third tab that lets users send messages to the entire team or individual members.

In the third iteration, the second tab introduced 'members' cards, allowing users to view brief details of each member. This section featured two tabs: one for current members and another for applicants who had requested to join the team or were invited. Users could then accept or reject their requests.

In the second iteration, lead designers suggested keeping the messaging section as it was. We made slight adjustments to the header size and improved avatars.

The third and final iteration features four tabs, with the last one dedicated to activity and notifications. This tab includes three sub-tabs: one for all activities, one for mission-specific activities, and one for squad-specific activities.

For the third iteration, we refined the 'statistics' section designed in the second iteration. We made small tweaks for improvement, adding two tabs: one for stats and another for team badges earned during missions. This section was moved to the third tab as the second tab focused on member cards.

My key role in optimizing pop-ups led to a 100% success rate in user testing

One of my most significant contributions to this project was simplifying pop-up content for clarity and reducing the steps needed for squad creation. Previously, the process involved over 10 steps, which I raised as a concern due to potential user fatigue and abandonment during this crucial part of the RadicalX platform. We brainstormed solutions to streamline the pop-ups, and my suggested version was approved with fewer, more direct steps. This approach improved the user experience, as testing showed a 100% success rate with all users completing squad creation in under a minute.

What I learned from this project

This position provided me with an invaluable opportunity to hone my teamwork skills, fostering collaboration, idea exchange, active listening, and the ability to both give and receive constructive criticism. Moreover, I had the chance to overcome my fear of public speaking as I presented our work on multiple occasions. For this growth and learning experience, I'm sincerely grateful to Talha Sabri and his exceptional team; they are truly remarkable.

Thank you for reading my case study!

Interested in collaborating? Don't hesitate to reach out!