4
17 Comments

Long time lurker, first time hacker. Could I get some landing page feedback?

https://www.playitfor.me/

Hello!

I've been working on https://www.playitfor.me/ for a while now and as someone who isn't super familiar with design I'm wondering if I could get some pointers before I disseminate links to my product all over the web.
A few specific questions to prompt discussion:
Can you tell what this product is and what it is about?
Is my CTA sensible and legible? I actually replaced a regular old register button with the mailchimp thing to kinda gate signups a little bit and make it seem more exclusive while building my email list.
For the person who will inevitably comment that I need illustrations with my copy: I know :( Is the best solution here to just suck it up and pay a graphic designer?
Any other critiques and comments much appreciated!
Thanks in advance!

#landing-page-feedback

submitted this linkon June 16, 2019
  1. 5

    Congrats on getting started! As a designer, I feel like there's a lot of work to be done - but I'll hit you with the core pieces of advice that stand out:

    1/ You need to improve your spacing. I can find a lot of examples throughout your page of different divs or p/h tags that sit far too tightly against others. And at the same time, there is no consistent spacing theme throughout the page. I recommend setting up some helper CSS utilities. For example:

    .normal-spacing {
        margin: 1rem 0;
    }
    
    .large-spacing {
      margin: 2rem 0;
    }
    

    And try to stick to only using 1-3 utilities.

    2/ Font hierarchy. Use heavier weights more often. Some places I can see where heavier fonts are definitely needed are your green buttons (to improve legibility) and your subheadings.

    3/ Break up your body with a bit of imagery. Your copy is pretty good! But there's just a bit too much of a wall of text below your hero. I recommend breaking up each of your main points with their own icon. Or turning them into [image] [text] blocks. Take a look at some other landing pages for inspiration on how this is done.

    Please feel free to reach out if you want more feedback and ongoing! I'm rushing this together on my work break.

    1. 1

      Thank you so much for the tips!! Right now for css I'm using a fork of bulma, and I'm still getting the hang of customizing it in a way that looks good and doesn't result in a ton of spaghetti. I've started noodling a little bit with figma to make an updated prototype... would you mind if I dm'd you for advice? Thanks again!

      1. 2

        Bulma is good! My personal preference is Tailwind; in my opinion, it's utility vs. component focus is better. But do whatever you feel most comfortable with. My best advice is to just jump on Dribbble and try and draw as much inspiration as possible whenever designing a component. Definitely feel free to DM me :)

  2. 2

    Nice work on making something.

    Some feedback.

    Header image is WAY too big. I don't care about a hand spinning a record, I care about your software.

    Too much text. Can you boil down what you do into an image?

    What is the benefit? Is it for DJs? Call that out immediately.

    🍀

    1. 1

      I see, thank you for the feedback! Yes, this product is meant for professional DJs who do corporate, wedding or other gigs where it is important to take requests to keep the organizer happy. I'll try and make this more clear.

  3. 2

    On top of what others have mentioned:

    1. There are some typos in the copy text, (f.ex. on "PlayItForMe is avalible" -available.

    2. Using center alignment for all of the copy text is not recommended , as it is harder to read this type of layout and should be used cautiously. I would rather go with the left aligned text .

    3. As already mentioned, some imagery (illustrations ,or stock photos) would increase the engagement , check some examples at - https://www.lapa.ninja/

    4. Try lowering the length of the paragraph single line to around 50-60 characters for better readability.

    Hope it helps and good luck with your product.

    1. 1

      Thanks for the tips. I haven't seen those examples before but no matter how much inspo I get I still struggle to make a nice looking landing page ;A; .... Figuring out how to get illustrations is quickly raising in my priority list. Thanks again!

  4. 2

    What it does: DJ puts QR code in the event, audience can request songs.

    Looks interesting. Keep it going

    Room for improvement: screenshots of the app could help to illustrate each point.

    1. 1

      Thanks for the feedback! I'm still trying to decide between screenshots or stock photos, probably a combination mixed in with my copy would be best.

  5. 2

    Hi Wesley,

    Welcome to the hacking side of IH!

    First of all congrats on getting to this point!

    Let's get started, and these are my opinions: I am not a huge fan of your font choice for your branding.

    Your CTA doesn't tell me why I should give you my info. Why should I sign up for PlayItForMe?

    Your header is very compressed and squeezed together, give them some breathing room. I think your input doesn't need to be longer than 400px long.

    Your paragraphs are way to wide. You could either use a flex layout or just set a max width and bring them down. The content is hard to read as is. Your text headings could also use a a heavier weight.

    Keep up the good work!

    1. 1

      Thanks for the feedback! It seems like a common thread is cleaning up the copy, increasing the margins, and adding more smaller pictures.
      I am not a huge fan of my font choice either. I spent over an hour debating among friends whether or not it was too cheesy, lol. The only thing that prompts me to keep it is that my potential customer's websites (eg local event dj's) are also super cheesy and so I figured it would help me fit in? but perhaps that line of reasoning is silly... Regardless, I'm not at all in love with it either but I figured it was better than the system font, which is what I had previously. I'll keep on the lookout for fonts that grab my fancy. Thanks again!

  6. 2

    I think it looks good! You should probably ditch the small lettered playitforme beta text in the top left corner. Besides that, it doesn't look bad. I can tell what it is about after reading the description. The only things I recommend you look into are a group voting system and a description section where the DJ can post rules about what restrictions are on requested songs. For example what if the person actually hiring the DJ only wants old school r&b. They should have that section to let the audience know. Hope it blows up man, could be useful.

    1. 1

      Thanks for the feedback! Do you mean the 'beta' or the entire box?
      Re the group voting, etc.: those are some good tips that I've also heard from other DJ friends. I want to eventually add some kind of veto mechanism for the person hiring the DJ but I just didn't manage to get it in my MVP yet.

      1. 1

        All of the text in the top left. The veto button is a solid idea!

        1. 1

          cool, thanks!

  7. 1

    I think there are better ways to display your paragraphs/content below the fold (e.g. Here's how it works, etc.). Moving it into rows with columns might work, or even using accordions (https://www.w3schools.com/howto/howto_js_accordion.asp, bootstrap has collapse in framework already) to add an interactive aspect to your page. Overall thinking through how to make that content more digestible should be a priority.

    1. 1

      I see. I think breaking it up with images and maybe tidying up the copy will be really beneficial, so I'll be focusing on that next. Thanks!!