UI-motivated rebrand

As with all apps, user experience plays a big role in retention. Over the course of three sprints, we set out to redesign Sage's visual identity, user interface, and overall concept to better resonate with gamers.

Making a splash

What's better for a good first impression than a fancy splash screen? I made extensive use of Riot Games' massive League of Legends art library and used some Photoshop and animation tricks to create screens that feel dynamic and polished.

There's no bored in onboarding

I designed the onboarding process to be as  streamlined as technically possible. By only prompting users to provide information when the app needs it to function, we were able to divide the onboarding process into shorter chunks that are much less likely to scare off users. All it takes to get started is a username and a password.

What the app does

Sage primarily served as a hub for League of Legends players to improve their gameplay and meet others to play with. It served four key purposes: watching coaching content in Class, finding coaches and companions in Explore, connecting with the community in Inbox, and personalizing your profile in Me.

Familiarity versus identity

One way to increase a product's user experience is to use widely adopted design patterns so your users instinctively know how to interact with it. I personally feel that some apps take this too far, effectively robbing the final product of any individuality. Though I did take inspiration from common UI patterns, I also embraced the fantastical flourishes often associated with RPGs and the flashy elements frequently seen in esports-related media. One way to infuse some personality in a non-obstructive way is to design a spinner that encompasses the brand.

Level up with the Class feed

Inspired by the engaging formats of social media giants like TikTok and Instagram, as well as e-learning platforms, the Class feed is where users can watch free videos and coaching sessions. This feed was a space for active learning, offering tips and strategies to improve gameplay. The design borrowed elements from familiar platforms to create a user-friendly and engaging experience, encouraging users to spend more time exploring content.

Finding people to learn from and play with

The Explore feature lets users browse available coaches and companions. Each card features a photo and a description, along with a session fee in tokens. Tokens could be bought directly or earned through interactions with the app.

Match Review

No tokens to book your own sessions? Not to worry. You can still get some learning by sitting in on other people's sessions. This approach benefits non-paying users' experience while also enticing them to book their own sessions. By giving coaches the option to make their coaching sessions publicly available, we lower the threshold from passive viewer to active user.

Instant connection

If you're not in the mood to manually look for someone to play with, the Quick Connect feature has you covered. Through this feature, users can instantly connect with a coach or companion. Matches can be randomized or tailored to the user's criteria for a small amount of tokens.

Creative campaigning

A big part of getting a startup going is simply getting the word out. Although gamers are often grouped together as a single target audience, there is a lot of variation within the group and many possible marketing approaches. Some ads focused on the improvement journey, others emphasized the sense of community, and some just featured drawings of hot girls.

In a nutshell...

Sage was a significant departure from my usual clientele, and I thoroughly enjoyed it! Although I'm not much of an online gamer myself, it was fascinating to immerse myself in the culture for a while. This project marks a turning point in my career, as I shifted my focus toward the international market. I couldn't have asked for a better introduction to these new territories. Cheers to the team and the memories!