Yenny Kim Product Designer
Riot Org
Upon completing the Riot Roadmap, I was assigned the project of revamping Riot Org. Created in 2019 under tight time constraints,
Riot Org was initially developed without the benefit of established UI components or a design library. Although user research had been thoroughly conducted, the UI/UX fell short of expectations.
The existing UX posed numerous challenges and caused difficulties for Rioters in their day-to-day usage. The interface exhibited frequent errors and noticeable issues, hindering productivity and user satisfaction. The developers encountered obstacles in addressing usage questions and errors, leading many to believe that these issues were solely engineering-related. However, it was through the astute observation of our product manager that the true root cause was identified as a UI/UX error within the flow.
Recognizing the recurring problems faced by Rioters and the difficulties encountered by the developers, our department made the decision to prioritize an update and improvement of the then current version of Riot Org. Our objective was to enhance the overall user experience by addressing the UX pain points and streamlining the interface. This included incorporating a consistent and intuitive design language, implementing standardized UI components, and leveraging modern design principles.
By doing so, we aimed to provide Rioters with a more efficient and seamless experience, enabling them to accomplish their tasks with ease. Moreover, by resolving the usage questions and errors faced by the developers, we empowered them with a more effective tool to support the Rioters effectively.
Through this initiative, we strived to create a highly functional and user-friendly Riot Org that aligned with industry standards and met the evolving needs of Rioters. By investing in this revamp, we anticipated a significant improvement in usability, productivity, and user satisfaction, ultimately enhancing the overall effectiveness of Riot Org within the organization.
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.
What is Riot Org?
Riot Org is a platform designed specifically for Rioters, serving as a centralized hub to access and search for roster information. It provides a comprehensive database of pillars, hierarchy, departments, teams, employees, and other essential team resources, such as files, links, and schedules. This platform creates internal communication, fosters collaboration, and empowers Rioters with the necessary information to navigate the organization effectively, ensuring a cohesive and well-informed workforce.
What are the current issues?
Users have expressed confusion regarding the purpose of Riot Org, wondering if it is intended for looking up teams or individual profiles. However, it's important to clarify that Riot Org exists to provide access to both of these elements. Unfortunately, the overall structure and user experience of the product have left users frustrated and uncertain about how to effectively navigate the platform. It is necessary to improve the UX, organize the interface, and ensure that users can easily find the desired information within Riot Org. By addressing these concerns, we can provide a more intuitive and user-friendly experience, minimizing confusion and maximizing the platform's effectiveness in serving both team and profile lookup needs.
User Analysis
Due to Riot Org having two distinct versions, Regular and Admin, each with their own unique features, it was crucial for me to begin by understanding the user groups and their common pain points. Utilizing card sorting, I organized the frequently asked questions gathered from the Slack Channel for Riot Org, effectively grouping them based on the three distinct user categories: New Rioter (new employees), Existing Rioter (current employees), and Admin (Managers, Directors, Leaders, etc.). This method enabled me to identify the prevailing and crucial issues encountered by each user group, ensuring a comprehensive understanding of the most common challenges faced within Riot Org. Using all the provided resource, I gained a comprehensive understanding of the user flow for each user group, allowing me to visually map them out by hand on my iPad. I mapped out the solutions on the user flow by creating a use case scenario.
User Flow Map
I compiled a comprehensive collection of data from old user research and current to create user flow maps for every existing feature within Riot Org. Through my analysis, I identified pain points and areas where users encountered difficulties. Leveraging this valuable insight, I devised effective solutions to address these errors and enhance the overall user experience.
Low Fidelity Wireframes
After conducting detailed user research, I proceeded to create low-fidelity wireframes. Given the time constraints, the engineering team and I were directed to work swiftly. I collaborated directly with my manager, who served as the product manager for this project. Together, we identified the key features and essential navigations to include in the wireframes. Considering the additional workload of being assigned to Riot Search in the midst of this project, my manager and I made the decision to outsource the creation of high-fidelity wireframes to a vendor. This would allow us to focus on the upcoming project while ensuring that the user research and low-fidelity wireframes were delivered effectively to the vendor to have as reference on high fidelity wireframes.
Hiring Vendors to Complete High Fidelity Wireframes
I was assigned the Riot Search project after completing low-fidelity wireframes. We hired a vendor team in California, comprising UX Designers and product managers. I participated in Figjam activities and conducted weekly reviews to ensure they understood the platform. As Lead UX Designer, I provided guidance, corrected any UI/UX issues, and made suggestions for the wireframes. I also acted as a bridge between the vendor team and our engineering team. The project is still in progress.