Incident response use case by zlonko · Pull Request #5259 · sourcegraph/about

zlonko · 2022-04-13T17:18:55Z

This closes #5237 by creating the Use Case page for Incident Response.

Design and copy originate from Figma. The metadata comes from the provided file.

Notes

While this was in development, colors on about were updated with Colour and Gradient Improvements #5258. This updated link, icon, and button colors from blue to blurple.
Gradient background colors were carried over from Fixing Vulnerabilities and Developer Onboarding to align this page with styling for Use Case pages.
The hero subhead differs in the Figma ("Identify the root cause...") compared to the meta file ("Every minute matters..."). Per team practices, I implemented the copy in the Figma file.
The thumbnail for the log4js blog post differs in the Figma from other places it appears on our site, e.g., the resources section on Fixing Vulnerabilities. For consistency, I linked to that thumbnail.

Testing

Open /use-cases/incident-response
Please check that design matches on web and mobile
Please check that links work appropriately
Please check that meta is correct (location, title, description)

sourcegraph-bot · 2022-04-13T21:55:45Z

Notifying subscribers in CODENOTIFY files for diff 44d4f0f...0dab357.

Notify	File(s)
@sourcegraph/marketing	website/src/components/CustomCarousel.tsx website/src/components/QuoteCarousel/index.tsx website/src/css/_spacing.scss website/src/pages/use-cases/incident-response.tsx website/src/pages/use-cases/index.tsx website/src/pages/use-cases/onboarding.tsx website/src/pages/use-cases/vulnerabilities.tsx

katjuell

Looking good! A few things that I'm noticing:

We'll need a link to this page from the use cases index page.
We've got some content jumping in the carousels on mobile. If we set a default height in the following places, we should be good (I've added the default here as h-<number>):

On CustomCarousel:

On Quote Carousel:

katjuell · 2022-04-14T19:22:31Z

website/src/pages/use-cases/incident-response.tsx

+                </div>
+                <div className="d-flex flex-column flex-lg-row mt-lg-4 mt-6 mb-6">
+                    <div className="text-center mb-4">
+                        <CrosshairsGpsIcon className="mb-4 text-blurple" size={40} />


Logos need to have the correct color to match the Figma

I noticed that, after #5258 was merged, the color of the icons on the other Use Case pages changed to blurple. It seems important that they are uniform, because they otherwise use the same template. Should we also change the color of the icons on the other two pages?

/use-cases/onboarding

/use-cases/vulnerabilities/

Good callout @zlonko — @bretthayes what do you think? Happy to go with whatever makes the most sense and leads to uniformity. Just think we should flag the color change in the PR message for stakeholders, if we are keeping it (it looks like link and button color changes were flagged as having changed, but not icons)

@katjuell @zlonko I think we should stick to the design consistency and keep the icons blurple. I made the decision to change all links/CTA's, icons, button bg's, and complimenting elements alike to use blurple given that the homepage design sprouted this. Part of this also follows our Brand Guidelines for blurple.

I think that makes the most sense to create a uniform design throughout the site. But I agree, we should just mention it in the PR description in case stakeholders want us to revert part or all of these changes in a separate PR or have icons be a different colour per page design. I could see some potential colour theory conflicts but I digress lol.

Thank you for these insights, @katjuell and @bretthayes. I will make sure the icons are included in the PR description for stakeholder review.

katjuell · 2022-04-14T19:24:15Z

website/src/pages/use-cases/incident-response.tsx

+                                services, and fix the issue everywhere in your codebase so it won't reoccur.
+                            </div>
+                            <div className="d-flex flex-column flex-lg-row pt-1">
+                                <Link


Can we add button tracking on these CTAs? I notice the other use case pages need them here as well — I can create a separate follow up issue and deal with it — don't worry about that here. Let's just make sure all the CTAs on this page have the correct tracking attributes

Great point to include. I added tracking to the following CTA buttons in 3746a6c:

Hero: Request a demo

Hero: Try Sourcegraph now

Body/"Get started with Sourcegraph": Request a demo

Body/"Respond to incidents faster": Ready to get started?

Are there any others on this page that are appropriate to add tracking to? On other Use Cases, it doesn't look like we are tracking links to "Learn more", so I am a bit unsure what is in scope.

I am happy to support the follow up issue, as well.

zlonko · 2022-04-19T14:19:18Z

Thank you, @katjuell! Responding to your initial comments:

I added the link to this page to use-cases/index here using the same pattern as Vulnerabilities and Onboarding: 9aaa037
I added the default height values on the carousel components here: 22aeb73. It makes sense to me to add them to the component to resolve similar issues in the future, but I'm open to adding them with another method.

katjuell · 2022-04-19T18:16:37Z

@zlonko added commits here to address the funkiness that I still saw on carousels on smaller screens. We should be good to go now, but take another look at this page, the other use cases pages, and the code insights page to sanity check. I also went ahead and added the tracking attributes to the other use cases pages.

zlonko · 2022-04-19T19:12:24Z

@katjuell Thank you for updating the carousels and adding tracking to the other pages. The Use Case pages and the Code Insights page look good. One note, it seems that the h-600 on QuoteCarousel vertically displaces the text. The examples below are from Incident Response, but they reoccur on Vulnerabilities:

with h-600:

without h-600:

katjuell · 2022-04-19T19:19:04Z

@zlonko feel free to push a fix!

zlonko · 2022-04-19T20:21:06Z

@katjuell Reducing that div to h-450 looks alright on mobile and desktop, so that the text is still vertically aligned on the top even with our longer quotes. 3cb23b0

katjuell · 2022-04-20T17:33:36Z

@zlonko I try to look at Galaxy Fold defaults for x-small!

This looks good to share with stakeholders cc @elzannewentzel

elzannewentzel · 2022-04-22T17:27:07Z

@zlonko Please see some feedback points in this document, only implement the blocking feedback, please :)

zlonko · 2022-04-22T18:48:14Z

@elzannewentzel That's great! As requested, I edited the copy and gave the "Plan your remediation" column a little more room on desktop. Visual balance is a little tricky there because there is less text in that column than in the other two.

elzannewentzel · 2022-04-22T19:09:25Z

Thank you @zlonko ! I'll send it for final review.

bretthayes · 2022-04-22T22:03:16Z

Just noting here to double check any logos in this PR that were updated in #5276

elzannewentzel · 2022-04-28T18:42:30Z

@zlonko Approved to deploy 👍 Thank you !

website/src/pages/use-cases/incident-response.tsx

zlonko · 2022-05-02T14:03:18Z

@katjuell Could you provide a final pass for approval?

katjuell

@zlonko this asset needs to be updated, looks like

katjuell

lgtm!

zlonko and others added 3 commits April 13, 2022 11:55

init incident-response use case page

a5ac80c

Merge main into incident-response-use-case

93d5406

squash! Prettier

88f4204

zlonko added the team/content-platform label Apr 13, 2022

zlonko self-assigned this Apr 13, 2022

zlonko and others added 4 commits April 13, 2022 15:47

align styling with Figma wireframe, update meta

370d5eb

cleanup

fdfefb4

resolve conflicts

e3a748a

squash! Prettier

010a69c

zlonko added this to the A - Sprint 2 milestone Apr 13, 2022

zlonko marked this pull request as ready for review April 13, 2022 21:55

zlonko requested a review from katjuell April 13, 2022 21:58

katjuell suggested changes Apr 14, 2022

View reviewed changes

zlonko added 6 commits April 14, 2022 15:29

add link to incident-response on use-case index

9aaa037

run prettier

3e9ebea

merge

019232c

add CTA tracking to incident-response

3746a6c

merge main

24e779f

add default height on carousel components

22aeb73

zlonko requested a review from katjuell April 19, 2022 14:19

katjuell added 3 commits April 19, 2022 14:06

Fixes for carousels

cdabd65

Add tracking for other use cases pages

8f284b8

Merge branch 'main' into incident-response-use-case

7a93973

reduce quote carousel blockquote height

3cb23b0

zlonko added the marketing-request Used by CPT to indicate requests from the Marketing Team label Apr 20, 2022

zlonko requested a review from elzannewentzel April 20, 2022 18:09

zlonko mentioned this pull request Apr 20, 2022

Code Health Use Case #5274

Merged

zlonko added 2 commits April 22, 2022 12:57

qa copy and spacing updates

76b0f3b

increase spacing on three columns

6e3901a

small change

bbaabba

bretthayes modified the milestones: A - Sprint 2, A - Sprint 3 Apr 25, 2022

zlonko mentioned this pull request Apr 27, 2022

Incident response use case /non-blocking feedback #5297

Merged

zlonko added 2 commits April 28, 2022 12:25

resolve merge conflicts

91d02dd

spacing adjustment

d3f862f

st0nebreaker reviewed Apr 28, 2022

View reviewed changes

website/src/pages/use-cases/incident-response.tsx Outdated Show resolved Hide resolved

st0nebreaker reviewed Apr 28, 2022

View reviewed changes

website/src/pages/use-cases/incident-response.tsx Show resolved Hide resolved

progressive spacing on Get Started, from Code Reuse

f76e7e7

zlonko mentioned this pull request Apr 29, 2022

Port/ Incident Response Use Case sourcegraph/about-replatform#131

Closed

katjuell suggested changes May 2, 2022

View reviewed changes

zlonko added 2 commits May 2, 2022 09:47

Merge remote-tracking branch 'origin' into incident-response-use-case

f241459

update logo

0dab357

katjuell self-requested a review May 2, 2022 15:29

katjuell approved these changes May 2, 2022

View reviewed changes

zlonko merged commit 34e769e into main May 2, 2022

zlonko deleted the incident-response-use-case branch May 2, 2022 18:07

zlonko mentioned this pull request May 9, 2022

Port/incident response use case page sourcegraph/about-replatform#146

Merged

Conversation

zlonko commented Apr 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notes

Testing

Uh oh!

sourcegraph-bot commented Apr 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

katjuell left a comment

Choose a reason for hiding this comment

Uh oh!

katjuell Apr 14, 2022

Choose a reason for hiding this comment

Uh oh!

zlonko Apr 14, 2022

Choose a reason for hiding this comment

Uh oh!

katjuell Apr 14, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bretthayes Apr 15, 2022

Choose a reason for hiding this comment

Uh oh!

zlonko Apr 19, 2022

Choose a reason for hiding this comment

Uh oh!

katjuell Apr 14, 2022

Choose a reason for hiding this comment

Uh oh!

zlonko Apr 14, 2022

Choose a reason for hiding this comment

Uh oh!

zlonko commented Apr 19, 2022

Uh oh!

katjuell commented Apr 19, 2022

Uh oh!

zlonko commented Apr 19, 2022

Uh oh!

katjuell commented Apr 19, 2022

Uh oh!

zlonko commented Apr 19, 2022

Uh oh!

katjuell commented Apr 20, 2022

Uh oh!

elzannewentzel commented Apr 22, 2022

Uh oh!

zlonko commented Apr 22, 2022

Uh oh!

elzannewentzel commented Apr 22, 2022

Uh oh!

bretthayes commented Apr 22, 2022

Uh oh!

elzannewentzel commented Apr 28, 2022

Uh oh!

Uh oh!

Uh oh!

zlonko commented May 2, 2022

Uh oh!

katjuell left a comment

Choose a reason for hiding this comment

Uh oh!

katjuell left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

zlonko commented Apr 13, 2022 •

edited

Loading

sourcegraph-bot commented Apr 13, 2022 •

edited

Loading

katjuell Apr 14, 2022 •

edited

Loading