League Mobile Redesign

 
GOAL

Redesign League Friends Mobile App, to engage players and fantasy fans better understand League of Legends world.

CHALLENGE

Based on the Universe of League of Legends research, we know that a lot of players used to learn the League of Legends universe contents in fragmentation time. Currently, League of Legends has an official App only for players social communication need, but the App still has huge potential to help players easier and convenient to learn League of Legend world. So

How might we engage players learning league universe in the fragmentation time to promote their passion and sense of identity for League of Legends?

 
BRIEF RESEARCH - Mobile App

Based on research, we noticed that the league universe mobile web still has big opportunities to improve better. Here are some examples:

 

1. The screen is too long to read, and the information density needs to improve. Users need to frequently slide down when browsing to see the deeper content. During user testing, the most of users don't want to slide down deep at the screen.

4. When the navigation bar is expanded, it will cover the entire left side of the screen, but the menu is short, which causing unnecessary occupy of the content display.

2. During the user testing, all users have strong need the for the search function on champions list. Users think that search is a basic function, also the display effect and browsing efficiency of mobile phones web are limited by the size of the screen, which requires search function more than PC web. But they cannot find the search function.

3. All users who in the test don’t find proactively that the featured screen can be horizontal slide.

1

"

That is so long! I won't read such a long web on my phone.

"

I can search champions on PC web, but I cannot search on the mobile web. That is so odd, League of Legends has over 130 champions, I cannot just scroll the screen and find the champion one by one. Mobile web needs the search function more.

Mobile Web

"

I wouldn't have realized that this image could slide left and right if the screen doesn't have animation. There's no any visual cue guide me.

2

Champions List Screen

3

Navigation of League Universe

4

Featured Screen

Hint:All research data come from League of Legends Universe research project.

APPROACH
Ecosystem

League has a large ecosystem of companion sites and apps that offer a variety of content and services. So before the design, I need to understand that what content present on a mobile app is effective and could scale the influence to the whole ecosystem to help players promote the sense of identity and the sense of belonging.

 

I found that Universe, Game info, and Community are three important zones. They present on the mobile app and combine the social feature could help players build League's knowledge system cognition while communicating with other players .

User Feedback Loop

The feedback loop can show the relationships of users with tasks, also, it can show the process that new players or normal player growing to League fan through the app.

Conceptual Model

Before the design, I build a conceptual model that describes abstractly — in terms of tasks, not keystrokes, mouse-actions, or screen graphics — what users can do with the system and what concepts they need to be aware of. 

PROTOTYPING
Sketch

I drew the flow of the main tasks of the app by the paper sketching. And when I was drawing the universe user flow, I got stuck at the main screen of universe, I tried 5 different layouts to show the options of champions, regions, and featured to keep synchronous content with the official web, but I was not sure which layout has better experience, so I asked 3 players to help me find the solution.

 

Finally, I decided to use the multi-level navigation to keep the visual consistency and show information directly that without needless taps.

Paper Sketching

Wireframe

After confirming the basic flow by paper sketching, I made the low-fidelity main tasks flow by wireframe.

You can check the details of flow by PDF

Hi-Fi Key Screens

The current League Mobile App

Key screens of current League Friends App

Because league already has a fixed brand UI kit, I don't want to break the brand visual system. So I used the similar mood style.

New design League Mobile App

Champions List Screen

Regions List Screen

Champion Details - Bio Screen

Champion Details - Game Info Screen

Champion Details - Story Screen

Story Content Screen

Region Details - Champions Screen

Region Details - Info Screen

Rapid Prototype

Because the present app focuses on the chat feature, so for the redesign project, my focus is the universe content. The rapid prototype represents interaction flow of champions and region. (You can operate it by yourself)

Rapid Prototype

MY TEAM

MY ROLE

DATE

TOOLS

PRACTICE

Solo

UX/UI Designer

March 2018

Sketch

Adobe Photoshop

MockingBot

System Thinking

Wireframe

Rapid Prototype

Time Management

NEXT STEP

1. Test, test, and more test.

2. Based on the testes iterate the prototype.

3. Design animation of the interaction.

sketch3