Update the marketing site with new Bronze plan

Description

We are in the process of introducing paid subscriptions on gitlab.com. To achieve this, we are adding a new Bronze plan, and remove the current Bronze Support plan.

The current marketing page (https://about.gitlab.com/gitlab-com/)

• has a content that is hard to read
• has the pricing information lost in the middle of the content
• looks amateurish, while we want to convey a notion of seriousness with this new paid plan.

We need to refresh the page accordingly.

Proposal

• UX: propose an updated design
  • Be more SAAS centric in the way we present the page.
  • Put the two plans higher on the page
  • Try to group questions and concerns together by adding a FAQ
• Front end: implement the design

Wireframe

@mydigitalself I was in a wireframing mood today, so I started this wireframe to fuel the discussion on revamping the page for supporting the new Bronze plan.

Let's be critic about this wireframe and move forward with this project.

changed milestone to %Make www-gitlab-com better - iteration 1

@luke can you help us? We plan to launch these new plans next week, ideally.

0$ a month should just be free

assigned to @lbennett

assigned to @luke

@regisF quick question, why isn't this just part of https://about.gitlab.com/products/?

@luke we already have that option on the aforementioned page.

We need more space to advertise what is GitLab.com, how much it cost and what is the difference with the free plan. I don't think we can fit everything in the tables, and also, we already have a dedicated page to it - we'll want to direct the traffic to a single page once we release the blog post etc...

@regisF is this ready for @mikegreiling to take the helms?

Thanks @jschatz1 - not yet, still waiting for @luke 's magic.

Thanks for the clarification @regisF. @jschatz1 @mikegreiling I will have the initial design wrapped up in a couple of hours.

@regisF @jschatz1 @mikegreiling here is the magic :sparkles::

I will work on the icons for the points in the top section while the layout is being implemented.

@regisF which org logos would you like to display at the bottom?

@mikegreiling ping me with questions about the layout, or anything you need. Note: the FAQ layout and functionality is identical to the FAQ at the bottom of https://about.gitlab.com/products/.

Thanks, @luke I'll get started on this soon

@luke thanks Luke!

@amara which logos can we display at the bottom?

@regisF I'm not sure what companies use GitLab.com specifically.

For the homepage, I decided on logos based on the customer reference sheet but these are customers not .com users

@amara we have a set of logos on https://about.gitlab.com/gitlab-com/ currently. Now the question is: how can we know which ones are accurate? Do you know who I can ask in marketing?

I'd suggest lead gen since they have data on .com signups BUT knowing a company is using us is not the same as having permission to reference them.

Do we need logos for .com? I'd think showing the volume of users, projects, contributors, CI builds, etc are more compelling than knowing that a specific company is using it.

Do we need logos for .com? I'd think showing the volume of users, projects, contributors, CI builds, etc are more compelling than knowing that a specific company is using it.

@amara @regisF that's pretty compelling IMO — we could do a cool little "real-time" ticker (animated or not) for each of those metrics.

@luke don't know how we can be real time on a static website, but the idea itself is great indeed.

@regisF We can do realtime as long as there is some public service to obtain that data, www-gitlab-com would not be able to serve that data, but it could consume it. For example, if redash's or version.'s data can be exposed publicly, that would work.

@lbennett thanks for your input.

Now the question is whether we need real time data, or data that are updated every 6 months. Our numbers are already huge anyway.

@luke some quick questions:

1. Where does the "and much, much more" link in the subheader go?
2. Do the "Sign Up" and "Sign up for a free forever account" buttons both go to the same place as the "Sign Up" link in the upper right corner next to "Sign In"? Or is there some special page for this?
3. Where does the "Buy Now" link go?
4. Do we have content for the FAQ section or should I leave it as Lorem Ipsum text for now?
5. Where can I find the asset for the background design in the header? Is this used elsewhere?

@regisF can you answer:

1. Where does the "and much, much more" link in the subheader go?

1. Do the "Sign Up" and "Sign up for a free forever account" buttons both go to the same place as the "Sign Up" link in the upper right corner next to "Sign In"? Or is there some special page for this?

1. Where does the "Buy Now" link go?

1. Do we have content for the FAQ section or should I leave it as Lorem Ipsum text for now?

@mikegreiling we did a similar background design on https://about.gitlab.com/comparison/, but I have a new icon pattern that will cover varying heights for the header area. I'm not sure if it was done correctly on /comparison as the solid gradient should be behind the icon pattern, and the icon pattern (IMO) should be SVG paths versus linking to the asset. Of course feel free to implement however you see fit.

I'm getting the icon pattern ready now and will share a link once it's ready.

@mikegreiling you can find the icon pattern here, fill for the SVG is # 513A8D

@mikegreiling on second thought, perhaps that icon pattern is a bit much for the header — here's a cut down version: gitlab-icon-pattern-header.svg

@mikegreiling @luke because the plan is still being decided, I've chosen to put lorem ipsum everywhere. All the copy will need to be reviewed once they'll decide what the exact plan will be about. That being said:

1. Link to the feature page
2. Sign up goes to the https://gitlab.com/users/sign_in
3. Buy now goes to customers.gitlab.com
4. Lorem ipsum

@regisF @amara thoughts on something like this in place of the org logos section? Data is completely arbitrary. cc @mikegreiling

@luke and @regisF do we know how many numbers we are trying to fit?

I ask because I'm wondering if we have room to make the numbers and text below them bigger.

@luke so this isn't happening by Feb 15. Should we reschedule?

@amara @jschatz1 this page is on hold until the plan is final. The content of the page will have to be updated then, but I think the changes will be minimal, and perhaps we won't need front end at all.

I hope to have an answer soon from management.

Working on the frontend now.

assigned to @iamphill

mentioned in merge request !5116 (merged)

@luke we now have three paid plans instead of one, as well as the need to put the mention of support, thanks the following table (https://gitlab.com/gitlab-org/gitlab-ce/issues/27481#note_23893718).

Could you update the design to reflect that? Thanks a lot!

I don't believe there are other changes.

@amara @erica @rebecca I don't know who to ping exactly, but I've been working on the copy of the FAQ for this updated page.

Can you fix my wording/sentences, as well as add items that I might have forgotten? Thanks a lot! Feel free to change the content at will, without commenting.

https://docs.google.com/a/gitlab.com/document/d/1yohQLKKYPp2zdY80Oj_8oXzPGo-Eq9pYQEJCxzXbQTc/edit?usp=sharing

Thanks for the update @regisF, I can update the design but likely not until next week. I'll keep you posted on timing.

@luke I went ahead and took your image above to change from two plans, to the four we want to offer.

I didn't change anything else. If you do approve the changes, we can move forward with this. Your thoughts?

@regisF yeah that will work, I approve. I would maybe narrow the spacing between boxes to ~40px, but @iamphill and I can pixel push those details once it's implemented.

We might also consider unique CTAs for each button versus Buy Now for all four. Something like Buy/Purchase Bronze, Buy/Purchase Silver, etc. so that it's clear from a UX perspective what you're clicking.

@luke thanks a lot. Indeed, we could change the wordings - we'll do that in HTML directly I guess.

@iamphill could you finish the page accordingly? Thanks a lot!

@regisF @luke do we have a decision about what is to go in the bottom part where the logos are currently? I left them out until a final decision was made.

@regisF I can help with editing if necessary but this looks like product messaging to me so probably more @amara's area than mine or @erica's!

@regisF do you have a google doc for the copy for the full page? If not, I can leave comments on the MR.

@amara we don't.

@luke and @regisF I find the newly designed page harder to follow. What if we thought about the page as quick marketing for why GitLab.com over other free hosting solutions and then a mention of our support packages? Right now, it feels more like a pricing page.

Looping in @afolson from a DevRel standpoint since anything we do should be very developer-friendly.

My thoughts are that the page structure could be:

1. Strong hero like we had before so people have enough reason to sign up just off that. Hero headline: Supercharge your projects with issue tracking, CI/CD, application monitoring, and more. Subhead: GitLab is the only platform that brings 100% of your software development lifecycle into a single UI, helping you eliminate unnecessary steps from your workflow and focus exclusively on building and shipping great software.

2. The three benefits we have currently on the page are good but I'd change the enterprise one to say something like "Enjoy the same access and workflow controls we give our enterprise customers, for free." Something that communicates why the enterprise version is valuable.

3. Benefits section: The benefits we have now are good but I think we can make them more explicit and call out our competitors more. Examples:

• Unlimited public and private repos: Don't think twice about creating another repo. When they're free, you can create a private repo for even your smallest projects.
• Unlimited collaborators: Whether you add more repositories, more projects, or even more collaborators, it's all still free so invite as many as you want.
• Easy import: Can we quantify this? Does it take minutes or hours? Does everything import?
• 10GB of disk space: I believe our competitors offer 2GB. Is that accurate? If so, we should highlight that we offer 5X as much disk space as other code hosting platforms in the market.

4. Do we have any proof for Gitlab.com gaining traction? (i.e. how many projects we host? AND how many CI build minutes?)

5. Then I suggest we move people into a short section that includes them evaluating whether or not they should purchase a support package. This section should explain premium support and link to the premium support page if we are saying .com users get the same package. Also do we think we need to explain what build minutes are and how to calculate how many you'll need?

Thanks @amara for your comments.

I've added the new hero headline and subhead you've mentioned.

As for the other points, I think we need an updated design to allow longer sentences.

• Easy import: well, it imports git data in all cases, and some of other stuff as well in most cases. But we have so many import options that we would need a dedicated page that summarizes all of them.
• 10Gb of disk space: Bitbucket is 2gb and GitHub is 1gb.

I tried to summarize below how we should update the design so we can have

• benefits with with more room to have explanations for each point
• a short section about what is the premium support package and linking to premium support link
• ideally a section about build minutes, above the pricing this time?

@amara what do you think? The launch for these new plans is next week. The blog post will explain everything in detail, so I feel we can launch without these new points, but we should add them as soon as possible, depending on @luke's availability.

Also, I've added a definition in the FAQ for what build minutes are, which is:

Build minutes are the execution time for your pipelines on our shared runners.

While this is the exact definition, I wonder if we should have something that also explains what pipelines are, and what shared runners are. In the updated design, should we make this a section? Or is it enough to have it as a FAQ item/

closed via merge request !5116 (merged)