🤔 What Would You Change About this Website?

Hey- I'm working on this website, and I was wondering what you would change about it. I know it's not perfect at this point, and that's why I want your opinion on it.

You can check it out here.

If I build the entire website on a bad foundation, it will just end up being a bad website. So, I would rather get feedback now (no matter how harsh it will be) than building a ugly mess and not knowing until afterwards.

You can also check out our discord server here!

Comments

[Ben Halpern]

Overall aesthetic and execution is nice. I like just linking to a PDF to get the job done on "View Rules". Seems like that is a solid choice.

I think this section is a little clumsy:

I think you could match the other brand elements more concisely and get better spacing. Overall just staring at this area and making it a focus for improvement should do the trick since it definitely seems like you know what you're doing overall!

[lionel-rowe]

Counterpoint to "just link to a PDF": PDF: Still Unfit for Human Consumption, 20 Years Later (Nielsen Norman Group)

[William McGonagle]

Its an interesting point- I will definitely add that to my reading list.

[William McGonagle]

Yeah- we should definitely go over that area again. I took the icons from bootstrap, but I should probably go in and customize them to fit our brand like you said.

[Martijn Oud]

I like it! Here's some random suggestions:

• I'd personally bump the line-height for main p a little, maybe to 1.7
• Your images don't have alt tags, you could also give them more descriptive filenames
• You can place the Google Analytics tag in the footer and use the anonymize_ip option for slightly more privacy-friendly version
• You've used tables for styling, I'd avoid that and use flexbox. You're missing a <tr> in the first table
• When linking to PDFs it's nice to have a visual indicator so users don't get surprised by PDF downloads
• The copy & main title "Join the FPA." isn't very strong. I don't know what the FPA is, you could switch it around with paragraph below it
• I would center the .features table h3 titels, looks nicer with the icons
• The site doesn't have a /robots.txt file, you're going to end up with a lot of 404s in your server log files.

[William McGonagle]

Those are great suggestions! Thank you so much!

[Liftoff Studios]

A very simple and nice website :)
As for suggestions I have many:

• Add a better footer with resources and navigation links
• Add a better font to the text "Our programs". Increase the size too
• Instead of telling things to do in order to join the FPA under competition part, create a separate section with the title "How do I help" or something like that

Your initiative is really good though :)

[William McGonagle]

Thanks- I will definitely add those! Also thank you for the compliment :)

[Liftoff Studios]

No problem. Always there to help the community :)

[Timothy Foster]

My favorite thing is that I know immediately what FPA's goal is and that the front page basically says everything else I would want to know about it!

Three things I'd suggest that others haven't mentioned:

• I had to dig a little to find out what FPA stood for! I feel like the expansion to this acronym should be prominent above the fold somewhere.
• Generally increase the font size; it makes it easier to read and makes the sections feel more important.
• Took a look at the HTML and I'd say definitely avoid using table to lay out the elements! Tables are for data; CSS flexbox and grid are for layout and design.

That last bullet is important for web semantics and accessibility. MDN has a good blurb on why not to use HTML tables.

[William McGonagle]

We should definitely use the name "Fairfield Programming Association" instead of FPA more. And, we will work on switching from tables to flexbox :)

[scottshipp]

My two cents:

• The photo of an expensive and well-manicured mansion feels like a potential misstep. Let's pretend I am a child from a lower socioeconomic background who happens to visit this site. You immediately lost me here. Maybe I don't want to join the "Fairfield Programming Association" if I assume from this photo that it's for a bunch of wealthy New England snobs. 🤣 It could be better to show a child excited at a computer? Particularly since the text at the bottom of the page makes it seem that you are sensitive to this issue ("...many underpriveliged districts cannot afford extra education...")

• I agree with the others about clumsiness of the second section. It isn't immediately clear from a UX perspective if this is just informational, or if I am supposed to click these different boxes to go off to learn more?

• The three sections all have different widths on my desktop. I feel these should share a left margin at least.

• The login page is well-executed. It looks great, and I even was told a joke. Thanks!

[William McGonagle]

Thanks for the compliment on the login page, but we can't really change the picture of the Vanderbilt mansion as it is our headquarters and the location that we will be hosting the competitions at. We also recieved feedback from many Bridgeport (a local city in the 'New England snob area') children who said that the photo attracted them because they wanted to check out the building as it has a rich history and is quite stunning.

[Silvia España Gil]

It's looking cool, very clean and soft to the eye. I were to give any comment I would say to center the titles specially the ones in the table so it doesn't look disaligned.

Also for the button "View rules" I was surprised by the fact that it was a pdf and not another part of the web so maybe you could state like "View rules in pdf" or something like that or even add a target blank so the pdf opens in a new window and not take the user out of your website

Keep on the good work

[Valeria]

Up for a friendly roast? You'll get one anyway 😂

Lots of thin text is hard to read (especially in mobile). There is no way of saying what the website is about from the first glance. I'd rethink the design and content formatting.

Start with explaining what is the website about, in one short powerful phrase that stands out. Hook the user to get more than 5 seconds of their attention.

Think in actions: what do you want the user to do and in how to make them want to do it?

And if so happens that a wall of text is unavoidable - make sure it's readable. Split it to smaller parts, add relevant illustrations (not the generic icons, they didn't help) and ditch the very thin font please.

[William McGonagle]

We should definitely simplify the landing page- its a little clunky right now.

[garrysmithers]

I would like to add some images to represent the categories and also make some colorful design for this website not just black n white.

[William McGonagle]

Color would definitely be a good addition- thanks!

[Manas Mishra]

It bascially looks like that you are using bootstrap. It's a great resource to be used, but you are making it too predictable, that you are just putting the same button and hover effect of bootstrap, which actually takes off the vibe, because there are millions of websites, made using bootstrap. Use bootstrap, but try to change styles little bit, so that it should not be that predictable.

[Shrikant Dhayje]

Website is Well Made But I have some suggestions, I Am Not Much of Expert Web designer but as Completely New Viewer's Perspective the Site Is Too Big In length.

You Can Try Using Slider With Help Of Javascript or Bootstrap for the Part Below The Word Our Programms.

:)

[William McGonagle]

That sounds like a good suggestion- thanks!