Type: Quick Look

Project Duration: August 2017 &
August 2018

My Role: UX & UI Designer

SG Product.png
 

Overview

Finding old League of Legends content can be really hard for players. Riot often releases narrative content tied to in-game release schedules and distributed in the form of microsites. Because these microsites are attached to campaigns and events tied to the game, once the event is no longer relevant they are often abandoned in the Internet void, making it very hard for players to access that content later. Additionally, new players completely miss out on the experience because they have no clear path for accessibility of old thematic content.

This microsite is no longer available for players to interact and experience.

This microsite is no longer available for players to interact and experience.

Our mission was to: 

  1. Lift all of our old, new, and future content to evergreen status.

  2. Create a central location that’s easily accessible to players. Riot created a platform for players to learn more about the world of League of Legends -- Universe. It’s a place that holds a vast collection of art, narrative, comics, and videos of the world of Runeterra, and I believed this was the perfect location to create a central place for alt theme content.

  3. Bundle content into thematic collections -- digital groupings of content which highlight specific themes from League of Legends.

Our team needed to create a central hub for all Star Guardian content, and the best opportunity to test our thinking was through the introduction of the new Star Guardians.

I go-designed the Star Guardian collection and it can be accessible through the Collections tab on Universe. In addition, I designed an improved story reader to address the need for chapter navigation in the Star Guardian short story, a missing feature from the old story reader on Universe.

 

Product Goals

  • Allow users to access all Star Guardian content in one place

  • Allow users to navigate easily within the collection

  • Intuitive navigation across the short story

 

Design Explorations & Wireframing

A combination of competitive analysis, sketching, and wireframing helped us align on a direction that would best serve the goals for this project.

I tested the first design with the Star Guardian collection and it was composed of a landing page, individual champion bio pages, a short stories and additional media.

Problem+1-4.jpg

With user interviews and usability testing through the Odyssey themed collection, I learned to optimize the design by creating a 1 page, long scroll hub that showcased all related content. By the K/DA thematic collection, I learned how to build a more effective one page experience that would be more interactive for users to explore and learn more while easier to develop for future experiences.

ODYSSEY – 1.png
04_Mobile_v3.png
 

User Flows

I also created user flows to understand movement in and around the short story reader to make sure all my user stories were taken account for.

05_Mobile_UserFlow.png
 

Final Product

We now have a central place for all AU themed content that’s updated with new content and kept in evergreen status. Overall, player sentiment through public forums like Reddit and League boards suggest that it was well received.

KDA1.png

The League of Legends Personalization team was very excited with my work and continued to create more full-fledged thematics that my team translated into collections.


Check out the Star Guardian, Odyssey, and K/DA collections!