Loudtrax is a new eCom website that sells rock and metal bands merchandise online only. My role was to build the UX and UI design for their new website launch as a freelancer Visual Designer. I had very few information about the brand itself and its clients as it was a new website.
GOAL
The main goal for this project was to present Loudtrax as a new brand between its competition websites.
CHALLENGE
Asa new website, I didn’t have much information about its background and selling numbers. I based a lot of my decisions on the Loudtrax competition research I did. UI wise, no photo was provided so a lot of my time building the visuals were spent on searching the right images.
TARGET
The main segment of Loudtrax is composed by English-spoken Canadian and American men between 20 and 45 years old that listen to rock and/or metal music and dress with t-shirts of their favorite bands.
My wireframes were based on my background experience on eCom websites and on Loudtrax competition. I worked with Loudtrax marketing team to decide which section we were going to work with and their position on the top menu and page. As our main target was men, this was our first section on the menu followed by “Women”, “Headwear”, “Swag”, “CDs” and “Media”, in order of selling hierarchy. The section “Sale” was added on the last but not less important. The search, currency option, login account and cart were also on the up right of the page holding the menu. I added an alert zone at the top of the page to give the marketing team a place to promote sale, free shipping or even a quick corporate message above the first fold.
The hero is composed by an H1 title, text and a cta button to the buying landing page followed by section for new arrival products. In this second section we decided to show the products on a slider (manually controlled) where the user can find all the information for buying: product name, price, a quick view and a button that would add the selected size directly to the cart.
For this next section, I wanted to extend some of the top menu sections also for the middle of the page to give the users another option to select the section they attend for. I also added 2 new sections to innovate this middle-page menu that could vary as needed. In this case, we chose for the top row the sections “Men” and “Women” and for the second row “Best Sellers” (that was also a usual section on the competition websites) and “Cold Season essentials” (that was a marketing team demand).
The Loudtrax marketing team and I agreed to add a section dedicated to showing the users that the products on the page were only official merchandise. This would build a bond with the users and solidify the recent-launched website as a serious brand on the market. So, we created a logo for this “100% Official Merch”, I added an explaining text and a cta button redirecting the users to check out Loudtrax product pages.
Next, I thought that a good way of building an eCom page is giving the users all the ways of finding what they want to buy. For this, I usually group the products on sections named by key words. For this next section, I thought that the Loudtrax public would also be searching for merchandise from some specific band. So, we added a slider (manually controlled) with featured artists with the photo and name of each band on Loudtrax catalog.
For the footer menu, I added the logo to visually support the brand also at the end of the page, followed by corporation information: copyright, policy, customer services, contact, about the brand, shipping and return. With this, some other information less corporative was added in between, such as: newsletters subscription form, social media icons and accepted payment methods icons. On the top right of the footer on the desktop version, I added 2 icons that follow the scrolling act: on for chatting with customer service and another to go back to the top of the page. For the mobile version, it is actually the newsletters subscription from and the customer service chat that goes along with the scrolling.
While doing my moodboard, I noticed the predominance of the red color, so I started to make some palettes to get the ideal color scheme for Loudtrax. I also added to my moodboard the family font chosen “Rajdhani” (google fonts), some inspiration for the icons and some examples of metal band pages.
Even though my role was to do only Loudtrax homepage, I included on my UI Kit a group of icons, forms and elements that they could use in the future.
My final visuals were a little different from the original wireframes, as I adapted them to the needs of the page. For example, when I did the wireframe for the top menu, I didn’t attempt for the fact that Loudtrax logo is actually more squared than rectangular. To make less blank space around the logo, I decided to place it on the left side of the menu rather than the top center. This also made the hero be more above the first fold.
For the hero banner, I was asked to make a promotional example for the winter sale, so I made a blinking neon gif in desktop and mobile versions.
I also developed a style for the background photos on the middle-page menu to be repeated as needed in the future.
This project was made in Sketch App using Craft plugin, Adobe Photoshop and releasing the prototype at Invision. I always pay attention to details and organisation so I thought it would be good to share how my final files look like.
