851 review apps landing page

Closes #851

Meta Issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/20255

• Release: 8.14
• Due date: Nov 18th
• Merge: Nov 22th

URL: /features/review-apps/

Tasks:

• New hero section (the icon should be review icon from the 10 steps and the background screen should be updated)

• Add the collaboration icon that David shared and the below after automatic live preview

• Benefit: One-click to collaborate

• Supporting text: No need to check out a branch or spin up a staging environment. Just send a link and let your team click around.

• Remove the Review Apps overview section. Since the screenshot does not add value and it takes up a decent amount of space.

• Remove the icons, screens, and copy for all of the benefits

• In the place of the benefits, let's use this portion of Dimitrie's image

• The full image was shared here: !3750 (comment 18497551)

• Above the image it should say: "Review Apps transform the way you and your team work. For developers this means you can kick off your feedback process much sooner. Submit a merge request and preview your changes in a live environment. When you push to master, you'll know your changes have gone through CI testing as well as a live review where the team can make sure things actually work.

• For designers, product managers, marketing counterparts, etc., giving feedback just got a lot easier. You won't have to check out branches or spin up a staging environment to preview changes. With Review Apps, you click a link and see the live changes. Hopefully, this means you can give more timely and informed feedback."

• Make size of buttons under Get Started with GitLab Review Apps section be equal.

Marked the task New hero section (the icon should be review icon from the 10 steps and the background screen should be updated) as completed

Marked the task Add the collaboration icon that David shared and the below after automatic live preview as completed

Hi @amara this is how Hero section looks like without a backdrop image and just a dark background (with updated review icon). Let me know what you think.

Above the image it should say: "Review Apps transform your flow. Staging becomes optional. You submit a merge request and preview your changes in a live environment. After your full team has had a chance to review and your merge request is approved, you can deploy straight to production."

That might be a bit extreme. There are still good reasons to have staging, and you don't have to remove it to get value from review apps. The primary value isn't about remove staging, it's about improving the fidelity and speed of review. Bringing everyone (PM, designers, etc.) into the conversation earlier, with higher fidelity information so you get faster from idea to production. I should probably make that the focus of the post...

Mentioned in merge request !3479 (closed)

@kushalpandya here is the updated header icon:

Added 1 commit:

• f728b5cb - Update the what is review apps section

Compare with previous version

Thanks Mark! I'll update the copy to make it be more about collaboration.

Edited the text that will go with the above the image. I'll also suggest that we use a different image since the copy is no longer about skipping staging.

Added 1 commit:

• a71d332d - Copy edit

Compare with previous version

Marked this merge request as a Work In Progress

Added 2 commits:

• c4a144d9 - Icon for Review Apps page hero section
• 1d27fd57 - Use updated icon for Hero section

Compare with previous version

Added 1 commit:

• b6d8369e - Remove Review Apps Overview

Compare with previous version

Marked the task Remove the Review Apps overview section. Since the screenshot does not add value and it takes up a decent amount of space. as completed

@kushalpandya can you rebase on master so that we can see the review of the page? :)

Once green https://851-review-apps-landing-page.about.gitlab.com//features/review-apps/

Added 663 commits:

• b6d8369e...612d7b47 - 662 commits from branch master
• 16992583 - Merge branch 'master' into 851-review-apps-landing-page

Compare with previous version

Done @axil ! :)

As for two pending action items, I have a few doubts;

Remove the icons, screens, and copy for all of the benefits

Do I need to remove all five benefit items which currently appear with animation on scroll ?

1. Dynamic Preview
2. No More Doubts
3. Save Time
4. Save Money
5. All Together

In the place of the benefits, let's use this portion of Dimitrie's image

And replace these items with graphic attached in MR description along with text descripion ?

@kushalpandya yes, remove all benefits and replace with the graphic and text in the description. Also when you are done with those edits can you please share a screenshot so we can see what the changes look like?

Sure @amara , done in another 30 mins or so.

Thanks Kushal! If only we had Review Apps now! :)

I just made changes, here's how it looks right now.

That graphic we used, replace benefits, is low-res :( if we can get svg for the same from @luke (or anyone else from design team), it would look much better.

@amara @kushalpandya @luke

https://gitlab.com/gitlab-org/gitlab-design/blob/master/progress/dimitrie/CI-Infographics/infographics.sketch

here is the sketch file with all the info graphics in vectors ;)

I think if you export them yourself I think there is less time between figuring out if there is a minor error in exporting and fixing it!

Thanks I pinged Dimitrie asking if he has an SVG. Can you change the layout to have the image on the left and the copy on the right? It looks odd stacked and I think the copy would look better if it was left justified.

Also we need to add back the text that was above the benefits icons and copy.

Finally, is the font correct for the new section you just added? The font should be the same as what we were previously using for the benefits section.

Updated alignment

Added 6 commits:

• 16992583...5b407eaa - 2 commits from branch master
• 0eca71ba - Merge branch 'master' into 851-review-apps-landing-page
• cb5fb8d2 - Graphic for Review Apps Page
• 9fe67742 - Replace benefits list with Review Apps Graphic
• b235b291 - Merge remote branch 'origin/851-review-apps-landing-page'

Compare with previous version

Marked the task Remove the icons, screens, and copy for all of the benefits as completed

Marked the task In the place of the benefits, let's use this portion of Dimitrie's image as completed

Unmarked this merge request as a Work In Progress

Huston, we have a live preview :) https://851-review-apps-landing-page.about.gitlab.com//features/review-apps/

I'll add the link to the docs, the only one missing is the webcast URL.

Added 1 commit:

• c11ad00c - Add links to docs and blog post

Compare with previous version

Added 1 commit:

• 7f335f41 - Bring back "Example project" text

Compare with previous version

I just noticed it

@kushalpandya my image was a screenshot to give you an example. It is not the image we should use on the landing page. Please use the image Dimitrie linked you to in his comment: !3860 (comment 18633323)

Marked the task In the place of the benefits, let's use this portion of Dimitrie's image as incomplete

@kushalpandya here is an SVG of that diagram, if this doesn't work I can provide a hi-res PNG instead, let me know — continuous-delivery-review-apps.svg

Looks like there is already a note from @amara to re-add the header text above the diagram and format the text next to it to match. If it's helpful, you can also reference https://about.gitlab.com/solutions/issueboard/ for font sizes, colors, and other styles.
Lastly, I know the buttons are centered but they seem off because they are different widths. Can we make all three buttons the same width?

Thanks for images and button size suggestion @luke, I'll have it reflected in this MR.

Added 3 commits:

• ded06405 - Replace with SVG
• f25708fb - Continuous Delivery graphic for Review Apps
• d31151a4 - Use SVG for graphic, copy updated, styling enhancements

Compare with previous version

Added 1 commit:

• 8f803519 - Fix image name

Compare with previous version

Marked the task In the place of the benefits, let's use this portion of Dimitrie's image as completed

Added 1 commit:

• 8cb4ad2a - Styling enhancements

Compare with previous version

Added 53 commits:

• 8cb4ad2a...61a1caa7 - 52 commits from branch master
• efcc86f8 - Merge branch 'master' into 851-review-apps-landing-page

Compare with previous version

Updated font sizing and image alignment based on @amara's feedback. Here's how it looks now.

Thanks @kushalpandya, when I previewed locally I didn't see the updated buttons (all three same width) — are you still working on that?

Also, there are some weird formatting things going on with the SVG graphic, a couple of the lines are dashed when they should be solid. Let's try this hi-res PNG instead:
Let's add some space between the image / body text and the `Review Apps` header / tagline. Reference the spacing between each of the points in the `What is GitLab Review Apps?`.
Lastly, the link styling is missing for `built-in CI` under the `Fully-Integrated` point. Reference the body text link style on `Step 02, Label your issue` of https://about.gitlab.com/solutions/issueboard/.
@amara is it possible to trim down the copy for the `Review Apps` section? It feels heavy.

Hey @luke, sorry, I totally missed on button sizing, let me update issue description to cover action items you mentioned so that it is tracked

Added 4 commits:

• c1b1afc7 - Replace with high-res PNG
• d48be977 - Replaced SVG
• 091bd9f4 - Fix link styling, update image
• 4bd7a588 - Make button size consistent

Compare with previous version

Marked the task Make size of buttons under Get Started with GitLab Review Apps section be equal. as completed

Hi @luke, I updated the styling as per your feedback, here's screenshot for you to check out while MR pipeline is built & deployed.

Thanks @kushalpandya the buttons look great, and looks like the link styling is fixed too.

I found the problem with the SVG, sorry for the back and fourth but can we put this SVG in instead of the PNG? continuous-delivery-review-apps.svg

Added 1 commit:

• 03236ce1 - Copy edits

Compare with previous version

@kushalpandya can we update this to use the same image we use on the landing page?

@amara Currently we don't have any image used on landing page, it is only dark background.

What will this twitter image show though? It sounds like this will show the cycle analytics PNG

@amara Not a best suggestion, but should I put high-res screenshot of Hero section of landing page?

I think that's a good solutions since the landing page hero says reviews apps

Hey, I quickly created an image for this case in Gimp. It matches with styling and size of other tweet images that we have, let me know if it looks fine.

@kushalpandya should we delete the two screenshots that we are not using on the page?

The final edits for this page are:

• Update the image based on Luke's comment
• Update the twitter image
• Delete the two screenshots we are no longer using on this page
• Update to ensure the past two commits (where the build fails makes it into the webpage)
• Add webcast registration URL: https://page.gitlab.com/20161124_ReviewAppsWebcast_LandingPage.html

Thanks @luke I'll update the image to SVG you've provided.

Mentioned in merge request !3851 (merged)

Added 19 commits:

• 03236ce1...35cecb0b - 11 commits from branch master
• 4fbf54d7 - Merge branch 'master' into 851-review-apps-landing-page
• 04b13ea0 - Screenshot no longer used
• 87f02706 - Replace with fixed SVG
• c6e96a0d - Missing dashed line fix
• ed162902 - Tweet thumbnail for Review Apps
• 10584a3b - Update tweet thumbnail, webcast URL and SVG
• be2c349d - SCSS-Lint: Merge with existing rule
• 390d1d9a - Merge branch '851-review-apps-landing-page' of https://gitlab.com/gitlab-com/www…

Compare with previous version

Hey @amara, I've updated MR as per your feedback.

• Updated the image based on Luke's comment
• Updated the twitter image
• Deleted the two screenshots we are no longer using on this page
• Updated MR to ensure build passes.
• Added correct webcast registration URL: https://page.gitlab.com/20161124_ReviewAppsWebcast_LandingPage.html

Let me know how it goes

Great work Kushal! I just checked the Review Apps link and it all looks good. I will merge in about an hour in hopes of having this live at 9AM ET.

Status changed to merged

Mentioned in commit 2923ecc7

@amara @kushalpandya awesome work!

The link to the blog post is broken :|

There's no background image in the hero, is that how it's supposed to be?

Hi @marcia

The link to the blog post is broken :|

Are we pointing to correct perma-link, is original blog post live yet?

There's no background image in the hero, is that how's supposed to be?

We didn't have appropriate background image for Hero however, I created one for Tweet thumbnail but not sure if that's what we want to use on landing page as well.

Hi @kushalpandya

Are we pointing to correct perma-link, is original blog post live yet?

It should be, Amara merged it about 40 min ago :/ See the pipelines

We didn't have appropriate background image for Hero however, I created one for Tweet thumbnail but not sure if that's what we want to use on landing page as well.

Cool, I was just asking, I thought perhaps could be a broken link or something :)

The link is right but the blog is still yet to deploy. Axil is looking into it.

@kushalpandya this is the post's MR: !3750 (merged)

Okay @amara :) Let me know if you need some help

Just chatted with Axil the post will be live soon.