Post-MVP Mega Ticket

[MitchellShiell]

The following is a mega-ticket for all post-MVP feedback; this can be later distributed into smaller ticket items.

Table of Contents

General

• [x] Website window is magnified when first loaded on a mobile

Landing Page

• [ ] Center logo, swap hamburger icon to the one used in the mocks, move to left side of the screen and add "Get Started" button to the top right hand corner.

• [x] Similar feedback from ticket #289 , accommodate screens that are between 360px and 426px. Right now, when the window is smaller than 426px wide, the hero copy and body copy are no longer centred and starts to cut off.

• [x] This was not reflected in the mocks but this area looks a bit squished. Can we increase the padding in between these columns? (try adding additional 10px in between each)

• [x] These elements should stack in a single column, refer to mocks for direction.

• [x] The spacing on the right side is strange, also reduce size of the image so that it's width is 450px.

• [x] Increase margin between arrow and image. Try 30px

• [x] Increase padding in between these elements. Try 30px

• [x] Increase spacing between each column. Try 30px

• [x] Add more padding between illustration and header copy. Try 30px

• [x] Reduce padding above to match the bottom of the grey box Private Zenhub Image

Products Page

• [x] Double the padding between icon and title (apply to all sections) Private Zenhub Image

• [x] Reduce padding between sub-heading and body copy by half (apply to all sections) Private Zenhub Image

• [x] There is a subtle grey gradient #F9F9F9 that starts at the top of the blue box and turns into white #FFFFFF (this is applied so there is a visual separation betwen the top of the DMS screenshot and the white background. Refer to mocks for direction. Private Zenhub Image

• [x] When the width of the page is >1215px the Arranger icon is smaller than the rest of the other icons. Increase size to match other icons Private Zenhub Image

• [x] In mobile view, the Maestro icon does not appear centred. Move icon slightly to the left. Private Zenhub Image

• [x] Can't remember if this feedback was already captured but the footer is distorted when the window is >414px Private Zenhub Image

Case Studies Page

• [x] If possible, remove white padding on the both sides and allow the grey buttons to be cropped right to the edge of the window.

Acknowledgements Page

• [x] Decrease padding of hero text when screen width is >767px (see image attached). Currently there's 80px of padding plus and additional 50px. Can we reduce so the padding is 50px total?

• [x] Accommodate screens that are between 360px and 426px. Right now, when the window is smaller than 426px wide, the hero copy and body copy are no longer centred and starts to cut off. Could we continue to wrap text into a new line until 360px?

[daniel-cy-lu]

@patrickdsantos Patrick, here is the deploy preview link. Thank you for reviewing it! :D https://deploy-preview-327--overture.netlify.app/

[patrickdsantos]

Wonderful work Daniel!! The site is looking AMAZING! Just a few more pieces of feedback below:

Homepage

1. Make the selected underline static during hover state. Currently the selected line also increases in size during hover. Private Zenhub Image

2. Make sure all titles of the carousel appear below the image on the left. Private Zenhub Image

3. Add more padding between the title and grey section. Match the padding for "Getting Started" section. Private Zenhub Image

4. Increase padding between text and section below. Match the bottom padding for "Getting Started" section. Private Zenhub Image

Hamburger Menu

5. Website should not peak through when Documentation is expanded. Private Zenhub Image

6. Is it possible to apply a three column grid to the DMS Bundle Section? Private Zenhub Image

Products Page

7. Decrease max width of this image. Should not exceed 1000px even in largest screen width. Private Zenhub Image

8. Same feedback as 7, width of text should not exceed 1000px Private Zenhub Image

9. Decrease size of icons in mobile view to 50px by 50px and reduce padding between title and text by 10px Private Zenhub Image

Case Studies Page

10. Top of title should be aligned with the top of the image. Private Zenhub Image

11. Reduce space between all logo boxes by 15px Private Zenhub Image

Thanks Daniel!

[daniel-cy-lu]

1. The underline is static now. (I make just the cursor to be a pointer at the hover state. Is this enough to let user know they can click on it? Thanks Patrick!)

[daniel-cy-lu]

2. The title is lined up with the top of the image. These are what I've done to the css. I set a min-height to the image to prevent it from scaling too short. Please check starting 1035px, the image might look squished horizontally. But it's smoothen out as we have more space for image to stretch out. I edit the text font size from 20px to 18px to create space for Kids First case's text. This case has slightly too much text. I also use "It" for "Overture" in the second sentence.

[daniel-cy-lu]

3. Added top margin to "Our Products" section to match that of "Getting Started"

[daniel-cy-lu]

4. Added bottom margin to Our Products section to match that of "Getting Started"

[MitchellShiell]

12. Our Products Hero title in line with content, I see that the product page has different padding/margins though so the hero IS technically working as intented

Private Zenhub Image

[daniel-cy-lu]

7. Image max-width set to 1000px.

[daniel-cy-lu]

8. Text section is set to max-width: 1000px as well.

[daniel-cy-lu]

9. At mobile view, the icons are 50X50px. The gap between the text and icon/title are reduced.

[daniel-cy-lu]

10. The image was vertically centered which caused the misalignment. Removed the vertically centered behaviour and instead to have the image to always be at the top of the container. The image now lines up with the top of the text on the rightside.

[daniel-cy-lu]

11. The space between the logos are reduced by 15px.

[daniel-cy-lu]

@MitchellShiell The Cell phone view auto zoom and the misalignments, such as the original comments from "Landing Page" section are resolved. This is the issue from the Landing Page section: Private Zenhub Image

[daniel-cy-lu]

5. Burger menu now is full screen. I am using the grey area with cubes as filler. And I decided to remove the cubes when documentation sub menu is opened. Because there is limited space to have all three cubes.

[daniel-cy-lu]

12. The Hero Title is lined up with Section Titles now in ultra wide and wide desktop views. They cannot always be lined up in table and desktop view, because they don't "move" together when screen size is adjusted. This is due to certain width is needed for the section for this page content.

[daniel-cy-lu]

6. The menu is now is a three column width. Note: I updated a few css to achieve this. Please help me double check all views to make sure nothing is buggy after the changes. It looks good to me :)

[patrickdsantos]

@daniel-cy-lu INCREDIBLE WORK!!! Website is nearly perfect!! Thank you for all your hard work - I just have one last piece of feedback.

1. My fault for not explaining properly, for the logos at the top of the homepage, the logos can increase in size for the hover state. I'd say increase by 15%? But keep the underline the same size. Thank you!

Private Zenhub Image