Skip to content

notpaulgaddy/TheWeekndRedoneSite

Repository files navigation

The Weeknd Capstone


Project Introduction

Hi, this is my capstone project in order to better learn ReactJS as well as improve my UI/UX design skills. I will walk you through this process

After completing my previous React project which lets you sign into Spotify and add songs to your playlist, I decided that I wanted to do something with absolutely no direction in order to push myself. We all know that building projects on things you're interested in helps you learn better, so who better to do it on than Abel Tesfaye? Especially since I have 54 songs that he's on in my Spotify liked songs!


Before you do any web design, you must ask yourself 3 essential things

  1. Who is this for?
  2. What are their needs?
  3. What value do we bring them?

Now, let's answer these

This website is for the Weeknd

Large artists have much different needs than smaller ones. The main needs for these artists are to maximize tour profits, sponsorships and merch sales, two of which we can help.

The value I bring is improving his website in a way that's more user friendly, maximizes engagement and encourages the fan to spend more money while supporting their favorite artist.

Home

We begin with a hero image(will be changed to the Weeknd soon) in order to grab the user's attention with bright colors. Even if users begin to think that they may not spend money on the site, beautiful web layouts may encourage otherwise, similar to how we always believed that if we wrote neatly in school, the people grading it would be slighlty less harsh. They see that the first part of the site is beautiful, took effort and are likely to stick around to see more if not buy something later

We then move onto the tour panel, keep in mind, tours are usually the biggest way for massive artists to earn money since they usually have an unfavorable revenue split in their record label contracts. After we catch the user's eye with the hero image/first panel, we automatically show them that he's on tour. We show the next 6 locations, but if they're not there, they click on "Tour Dates X Venues" in order to see the full list, hence more time spent browsing the site

For the third panel, we have his socials. I wanted to use a popular music marketing campaign that uses a phone number along with an image of the artist in order to create wonder. Secondly, I didn't add links to his Snapchat, Facebook, Instagram and Twitter because his fans already have these. Thirdly, a major way to keep their fans interested in their music is to give them a non personal phone number that lets them speak to fans and update them on new music drops, tours etc.

Lastly we have images of the merch with a simple call to action. They see some of the merch and are prompted visit the merch page.


Merch

The language used at the top connects them to the Weeknd and makes them feel like part of the "family", hence giving them a connection to the artist and making them slightly more likely to buy. Below this, we have an immediate call to action by getting them to join the newsletter. They get a 5% discount and get notified of future drops. If they don't buy now but join the email list, that's a possible returning customer. Thirdly, the 3 images will be used to showcase the 3 items that need to be sold the most, for whatever reason the merch handlers decide. Fourth, we have a filter by and sort by in order for the user to have an easier time finding what they're looking for and find something they're likely to buy. Lastly, we have the merch items displayed. With the items, I added a favorite/wishlist button, a rating system based on the user reviews for the item in order for the user to feel more confident about their purchase as well as an add to cart/out of stock button in order to help them have a better time sorting through the many displayed items.

XOFund

About

ReactJS The Weeknd Capstone Project

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published