30

Please critique my landing (it's a design tool to give feedback to developers)

4 years ago from , Designer + Developer + Harmonica Player, Make of crosspatch.io

Hey to all Desing News community! I’m working on a side-project for giving feedback on developers’ implementation. So when you see something wrong on the implemented app, you can send comments seamlessly.

While the product is in development, I launched a site: https://flawlessapp.io/feedback (I hope, I will finish the alpha in February, have something working already)

What do you think about the concept in general?What can be improved in landing design? Does it clearly explained on the landing? Any other feedback?

Notes:

  • the copy is still in the draft stage, so please forgive “non-native copy”

  • the design was done by my friend, based my wireframes

  • I & my team run a week of user testing with the first Sketch prototype. Bases on that prototype, we defined features.

Thanks for the feedback ahead!

29 comments

  • Jan SemlerJan Semler, 4 years ago

    I would suggest that buttons or links got hover states. A bit more whitespace in the content area between the blocks would be helpful. Another contrast color will also be helpful down the road to pin out some campaigns or get attention for certain elements, currently it is too much yellow and black.

    6 points
    • Ahmed Sulaiman, 4 years ago

      thanks, Jan!

      Do you think more colors will make it look better?

      1 point
      • Jan SemlerJan Semler, 4 years ago

        Happy to help. I wouldn't think more color is better, there are two ways i think.

        1. Another Color for contrast
        2. Reduce Yellow to get more attention on yellow buttons or contents (depending on what you want)

        For example:

        Figma They use green on their frontpage for buttons and purple/orange for areas n stuff. So the visitor will instantly know what the green button does.

        In your case it is to much yellow so i don't really see the button or other cta.

        Get me?

        *edit: would > wouldn't

        4 points
        • Ahmed Sulaiman, 4 years ago

          oh... Now I see it. CTA buttons, indeed, are totally in the same color as all the rest. Yellow world.

          So strange, that I didn't notice it before!

          0 points
        • Ahmed Sulaiman, 4 years ago

          hey, Jan!

          We talked with my team and will fix many things, you have mentioned.

          Reduce Yellow to get more attention on yellow buttons or contents (depending on what you want)

          We will change button colors.

          buttons or links got hover states.

          added to the sprint too!

          A bit more whitespace in the content area between the blocks would be helpful.

          Will do this. Many people pointed it out, as well.

          thanks again.

          1 point
  • Joshua TurnerJoshua Turner, 4 years ago
    • The animations/copy pairings under "How does it work?" feel super constrained - like Jan said, up the vertical padding there and let them breathe.
    • (Personal opinion) I think everything looks better with a system-font stack.
    • I think the font weight you're using for the headers could be reduced by 100 or 200. Instead of relying on the weight to differentiate the title from the rest of the copy, try playing with opacity or color. To me, this looks better than the heavy bold you're using.
    • The footer feels a little out of place. Like it was just thrown in there from a previous design. Maybe the call to action directly above the footer could incorporate the footer content to the left of the resting dog - you'd obviously need to adjust the vertical padding on that as well to accommodate.
    4 points
    • T. F., 4 years ago

      Agree with the vertical padding of content areas, though disagree with the menu and font. I like the bold font as differentiator for the menu, and the font's elegant, however you definitely need more line-height for your headings. Well, for the footer/last call to action I like that's an attention grabber, but the text is too unreadable contrast wise.

      1 point
      • Ahmed Sulaiman, 4 years ago

        hey, T. F. (sorry don't know your name)

        I like the bold font as differentiator for the menu, and the font's elegant, however you definitely need more line-height for your headings

        oh, this typography makes me crazy. I don't see those nuances. Will go to our freelance designer to ask (he is my friend, working in the same office).

        0 points
    • Ahmed Sulaiman, 4 years ago

      hey, Joshua! thanks for your thoughts!

      The animations/copy pairings under "How does it work?" feel super constrained - like Jan said, up the vertical padding there and let them breathe.

      we'll add more space, 100% agree

      everything looks better with a system-font stack

      don't know, probably we will keep fonts as it's for now

      0 points
    • Ahmed Sulaiman, 4 years ago

      The footer feels a little out of place. Like it was just thrown in there from a previous design.

      okay, that's true. We took footer from the old site, to save time on development. will take another look on it.

      thank you again for your feedback. Our front-end develope will have many new tasks in this sprint.

      0 points
  • Paulo PereiraPaulo Pereira, 4 years ago

    I agree with Jan - you need a contrast color for your buttons. I would suggest blue (#3d7dd0) similar button color you use on the flawlessapp.io site.

    The Request Early Access section (yellow section) try using the dark grey color (#272b2d) for the text. The copy text under the headline is getting lost within all that yellow. Darker text with the blue button will make that stand out.

    I would also use that same blue for the dark buttons behind the social icons, right now they blend in with the background.

    3 points
    • Ahmed Sulaiman, 4 years ago

      I would suggest blue (#3d7dd0) similar button color you use on the flawlessapp.io site.

      The Request Early Access section (yellow section) try using the dark grey color (#272b2d) for the text.

      thanks for suggestions! I will try it out!

      I'm thinking to add small animation to buttons in the footer. So when you highlight them, they become yellow\main color. Agree, that right not they are blend.

      Thanks to you, Paulo, for your feedback.

      1 point
    • Dana (dmxt)Dana (dmxt), 4 years ago

      I would recommend using SCSS as a tool for tuning opacity for actions.

      1 point
  • Ron SwansonRon Swanson, 4 years ago

    For digital tools with a UI I always suggest to show actual screenshots/videos of the the product instead of just illustrations of it. :-)

    Keep ut the good work!

    2 points
    • Ahmed Sulaiman, 4 years ago

      hey, Ron! thank for your nice words and support.

      show actual screenshots/videos of the product instead of just illustrations of it

      MVP looks not so fancy, so we put animations instead. But in the next iteration real screenshots will be definitely better. I put this suggestions into our Asana backlog.

      0 points
  • T. F., 4 years ago

    Great, clean design. Gets to the point fast, which is always good. Like the simple color choice (maybe the yellow tone could be a bit stronger/deeper). Footer has some spacing problems to the adjacent button. Copy is quite alright in what info it tries to get across, but as you said, needs to be rephrased (if you like, maybe I could do a quick rewrite). Also, how did you get the client testimonials: are these people you actually know or just some examples? Keep up the good work.

    2 points
    • Ahmed Sulaiman, 4 years ago

      Thanks for your feedback! To follow up on your comments:

      Also, how did you get the client testimonials: are these people you actually know or just some examples?

      It's real people, who played with the prototype. We firstly made user testing with showing prototype, explaining features. Then we move to deeper development and landing.

      The good-enough MVP should be ready in 2-3 weeks, so we will give it to the wider public.

      0 points
    • Ahmed Sulaiman, 4 years ago

      Footer has some spacing problems to the adjacent button.

      what do you mean by adjacent button?

      Copy is quite alright in what info it tries to get across, but as you said, needs to be rephrased (if you like, maybe I could do a quick rewrite).

      thanks for this! for now, we will rewrite it based on all the feedback we got. So we should have a better version. Then I probably will ask for help with this part.

      I'm from Ukraine, that's why my copy sounds not really natural. It's our task before the actual release

      0 points
  • Steve O'ConnorSteve O'Connor, 4 years ago

    Agree with others - you need that CTA button to have a contrasting colour to the orange in order for it to stand out. Landing page CTA design 101!

    The copy needs a little sharpening.

    Give Flawless Feedback to your developers macOS tool to leave comments on the iOS app faster. No more making dozens of screenshots

    Could be

    Give flawless feedback to your developers Leave comments on iOS apps faster and say goodbye to annotating screenshots all day.

    No one has said anything about accessibility… that orange and white combination is not accessible at any size or combination. The contrast ratio is only 1.69. The easiest way around it would be to use black on the orange instead of white, and also add underlines to your links on focus.

    But you could use a tool like this to generate an accessible palette instead: Confrere a11y test

    You've also removed outline from all links. Something designers love to do (I was guilty for years) but this makes it difficult for keyboard users to use your site by tabbing. If you use a:active {outline:none;} then the outline is hidden for everyone except keyboard users.

    Good luck with the project :)

    1 point
    • Ahmed Sulaiman, 4 years ago

      Landing page CTA design 101

      I already learned this lesson. No more same color CTA buttons, I promise. Took this fix in our sprint. Should have new button pretty soon.

      Give flawless feedback to your developers Leave comments on iOS apps faster and say goodbye to annotating screenshots all day.

      I like it! You made my job much easy

      0 points
  • Lukas Majzlan, 4 years ago

    I like the colour scheme and the illustrations but despite of this, the website looks just very normal, like thousands of others. Good point was to change the used font, this one looks very harmless to me. I would also increase the height of the header (top part) and make a better vertical aligment of the H1 with subtitle in the hero area.

    1 point
    • Ahmed Sulaiman, 4 years ago

      Lukas, thanks for your feedback! Well, the normal website is better than terrible, not usable something

      0 points
  • Samuel Brynolf, 4 years ago

    Hi! Great idea in general, but I have a question about feedback regarding errors due to specific states in the application that could be hard to reproduce:

    For example if a user shuts down a modal AND the sidebar is open AND is logged in, THEN something weird happens.

    If this scenario is outside scope, all fine :), but if it is: a specification on that would be great on the landing page (because that would be a kick-ass-function).

    Thanks!

    1 point
    • Ahmed Sulaiman, 4 years ago

      can you please explain a little bit more? I'm struggling to understand (probably because of my English).

      0 points
  • Dana (dmxt)Dana (dmxt), 4 years ago
    • Why does scrolling feel jacked?
    • Less detailed logo will make it look much more clarified and professional.
    1 point
    • Ahmed Sulaiman, 4 years ago

      hey Dana!

      Why does scrolling feel jacked?

      could you pls send a screenshot? can't see it from my laptop...

      Less detailed logo will make it look much more clarified and professional.

      Agree, we actually haven't spent much time on the logo. That will be an important task if the product itself will be good, and people will be using it. I should know it pretty soon.

      0 points