Gabriel Lazaro Music

UX/UI
Webflow Development

3 Weeks

A UX/UI and Webflow project for an up and coming musician in Boston.

Introduction

Gabriel Lazaro Music is a project dedicated to creating a professional platform for an up and coming musical artist in Boston, United States. As someone working their way in the music industry and making their own material, the client needed a central platform which would provide followers and newcomers alike information about him and his music. This also provided a way for people to discover more of his music, social media, and contacting him. Working with the client to figure out the needs and goals in order to know what screens to make as well as how to develop it later on.

Objectives

Target Audience

The target audience was defined by the client and wanted it to be accessible to users from the age 12-45 and would reflect the client's personality and music in terms of design.

Tools Used

Design Plan

Research

  • Research similar websites
  • User personas
  • Survey target audience

UX Design

  • Flow diagrams
  • Sketch/create wireframe screens
  • Show key flow points

Feedback

  • Feedback with client
  • Discuss any changes or additions

UI Design

  • Create style guide
  • Design screens necessary
  • Develop website on Webflow

Evaluate

  • Evaluate final product
  • Test on users for further data and ideation
  • Launch website

Research

The client had shown me examples of other websites which had elements and design choices that he wanted. Examples such as websites from other musicians and groups like The Fray, James Bay, and Tom Walker. These other examples had elements like the content on it as well as some design choices like micro-interactions that were present.

Conducting user research through surveying the target audience, I was able to gather from the data what users were focused on when it comes to a musician's website like latest news, music, and possible live performances as well as pain points for them. As this website is intended to help users with information about the client and his music, I had to keep in mind pain points such as ease of navigation and unnecessary content being put on display like other websites did.

To identify specific users who would use the website, I created a couple different personas with different goals in mind. One is looking to learn about the client's social media and latest news, while the other is looking for a way to contact him in order to connect and collaborate with him on a project. Both are generally also looking for more information about him.

Design

The UX side of this project was made simple due to the client knowing exactly what he wanted for the website as well as the information that would be displayed. The website would be a one page site due to the non-complex nature of the information and content intended to be put up. This would also help with SEO and giving users ease of navigation.

The content and pages were defined with some additions I felt needed to be there such as including an embed link to his Soundcloud and Spotify tracks, not just links. I created a flow diagram to show how the information would be structured and how the user would interact with the website on a one-page site situation.

Continuing on to sketching out the website and how it would be structured, keeping in mind how it would be responsive for tablet and mobile devices as well. Structuring the information well and making it accessible for the target audience that was identified by the client. We also talked about the importance of making the website for those who are the casual music listeners to potential or actual followers of the musician as well as others who may want to book him for performances and collaborations.

After the wireframes were created, it was a matter of putting together the pieces to create a detailed wireframe and bring the designs to life with style and colour to just flesh out the design and show the concept of what the client intended for. Having feedback from the client and making sure we were both happy with everything so far, I then began fleshing out the design.

The client and I talked about his style of music and personality so as to reflect that onto the website as an alternative rock/indie kind of musician as well as him being more of a laid back personality. I chose for the primary colour as #141011 so that the site would have a darker interface and #CA0348 to compliment the dark and give the website a pop which also reflects the liveliness of the client and his music as well as his personality. Originally the client wanted a neon colour scheme, but I suggested otherwise so that it doesn't irritate the user as much and take away from the information being displayed.

After experimenting with some elements and design choices I created a style guide.

Below is the style guide of choice.

After creating the style guide, I then moved on to creating the hi-fidelity mockups using Figma with the client. It didn't take long since it is a one-page website. Once finished and both the client and I were happy, I proceeded to develop the website using Webflow. Using the staging link as a prototype I tested it on users, giving them different scenarios to complete. Once given feedback, slight changes were made such as font size and we launched the site.

Below is the finished product mockups.

Evaluation

To evaluate this project I was very happy with the journey and the satisfaction of the client. He was very pleased at the final product and can now use this website as a social hub for him, post information such as new music, and gives others a way to contact him for booking live performances and possible collaborations.

This was a great experience to have and I also developed a great relationship with the client after the project in which he will provide me with more work in the future. I would definitely like to continue working and developing this website as his career unfolds.

Let's Chat

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reach me