Breakdown of the website I designed for Adi.avg (musician and creator)
Published in
12 min readNov 22, 2022
- This case study is a documentation of my project as a product designer in residence at 10k designers cohort 5.
- In this project I have designed a website/landing page for a musician and creator on the internet with a scope for improving his visibility and aggregating an essence of his online presence in the form of his content spread out over the internet.
Fully functional prototype of the project in a video format 📺
- I would recommend going through the video to observe the micro interactions I have designed in the website.
- They help bring out the personality in the overall design.
How did I approach this project ? 🤔
- After deciding upon one of the niches and having some brain storming google meet sessions with my mentors I decided to design a website for a musician and a content creator Adi.avg.
- Being pretty inclined towards music production as a skill, I had motivations to genuinely create something that added value for the artist.
- Also having a level of connect with his content and work that he puts out really helped me narrow down my problem statement.
Approach towards the problem statement
- I have documented my design process in the following stages as I proceeded and had a lot of back and forth within my process.
- Further I will showcase some of the insights from each step I took in my design process.
01. Understanding the problem and defining deliverables 🤯
- So as I already broke down the problem statement visually as demonstrated above, I progressed onto understanding the need for a website and how exactly the design is going to solve issues for the creator such as:
- Visibility and online presence.
- Driving the social media generated traffic onto a website.
- A summary of all the striking work and leverage that the creator has on the internet.
- I formed content bubbles for Adi.avg after analyzing his online presence on various social media platforms such as Instagram, YouTube, Twitter and various music platforms.
- When you have a website design project at hand, a key element of designing successfully is hidden in understanding the deliverables and what problems are you supposed to solve for the client.
- This the part where you can reflect and come back to if ever you get stuck or spiral away in your iterations.
- Sticking to solving the problems for this creator helped me maintain a momentum throughout the project.
02. Research and analyze patterns 🔍
- To form a mood board you need to have a set criteria on what direction are you looking for. I based it out on the following factors:
- Music artist styling
- Colors and themes that bring out Adi.avg and his work in their true essence
- Patterns that show certain data such music content in a very simple yet creative manner
- Drawing inspiration from other similar musicians
- Optimizing for adding personality to the website.
03. Informational architecture of the website🗺️
- To have a good experience on any website, you need to have a flow to it. A structured logical format for the content to fit into your website.
- Laying down the informational architecture for a website is almost like deciding the visual flow of your design at a skeletal level.
- IA and wireframing is a back and forth process, where I quickly tested ideas by sketching them out roughly.
- To having a clear mind map of my IA guided me and helped me not to get distracted, personally my conclusion on IA as a process is that we need to have a clear picture mentally before we start visually implementing ideas.
04. Wireframing and sketching📃
- As I mentioned before having laid out content for your project helps in getting ideas down quickly by sketching.
- One additional practice that I did was sketching out wireframes after drawing inspirations from other similar websites for musicians and certain layouts that displayed the information creatively.
- The conclusion of using wireframing in my process was to get a clear idea about important design decisions like spacing of layouts for sections, it helped me in getting some feedbacks and validate my ideas, it gives a sort of a visual mapping to improve my visual design.
05. Visual designs and iterations👨💻
- Now this is the most essential process in design where it comes down to a make and break situation for the final designs.
- I used this space to think about the visual appeal and style that I wanted the website to have. This process helped me dive a little deeper into the “vibe” of the creator that I was designing for.
- I thought about how hip-hop can be represented in design and what is the main personality that Adi.avg tries to create through his music and content all over the internet.
- When you successfully capture these meta elements in your final visual design, that is when you win this game.
Some key notes that helped me figure out a design style guide for the website were:
- Professionalism in music (Adi’s music is fresh and experimental, as an avid listener of hip-hop I could relate with the effort that he puts into each track)
- Funk and energy in his content.
- A hint of retro in his music (classic yet way ahead of his time).
- For selecting a typeface that was a fit for my idea, I had to go through some research about fonts that uplift the personality of the whole website, along with that I kept the font pairing in mind.
- Having the correct font pairing is about maintaining visual hierarchy and a flow that does not disrupt when the user scans through the content.
- For the typography I did a survey research according to the styles and concepts that have supported and represented Hip-hop in the past.
- For this I studied certain fonts from album covers and posters used by artists to promote the funk in their music visually.
- Initially iterating with a typeface for 2–4 attempts I worked on some feedbacks given to me, that helped me look for a typeface that added more personality to the designs.
Iterations, how many and which one?🤔
- A lot of designers face this dilemma while completing the process, of what is good enough to showcase and what to discard.
- I used iterations as a improving method for my visuals, it helped me have alternate ideas ready if my mentors asked me to present a design in a different pattern.
- Iterations can work at a macro level as well at an elemental level. Let me explain it to you.
- Iterations at a macro level were where I zoomed out and changed things up with the layout of the website.
- From a UX perspective thinking about points like:
- Use of the AIDA model and create awareness in the user about the artist right to the desire to take an action to interact/consume his content.
- A flow that user should expect and be used to because of spending time on other similar websites.
- Correct information at a glance, so that the user is motivated to scroll through the site.
- Highlight the essential verticals for Adi.avg and his content.
- Certain elements in the visual design need to balance out the layout while some need to highlight key data in a visually appealing manner.
- While experimenting with iterations the main feedback that I focused was on keeping the flow as user friendly as possible.
- Iterating as a process helped me reach a few more improvements in my final designs, here are some:
- For clear distribution of content space I decided to have a navigation feature in between a particular section and its subsections.
- The tricky part with using navigation other than pagification in a website is making it a clear indication that the user understands.
- I used it twice in consecutive sections such that it doesn't break the flow suddenly and user is already primed to switch between sections.
- I made sure that the UX principles work in the support of the elements that I designed and the thinking behind the placement and presentation of the final design layout, let me take you through it.
- To circle back to iterations at a zoomed out level, in conclusion it is more about being clear with those micro decisions that you make to iterate your designs.
- The number of iterations remain subjective.
06 Final design and prototype👀
- All of this process leads us to the final outcome and how presentable it is. The final design needs to have a hi-fidelity prototype to help showcase its functioning.
- The idea behind prototyping is making your vision present in a workable manner.
- Prototype gives a presentation of the micro interactions that I worked on to breathe life into the design.
Header section 🌟
- In this section of the website it was critical to make the user realize that they have landed on a website of an artist and it had to be all about Adi.avg.
- I went with a classic monochromatic header image to grab the attention of the user and signify the individual personality on the website.
- This also helped me create a contrast for the main call to actions as the user gets the option of listening a bit of his music.
- The possibility of having a fan / returning user on the site also gave an opportunity for having another CTA indicating the users to buy the tickets to his latest live performance.
About section 🔎
- I kept the design for the about section simple and a main decision was to keep the text readable as the user scans through the section.
- I decided to create a background pattern for the image throughout the website so that the user can relate to the flow of the page.
- The patterns were kept in sync to promote the law of uniform connectedness and enhance the users experience.
- I kept a clear CTA for the users to check out his social media profiles on various platforms right after building the context in the about section. This helps in scaling the visibility of the artist.
Live shows and gigs 🎤
- This section is essential for the musician as it is a priority for them to drive traffic and convert potential audience for their shows.
- I designed the cards in a simple layout but tried to enhance their visual appeal in the overall layout of the website.
- My main aim here was to attract users with just the right amount of information about the gigs like venue and dates clearly indicated.
Music collection 🎶
- The design for the music section to be in a grid layout was to emphasize the album art, it brings out the personality of the music and registers a certain vibe in the users head.
- I also mentioned some vanity metrics that are relevant in the music industry these days like the number of views and plays on music platform.
- I used the chevron design model for the user to navigate between latest music released by the artist.
- A continuation of the CTA pattern for the user to stream and download music presented on various platforms, hence also scaling growth for the musician in terms of numbers!
YouTube and more section 📽️
- As the creator has various forms of content spread over the internet it was important to highlight the vlogs and podcast sections run by Adi.avg, this adds to the creativity of the artist.
- The user should realize that the artist has a lot to offer. I designed the sections in a way that a new user would get to know about the podcast and vlogs with an option to watch the latest and most popular videos.
Media and News 📰
- For a musician the recognition from articles online about their latest music release, career journey, label signing acts as a major boost in terms of discoverability.
- Brands and business collaborations also depend on the legitimacy of the work and it can surely help in attracting the right audience for the creator.
Get in touch section 📞
- The ultimate goal to convert potential opportunities for the musician needs to be visualized in this section of the website design.
- I designed a standard leave a message for collaborations and further enquiries with an email address to verify the user.
The complete website experience for you to go through…
- Here is a Figma prototype that is embedded for you to manually check out the concept.
Feedback and case study walkthrough with Adi.avg 🥇
- I showcased my case study to Adi himself and gained some curious insights into his process as an artist.
- I think without this call this project would have been incomplete, as I gave him a walkthrough of my design decision it made me feel more confident about my output.
- Hearing appreciation from the artist I designed this whole project for meant a lot!
- Well if you made it till the end of the case study and gave it a curious read I appreciate your effort!
- I want to thank my mentors Akhil Lochen and Neha for the constructive feedbacks and motivation to get this project done and dusted.
Lets connect somewhere on the internet🌐 I’ll guide you…
🐣Twitter : Varunv_
🧑💼Linkedin : Varun Vaishnav
📬E-mail : varunv.designs@gmail.com
