top of page

Goliath Records

Tools: Adobe XD

Timeframe: 2 weeks

Client: Google UX design course

Home page.png

The Challenge:

The assignment for this unit in my google course is to design a responsive website in Adobe XD, specifically an album listening and ordering flow for your favorite artist. I was excited for this prompt because I had gotten into buying and listening to vinyl records in the last couple of months, and it would be convenient to have a spot to listen to full albums and be able to buy them in one place. My main inspiration was the early itunes store, but with the option of buying physical albums rather than just digital ones.

The Goal:

Make a website that is an easy and convenient way to listen to one's favorite artist's albums and be able to order them on the same website.

Market Research

Research:

My main focus of research was to see whether or not there was anything even close to this online, and it turns out that there isn't. The two closest things that I could find online are itunes and a website/app called discogs. Itunes is similar in the ability to preview music before you buy the album, and discogs is the biggest vinyl album buying website out there right now. there are three principles that I pointed out that make this a viable option on the market. 

There is not a website/app out there like Goliath Records

There are websites out there to listen to music, and there are websites where people can buy records, there's not currently anything on the market that does both. As such, there is a great opportunity here to make a user experience for people who listen to cds and vinyl records that isn't currently on the market. 

Current digital streaming services don't pay artists much

This is an advantage, because the profits from the records could make this a viable business that is either inexpensive or free.

In a time where artists are not paid well, this could be a good opportunity for a great user experience for artists too.

Because of the low profits from streaming alone, many artists rely more on touring and selling merchandise than streaming, this would be a great opportunity for artists to make more money on their work than they would from a regular streaming service.

Who I am Designing for:

In this re emergence of physical media, there seems to be two groups where the popularity is coming back: the people that grew up listening to physical media and the people who didn't grow up with it and enjoy the novelty of having a physical copy of the artists that they love over just streaming the music. The new listener might be a little easier to appeal to with technology, because they are probably a little younger and more tech literate, but in an age of streaming any music they want, they might need to be convinced more to buy the album, and the person who already has some records probably needs an easier way to buy the records.

Wireframing

Home page site.png

My plan for this website is to make a responsive website focused on selling records with the feature of listening to them. I decided to do this because in this case the prompt is for a single artist, so I felt like having a focus on buying the records with the added feature of being able to try the music. 

Under the individual albums, I decided to add tabs for listening and another one for additional information, because that would be something that would add a positive experience to the process. Being able to have some useful information in addition to listening to the album might help people to decide whether or not they want to but the album they are looking at.

home page 2.png
mobile home.png

For the Home page of the mobile version of the site, I opted to stack the tiles to make it more accessible for the smaller screen. It has the title and a little preview of information about the album to draw people into wanting to see more. I put options for all three possible pages because I was having trouble deciding which button layout I wanted to go with.

When you click the see more button, the album goes to information about the album; this page has options to look at interesting information about the album, a page where they can listen to the album, and an option to buy the album. I also decided to add a track list for added context and/or information that may be helpful for the person that may want to buy the album.

information.png
listen.png
buy.png
mobile information.png
listen mobile.png
buy mobile.png

One of the big differences between the regular and mobile websites is that there are a couple more options like choosing which page to jump to and what format the user would like to buy. I did this because I wanted to see what the users thought about both options when it goes into user testing.

Concept Testing Results

When I did user testing with a variety of people for both the mobile and PC version, I learned a lot about what I wanted to change and what worked best for the approach. People seemed to like the simpler home screen and tiles more, and when I was testing the PC version of the website, people asked what they were buying. This led me to chose the version that has the different album options. Overall I am happy with the insights I got and I believe I am ready to move on to mockups.

Mockups

For my mockup, I added pictures and color to my design, I went for a light design, because it's a very easy to see layout, and it works well for the vast majority of people.

Home Page

mockup homepage.png
Homepage mobile mockup.png

Home Page

homepage mockup 2.png
home page 2 mockup.png

Album Information

information mockup.png
information mobile mockup.png

Album Listening

listen mockup.png
Listen mobile mockup.png

Buy Album

buy mockup.png
buy mobile mockup.png

Cart

cart mockup.png
mobile cart mockup.png

Payment Details

Payment mockup.png
payment mobile mockup.png

Final Design

The final version of the website was very similar to the mockup, I just added some interactions and fleshed out some of the content. The user flow is simple and easy to use, the pages are laid out in a way that makes visual sense to the user, and it is packed with information that will improve the experience of the user. Below are some examples of the information that has been updated within the app.

Home Page

final homepage.png
mobile homepage final.png

Home Page

homepage 2 final.png
final mobile homepage 2.png

Album Information

info final.png
Info final.png

Reflection

What I  Would have Changed

This shows a lot of promise as a responsive website, I think that it is very well fleshed out and visually appealing. I wish that I had tested a dark mode for the website, because that could have been visually appealing and given users an option if they had eye strain. There are also a couple of things that look a little rough when I look back, but overall I am proud of how usable and good it looks for my second try.

What I Liked

Overall this was a very fun app to design. It was very liberating to not have a lot of competitors in the market that I am designing for, which led to more room for creativity. I am a fan of the design elements on this project, I think that it looks clean and simple rather than barren. The navigation was also very simple and to the point, and anyone could find their way around the website.

Moving Forward

Moving forward on this Project, I think that I am going to want to do a mobile app for it, because I think that a streaming app that you can use to buy an album is an interesting idea to me. In addition to that, I want to do a dark mode for it just to experiment more with different looks. There definitely will be updates made to this project soon.

bottom of page