3
19 Comments

Please give me feedback on new website design [2nd attempt]

Hi all,

Few days ago I posted here to get feedback on new design and content, but since my CSS skills are pretty bad and I didn't use any framework, only I could see the site properly and it loaded like a mess in other's browsers. As a result of which nobody could even read what the site was all about.

I have converted the same design into BootStrap this time around and I request you all to take a look and help me by giving as much feedback as possible.

URL: https://www.fileago.com/new-design/

So far I have been told that the illustrations are nice but they have too many colors, so I will probably get them drawn by somebody keeping only grey and red in them.

I plan to launch the site with this design, so I am very interested to know your views and replies to the following questions:

  1. Which other software / service came to your mind when you read through the page?
  2. Is the design and content good enough to generate interest?
  3. Anything to add / remove that could improve the page?
  1. 2

    Hi there,
    Your custom illustrations give a distinct touch to your design, I think it works great.
    My first impression was that it was too much content and slightly bulky - I think your page would benefit from being lighter.

    Some ideas for fixes:

    • More padding and white space
    • Slightly smaller illustrations
    • Less text // that's not design but content, but I thought this might help.
    • More visual rhythm between the different sections (alternate background color, etc.)
      Good luck!
    1. 1

      Hi,

      Great ideas! I will work on them.. Thank you for taking your time and for your advice!

  2. 1

    My feedback on the design is that you have to be careful when asking for feedback on design. You'll get a never ending list of suggestions. People love talking about it.

    If you want to see how various designs actually perform you can just make a couple of different landing pages and see which ones people respond to better.

    good luck

  3. 1

    Hi,
    The landing page looks clean but I think there is too much white space. I am pretty sure others might have mentioned the same.
    Possible places to add color: Dividers (alternate), Feature Icons, Edition Boxes, Buttons.

    Also, only keep a maximum of 6 features on the landing page and add rest on the feature page.

    Description: If possible, shorten the description and highlight strong keywords because most people will do a quick glance and will not read the entire content. You have about 3secs to catch someones attention. (I am personally struggling in this for my landing page)

    Great job with the illustrations, I'm doing illustrations on my landing page as well. I'll be posting the same question for my landing on Tuesday 9/4.

    Hope this helps! Good Luck!

    1. 1

      Hi,

      Thank you for your advice, much appreciated.

      I will decrease the features and only highlight the most important ones, and also work on improving the descriptions..

  4. 1

    How did you choose your two colors? (the brown orange) and why?

    1. 1

      Got inspiration from another website with a very similar design with just 2 colors. I thought it will look different than others.

  5. 1

    Overall, a good site. I had a quick glance at the existing design (https://www.fileago.com/) and can see how this new design is a major improvement.

    When first visiting the site, it reminded me of online will writing services, such as https://farewill.com/. I think it may just be the fonts though.

    I feel the CTA button on the top right needs some colour, it blends in too well with the rest of the nav.

    The coupon code section, while a great idea, doesn't really catch my attention as well as it should do.

    The footer looks a bit plain and boring, mainly due to fonts and padding. A lot of modern websites have a lot of padding on their footers to really space them out. It might be worth taking a read of https://www.awwwards.com/15-excellent-creative-website-footers.html.

    I'll revisit this if I get some more time :) I do think it's a great direction to be heading in!

    1. 1

      Hi James,

      Thanks a lot for your generous feedback.

      The design for this new site was inspired from another website with a very similar navbar (with same CTA button style).

      I agree with you that the coupon code section could be improved to grab the user's attention. Maybe changing the color of the first line might help? Or any other suggestion there?

      In fact I had put a lot of padding at first in the footer, then removed thinking someone would ask, "why so much spacing?!" Have gone through the link you suggested. I should find some inspiration when I sit down to change the footer section soon again.

      Cheers!

  6. 1

    I think you should overlay your text/CTA over the image (also, does this hero image convey what your company is trying to achieve?). If I view this on a laptop I see mostly whitespace and it makes it less engaging (you literally have a few seconds to captivate someone or they'll close your tab).

    Also, your logo in the top left corner is a little low res and blurry. It's important to have high quality assets as it's the first impression someone will have of your service and impacts trust.

    Your coupon offer below the fold needs a little more breathing space, I'd say bump up the padding.

    Your icons above the titles should be centered as the titles should be too, will give it a little more natural flow. Actually, you might not even need the icons as you images (which are lovely, by the way) are communicating the same thing.

    Also, your grid of features is a little overbearing. On a laptop I have to scroll a lot to go through them. It would be nice to compact these into a more consumable bullet list of just focus on your top features with a link to the others (like how Slack does it https://slack.com/).

    You should horizontally align your CTA section at the bottom. Also make the CTA buttons red like the top of the page and make the stand out from everything else.

    Finally, why is your mock up screen in a Comic Sans like font? It's a little distracting and makes it look like it's targeted at a different audience.

    Otherwise it's good. It's hard to adjust these things using CSS as it's a lot of trial and error. I use Sketch to mock up things to save me time tweaking CSS later.

    Good luck with it!

    1. 1

      Hi James,

      Thank you for taking your time and writing this much. Appreciate it, really!

      I think I will have to choose a better hero image and then try overlay over that.

      The logos both on the header and footer are in svg format. Do they loose quality and look blurry?

      I have added some more padding space in the offer section.

      Centered the titles and remove the icon above them. Glad to hear that you liked the images and that it conveyed the message correctly to you.

      I will try to trim down the features list but right now I don't know what all can be removed, they all seem important to me.

      By CTA section, are you referring to the "Not convinced yet?" block?

      I thought that the mock image should "loosely" represent what the users will see, because they already get the option to check out a live demo, hence that casual font. Will try to change it to something better.

      I designed this page in Figma last week. The design came out so good and then I got this crazy idea to learn CSS grid and finally get rid of Bootstrap. Turned out that the site was loading pretty for me only. Others here in IH complained of font sizes, layouts and what not. Then I decided why the fuss (I know my CSS skills suck anyways), so I recreated a very similar design in BootStrap Studio, and that is what you got to see :-)

      1. 1

        Hmm that's strange, the horizontal bars in you logo have some blur on them on my Macbook air. Maybe you can confirm with other devices?

        Yes, that's what I meant by the CTA section.

        Maybe it's just my own issue with the comic sans font in the mock up, I'm not your target audience but I'd be interested to know other people's opinions.

        Obviously take my advice with a grain of salt and use your best judgement, everyone has their own opinion :)

        1. 1

          Nice catch about that horizontal bars in the logo. They were indeed a different color than the outside square. I am using Macbook Air myself but never noticed that. Will have to fix that. Thank you!

          Yes, everyone has their own opinion :-)

  7. 1

    I like the graphics very much - what did you use for creating/getting them?

    1. 1

      I bought the illustrations from RawPixel

  8. 1
    1. This product came to mind - https://www.samepage.io/
    2. I like the layout but I think adding more colour would make it stand out more.
    3. Animation as you scroll down would make it more interesting. This library is very easy to use and works well https://michalsnik.github.io/aos/ Just be careful not to use it any important content that you want indexed as it affects SEO (because the elements are hidden on page load)

    Hope that helps!

    1. 1

      Hi Nathan,

      Thanks for feedback, I will look into points 2 and 3 and see what can be done about it.

      I am a bit concerned that you thought of a fully fledged collaborative tool which includes team chat, video conferencing, task management, file sharing, real-time document collaboration and probably a lot more (kudos to their team!) because what I am building is a file storage platform.

      Is my headline "File storage and collaboration platform for teams and businesses." too much? Yes, it is a collaboration platform for file storage and sharing, that's it. Does the word "COLLABORATION" send a wrong impression of what the product is about?

      I was hoping to hear the names like Box / OwnCloud / NextCloud etc. This was a total surprise. What do you think?

      1. 1

        I wouldn't worry too much it's just something I have used before so it sprung to mind and I haven't heard of Box etc.

        It depends on what you think brings the most value. If collaboration is a big part of the proposition then leave it in, if not remove it or make it less prominent.

  9. 1

    This comment was deleted 7 years ago

    1. 1

      Hi Moe,

      First of all, let me thank you for such a detailed feedback, and also for taking time to suggest improvements in the logo.

      I see what you have done with the logo, and I like it. Don't be surprised if the logo looks like your recommended version when I finally launch the site! :-)

      1. Yes, will do.
      2. Agree 100%. That hero image is very cool, but doesn't help in putting forward what the product does. Have to put together a better one.
      3. Again, great recommendation. I have no idea why this never crossed my mind. Will try to implement it and see how it goes.
      4. Agreed. I was thinking about it too.
      5. You are right.
      6. This is not a pricing table. Here my intention is to convey to the user that there are 2 options available. At first I wrote down the differences between each and it became a paragraph of text which I felt like nobody would bother reading. So I took out 4-5 important points out of it and made that table. Although it kinda looks like a pricing table, it isn't. Pricing table will be on the next page only after user clicks on either one of those buttons.

      Agree with the corrections as well. "Hosted" and "On Premise" seems good.

      I will take a look at Airtable and see if I come up with something.

      Appreciate your suggestions, Moe. Cheers!