Designing In-App Messages

In this webinar, OneSignal's Design Director, Lee Munroe, goes over new features coming to our platform as well as how to design great in-app messages. The transcript of the webinar can be found below. Register for our webinars today!

(Start) 0:00:00

We're going to cover in-app messaging, designing nice messages, and we're also going to look at a preview of some product releases over the next couple of weeks.

0:00:12

We've got a lot of people online, so we can get started. Let me share my screen.

I'm going to turn off my camera, so it doesn't get in the way of the presentation.

We're going to look at designing attractive In-App Messages. This is what the Agenda looks like. We'll give you a quick introduction to myself, and we'll look at some dashboard UX improvements that are coming in the next couple of weeks. So, you'll get a nice preview of that. We'll look at designing in-app messages, and I'll share some helpful resources at the end that will help you design those in-app messages yourself.

0:01:25

A bit of an introduction to myself: I'm Design Director @ OneSignal. My name is Lee Munroe. My role at OneSignal: I look after the user experience of the product. Every feature that we release, everything that we do in the product, it goes through a design process from user research to designing the flows and the user interface. Then, following up with usability testing and making sure that what we have shipped looks good and is easy to use.

0:01:58

Today's focus is going to be mostly on product. I also look after the brand design and brand direction and the website, as well. So, diving in. I want to give you a bit of a preview to some improvements that you're going to notice over the next couple of weeks.

New OneSignal Features

0:02:21

Whenever we release new features, we also have a parallel track that we try to improve our user experience based on the feedback that we get from users. That's talking to you guys. That's talking to our support team, our sales team, and observing our users through usability tests. We're always looking to improve what's there already, as well as shipping new features.

0:02:45

I'm going to share some of those things with you. We've got three things I want to share.

• Switching between apps

• Changes to the new message form

• Outcomes and changes to the message report

0:03:04

Switching between apps...

This is something we released recently. You'll notice that if you go to your OneSignal dashboard today, a lot of users have lots of apps in [0:03:13]. It might be that you have many apps that you're managing in OneSignal, or it might be that you separate your app into multiple apps because maybe you want one for Mobile, and you want one for web.

0:03:26

Most users have at least one development app and one production app. We often see our users switching between these apps. We've made it easier to switch between these apps by shipping this app switcher. You'll see it in the top bar when you go up there.

0:03:44

It makes it easier to switch between your apps, so you're not getting lost where you are. That's something we shipped out last week, so you'll be able to see that today, and it should make your life easier.

0:03:55

The second thing I want to share is something that we will be shipping over the next couple of weeks. This is a UX improvement to the composed message screen. OneSignal offers a lot of flexibility and a lot of powerful features when it comes to composing your message.

0:04:14

We support a lot of platforms. For each of those platforms are different switches and bells and whistles that you can configure. What we noticed is that 99% of the time, our users just want to send a message and get the message out there. They aren't typically looking at these other fields.

0:04:32

What you're looking at here is an improvement to this piece. Today, it's a big, long form that has a lot of fields. We're hiding a lot of those fields under these settings' toggles. There will be a platform setting toggle where you can hide and show that, and that's where all the platform settings will be. Then, there is an Advanced Setting, where you can find more settings.

0:04:56

Because we're adding these toggles, we're also moving some important fields up. We still have the title and the message here, but the Launch URL will be moved up, so it's more obvious that you should complete this Launch URL.

0:05:10

We're introducing this image field so that you can upload a primary image for your notification. We find that if you add an image to your notification that it performs a lot better. The click-through rate is so much higher when there's an image involved.

0:05:27

So we want to help incentivize you by reminding you that here's an image field. You should probably upload an image if you have one available. The last thing to point out here is this Send to Test Device button.

0:05:41

Whenever you want to test a message today, you select your test users, and you send the message. Unfortunately, that means you send the message, and then you have to go back, duplicate that message if you want to make edits, and then send another message. It's rather cumbersome to test messages today.

0:06:01

By introducing this Send to Test Device button, you'll be able to do it as you're composing the message. That will help you test these messages and send them as you're composing them and writing them as you're adding the image and adding the Launch URL. So you can be really certain about that message that you're about to send.

0:06:19

The last thing I want to share with you as a preview are Outcomes and Changes to the Message Report. There's a lot of stuff going on here. You've sent a message, and then you open the Report view. What details do you get on that message? Let me walk you through some stuff that's going on here.

0:06:45

Delivered and the Click-Through Rate. These are numbers that we give you today, and we're just moving them up a bit. We're making them more obvious because we know that these are numbers that you care about. We want to make it clear where you can find these numbers.

0:06:59

Over here, we've got a thing called Influenced Opens. This is a new feature, and it's going to be available to people who are on paid accounts. So an Influenced Open. Whenever you send a message, and a user taps on a notification and opens your app, that would be considered a direct click-through rate.

0:07:22

But, a lot of the time, we find that the end-user isn't necessarily tapping on the notification and opening your app. Maybe they're in a meeting. Maybe they have to wait until later in the day to open the app. If a user was to return to their mobile device, open up your app within a 24-hour window of you sending this notification, we would count that as an Influenced Open.

0:07:49

When I say 24 hours, but that number and that time period will be configurable because we know that depending on what sort of app you have, it might be 24 hours, or it might be 10 minutes. You might want to count an Influenced Open in a different way.

0:08:03

This is something that is going to be shipping very soon. This will be available to people here on our paid plans. We're going to be doing a follow-up in the next couple of weeks that we'll talk more about Influenced Opens. I really just wanted to give you a sneak-peek today.

0:08:21

Moving on down to this chart, today, what happens when you look at this screen, you'll see clicks. You'll see all the clicks over time that you got.

Outcomes

0:08:33

We're going to be releasing a very powerful feature soon called Outcomes. Outcomes allow you to track custom events. Here, you can see I've got this other event that I call Purchased. To track Purchased, I would have made a call by my mobile SDK or the Web SDK.

0:08:57

Let's say a user went through a check-out process, and they bought something. At that point and time, when they buy something, I would make this Web SDK call and say, OneSignal Outcome Purchased. That will track the event for me, so I know that purchase came directly from the message that I sent.

0:09:21

So instead of just tracking clicks, we're tracking these Outcomes and Goals all the way through end-to-end. So different use cases for that would be e-commerce. You obviously want to check Track Purchase.

0:09:35

You might want to track the amount that they purchased. You might want to see what pages they visited, how long they visited a page, whether they shared an article, and things like that. This feature is going to be very powerful. It's going to let you track all these outcomes, these goals, these events that you want to see.

0:09:55

I sent a message. What happened after I sent that message? We're not tracking clicks anymore. We're going to be tracking these outcomes. Again, we're going to do a follow-up webinar on this.

0:10:10

This will be a powerful feature that launches in the next couple of weeks, so we want to make sure that we do an in-depth webinar on that. There will be a lot of talks, and there will be more information available about that. For now, I wanted to give you a sneak preview of what's coming up.

0:10:28

The last thing I'll point out here is some changes to the information we display on these reports. We're going to be introducing this Platform Statistics Chart so you can see the break line of the different platforms that received your notification.

0:10:45

Also, not visible here, but we're also going to include the preview of the notifications. So it's very obvious that you can see the notification that produced this report. These are all sneak previews of user experience and improvements that are coming in the next few weeks. Again, we're going to do a follow-up webinar on this, so that we can dive into Outcomes and Influenced Opens.

In-App Messages

0:11:50

Let's get on to the main topic of today's conversation is Designing In-App Messages. In-App, this is a feature we released recently. It allows you to send your users these in-app messages on iOS and Android devices.

0:12:11

The beauty of In-App means you don't need to get your users to opt-in like you have to for Push. You can send any user that's using your app as long as you have SDK installing your app, then you can make use of these in-app messages. We make it simple and easy to design these in-app messages, and we're going to look at today some tricks and tips on how to design them.

0:12:37

One of the other big benefits of using us for in-app messages means you don't have to go through an app store review, or you don't have to get developers involved to send these messages. You simply go to our dashboard, create a new message, and send, and it's live.

0:12:55

If you didn't have OneSignal, the process would look more like, "Hey, developers, I've got an update to terms," or "I've got a new welcome message," or "I've got a feature that I want to [0:13:10]. Can you include this modal?" They would have to develop it. Then there would be some turnaround time required for the app store submission and review process. With OneSignal, you get to skip all that. You get to make it live instantly.

In-App Messaging Use Cases

0:13:29

Some of our use cases for in-app:

• App store ratings: Prompting your users to review you in the app store.

• Push notification opt-in prompts: You can target people who maybe haven't opted in for Push, and you can prompt them to opt-in.

• Welcome and onboarding messages

• Transactional messages

• E-commerce

• Promotional

0:13:55

These are different use cases, and we're going to look at a couple of examples here. The elements that you can control in-app messages.

• You can control the location. You can make a top, bottom, center, or full screen.

• The title, the color, size, and alignment.

• The message, the color, size, alignment.

• The button color, size, and alignment.

• You can add one image.

• You can add a background.

0:14:20

There are a lot of different things you can play with here and configure. We're going to look at a mix of different examples. This is a preview of some things that we're going to produce in the next 10 to 15 minutes.

Designing In-App Messages

0:14:43

I'm going to advance over to my Demo Environment. Just a heads-up: we will be doing Q&A at the end of the session, so I'll make sure that we have some time to answer your questions at the end. Feel free to keep those questions coming in, and I'll make sure that they're addressed at the end.

0:15:05

Here we are in the OneSignal dashboard. I'm going to my messages, and I'm going to go to my In-App tab. You can see here that I've got some pause in that messages here already. I'm going to create a new in-app.

0:15:29

I'm going to start with something basic. I'm going to start with an app store rating example. There might be a certain time when I want to trigger an app store rating. Maybe after the user has done something successful, and we know they're a success using our app, or they've done something nice that they can celebrate with.

0:15:56

You might want to set a trigger. You can set triggers where maybe Success = True. That would be something that you would trigger in your app. For the purposes of this demonstration, we're going to remove that and keep going. But there are different configurations you can play with for triggers.

0:16:18

Maybe it's a session duration. I don't want to immediately prompt users to rate my app in the app store because they haven't played with my app yet. Maybe I'll want to put in a certain amount of seconds. You can play with these different triggers for when you prompt them.

0:16:43

The first thing I'm going to do here is give them a message. Let's say, "App Store Rating." Let's say I have both an iOS app and an Android app. I'll probably want to create two different messages for that. Maybe this is the iOS app store rating.

0:17:04

In that case, I would have to also target a particular segment. So I would create a segment or find a segment that I've created earlier that targets iOS only. Then I would create a similar message for Android. The reason I would do that is because the URL is going to be different depending on what platform you're on.

0:17:29

I'm going to make this a Center Modal. I'm going to say something like, "How are we doing?" And a reminder here; this is where you can control the color, the size, and the alignment of your text. "Rate us in the app store."

0:17:53

It's very basic so far. We've got some basic colors going on here for default. From a design perspective, it's always important to have some hierarchy in there. You usually want your heading to be a bit bigger and from your message text. Or you might want to flip around, but there should be some hierarchy in there.

0:18:15

Then, I'm going to upload an image. Here's an image I prepared earlier where I find some stars. So, five stars. I want to incentivize them to give us a 5-star review. This is very basic, but it already looks pretty good.

0:18:36

If I was to — for the click URL, I would want to then link that to the app store so a user can start the review. It's going to be something like itunes.apple.com/app-id. End with whatever my app name is or app ID. I would have to look that up exactly, but it would be something to that effect. Something that directs the user to the app store so they can review.

0:19:07

Then I could put in a button if I wanted to. Maybe the button would be Not Now. Maybe that's a bit obnoxious, and in your face, so I can make it white, make the color blue or maybe grey and also smaller.

0:19:35

When the user receives this, if they tap on the stars, they're going to be taken to the app store to review, or they can click on the button, and to dismiss the button on click, you activate this advanced feature here. So this is Dismiss On Click. I want to make sure that that's on. So Not Now — we'll Dismiss.

0:20:03

This looks pretty basic. We haven't done a lot to change things here. I think something that's important is remaining on brand. I'm sure most of you out there have some colors or some brand guidelines.

0:20:16

Typically, you'll want to make sure that maybe your heading matches your brand color. So maybe it's purple, and maybe you have another color like a secondary color that you like to use for text.

0:20:40

We have a static image there. Something I want to point out is the ability to use .gifs. We support .gifs and animation. Supporting .gifs, it's another way to add delight and to help attract users to tap on those images. In this case, here's a .gif that I found earlier. Again, I'll share some design resources at the end so you can see how I source these designs. This helps bring this in-app to life.

0:21:16

The next step would be Preview On Test Device. I can send it to my own device and make sure that it looks good. I'll check my device and see that it looks good before I make it live.

0:21:35

So very simple app store rating here. Again, if you wanted to send this to both iOS users and Android users, the flow would be:

• Create an in-app message.

• Add a segment that targets just iOS users.

• Probably set a trigger, either something that is after a certain amount of time or maybe you know a certain point and time within your user experience that you want to present the user with this.

• Create your iOS message. Make sure that goes to the iOS app store.

• Then you would make that live.

• Then create another message.

• You would add a segment for Android users.

• Set the triggers.

• You would make it the Android app store rating. That would go to the Google Play Store

0:22:34

Something to note that in that messaging, we offer one free, live in-app message if you're on a free account. Then paid users get to add more. If you want to have at least two of these live, you'd have to upgrade to a paid account. But if you're on a free account, you can still take advantage of this by having one live in that message.

0:23:02

Let's look at another example. This is pretty basic. We've got some hierarchy in here. We've got a .gif. Let's play with something else. Imagine that I want to offer my users some delight. Let's say I have a coffee store, and I've got an app for my coffee store. And I know when users' birthdays are. I want to do a Happy Birthday message.

0:23:29

"Happy Birthday." And maybe I want to give users something free on their birthday. "Have a free donut on us. Pick it up today when you order a coffee." On this coffee store, I'm going to give users a free donut when they order a coffee.

0:23:56

Let's get back to talking about our brand's star guide. I probably want to use specific colors for my type. Imagine that I'm a coffee shop. One tool that I like to use is this website called Coolors. It helps you generate these star guides and these color palettes. You can go to Coolors. You can explore. It gives you a nice color palette to work with.

0:24:30

If you don't want to think about colors too much, you can come here, and you can pick up some colors. Or you might already have those brand star guides, those colors established. If you do, you should use those. If you don't, and you want to do some discovery, let's say we search for coffee. I should see some nice coffee-color palettes showing up here. Here we go.

0:24:59

These are nice coffee palettes, and let's go with — there are a lot of browns in there. Maybe we want something that's more like a Starbuck's type color palette. Let's open that up. We've got some nice colors going on here. Let's go with—I want to copy this. This is the Hex code I want to copy. So I copy that and go back over here.

0:25:31

I'm going to make my heading this color. Then my next text, I want to make it this shade. We go back over here, and I'm going to make it this color. A lot of the times, you probably find yourself guessing colors and playing around with the color palette, which works just fine and is fun, but if you come to something like Coolors, you get to pick colors that other designers have already identified as nice color palettes. A lot of the time, I'll just cheat and do that. It saves a lot of time.

0:26:09

For my image, this is something I created earlier. I created this lovely image of a donut holding hands with a coffee cup. This is an example of that. This is an illustration, and this is flat design. You can't go wrong with something like that where it's a nicely designed, flat illustration.

0:26:37

Again, I'll share some resources for getting designs like this. This is something I downloaded online. I didn't design it. I didn't spend hours doing this myself. It literally took one minute on searching for it and downloading it. But it looks pretty good. Icing on a donut, here. We've got a coffee cup.

0:26:56

I probably want to take them to a landing page and track some stuff. Maybe I want to say "Claim Now." And I'm going to make a background. I'm going to go back to my color palette and to be in line. I'm going to choose this shade of brown. And go back here and change the button color to brown.

0:27:19

I want to change — use this passive grey color for the coffee. I'm going to go here. I want to make that a bit bigger. "Happy Birthday. Have a free donut on us. Pick it up. Claim Now." You'll probably want to put some landing page in here. That's something of the effect like landingpage.url/trackyour/?utm_campaign, so you know how that performs.

I've also got a background option here. Just to add an extra layer of polish, I played around with another graphic earlier that was this sunset style. So I can add this background to my in-app message. It's loading. Once it's loading, we should see it fully render. I see it's very large. Probably too large. There we go. So, "Happy Birthday. I've got a nice, big button here, and we've got these nice, friendly people here.

0:28:47

There's a quick question coming out. ".gifs to the background?" Yes, you can. And I'll be showing you an example of how to do that.

0:29:00

This is our nice coffee example here.

0:29:04

What if I wanted to create a message that's an onboarding or a welcome message? I've got users that signup to my app, and I want to say, "Hey, welcome. First things first. Let's do this." Let's call this a Welcome Message.

0:29:25

And imagine that I'm running a photo-sharing app. Something that's like photo storage in the cloud. "Welcome. Get started saving your family vacation photos in the cloud. Forever." Some generic welcome message: Welcome To Our App.

0:29:59

Let's start with the background this time. Here's an example. I want to show you some examples of what you can do with these different graphics. I created this gradience earlier. This is a simple gradient that goes from a shade of purple to blue. Now I can upload that. Now, we'll add a nice gradient to the background.

0:30:29

It looks okay, but I can't see any of the text. I'm going to have to play with the text a bit, and the same with the button. Let's, first of all, change our image. I created an image that had four photos. We've got this photo storage app. We've got some unmarked photos here — nothing too crazy — pretty simple.

0:30:57

I'm going to upload that image. "Welcome. Get Started," and I've got a button. The button that I want will be something like "Upload First Photo." It needs a bit more contrast. You can't really see it there. For this, I'm going to make the button white. For the color, I'm going to show you another trick that I like to do to get colors.

0:31:28

In your browser — this is something that I do a lot. I can inspect elements. If I inspect elements, that brings up a thing called DevTools. I can use a color-picker that's included with DevTools to pick a color. See this background color here. Click on this swatch. It brings up this color-picker. Then I can pick any color I like. If I pick this blue and copy that Hex color, and then skip back out of that. I've got the Hex color.

0:32:02

If I go back to my button color, I will place that. Then I have this text color, which matches the background color. That's like a little trick; it's more of a developer tool trick. If you're familiar with Chrome Developer Tools, that’s something you can use to easily access colors.

0:32:24

My alternative was I could have guessed and played with the blue shades here until I got one that I liked. I'm also going to — I need some more contrast up here. We need good contrast. We need good hierarchy. Make sure it's legible. And the same for this.

0:32:45

Because it's like a welcome onboarding message, maybe I'll make it full screen. "Welcome. Get started saving your family vacation photos in the cloud forever. Upload first photo." Your upload would be — in this case, it might be an action name. So it might have a trigger that's in my app that knows to trigger the upload prompt.

0:33:14

So it will be like whatever that action is that you've named within your app. I would send it to myself and make sure it looks good. So there's another example. Here, we're using a background gradient, and you've got some nice photos, and this is a full-screen onboarding message, and I shared some tips there about how to select different colors.

0:33:43

Let's look at a couple more examples of — somebody mentioned animated .gifs. Let's look at .gifs because I know everyone likes .gifs. They add an extra layer of delight to your app experience, and I know users like that.

0:34:02

So we've got Halloween coming up, so let's say we do a Halloween message. I'm going to make it a center modal. Let's say, "Happy Halloween. We hope it is Spooktacular." We've got an emoji in there. Make sure it's Halloween.

0:34:40

For the image, here's a Halloween .gif I found earlier. So it's a cat in a pumpkin. There we go. The cat pops out of the pumpkin. "Happy Halloween." You can see there's a border around this. That's because the .gif itself has a white background.

0:35:01

Whenever you're dealing with the situation, you want your photo to nicely transition into the background. So I'm going to remove that background image and keep the background color to white since the .gif had a white background. Of course, all my text changed then, so I need to figure out what color to change those.

0:35:23

I'm going to go back to my Coolors app. I'm going to search for Halloween. Get some nice spooky colors.

0:35:42

It's taking its time. While we're waiting for that, I'm going to remove the button this time. We don't need a button. It's just going to be "Happy Halloween." You probably want to add some segments here. I'm sure you have users — there are users in the world that don't celebrate Halloween, so maybe you don't want to target them. Maybe you only want to target the U.S. market.

0:36:02

So you'd create some sort of segment that makes sure that you target the people that you want to target with this message. Some cool Halloween colors here. Let's go with this first one here. Nice. And let's go for purple and orange. I copy this Hex code. Come back here. Make the title text purple and orange. I'll make it larger. "Happy Halloween. We hope it is Spooktacular." There's your .gif.

0:36:54

One more that I'll show you and just a tip on adding animations to the background. I know someone asked about that. Let me show you another .gif that I've got here. We've got a fireworks .gif. I'm going to add that to the background. That adds some cool stuff to the background there. We've got these fireworks going on.

0:37:21

I'm going to remove the image because we've got a lot going on in the background. Let's say maybe this is a congrats message. "Congrats! You uploaded your first photo." I'm going to make these white. Okay. Pretty cool.

0:37:55

Maybe it is a bit small. Here's a trick where I want to make this bigger, but there are no controls to make this bigger. So I can upload an image that is blank. I've got a 600x400 .png image here. There's nothing in that image. It's just blank. And it's just for the purposes of adding some space to the in-app message.

0:38:45

"Congrats! You uploaded your first photo." The image is there, but it's because it's a transparent .png, you can't see it. But it helps make my message a bit taller. There are some tricks that you can do with in-app messaging. And that would be one of them.

0:39:06

We spent a lot of time talking about that. Let's bounce back to our presentation. I will take some questions. We designed a couple of these. We didn't get to some of these. There's Michael Jackson doing the moonwalk.

Helpful Resources for Designing In-App Messages

0:39:24

I want to make sure I share these helpful resources. A lot of what you've seen today was me downloading graphics and different designs. It wasn't me designing things myself. Let me point out a few of these.

0:39:42

• Envato Elements (elements.envato.com)

This is a resource where we can download lots of graphics. It is a paid resource, but it is very affordable. I think they charge per month. So you would pay a monthly fee, and you can download all the graphics that you want. You could essentially sign up for a month, download everything, and then cancel your subscription. It's a very useful resource. I use it a lot.

• Coolors (coolors.co)

Coolors is what we looked at for colors. If you're generating a color palette, you want to make sure you have some nice colors that work well with each other. Take a look at Coolors.

• Unsplash (unsplash.com)

Unsplash is for royalty-free photography. They have a lot of nice photos if you want to use a photo.

• iStock (iStockphoto.com)

iStock photos is also royalty-free photography except it is paid, and Unsplash is free. iStock is paid.

• Giphy (giphy.com)

Giphy is where I would find a lot of .gifs, animated .gifs.

• Dribble (dribble.com)

Dribble is a place for inspiration. That's where designers share a lot of their work. It's also a good place to hire designers. So if you have a bit of a larger budget and you want to get a really nice graphic for your in-app or whatever it is, you can find designers there to hire.

• Figma (figma.com)

Figma is a design tool. We use Figma at OneSignal to design basically everything. We use it for product design. We use it for graphic design. You might be familiar with Photoshop or Sketch. It's a tool that sits next to them. It's a competing tool. I like it a lot. It is web-based, so it's easy to share things. It also has generous free offers. You can sign up and use it for free. It's not like you're paying to use it from the start.

• Noun Project (thenounproject.com)

This is great for finding icons and .gifs.

• unDraw (undraw.co)

This is a nice place to find free illustrations. These are free graphic illustrations that you can use.

So lots of useful resources there.

0:41:44

One thing I want to share with you before Q&A. We conduct a lot of user experience research at OneSignal. We appreciate sharing designs early and often with our customers and users to make sure that we capture your feedback and include it in the design process.

0:42:02

If you're interested in being involved in this process, please feel free to go to j.mp/signalaimlUX and you'll be able to add your name to a form, and you'll be on our list. That means myself or another designer can reach out for future work. We also will reward you with a gift card for your time if you're chosen to participate. If you're interested in that, that's j.mp/signalaimlUX