PoroRank emerged from the Global Power Rankings Hackathon hosted by Riot Games to showcase professional League of Legends team rankings.
Challenge
How might we design a system that processes and displays real-time esports ranking data for fans to stay updated on their favorite teams?
The Objective
Create a scalable, serverless web application using AWS that provides League of Legends fans with an intuitive interface to track global team rankings while implementing industry best practices for cloud based architecture.
My Role
Lead UX Designer
Frontend Developer
Cross-functional team member collaborating with three backend developers
Hackathon Team
Technical Architecture
We started off designing the system that leverages a modern serverless architecture built on AWS, implementing several key technologies and design patterns:
Frontend: React application with SSR capabilities through Remix.js
Backend: Severless architecture utilizing AWS Lambda functions with containerized deployments
API Layer: RESTful API implemented through AWS API Gateway
Database: DynamoDB with single-table design pattern
Infrastructure: AWS CDK for infrastructure as code (IaC)
CI/CD: Automated deployment pipelines for both infrastructure and application code
Design Process
Research into existing sports and esports platforms revealed that users struggled to track team performance across different regions and tournaments. I designed the interface with a clear visual hierarchy: a prominent global ranking dashboard as the home view, with easy navigation to regional tournaments and favorite team tracking. The design prioritized clarity and quick access to information, featuring a performance graph that visualizes ranking trends over time.
Technical Implementation
Working with our backend team, I developed a React component system that efficiently handled our AWS-powered data structure. The interface updates dynamically as new match data comes in, with the ranking list and performance graphs adjusting in real-time. I implemented a responsive design that maintains the dashboard's clarity across different screen sizes, ensuring that both the ranking list and tournament information remain easily accessible on mobile devices.
From Sketches to Prototyping
I collaborated with the backend developers to decide which features of the design would work with our existing data structures while maintaining a feasible scope for the three week time frame. We decided on the dashboard to showcase rankings and live & ongoing events at a glance. Users were able to view live events displayed in a tournament bracket-style page to easily see upcoming games and recent game results. The world rankings could be filtered based on region or event.
Takeaways
Working in an agile environment alongside three developers offered invaluable insights into the delicate balance between UX design and technical implementation. The parallel development process required constant collaboration and quick decision-making to create an MVP that effectively served both user needs and system requirements. Through this experience, I learned how thoughtful information architecture and clear visual hierarchy can simplify complex sports data, while gaining practical experience in adapting designs based on technical constraints.
The success of our dashboard layout and navigation system demonstrated that prioritizing quick access to key information, combined with well-organized secondary views, creates an engaging user experience. We weren’t able to implement all the initial features within the limited time frame but it was a valuable experience to work on both UX and development to bridge the gap between design ambitions and technical feasibility.
Check out our submission page for more details!