The client had an idea to support young African artists by creating a website, where the artists would be able to upload and popularize their tracks and videos at a profit. The website was intended to allow users to listen to the music, view videos and download them within the Pay per Go system.
The client provided several prototype websites with the most appealing designs and features. Our main task was to develop a completely new modern website that must include the following features:
A music media player;
A convenient website search system;
An option to view videos;
An option to download video/tracks via Pay per Go;
A user cabinet (with different functions for artists and users);
Banners for advertisements.
Our programmers started with media player development. It was supposed to be in the header and play music even after users go to another page. This feature was important for user convenience – users had to be able to listen to their chosen tracks while browsing the web pages.
The player on the home page:
The player on other pages:
As it was required, we made the media player capable of playing music independently of user activity on the website. This solution makes users interested in staying on the website and more comfortable with using the service.
Considering that the client’s priority was to monetize the website, the system we built offers users 15 seconds of listening to the chosen tracks. For further listening and/or downloading, users must pay the price set by an artist in their private cabinet.
Next – website search system development.
Users don’t have to enter the exact name of the artist or the song. The search system is designed to show all tracks, artists and video that match the query in search results:
Systemizing and uploading tracks on the website was the hardest part.
It took several stages:
First, we created the artist’s profile page that featured the artist’s bio, albums, tracks, video and comment section.
Next, we created the alphabetical list of artists.
After this was done, we made a page that allowed users to find artists by genre.
This stage of web page development saw close collaboration with the client, who offered several ideas and suggestions. After discussing them, we made some adjustments to the technical tasks and began developing a new website feature – a track analyzer. This feature allows users to see the track’s genre by clicking it.
After implementing the tracks, our team started developing the same set of features for video uploading.
With this feature, users also can view and download the videos of their favorite artist, while the artist gets more self-advertisement opportunities by uploading their music videos, interviews and messages to their fans.
The videos can be accessed on the home page:
FYI:We decided to add video content to make visitors linger on the website. The more time users spend watching videos, the more attention the website will gain from search engines, resulting in a positive rankings growth.
After fulfilling the main client’s functional requirements, we started working on an attractive and user-friendly design.
As a company with a successful and long-standing website SEO expertise, we can unequivocally state that the website that has high search engine rankings, but lacks convenient and easily usable interface is rejected by the visitors. The drop in visits negatively impacts the website and its SERP positions.
With this in mind, we took it upon ourselves to create an interface that would be as user-friendly as possible. As it was mentioned before, the client showed us several prototype websites, which had design elements and features that the client wanted to see on his website. After analyzing the websites and several similar web portals, we created a design that was a balance between convenience, practicality and intuitive usability.
Our UX/UI designers developed the following elements:
organized all interface elements (they were logically structured and interrelated)
grouped all elements together (configured them into logical groups)
created a one style for all elements (the color scheme for background, underlay, buttons and banners was thoroughly developed to create one piece)
thoroughly developed so-called “blank space” of the website (delimited the info blocks to help users focus on one thing)
After a detailed analysis of the similar websites, we made up our mind about the future project’s design color scheme and started working on it. The website’s color scheme was a blend of black and white accentuated by bright orange buttons.
The designer worked hard on the main homepage banner as it was supposed to attract users as well as to harmonize with the main website’s design and remind about its subject.
The final website design:
As a main color, orange intrigues and energizes. Nevertheless, our goal was to create a calm, “lounge” atmosphere for users and at the same time lure them into listening to a large number of tracks. For that reason, we chose to use orange as a secondary color. This way it kept its brightness and naturally contrasted the black and white.
Aside from color and design decisions, our team has considerably simplified the website’s interface. Due to modern UX/UI solutions, users understand what the website is about as soon as they find themselves on the home page and can begin listening to the music immediately.
Once the main website design was ready, we started working on its elements.
The quality implementation of UX design required a simple and usable set of options for the user and artist personal cabinets. It had its own nuances: the artist cabinet required its own set of features for pricing tracks, seeing the download statistics and adding personal data, while the user cabinet needed completely individual options.
We started with the user cabinet. According to the registration system, any user can sign up in a traditional way or use Facebook or Google+ accounts to get an account and, therefore, create their own personal cabinet on the website. If users want to upload tracks and videos, they can create an artist account by clicking the “Become an artist” button.
The user personal cabinet allows users to do the following:
upload an avatar;
top up balance via special button (the funds are added via the popular Pay per Go system within 3gdirectpay.com);
see the latest trend tracks;
see the uploaded tracks and monitor balance;
After clicking the “Become an artist” button
and adding info to “About me” field any user can upload their tracks and/or videos and set up the price for listening, viewing and download. The artist can also not charge users and leave their tracks available for everyone.
For the artists’ convenience, we made the interface as simple as possible. Their account shows them all uploaded tracks, artists with the same genre, allows creating albums, and, naturally, seeing the payment history and controlling track payments.
As it was stated before, the artist can set prices for their tracks or leave them available for free. We made the pricing process incredibly easy – after a click on the link a window pops up. The artist can withdraw funds from the 3gdirectpay.com.
In case of track purchase, the artist gets 95% revenue. The website commission is 5%. This is how we implemented the customer’s website monetization and African artists’ popularization wish. Every artist can withdraw the money from their personal cabinet to their credit card.
The element order and wholesome, laconic design significantly increased the website usability, however, we still had to finish the mobile version to make the website usable on gadgets.
Our mobile version of the website kept the design and features of the desktop version.
This allows artists to use their smartphones to monitor the track purchases at any time. Moreover, thanks to that feature, any registered users to stay updated about the new uploaded tracks and videos. The payment procedure remains the same.
FYI:The use of mobile gadgets for making online purchases is rapidly growing. According to the latest data, 75% of Internet users go online via their gadgets. Therefore is it essential to make your website mobile responsive for your visitors’ convenience.
As you can judge by the previous screencaps, both mobile and desktop versions include ad banners.
The client wished to profit from the website. After a discussion, we made a comprehensive decision about monetizing the site in the following way:
getting income from selling video/audio tracks;
placing the artists-advertising banners.
The banners allow the artists or any other interested persons to place their advertisement (concert/event announcement, notification about new albums, etc.) for a fee, making a name for themselves and helping the website profit.
We designed and drew several ad banner templates that can be found in the website’s admin panel and can be used for 1-5 ad banners per page.
To spread the word about the service faster, increase its rates for potential users and “socialize” it, we created a feature that allowing sharing audio tracks and videos in social media.
This option has several purposes:
First of all, it benefits users and artists. Sharing links to tracks with your subscribers in social media means advertising yourself and the website for free
Second, this option will positively affect SERP rankings. With a large number of users sharing links to the websites make the website look like a reliable web source with quality content to search engines.
Third, every user can share a track they liked and recommend it to their friends.
During this, the client had an idea to create a news portal that would allow the website admin to post articles.
According to the request, we implemented the News section, which was styled like a blog.
The user can comment on any posted article and repost it to social networks. To make users stay on the website, we added a subscription option.
The e-mail notifications will keep users aware of the most interesting news. All information on the website as well as latest posts will be automatically delivered to users free of charge. It relieves users from the fuss of looking for new interesting articles – they will be delivered to users with each new e-mail.
With the main part of website works complete, we started working on a convenient admin panel for the client.
It was important to design the admin panel in the way that would allow owners to quickly edit website info, monitor the registrations and payments statistics, post new articles and fully control the interface.
In the “Users” tab, the client can see the stats of all website users. This tool allows controlling a certain number of registrations, subscription and attendance, and then use various marketing tricks for increasing the website's popularity.
The “Pages” tab allows to edit the web page information or/and add new web pages, keeping the website information relevant.
The “News” tab enables the client to edit/add/delete news and articles that will later be displayed in users’ “News” tab.
The “Content” tab shows all downloaded tracks and videos statistics.
It displays full information about the track, its owner and number of downloads, times the track was listened to and likes. The admin can delete content in case it is necessary.
The client can track all website payments via the “Payment” tab.
Aside from an opportunity to assess the website’s revenue for a certain time period (day, week, month), it also shows transaction confirmations from artists:
Following the user’s inquiry, the client confirms the funds withdrawal request. Moreover, the owner can control the commission size. The default commission is 5%.
With the help of the “Slider” tab, the client can change the home page banner and create animated images that will change depending on the time period settings.
The “Ad” management tab allows offering spaces for ad banners in every part of the website. As ad placing is one of the main sources of website’s income, we achieved a high nesting level, that allows controlling numerous banner platforms, their design and size. Per the client’s request, the client can place banners on every page of the website and select their number and place.
The convenience and usability of our admit panel allow our client to seize full control of all website processes effortlessly. We were motivated by a goal to make the client’s job easier, provide as usable, and fast website management as possible.
Adjustments per the client’s request
After all design and proofing works were done, the client expressed another wish – to create home page charts that would sort tracks by popularity, allowing even the unregistered users to see and listen to the tracks of a certain genre or the website’s best tracks.
To make the search more convenient, we decided to create separate charts by genre
We also created a separate general chart of the most popular and frequently listened tracks:
To create charts we derived a special formula that would display only the top played and the most popular audios in recommendations as well as sort them by genre.
After users find themselves browsing the chart with tracks that are sorted by genre, they linger on the website. This increases chances of users getting interested and purchasing tracks they liked. It also motivates the artists, because they see their tracks in charts each time their popularity grows.
With all works complete, Afrikasongs.com now boasts all features that make users want to visit it again and again:
A stylish user-friendly design;
An interface compatible with all possible mobile gadgets;
An opportunity for users to make easy money on the web source by uploading their tracks;
An opportunity to promote your music;
An option to comment and share the content in social media;
A convenient media player that doesn’t turn off when users go from one page to another;
An option to place ads about music events, new albums and other website-related topics;
A simple and convenient navigation;
Fast Pay Per Go payment system;
Genre music charts – users can select and listen to the music they prefer;
A full-fledged blog with an option to subscribe to new articles.
We have implemented the following options for the client:
Getting profit from tracks listening and video viewing;
Getting 5% income from downloading tracks/videos;
Option to profit from placing ad banners;
Option to control all website activities;
Easy info updates on the website.
We have fulfilled the website monetization, which was the client’s priority requirement, by commissions from the purchased tracks and ads placement. Currently the website meets all standards of users and search engines, therefore, in time it will be a highly popular web source with high volume of organic traffic.
Afrikasongs.com - is a shining example of how much weight we attach to each websites individuality and the mobility we implement each clients’ requirements with.
If you want to make money on the Internet, start your online store, create a website for a company or just a blog for yourself, but do not know how to present yourself in the most beneficial way, our experts will offer you the most suitable options. Moreover, by using necessary marketing tools, we will make your tools as profitable and attractive as possible.