Incentivizing and Gamifying the Referrals — A UX Case Study

What is Avalon?

Avalon Meta, a startup that combines higher education and competitive gaming, is an alternative online education platform that teaches you skills relevant to the present-day world to help you develop the tools & mindset you need to build extraordinary careers.

Experts across various disciplines help you learn, mentor you and transform your career prospects. What’s more? Avalon Meta is not all-work-and-no-play. It’s designed to make sure you enjoy the process, by giving you a gamified learning experience.

Key Features

  • Access content that rivals the syllabi of the best colleges in the world
  • Learn from real-world experts of the day, become positively primed for great career opportunities.
  • Build your team and get matched with a personal mentor
  • Stay active on the app, compete with other Meta Teams, score Meta Points, and increase your landing an excellent placement.
  • Be a part of the Avalon Army — your direct ticket to experienced mentors, peers, and loads of career growth opportunities.
  • Connect with fellow learners and stay up-to-date on discussions, via bulletin boards & discussion threads
  • Earn digital drops, win battle cups and even become a premium Avalonian with a Meta Pass

My story with Avalon Army

I have been a part of the Avalon Army Telegram group since the very beginning, but unlike now, if you and I talked a month ago, I wouldn’t call myself an Avalonian. My journey with Avalon began with the Discord server, I always thought for a community growing at such a pace a Discord or a Slack would be a lifesaver.

I am an Early Avalonian with a large group of friends on the server itself. I am part of R.I.M, also known as the Revolutionary In Making with a vision to make revolution within the community.

But in order to understand my audience better, I tried to teach them what I knew

The workshop was a success with around 70 people joining us, I learned a lot about people and enjoyed giving back to the community you can watch the session here:

Understanding the product

Avalon Meta is currently available on

Play Store

Avalon Meta — App for Learning Skills Online — Apps on Google Play

App Store

‎Avalon Meta

App flow

What are we solving?

Augment their existing gamification system with a badges system for referring users

Meta currently has a gamification system that takes into account the number of minutes spent watching lessons and uses this to assign a Level to you. This Level is publicly shown against your name and on your profile.

The next step is to create badges that will show up on your profile to reward you of actions you’ve taken. For a start, we’re going to start with modifying the current referral system to introduce badges.

How are we solving this?

Research

Referring services/ products to a friend in exchange for incentives are quite common today. A bunch of apps follows a similar mental model to publicize their services. In the case of Avalon meta, incentivization and gamification could work hand in hand. Ever since the introduction of ‘Avacoins’ to the discord community, the possibilities of incentivizing the users for performing tasks are limitless. Understanding the possibilities I hoped on to uisources.com in order to understand how other real world app uses Gamification and Referrals.

Headspace

  • What are the benefits of inviting a friend?
  • Instead, If my friend already is a headspace user, WHY DO I INVITE THEM? BAD MICRO COPY

CRED

  • “Click on invite friends and earn gems” clear copy helps the user understand why they should invite someone
  • A 3 Page carousel with fewer words but more information
  • Send a personalized message

Sweatcoin

  • Short and simple
  • To the point
  • Incentive clearly stated

Cake Browser

  • Video explanation
  • Straight forward

Read a few insightful articles

Wireframes

Low Fidelity

After looking at over ten apps and understanding the pattern behind referrals and invites, I already had a picture of my final product. Hence I picked up pen and paper and drew a rough sketch of what I had I mind

Mid-fidelity

After using pen and paper to draw not such straight lines, I hopped into Figma to convert my idea into reality; my process is wrapping one layer at a time. Hence I started by converting my low fidelity to mid-fidelity wireframes

High-fidelity Wireframes

Iterations

Explaining the iterative process

Open this file in order to look at all the iterations I made in order to reach the final results

Final Visual Design

Receive rewards every time someone joins using your invite

Diverse range of rewards ranging from Avacoins to Super Rare drops, that you can trade with friends

Special and unique looking badges for referring friends or being an Early Avalonian

Different badges for each Level, get em all!

Introducing a global leader board that open limitless possibilities of competitive learning

That’s a wrap

This project is my submission for an Assignment given by Abhinav Chhikara at 10kdesigners Masterclass Cohort.

Special Thanks to Abhinav Chhikara and Mayank Khandelwal for their constant support and guidance

--

--

--

19-year-old 💻Engineer who turned into a 📱Product Designer. I love to read about Human Psychology and Productivity.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Complex problems from a mindset of a UX designer

Language, chess and design

Black and white photograph of two opposing knight chess pieces facing each other on a classic chessboard in a dark room.

LACK Magazine by Miklos Kiss

Challenge 2 — Ironhack — Wireframes and User Flow

Into the world of shoemaking / cordwaining

Transformation

Moncler Jacket than

Float label pattern in UX form design

Get the Medium app

Rohan Arora

Rohan Arora

19-year-old 💻Engineer who turned into a 📱Product Designer. I love to read about Human Psychology and Productivity.

More from Medium

Case Study: Off.psych, a mental wellbeing app

Amazon Prime Video Application Redesign — A UI UX case study

Youtube timestamp sharing feature — UX Case study

Case Study: Solving The Ice-Breaker Dilemma In Tinder