contribution

UIUX, Visual Design

year

2020

duration

4 months

 Back to previous

jump to:

top concept approach design results

laning stage

Concept

Sage is a platform that connects League of Legends players looking to improve with coaches who can help them. Coaches offer 1-on-1 reviews as a premium service. These tutoring sessions are recorded and can be viewed by other users for free.

Product goals

Sell coaching sessions

To build a platform that allows League players to book gaming sessions with skilled or otherwise desirable players such as influencers and well-known streamers.

Retain users through social presence

To tap into a fanbase looking for ways to improve their gaming skills within League of Legends and connect with peers.

ready, set, go!

Approach

"As a startup, we needed optimize both speed and UI/UX. After going through over 20 candidates, we finally found Yoel. Yoel is able to not just deliver fast, but also iterate just as quickly. His design and ideas directly led to more conversion and sales. Can't wait to work together again :)"

- Jeffrey Tong, Founder at Zelos

The product

Sage was already pretty good when I joined.

I often notice a particular untapped potential with startups - from a visual standpoint. The base idea is there, we just need to amp it up a little. I kicked off the Sage project by reworking its brand identity - a process that often goes hand in hand with some of the first UI designs.

Scope

Design

Elevate the existing concept’s UX through the use of user interface and visual design;

Market

Research target groups and create engaging ads to promote the app;

Retain

Think of features intended to optimize user retention;

Think

Brainstorm with company founders about future business decisions;

Communicate

Clearly brief the engineers tasked with realizing the visual concepts;

Research

Interview users to determine which ideas do and do not resonate.

Challenges

Working with Flutter was a first for me! Finding out what was and wasn't possible was a trial-and-error process, but the engineer and I managed perfectly.

I like games, but I wouldn't consider myself a gamer in the sense that I'm not very familiar with the multiplayer/eSports side of it all. Before working for Sage, my LoL knowledge was surface-level at best.

Sage was still finding its footing in terms of functionality. The quick decision-making process rendered some of my work obsolete hours after I finished it. But hey - that kinda comes with startup territory.

Yoel: First of his Name, Wearer of Many Hats

Being in charge of every single piece of visual output for a company comes with its own set of challenges and benefits. Being able to edit everything on a whim makes you much more critical of your work, which I consider both a challenge and a benefit.

cast iteration spell!

Design sprints

A sprint! It's super effective! Wait, no... Wrong game reference. Still, an iterative work process is super effective if you don't mind starting out a little rough around the edges to build towards something meticulous.

First sprint

During the first design sprint, the main focus was to revamp Sage's designs. At this point, I kind of winged it - there wasn't much of a user pool to gather feedback from just yet. The goal was to elevate; I applied contemporary user interface trends and tweaked some official League artwork to create an ensemble of screens to hand off to the engineer.

Second sprint

During the second sprint, we made more brand identity changes, the most notable being a color palette swap. I felt the black and gold looked a bit tacky, so I used a green tone that was previously only used as a call-to-action color. Some functionality was also added, requiring some fundamental UI components to be revised.

Third sprint

Green was reinstated as a call-to-action color during the third and final sprint. The new primary color: Lilac. We did that to invoke a sense of familiarity with our target audience of frequent gamers. Lilac's used by some of the biggest game-oriented platforms in the game (pun absolutely intended): Discord and Twitch.

cast beautification spell!

Visual design

Typography

I wanted to achieve a seamless look for Sage on both major mobile operating systems, so I used their native font families in my designs: SF Pro for Apple and Roboto for Android.

Icons

I thought it'd be cool to incorporate some fantasy and RPG-like elements into the icons wherever I found the opportunity. I designed a shit-ton of 'em - the ones shown here don't even scratch the surface, but that's what we ended up using in the app.

Easter egg

Every good app needs an even better loader. So, I made two. One simple small version and this guy right here. It spells out 'Sage' in binary code. Each ring is built up of sections that represent 1s and 0s. Pretty cool, right?

just showing off the animation, there's nothing loading here ;)

Visual deliverables

The beautiful character artwork presented in this case study was created by its respective illustrators and courtesy of Riot Games. I just did some tweaking to prime them for in-app use.

I cut, pasted, re-colored, enlarged, re-drew... you name it. The illustrations are lovely, but I thought we could take it to the next level by adding subtle idle animations.

Color palette

Being in front of a screen for 5+ hours daily is bound to strain your eyes. Because of this, gamers tend to browse their devices in dark mode. We decided to kill light mode as a time-saving measure and opted for a dark visual identity instead.

Logo

Getting to the final logo took a lot of drafts - some better than others. I played with fantasy and sci-fi elements and borrowed from the characteristic eSports aesthetic. The result is a sleek, straightforward typographic logo with a dash of whimsy to it.

the homestretch

Results

(Online) ads

I should probably add 'marketing expert' to my resume. I came up with a whole bunch of blurbs and painstakingly browsed hundreds of League illustrations to find footage to accompany them. Sage advertised through Facebook and Instagram.

Onboarding

A clear onboarding flow is essential. No user wants to create an account, but we, the app developers, need them to - for many reasons. We carefully split the onboarding steps into bite-sized chunks to lower the account-creating threshold.

Explore

The main goal of Sage is to generate revenue by having users book players for coaching or companionship. We created a feed for those players to market themselves through a personal profile, featuring your standard profile elements: A photo, a way for the player to describe themselves, and the fee they charge for a session.

Feed

Inspired by some of the leading feeds in the game: Instagram, Facebook and TikTok, but with a splash of inspiration taken from e-learning platforms.

Match review

All roads lead to Rome. Coincidentally, all ways in Sage lead to conversion via the booking of players. Users can freely enjoy the content they put out, but we made sure to always include a subtle CTA somewhere to promote sales.

Connect

For users without a specific Sage player in mind, I came up with a "Quick Connect" function. This allows users to get in touch with random players. They are able to refine their search for an additional fee. Speaking of connecting, why don't you send me a message to let me know what you think of this project? ;)

message me

match results

Takeaways

Signed, sealed, sold

I learned that I have more of a marketing knack than I thought. English may not be my native language, but I'm convinced my tone of voice translates well.

Silver linings

The concept was terminated a few months after launch. Regardless, I worked with some of the most skilled people I've ever worked with and learned a lot.

I can be a micromanager

Though never mentioning anything, I'm sure I was pretty annoying to our front-end engineer El from time to time. Pinpointing wrong paddings and wicked proportions can be challenging for non-designers, but it makes a noticeable difference in how the end result will feel.

Meta's ad portal sucks

Facebook's business ad portal is genuinely the worst tool I've ever had the displeasure of working with. You'd think a tech juggernaut like Facebook would have some budget for more user research, but alas.