Support Center Icon

[tonge495]

Description

We need this custom icon developed by the brand team in order to represent the new One Support Center. Currently, we are potentially planning to use this icon for the Product Switcher as part of the unified navigation as well as to replace the 'home' icon on the sidebar, though there may be other use cases later on.

Link to icon

https://drive.google.com/file/d/121rZapuiHvV6O23qGzK-70ZCYSMTLBQq/view?usp=sharing

Icon type

• UI icon
• Product icon

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

To get your custom icon developed by the brand team for the new One Support Center and potentially use it for the Product Switcher and to replace the 'home' icon on the sidebar, you should follow these steps:

1. Since the icon is a "Product icon" and not a "UI icon," you should request one from our Brand team.

2. After the icon has been created, you'll need to create a GitHub discussion with:

   • A link or screenshot of the icon
   • A brief explanation or mockup of what you'll need it for
   • Confirmation that this icon is a Product icon

3. The design systems team will discuss in GitHub if the icon should be added to Paste. If the icon will be added to Paste, the design systems team will reply to the discussion with next steps. If you're an engineer, you can then proceed to Adding the icon to the Paste repository. If you're a designer, you'll receive a Streamline SVG from a design systems team member.

4. To add the icon to the Paste repository, you have two options:

   • Wait for the design systems team to add the icon, which can take between 2 to 6 weeks. Attach the SVG export to your original GitHub discussion.
   • Alternatively, you or your team can open a Pull Request (PR) on the Paste repository with the required changes to speed up the process.

Remember, the SidebarHeaderIconButton can take any product or brand icon, so once your custom icon is added to Paste, you can use it there. Also, for the Product Switcher, you can use the custom icon as part of the unified navigation.

For more information on these components and guidelines, please refer to the following documentation:

• Product Switcher Button
• Finding an icon
• Adding the icon to the Paste repository
• Sidebar Header
• Icon
• Usage
• Primary button
• Account Switcher Item
• Request new illustrations (VPN required)

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Support Center Icons (updated: 09/21/2022, similarity score: 86%)
• Home icon needed (updated: 08/24/2023, similarity score: 85%)
• "Personal" vs "Business" Icons (updated: 09/09/2022, similarity score: 85%)

[serifluous]

Adding to our backlog! Can you submit a dependency request for this, too? https://airtable.com/shrvMvL3BG6Zm0f9l

Also, does your engineering team want to submit a PR to add it? It'll likely be faster than our 2-6 week turnaround https://paste.twilio.design/introduction/contributing/icons#self-service-instructions

[serifluous]

Also, one design-related thing, can you send mockups of where you're planning to place the icon?

Our Topbar accommodates a Support icon already: https://paste.twilio.design/components/topbar which I have a hunch will be more straightforward for a customer to understand than the branded One Support Center icon (especially since it kind of looks like a Settings icon).

[serifluous]

And should the icon be named HelpCenter to match the public-facing name?

[tonge495]

We wanted to replace the home icon on the top right with the OSC icon as well as potentially the icon next to wherever the support center link will live on the unified navigation. We're still in the middle of discussion around whether where we will be putting the support center link in but right now it sounds like either within the product switcher or in its current location next on Console on the bottom of the sidebar. Here is an example with the home icon replaced and in the product switcher:

Yea, I think it makes sense to name is HelpCenter to be consistent with the public-facing name.

[serifluous]

I think putting it where the home icon is is probably fine, though overall I feel like a specific brand/logo for Help Center is going to be more confusing to customers than it needs to be.

I'll send you the SVG so your team can submit the PR. But I'd really recommend testing out the icon with customers in all the different places your team is thinking about adding it in, as well as keeping all the other products in the Product Switcher in OSC.

For example, when customers are in Segment, they'll see a pretty universal support icon:

But swapping back to Console, they'll get a different experience with a link to support, Segment, and SendGrid in the Product Switcher. And then the experience in OSC will also be different with only a link to Console in the Product Switcher. Definitely chat with @kendal-kirby first before y'all make any design decisions that'll affect navigation across these platforms.

[tonge495]

Thanks for the response!

Given your comments, I think it would probably be best to hold off for now on moving the icon into Paste. The icon was mostly something we wanted to have on hand as we are in discussion around where OSC would sit within the unified navigation and we had started some of these discussions late last year with the web infrastructure team. To be clear, there are no concrete design decisions made on the unified yet as it is in an exploratory phase, but the takeaway from our previous discussion was that we needed to reach out to identity team about the product switcher and I needed to reach out to Amy O'Dea on the Docs & Support links.

[serifluous]

(Context for the design systems team: Eileen, Amy, Kendal, and I have a meeting for this on Feb 1, 2024).