Riot Roadmap

Roadmap was developed as a dedicated product to serve the League of Legends and Valorant departments at Riot Games. These departments required a centralized tool to track and manage their work, including launch dates for new features, items, in-game events, and collaboration dates along with significant deadlines. Prior to Roadmap, teams relied on Google Sheets for tracking, but it lacked the specific functionality needed. To address this, the Enterprise Item Department took the initiative to create Roadmap, aiming to provide internal users with smooth synchronization of dates and activities, as well as efficient browsing of yearly, monthly, and daily calendars.

Due to confidentiality and contractual agreements, I am unable to showcase my full UI/UX design work from Riot Games.

However, I am more than happy to discuss my design process, methodologies, and the impact of my work in a confidential setting or during an interview.

Why should we make Roadmap?

Riot Games operates in a state of coexistence, where teams independently plan and execute their specific scopes of work while collaborating through meetings, Slack, or informal conversations as needed.

However, there is a great need for improved coordination to unify and combine efforts across different teams and larger initiatives. This manual coordination process can be enhanced through Roadmap, which aims to provide user-centric approach to coordinating activities and goals. By introducing features such as easy integration, real-time updates, and intuitive navigation, Roadmap can facilitate effective collaboration and foster a sense of shared purpose. While the ultimate goal is to foster co-creation, the current focus is on addressing coordination challenges and enhancing the user experience. Riot Games is ready to take this next step in their UX journey, and the roadmap may explore ideas that bridge the gap between coordination and co-creation.

User Behaviors

I have gained insights into the existing coordination practices at Riot Games and identified the needs for improvement. The Riot Roadmap had the potential to transform team dynamics and address challenges by introducing new behavioral patterns. By leveraging the features and capabilities of Roadmap, teams could enhance their collaborative efforts, align their goals, and foster a cohesive working environment. Our exploration of coordination dynamics laid the foundation for designing a roadmap that generated an effective coordination and display positive changes in team behavior and outcomes.

User Interviews & Feedback

Through comprehensive interviews with various teams and departments, we conducted an in-depth exploration of their pain points and sought to uncover the reasons behind the challenges they consistently encounter in their workflow. These insightful conversations allowed us to gain a deep understanding of their needs, aspirations, and the specific areas that needed improvements. By engaging in proactive dialogue and actively listening to their feedback, we gained insights that serve as the foundation for our design process and solutions that address their concerns.

Game Teams

LoL and TFT use their own "Roadmap" on Google Sheets. They wanted a Roadmap that resolved problems such as:
- Missing features (start/end dates, deliverables, new launch, etc.)
- Slow performance & lack of permission capabilities
- Not using JIRA for planning
- Complex cross pillar (department) collaboration

Entertainment, Esports, & Publishing

Teams do not use JIRA for planning and collaboration; this makes the overall workflow confusing and delays tasks
Every team has different standards in collaboration and dynamics
To collaborate and reduce issues, they use multiple platforms such as: Air-table, Google Sheets, PowerPoint
They would rather use one platform which can let them have fast, efficiency in overall work

What are the main pain points and problems?

Problems in strategic planning with other teams
Lack of visibility and prioritization across pillars and critical initiatives
Inefficient communication: holistic collaboration and tracking cross-team dependencies
No defined planning processes or data owners
No centralized work tracking or management platform personalized for Riot (since gaming companies have distinct work flows)

The Google Sheets "Roadmap" used by LoL; it is confusing and hard to navigate or collaborate on.

The MVPs for Roadmap

1. Visibility

Providing early and ongoing insights into the work of other teams, enabling support, partnership, and identification of co-creation opportunities. It helps teams understand dependencies in advance for better planning and collaboration.

2. Prioritization

Adjusting internal team priorities to align with cross-pillar initiatives and centrally driven programs. Clear decision-making is crucial, especially when priorities may not be universally evident across teams.

3. Collaboration

Promoting collaboration across teams that have limited interaction and across different regions. Timely input and knowledge of plans facilitate effective work structuring and regional awareness.

4. Progress monitoring

Connecting strategic planning framework (SPF) outputs and objectives and key results (OKRs) to roadmaps and programs. It ensures alignment and facilitates tracking of milestones, addressing any missed results or modified timeframes.

Data measurement for Roadmap

To ensure the accuracy and integrity of data in the user flow, it was crucial to devise a comprehensive plan for capturing and analyzing usage data and user interactions within our Roadmap platform. This involved implementing robust mechanisms to gather relevant data points and establish a reliable backup system for data preservation and security. By effectively collecting and leveraging this information, we aimed to gain valuable insights into user behaviors, preferences, and pain points, enabling us to make informed decisions and continuously improve the user experience.

Establish a clear process for investigating data breaches or accuracy issues
Implement an automated audit trail to track unauthorized access and compromised data/documents
Track data events (create, delete, update) with timestamps and responsible parties
Enhance data security and integrity through a robust audit trail system
Enable automated notifications via Slack to alert the engineering team about system errors, including detailed logs
Incorporate Google Analytics or other user tracking tools in Roadmap to gain insights into user behavior and
identify pain points and UI/UX enhancements
Develop admin roles in Roadmap for support teams to assist with error troubleshooting and internal testing
Create impersonation capabilities for support teams to troubleshoot user-specific errors related to roles and permissions
Ensure all impersonation activities are tracked and logged in the audit logs for security purposes

UIUX Visualization for Roadmap

An intuitive and visually engaging UI/UX design that serves as an interactive calendar, displaying release objects (Features, Releases, and Events) and facilitating coordination and exploration
Enables users to gain valuable insights into major outcomes and project timelines across the company, enhancing transparency and informed decision-making
Incorporates UX research and user feedback to ensure an intuitive and user-friendly experience, allowing Rioters to easily navigate and interact with the Roadmap
Offers a flexible and responsive design that adapts to different devices (Macs, PCs, and tablets), optimizing the viewing and usage experience for users across various form factors
Implements redacted content display for users without access to certain Roadmap content, maintaining a consistent and coherent interface while respecting data access permissions

Feature Analysis

In order to gain deeper insights into the data and validate our hypotheses, a feature analysis was conducted. The objective was to identify and prioritize features that would support daily workflows for Rioters. Throughout the analysis, the primary focus was on simplicity and ease of use, ensuring that the Roadmap provided effortless usage, easy access, and intuitive navigation. This user-centric approach aimed to align with the diverse user flows and requirements within Riot, ultimately fulfilling the overall user experience.

The data exploration features of the Riot Roadmap tool aim to simplify the process of analyzing information for employees by providing them with a user-friendly and easily accessible environment for visualizing data and validating hypotheses. The tool offers ad hoc analysis capabilities, allowing users to interactively explore their data through different types of visualizations.

One key feature is the ability to slice and dice/filter the data using various criteria. Users can apply compound filters by selecting Pillars, Teams, Sub-teams, Campaigns, Events, Releases, Features, Patches, or specific time periods (Year, Quarter, Month). This allows them to narrow down the displayed information based on their specific needs. The tool also supports custom sorting, enabling users to arrange the order of Pillar or Team lanes according to their preferences.

To provide a simplified view for presentation purposes, the tool allows users to hide or show certain fields such as status, points of contact, and data owners. Additionally, for work or events sourced from Jira, Airtable, or Google Sheets, the Riot Roadmap can ingest and display their respective statuses, including "Done," "Updated," "New," "Tentative," and "Won't Do."

The tool also supports managing dependencies, both within and across different categories. Users can link dependencies directly in the Riot Roadmap, allowing for better visualization and understanding of the relationships between various elements.

To facilitate navigation and access to additional information, the tool enables users to click on links associated with specific work or events, which will redirect them to the source data (e.g., Jira, Airtable, or Google Sheets). Similarly, users can click on Pillars or Teams to navigate to the relevant group on Teams, and they can access data owner profiles by clicking on provided links.

The Riot Roadmap offers different views, including Release view, Milestone view, 1+ year Strategy view, and a Historical Timeline View. Users can also create custom views for scenario planning, allowing them to tailor the tool to their specific needs. Within these views, users can create events, add existing Releases/Patches/Events to campaigns, and edit or delete events created in the Riot Roadmap.

Collaboration is facilitated through real-time capabilities, allowing employees to have meaningful discussions about their discoveries. Users can share custom views with others through go link capabilities, creating shareable links that provide access to specific views depending on the user's permissions. Permissions for custom views can be managed, with options for public or private viewing permissions. Notifications and pings can be sent to subscribers, integrating with Slack. Users can subscribe to custom views or specific events/campaigns/releases, and they will be notified of updates related to their subscribed content.

The tool supports global translations and localization, although this is currently a long-term vision and not actively executed. It can default to the user's localization browser settings and allows users to set their language preferences within the application. The UI/UX of the Roadmap is designed to support different language styles, including right-to-left layouts. Exported files from the Roadmap, as well as Slack notifications, are customized to the user's language settings.

To support various work scenarios and quick access to information, the Riot Roadmap tool is mobile-friendly and optimized for tablets. Users can view and utilize all the functionalities of the Roadmap on iOS and Android tablets, ensuring accessibility across different devices. Phone compatibility is currently out of scope for the tool.

General Phases of Roadmap

Copy of Riot Roadmap 2022 Q2 Kick-Off.png

Riot Roadmap Timeline: MVP & Targeted Areas, Functionality

UI Color Palette

High Fidelity Wireframes

I collaborated closely with the UI Designer, providing guidance on UI visuals and shaping the overall UX flow of the product. To ensure users can achieve their goals efficiently, we conducted a comprehensive heuristic analysis during the initial review phase. In parallel, I conducted rigorous UX research, validating our design decisions and gathering valuable insights.

By combining the findings from the heuristic analysis and UX research, I identified key areas for UI/UX improvements. These included specific design enhancements, adjustments to the user flow, and potential new features to enhance the overall user experience.

To ensure alignment with project goals and stakeholders, I presented my findings, UI/UX improvements, and strategic UX decisions to the manager. This allowed for a balanced consideration of user needs, business requirements, and technical feasibility.

The manager carefully reviewed the proposed changes, taking into account the wireframes in their current state. Through this collaborative process, we aimed to strike a harmonious balance between user-centric design, business objectives, and technical constraints.

By following this iterative approach, combining collaboration, heuristic analysis, UX research, and managerial input, we effectively directed the UI visuals and optimized the UX flow of the product, resulting in an improved overall user experience.