Roast the homepage of my SaaS product

Hey @imsurajkadam - I'm a senior UX designer and I did a bit of a UI audit, annotating the design. Unable to paste links here, but can share privately. But below is the gist of it.

1. Layout
There are 3 (or more) different widths going on in your layout. The header is a different width, the hero area is a different width and the sections below are different widths. Even within those sections, the ones at the bottom are different. Top Features is different than About SubtitleO. The layout should follow some sort of grid and structure - and should have reasons for these kind of variations. Right now it seems a bit random.

2. Inconsistency in Icon Colors
The icons in the 3 sections on top use a different shade of blue each time. The ones in the "But Why Do They Use it?" section are a different blue, the "What Makes Manual Captioning So Difficult?" are a different blue and the ones under "Introducing SubtitleO" are a different blue.

3. Icon Sizes
The icon sizes in the circles are inconsistent, and also in a couple of the sections, they're too big, i.e. almost touching the edges of the bounding circles. There should be some padding in there which stays consistent through-out the page.

4. Alignment
Under the section "But Why Do They Use it?"tThe alignment of the icons and the text is not correct. They're not vertically centered. The bottom of the icons should be aligned with the baseline of the text.

5. Typography
Should all headings be in the “Capitalize Each Word” letter casing? It seems a bit unclean.

6. Imagery
The image under "Discover the Simplicity of SubtitleO" doesn't seem to contribute anything to the story of the page, or your product, and is using up valuable screen real-estate, making the user scroll more to get to any information they may need. The other image used under "About SubtitleO" also seems like a free stock photo, giving a slightly 'less-premium' look.

7. Artifacts in Icons
The icons under "Accurate and well-timed captions" and "Multilingual support" have some weird border-like artifacts around them.

8. Shadows / Borders
The accordion under "Frequently Asked Questions" have a border AND a shadow. There's only a need for one of them. The purpose of borders and shadows is to separate the element from the background. If the border is doing it, the shadow is not needed... or vice versa.

9. Overall Colors
The overall colors are very pastel-y... and muted... not rendering a modern, clean look.

---

I am a Senior Lead UX Designer at Autodesk (the company behind AutoCAD, 3D Studio Max, Maya) and also work on freelance projects on the side. If you're interested in getting design services, please feel free to reach out.

Mobile version, make sure CTA remains sticky even after scrolling. Preferred position is bottom of the screen. Store the field values during signup in cookies, use cookie value to prefill the fields, so that next time they don't have to fill the fields again. spacing issues, take care of line height. Leave enough space between sections.

My first impressions were:

• blue theme = SaaS for corporations, so I didn't expect it to be for video subtitles
• it took me 10 seconds for my brain to figure out what it was exactly. I read the headline "Simplest Way To Add Stylish Subtitles" and looked at the picture, and my brain struggled to reconcile the 2, because, 1. The picture is quite small and busy, I had to focus more to figure out what it was showing, 2. In the picture, the first word in subtitle is hard to read (over the guy's skin), 3. The yellow style of subtitles isn't really what I would associate with "stylish", "stylish" is mostly subjective (depends on audience)

The good news is that things are mostly fine further down the page IMHO, but the first impression could be greatly improved.

If I were to spend 30 minutes on this, I would:

• try different colour scheme
• make the picture about 20% bigger
• try different pictures, to make sure the subtitle is 100% readable
• make "Simplest Way To Add Stylish Subtitles" a bit smaller
• try alternative for headline: "Simplest Way to Add Subtitles to Your Videos"
• make "Save time and boost the engagement of your videos with quick, customizable, and stylish subtitles that will make attention-grabbing videos." a bit bigger, with "Save time and boost the engagement of your videos" in bold possibly

Looks nice. Try to be more consistent with the spacing and use fewer shadows.

Add more contrast, don't use white on white elements. Don't use white buttons. Include converting button at the end of the landing page also. Lazy users don't scroll up.

Personally! I think the fonts are too big