Through this case study I will walk you through my process of designing a landing page for a music production workshop. In this case I have considered to build a landing page for Ritviz since he is my favorite singer & musician

Note : I am not linked in anyway with Ritviz, this is a personal assignment done as a part of 10k designers

Why this project ?

Soon after COVID hit our world, everything has turned online. Online learning has been widely practiced and adopted by schools, colleges, etc. COVID has opened the eyes of many institutions, organizations, schools, colleges, etc. to start online teaching as that is the best option available which gives better reach, as people from any part of the world could join the online classes. Following this similar trend many artists, photographers, musicians, actors, etc. have also started to share their knowledge online through their own websites portals, YouTube, ed-tech platforms, etc.

I have taken up an assumption assignment to build a virtual workshop landing page for Ritviz which is both mobile and web-friendly (hopefully this assumption project turns real 😜)

🚀 The Journey Begins!

What do music enthusiast expect in first place ? (Basically some interviews!)

I have interviewed a friend of mine who is a music enthusiast, to understand some patterns on :

1. “What information will help you choose a specific workshop ?”
2. “What expectations will you have from the workshop ?”
3. Technical information about field ?

1. What information will help you choose a specific workshop ?

My intention behind asking this question is to see the pattern of how & what a music enthusiast thinks before looking for some workshop. In this case, my friend has answered that he would primarily look for “who is conducting the workshop”, “is it related to my niche ?”, “Ticket price”, “Sounding style of instructor(if not renowned)”, “previous enrollments”, “social/music profiles (if not renowned)”.

All the above information was very useful for me to prioritize important information and eliminate unimportant information

2. What expectations will you have from the workshop ?

My intention behind asking this question is to see what elements/components do the user expects from the workshop so as to prioritize this information and make user decision-making easier to enroll in this workshop. In this case, the responses to this question were “hands-on projects”, “More value (Value for money)”, “Certificate/proof of completion”, “addable to social profiles to showcase”

3. Technical information about field ?

Since I am unaware of music production and some technicalities I have asked this question to gather some jargon and also to understand what technical information shall be prioritized. From the interview I got to know about “Sounding” -people can understand the music style of a person. “Pure Sound”- is a keyword to represent the quality of sound and sync time.

Few of these insights are important for me to prioritize as people into this niche lookup for this information

How are other websites designed ? (inspirations from similar websites)

Observing these websites has given me a rough idea about how how to compose elements for this niche, how to prioritize the right information, What not to include & a few other basic principles.

An insight from Nicky Romero’s page: I got to know that I should prioritize DAW — Digital Audio Workstation. This helps music enthusiasts understand what software/device is the audio being recorded, produced, edited, etc. Each individual has their own choice of DAW and this is one of the important technical features that have to be prioritized.

From skillshare & Coursera pages: I have learned to prioritize the social proof information. Social proof information will affect viewers’ decisions in a positive way as they understand what enrolled people are saying about that course.

All in all, after looking at all these websites I understood how to design websites for music enthusiasts.

What to include and what not to include. (Information Architecture)

After my interviews and inspirations, it is time for me to do a rough layout and make a plan about what to include in my website. This process of structuring an information architecture diagram will help me in prioritizing important information and also will help me with planning and presenting all the information better.

With this information architecture, I have got a clear understanding of where to include the information and if at all this information will help users make their decisions quicker

How should the website look ? (Wireframes)

The rough wireframing of the website will help me visualize my decisions better and thereby taking efficient steps to keep/change my designs. It will also help me understand if I am missing out on any information.

I love to wireframe because this practice purely focuses on problem-solving, which I believe is the core for any design.

After wire-framing I usually walk through the website and see if there is any information that I missed out on. In this case, I have shown these wireframes to the friend whom I have interviewed, it will give me a clear understanding of the information that I missed and it will also give me validation if at all the website is in similar lines to that of users expectations.

Vibe Tuning (Branding)

After I have got a basic understanding of the layout of the website it is now time to add that visual flare. I like to start the process by choosing a relatable color palette for ritviz. So I have scanned through his album covers and then decided to set a palette.

Anddd the finale! (Visual Design)

This is of course the most vibrant phase, but from a different perspective, I have learned a lot in this phase, especially about the power of iteration and implementing changes from the feedback. Visual design is so crucial as any other phase because it carries our designs to users.

Iteration 1

My Initial designs required tons of improvisations and corrections. For me, the most interesting part is to know the mistakes that I have made in my decisions because it will challenge my assumptions and bring me out with a fresh new perspective, and sparkle many ideas. Presenting my iteration 1 below with tons of mistakes :’)

After showing this design to my friends, mentors I have received over 30 comments on different aspects of design. This was overwhelming for me initially but slowly I started to love the process of iterating and accepting the mistakes.

You can see from the screenshot that I have received over 25–30 comments on my design. Almost all the elements of my design have been questioned and I received suggestions for possible improvements.

Here I started to note all the comments, See what went wrong in my decision making and then act accordingly. The comments that I received were mostly about

• Spacing
• Sizing of elements
• Colors and Contrast
• Content and Copy
• Typography (sizing & style)
• Hierarchy

I have then made lot of iterations section-wise and element-wise so as to correct my mistakes from Iteration-1

🔥 Final Design!

The final design would still have mistakes but it is a 10x better version than iteration-1. I have learned to evaluate the comments and then act on them. At the end of the day, it’s the users who need to understand the design and hence we need to adapt to users’ comments.

Major changes from iteration 1

• Got better in visual principles such as spacing, hierarchy & color contrast
• Changes in typeface to suit the vibe of Ritviz
• Better usage of background colors for separation of elements and better transition.
• Attention to visual detail
• Prioritized technical information such as sounding, pure sound info and DAW, so as to make more sense for music enthusiasts.

📱 The Mobile Version

There is a lot of difference between web and mobile guidelines. Many individuals just scale down the web version and make it a mobile version which doesn’t work well in my opinion. I have rearranged many elements so that users who view the website on their mobiles should also get great experience.

Designing the same page for mobile sizing was new for me, I struggled initially but slowly after reading through the interface guidelines and continuous feedbacks I got better at it.

💯 Overall Reflections

• It was exciting to build a whole new product from the scratch
• I have truly learned the power of feedback, It helps a lot to introspect on your decisions and get better at it.
• The process of iteration is very crucial, we have to systematically change based on evidence.
• The Mobile version is not just a random scaling down of the web version, We have to keep in mind the touch interaction on vertical screens.
• The visual detail is very crucial, Most users get stuck at little things.

🙏 Thank You