Brandy B7
UI/UX Design | Personal Project | Adobe XD |
On August 31st Brandy and fellow singer Monica went head to head in a VERZUZ Battle. Verzuz, also known as Verzuz TV, is an American webcast series created by producers Timbaland and Swizz Beatz.
Verzuz was introduced during the COVID-19 pandemic as a virtual DJ battle with Timbaland and Swizz Beatz facing off in its first iteration through an Instagram Live broadcast in March 2020. As the months passed the VERZUZ has expanded not only just to hip hop but to R&B as well. With the anticipated battle between Brandy & Monica streaming of their legendary songs had increased and opened up new fan bases as well. Seeking information about the two singers had fans wanting to buy merchandise and music. Brandy’s website only had on video posted a Spotify playlist, a background photo and text that is illegible text making hard for any fan to gain any information. Brandy’s Official Merchandise page was no where to be found on her website which lead me to look through he social media platforms to locate it in order to purchase an item.
HOME
NEWS
BIOGRAPHY
MUSIC
VIDEOS
TV&MOVIES
SHOP
HOMEPAGE
The shop(e-commerce) homepage shows all of Brandy’s merchandise and promotional items for Brandy’s new album B7. By clicking the SHOP NOW button you will be taken to the product page for the item advertised in the hero section.
Main Product advertised in hero section of Shop Page that can be accessed by clicking on the SHOP NOW button.
By clicking the Quick View button on the shop homepage you're able to view the product on another page that shows the product description and order shipping information depending on the product.
On the product page users have the ability to click on the size icon of their choosing, depending on the size they choose the price of the product will change.
After choosing the correct size hitting the ADD TO CART Button will place the item in your cart. A notification will pop up in the right hand corner of the screen notifying you that you JUST ADDED TO YOUR CART.
The notification pop up will give you a quick glance at the item or items in your cart. This will show you the photo of the product, name, size, and quantity. You have the choice of clicking the VIEW CART button or hitting Continue shopping to go purchase more items. You also have the ability to Remove the item as well. You can also close this notification by hitting the X which is the close button. You will then see quantity of items in the shopping bag (cart) icon.
YOUR CART
Your cart page shows the product, size, price quantity and total of your item.
You have the ability to remove the item, change the quantity or Continue Shopping.
The Subtotal is listed in the right hand corner, taxes and shipping is calculated ay checkout. By clicking the CHECK OUT button you will be taken to the next screen which is the Information screen where the customer will enter their information to continue to Shipping.
scroll
INFORMATION
The Information page in the checkout has a summary of what they added to their cart in the right hand section. The customer has the option of an Express Checkout through any of the three pay systems or through regular checkout. The customer will enter their Contact Information and Shipping Address. After the customer has entered in their information the shipping price will be calculated in the next step by clicking Continue to Shipping.
SHIPPING
Customer information has been added now onto Shipping. The customer will enter their email page and shipping address. A Shipping Method is then chosen, Standard and UPS Ground (1 Business Day) price on shipping is subject to change depending on location. The updated total is now in the summary in the right hand section. If an error has been made on the customers part they can click on Return to information otherwise click on Continue to Payment to finish the process.
PAYMENT
Now that Contact and Shipping Information has already been entered its time to enter Payment Information. Customers can enter their credit information or select an option of two other types of payment choices. By selecting a billing address the customer will either select Same as Shipping Address or Use a Different Billing Address. If the customer choses to return for a later day, in the Remember Me section they can select Save My Information for a Faster Checkout.
If an error has been made on the customers part they can click on Return to shipping otherwise click on Pay Now to complete their order.
