feedback and approval for new illustrations

[charleneyjh1]

Hi team, I'm working on an illustration that will appear on Console Account Dashboard.

It's in the first step of an onboarding flow for SMS and Voice for new customers. The goal of the illustration is to show a high-level overview of how Twilio works, including how a phone number plays a role in it and why they need Twilio credentials.

SMS onboarding illustration

Voice onboarding illustration

I was directed here to get some feedback and approval from the team. Thank you so much for your help!

[serifluous]

Thanks, @charleneyjh1 ! We'll take a look as a design team and give some comments. It might be easier to collaborate on this in Figma, so if you have a link ready, please share!

[Madlibs1991]

Hi @charleneyjh1 I think your illustration seems digestable and friendly ! I do have a few small suggestions let me know if your up for me dropping them in the figma file itself. I'm also always happy to hop on a quick call. Let me know what you prefer!

[charleneyjh1]

Here's the link to the figma file: https://www.figma.com/file/GXALjyDtyWbd6kOdpoorNO/Athena?node-id=3468%3A190734
@Madlibs1991 can I have your email to grant you Figma edit access to my file?
@serifluous i just grant you edit access.

[serifluous]

I added Liberty to the file for you 🙌

[serifluous]

Hey @charleneyjh1 ! Here are some notes on the illustration we put together after cross-referencing with Brand guidelines and taking upcoming needs like internationalization into account:

• Colors: Take a look through Brand's illustration guidelines. We'd recommend using Twilio Red and Night blue more heavily since this is part of an onboarding flow, rather than the more muted red and gray you have right now. You can take a look through existing illustrations from the Brand team here for reference points on how to distribute these colors in an illustration.
• Text: We highly recommend not using text, even for a phone number, in an illustration since it won't be translatable to other languages, and it won't be picked up by screenreaders. The phone number, too, is an a US-centric format. You can take a sneak peek at some upcoming localization guidelines the Global team put together for more context: https://docs.google.com/presentation/d/1nGatQcYrakP01UgyBZgpaEE40hbM7wzjedMIc1rgBoY/edit#slide=id.g105b42d322b_0_159
• Icons & logos: We're assuming the illustration is meant to highlight Twilio products & apps, but the majority of the space in the illustration is taken up by the arrows. We'd recommend rethinking the proportion of the parts of the illustration meant to communicate Twilio products so they catch the customer's attention first. The Twilio logo and Numbers logo are pretty small, which isn't ideal for Twilio product logos. Brand also has this guidance: "don't use the logo as part of an illustration or word." The keys logo in the illustration should really be used only to indicate API Keys, whereas I think you might be trying to indicate "security".
• I'm not sure if you have already, but overall we'd recommend collaborating with a Content Designer and/or validating through research that the text content in the screens is easily understandable to customers, even when it's not paired with the illustrations, especially because you're working on such a critical flow. Non-sighted will have to rely on the text content only to understand the onboarding instructions.

That being said, we do have a few suggestions on where you might take the illustration. You can take a look in Figma: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Paste-Feedback?node-id=1168%3A108411

1. Using an illustration on the Twilio home page as reference, you can decrease the space the arrows take up and lighten up the color. Try relying on one visual element per concept to communicate the part of the Twilio workflow it's meant to communicate. For example, if you can use either a phone or chat bubbles to indicate SMS, a single visual element can be easier for customers to interpret than combining lots of separate ones.
2. Using an existing IoT illustration as reference, you can take a similar approach a Suggestion 1, but with a slightly different visual style.
3. Since illustrations can be tough to get right, you can also heavily polish the text content, making sure it very clearly guides customers through their onboarding steps. The illustration could then be used for decorative purposes only and use a more generic SMS/Voice/Numbers illustration that already exists in the Brand library.

^^ These were all collaged together in a very quick team working session we had, so please don't take them as production-ready illustrations! We just wanted to provide some ideas on where the illustration could go.

Additionally, Brand illustrations through Bynder are mostly PNGs. You may want to reach out to the Brand team for Illustrator or SVG files for illustrations you might want to use as a starting point so you don't have to redraw shapes you need.

Let us know if you have any other questions or thoughts. This is a new process for us, so thanks for bearing with us 🙏

[charleneyjh1]

Thank you for providing such detail reviews and feedback! @serifluous I'll look through your recommendation and the resources.

I think my use case might be a bit different than a general purpose of an illustration, as I meant to use it as a diagram, not something with only decoration purpose. Therefore, I deliberately chose a more muted color to distinguish itself from a decorative illustration, and the general illustration style is more inlined with the diagrams we are using in Twilio docs. (for example: https://www.twilio.com/docs/sms/tutorials/how-to-receive-and-reply-node-js)

The "key" icon is meant to represent Twilio account SID and auth token.

I think this might be better resolved through a zoom meeting? Is Liberty the right person to involve?

[serifluous]

Yeah, office hours might be better for this. Go ahead and sign up, and we can make sure Liberty's in the meeting, too.

In general, I'd say that Twilio's visual language & illustration style is evolving, so I wouldn't necessarily base the illustration style on what currently exists on the doc site, especially since the accessibility and language localization issues are still valid for the doc site illustrations. It's also hard to tell how long ago those were created and by whom.

I'd recommend using our current guidelines as a basis for the illustration, even if yours is meant to be used as a diagram, and make sure you're taking localization + accessibility into account.

[shleewhite]

Thanks for coming to office hours @charleneyjh1!

Your illustration is looking amazing, the only open questions were:

• can the phone icon be a little bigger?
• should the cloud also have a drop shadow? (completely up to you, not a requirement)

And sounds like you will be working with Liberty to find SVG assets for the various parts of the illustration.