Home

JESPEN POPSTJÆRNE

Artist website redesign

UI/UX Design | Front-End Development

The Project

I was tasked with redesigning the old version of the website as well as with developing the front-end. To start, I was provided the static files for the old website and three goals:

  • Improve the user experience
  • Make it responsive
  • Make it look modern

Although the final website is still under development you can check out the front end prototype I’ve built right here.

Research and analysis

Like all my projects, everything started with a research and analysis phase where I studied other similar websites to get an idea of the most common practices as well as the old website I was provided in order to pinpoint potential problems and things that can be improved.

Based on what I have gathered from my research I drafted some wireframes to outline the main pages of the website.

Project wireframes

Problems and Solutions

1. To many pages

The original version had separate pages for concert dates and demo audio clips which introduced an unnecessary navigation step for the user. With these two pieces of content being the main reason for most of the users to visit the site, I decided to make them into sections on the home page for ease of access. This also has the benefit of saving on load time and overall site size by eliminating two pages.

Audio clips and concert dates sections' screenshots

2. No call-to-actions

The “new album” and ”concerts” sections laked any kind of call-to-action, which, with no other information presented about where the album was available or where the tickets were sold provided little value to the user. To fix this, call-to-action buttons were added to the “new album” section (e.g. Listen on Spotify or Get it on iTunes) and to the concert listings (e.g Get Tickets) to make it easier for users to access the music and drive more sales.

Added call-to-actions screenshots

Highlights

Here are a few highlights of the final design. The homepage with the custom audio player and concert dates, the main store page, and the multi-step checkout form.

Project highlights screenshot

Development

For developing this website’s front-end I used HTML / CSS / JavaScript and jQuery & jQueryUI. The layout is based on CSS Grid and Flexbox making it adapt flawlessly to any screen size.

The most interesting and challenging part of the development process was building the custom audio player, which was a first for me. Initially, I was looking into using an external library for this but after some research, I decided to not load any more third-party libraries and ended up building it from scratch using the Web Audio API.

Ready to work together? Just get in touch!

You can find all the places where you can do that at the bottom of the page. Thank you for your time.