RankR

Website Experience

 

CHALLENGE

RankR is a new Start-Up and were in need of a new brand and website. RankR serves as a destination for all aspects of eSports: tournaments, teams, news and community space. They wanted to validate the functionalities of their site including a calendar and team builder within the eSports community.

Their goal is to not only help gamers find teams to join or teams to find individuals to help build their team rankings, but to be the central hub where users can play or spectate others. 

 

MY ROLE

+ UI Designer

+ UX Researcher

DELIVERABLES

+ User Stories

+ Sitemap & IA

+ Persona Creation

+ Usability Testing

+ Testing analysis & iterations

 

DISCOVERY

Proto-Personas

Through working with our stakeholders and clients, we were able to identify our users and create proto-personas as guidance for any new feature or iterations we want to create within our app. These are constantly improving based on our analytics and user interviews. 

rankr_persona1
rankr_persona2
rankr_persona3
 

Hi-Fidelity Prototypes

After some initial white boarding sessions with the stakeholders, we were able to identify use cases and some top priority tasks our proto-personas would need to do within Rankr's website. From there, I created hi-fi prototypes in order to test and validate along the way. 

rankr_marketing_wire.png
rankr_home_wire.png
 

Usability Testing & Journey Mapping

From there, I used the hi-fi prototypes to do some usability testing gamers all resembling closest to our proto-personas. We had a neutral outside act as the facilitator, while the stakeholders, clients and designer were able to document, video record and learn from their verbal and nonverbal reactions entirety of the site. Because some of the information is confidential, I can't post the details of the individual journey maps here. 

 
I HAVEN’T SEEN ANYTHING LIKE THIS SITE BEFORE.
— User 3
5/6 USERS THOUGHT CREATING A PROFILE AND MANAGING THEIR TEAMS WAS EXTREMELY EASY AND INTUITIVE.
 
 
Rankr_usertesting
 
 

UI ASSETS

While the designer was wrapping up design elements, I helped create UI assets to help lighten her workload. These were ranking badges individuals would get based on their gaming scores individually and also as a team.


 

Side by side prototype & visual comparison

Marketing Site

rankr_marketing_wire.png
rankr_marketing_design.jpeg
 

Homepage

 

CALENDAR OF EVENTS

 

Sign up Page

rankr_signup_wires.png
rankr_signup_design.jpeg
 

Team Builder Page

rankr_teambuilder_wire.png
rankr_teambuilder_design.jpeg
 

Your Team Profile

rankr_view_wire.png
rankr_view_design.jpeg