SKIO Music: Achievement Library
--
Role: Lead Product Designer| Status: Designed, Backlog
Background
SKIO Music’s mission is to give artists increased commercial opportunities and reduce the legal and administrative bottleneck around licensing and copyright. Currently, it is a music contest platform that hosts premiere song contests for world-famous artists and allows amateur artists the opportunity to win world-class prizes and be discovered.
We (the Product team) were looking for ways to increase engagement across our core KPIs (song contest submissions, signups, MAU) as we had noticed a steady decline in these metrics. During an ideation session, we came up with a few potential gamification mechanisms to achieve this which would simultaneously enable us to achieve both our business and users’ goals. These mechanisms were an achievement library, a signup incentive, and a prize giveaway.
As our development team were currently engaged with another feature, the VP of Product and I decided that we would first explore the achievement library as it would have the potential to have the highest positive impact on these metrics.
Approach: Researching, Ideating, Deciding
I began, like I always do, with research and exploration. I then ideated using a combination of medium and high-fidelity wireframes in addition to creating a list of potential achievements that users could earn. I shared these designs and potential achievements with the VP of Product so we could decide what to move forward with. Once we had alignment and feasibility was determined with our development team, I handed off the feature spec documentation to them.
However, this feature was not shipped and was placed on Backlog due to shifting priorities.
Researching
From previous research, we knew our user’s goals included networking and collaborating with other artists, improving their technical and creative skills, and ultimately being discovered and signed by a label.
First, I wanted to understand how other products and services designed their achievement libraries. I was particularly interested in the types of achievements users could earn, the information shown for an achievement, and the general layout.
Types of earnable achievements
Complemented by my own experience of playing video games (for more than two decades), I learned that you can earn an achievement from virtually anything within the constraints of the game. For example, you could earn an achievement for exploring the world, killing different NPCs (non-player characters), killing specific NPCs, being idle in the game, logging into a game for consecutive days, travelling a certain distance, changing your appearance—the list is endless!
Information shown for an achievement
There are often two views for an achievement, closed and expanded. Each closed state is typically composed of an image (badge) and name whereas the expanded view typically shows an image, name, description, and earned status.
I also explored how various products handled real-time push notifications (location, visual design) as we wanted to make the platform more dynamic (add a live-ops feel) and it would be important to let our users know that they had just earned an achievement—a big accomplishment!
Ideation
The ideation phase didn’t just cover the visual design of the achievement library but also required me to think deeply about what achievements we should have.
To start, I created an exhaustive list of all the possible achievements that I could think of based on what our product offered; the most effective achievements would simultaneously meet both our business and users’ goals. Additionally, each achievement would have multiple ranks so that users would remain engaged by being motivated to earn the next rank (higher ranks would be harder to achieve).
For example, the achievement, Over 9000, is earned when a user’s contest submission exceeds a certain point threshold. This would be a highly effective achievement as it not only encourages users to submit higher quality contest entries (which leads to improving their skill) but also lifts the core KPIs of the business (increase contest submissions).
On the visual side of things, I ideated on the general layout of the achievement library, the achievements, and the real-time notifications.
For the general layout, I introduced a section near the top of their profile where I wanted users to be able to specify achievements they wanted to highlight. I also created multiple variations of the expanded achievement view to get a better idea of how it would fit within the page.
For the real-time notifications, I explored various positions it would show in addition to exploring how we could make the notification have a stronger contrast against the background.
For the achievements, I leveraged our subscription to Freepik to download a variety of badge assets to serve as the foundation for the achievement. Initially, I explored badges that were aviation/war-themed and had higher-ranked badges look more visually complex. However, SKIO was a music company and our community were music artists, so it made more sense to explore using vinyls as it better represented how real world artists received a record for achieving album sale milestones.
Decide
In an ideal circumstance, we would have shown a high-fidelity prototype to our users to discover and address any design or usability issues. However, as we wanted to build out this MVP as soon as possible, I shared the prototypes with the VP of Product instead to discuss.
For the achievements, we decided to launch with 15 achievements that would most likely have the highest positive impact on our core KPIs and other metrics. These achievements covered areas in our product such as contests (submissions, high score), leaderboards (high score), song feedback (consecutive purchases), and social engagement (sharing, referring a friend).
Each achievement would contain the following information:
- Closed View
Unique icon and name to help users identify the achievement at a glance - Expanded View
Unique icon and name, how the achievement can be earned, what the user needs to do to achieve the next rank, a current progress bar, and the four ranks (with information about the completion status, credits earned for achieving the rank, and how many others in the community have the rank).
We also decided that giving users the ability to earn credits upon achieving each rank could be valuable as this could potentially motivate users to engage with achievement and maintain their engagement with them by aiming to achieve higher ranks.
Additionally, we wanted to leverage the achievement library as a means to make our paid subscription potentially more valuable, so we decided that free users would only be able to see the first three achievements they had earned. Any achievements earned after the first three would then be hidden (the total number hidden would shown within the library) until they upgraded to the paid plan.
For the general layout, we decided that in order to minimize complexity to development, that users would not be allowed to select which of their achievements to highlight. Instead, the three highest-ranked achievements would be shown be default. And for the expanded view, we decided that placement above the achievements was more effective than to the side as it was easier to read (Z-pattern).
For the real-time notification, we decided to go with the notification that was located in the top right and had improved contrast against the background. This positioning would be less intrusive compared to the other variations and was more consistent with how other products and services this.
Impact
While the achievement library did not ultimately get shipped (put on Backlog) due to shifting priorities, there is comprehensive documentation that would allow the business to build and deliver this with another development team at a moments notice.
Additionally, as many of the design patterns implemented are consistent with how other products and services handle them, users would likely be greeted with a familiar, intuitive experience.
