Artist website redesign
UI/UX Design | Front-End Development
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.
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.
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.
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.
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.