The Mobile Inbox 101
Content strategy and userexperience lessons
toconnect with yourmobile subscribers.
Hello
Alex Williams
CreativeDirector,TrendlineInteractive
@alexcwilliams
Kristina Huffman
GlobalPracticeLead,CreativeServi...
The Mobile
Subscriber
The mobile barrier still exists
13%
25%
0%
5%
10%
15%
20%
25%
30%
Mobile clickthrough rate Desktop clickthrough rate
Mobil...
For one retailer,
72% opened the email once.
For one retailer,
81% clicked the email once.
Designing content
for [sm]all screens
Mobile
magnifies
content
Resist the Kitchen Sink
1. Pull click overlays for a variety of
sends from the same template
2. Analyze each static section, cut
content that has ...
Ensure all clicks tie back to goals.
Be ruthless.
Give them
“The Ten Peso
Version”
[sm]All Screens Require Focus:
3 Questions to Ask For Your Next Email…
What
Why
How
is the point of this email?
should the...
What?
Why?
How?
Optimize each modular
section of an email for fast
comprehension, not just
real estate.
Users might jump s...
Answer All 3 in One Glance
The Triangle in actionAnswer All 3 in One Glance
Countdown to what?
The Triangle in actionAnswer All 3 in One Glance
Elements of Email
Branding on Mobile
• Don’t design yourself into
a box, give yourself
visual flexibility
• Consistent Type, CTA’s
and Style...
UI: Use Mobile Conventions
“The most beautiful toilet sign is
useless if men constantly walk into
the ladies’ room” -Olive...
UI: Make calls to action stand out
with color, whitespace, placement
Source: HubSpot
Protip: Whatever stands out gets clic...
• Use them. Don’t hide them on mobile
Images
• Use them. Don’t hide them on mobile
Images
• Use them. Don’t hide them on mobile
• Accommodate retina now
Images
Fuzzy
image-
based
button
• Use them. Don’t hide them on mobile
• Accommodate retina now
• CSS > image-based elements
Images
• Use them. Don’t hide them on mobile
• Accommodate retina now
• CSS > image-based elements
• Rethink borders: the device ...
ExactTarget.com Blog video content – average viewing duration by device
Video was made for mobile
Testing and
Tracking Mobile
It’s a whole different ballgame
Testing & Failing
Mobile has made email testing
& analysis a bit more complicated…
All data points are not created equal.
• Open
• Click
• Unsubscribe
• In store conversion
• Online conversion
• Website vi...
Conversion
isn’t always
linear.
Analysis Then…
Avs. BOpen
Click Through
Click to Open a
Conversion a
Unsubscribe
Open a
Click Through a
Click to Open
Conv...
Analysis Now…
Desktop
Open Rate
Click Through a
Click to Open
Conversion
Conversion Avg. $$
Unsubscribea
Tablet
Open Rate
...
Version B, the Responsive design email
saw a double digit increase in sales of
items that start at over $1,700 at a 94%
co...
Failing in Testing is OK,
as long as you learn something.
Don’t test until you win/lose,
test until you understand why.
Testing to Understand
• Gradually introduce mobile
optimization techniques
• Keep as much similar
creatively as possible
u...
Define goals
• Branding
• Performance
• Production Efficiencies
Download code samples
• http://pages.exacttarget.com/ETDes...
Q&AResources at:
http://pages.exacttarget.com/ETDesign
AlexWilliams
CreativeDirector,TrendlineInteractive
@alexcwilliams
K...
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Mobile Inbox 101: Email Design Content & User Experience
Upcoming SlideShare
Loading in...5
×

Mobile Inbox 101: Email Design Content & User Experience

127

Published on

How do subscribers interact with emails on mobile devices? Is a mobile tap worth as much as a desktop click? What type of content doesn’t make sense on mobile devices? Learn the importance of mobile optimization as we reinvent email.

This presentation was given at Connections 2013 on Wednesday, September 18, 2013 by Alex Williams & Kristina Huffman.

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
127
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • We know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
  • REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
  • REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
  • KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
  • The real question is not ‘what % of opens were on mobile on last week’s send?’ but ‘How many people have the potential to open on mobile next time? Next week? Next month?’ Am I ready?
  • We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
  • We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
  • We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
  • Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
  • Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
  • KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
  • Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
  • Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
  • Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
  • Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
  • Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
  • Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
  • Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
  • Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
  • Video content is extremely popular on mobile devices:Vine, instagram video, youtube (3rd most popular app), etc.Video content may lower barrier to click because video was made for mobile. it's a very familiar experience: no small text to read, headphones/audio is handy/familiar, engages two senses: sight and sound, very legible: content takes up whole screen, consistent/system UI for playback controls.In recent data gathered from video content on exacttarget.com, users watched video longer on tablets and phones than desktops. Host on landing page, closer to conversion opportunitiesSimilar results have been found throughout the web. Tablets love video.
  • DefineWHY we’re doing this. It can be purely a brand decision to show innovation, also can be to prevent decrease in clicks, or maybe even increase clickthrough rate if you have a particularly bad mobile experience. You can’t prove value in a one-off AB test - responsive email is a long term investment in user experience. Don’t get stuck in concepting phase. Launch, test, watch over time. 1. make simple mobile aware/shrink wrap email with new content strategy  2. track engagement over time, iterate. I’d highly recommend a small pilot with a small agile team to flesh out process, tracking, etc. before rolling out to other BUs and email types.Emails can go from ideation to implementation in a matter of weeks - your web team can learn from your process, content strategy, testing approach, and success. Email is forgiving due to its high frequency, short shelf life, and endless segmentation/analytics possibilities. We know you need to show off metrics for internal buy-in. sometimes the inherent usability isn’t enough.We’re talking mostly to teams who design and code their own emails and paste code into the app, but you can start using responsive templates inside the ET editor now - xyz to enable, pick a format (show formats, tell how to turn on)
  • Transcript of "Mobile Inbox 101: Email Design Content & User Experience"

    1. 1. The Mobile Inbox 101 Content strategy and userexperience lessons toconnect with yourmobile subscribers.
    2. 2. Hello Alex Williams CreativeDirector,TrendlineInteractive @alexcwilliams Kristina Huffman GlobalPracticeLead,CreativeServices,ExactTarget @krudz
    3. 3. The Mobile Subscriber
    4. 4. The mobile barrier still exists 13% 25% 0% 5% 10% 15% 20% 25% 30% Mobile clickthrough rate Desktop clickthrough rate Mobile openers still tap less than desktop openers. Click-to-openrate Click-to-open rates for a B2C customer
    5. 5. For one retailer, 72% opened the email once.
    6. 6. For one retailer, 81% clicked the email once.
    7. 7. Designing content for [sm]all screens
    8. 8. Mobile magnifies content
    9. 9. Resist the Kitchen Sink
    10. 10. 1. Pull click overlays for a variety of sends from the same template 2. Analyze each static section, cut content that has historically performed low 3. Trace “required” content back to the source to understand rationale. 4. Prioritize content into top three clicks Ensure all clicks tie back to overall email goals. Something’s gotta go… Mobile Success Requires Tough Choices
    11. 11. Ensure all clicks tie back to goals. Be ruthless.
    12. 12. Give them “The Ten Peso Version”
    13. 13. [sm]All Screens Require Focus: 3 Questions to Ask For Your Next Email… What Why How is the point of this email? should they care? do they take action?
    14. 14. What? Why? How? Optimize each modular section of an email for fast comprehension, not just real estate. Users might jump straight from What to How, with the general content and imagery of the inner triangle acting as the Why. How it WorksAnswer All 3 in One Glance
    15. 15. Answer All 3 in One Glance
    16. 16. The Triangle in actionAnswer All 3 in One Glance
    17. 17. Countdown to what? The Triangle in actionAnswer All 3 in One Glance
    18. 18. Elements of Email
    19. 19. Branding on Mobile • Don’t design yourself into a box, give yourself visual flexibility • Consistent Type, CTA’s and Styles will hold your brand together across screens • The message, tone, and feel is your brand, not pixel perfect rendering of your layout across 50 email clients
    20. 20. UI: Use Mobile Conventions “The most beautiful toilet sign is useless if men constantly walk into the ladies’ room” -Oliver Reichenstein
    21. 21. UI: Make calls to action stand out with color, whitespace, placement Source: HubSpot Protip: Whatever stands out gets clicked. winner
    22. 22. • Use them. Don’t hide them on mobile Images
    23. 23. • Use them. Don’t hide them on mobile Images
    24. 24. • Use them. Don’t hide them on mobile • Accommodate retina now Images Fuzzy image- based button
    25. 25. • Use them. Don’t hide them on mobile • Accommodate retina now • CSS > image-based elements Images
    26. 26. • Use them. Don’t hide them on mobile • Accommodate retina now • CSS > image-based elements • Rethink borders: the device is the container Images Border- mania!
    27. 27. ExactTarget.com Blog video content – average viewing duration by device Video was made for mobile
    28. 28. Testing and Tracking Mobile It’s a whole different ballgame
    29. 29. Testing & Failing Mobile has made email testing & analysis a bit more complicated…
    30. 30. All data points are not created equal. • Open • Click • Unsubscribe • In store conversion • Online conversion • Website visits • Engagement • Logins/Registrations • POS conversion • Coupon Redemption • Social sharing How are they trending over time?
    31. 31. Conversion isn’t always linear.
    32. 32. Analysis Then… Avs. BOpen Click Through Click to Open a Conversion a Unsubscribe Open a Click Through a Click to Open Conversion Unsubscribe a Winner
    33. 33. Analysis Now… Desktop Open Rate Click Through a Click to Open Conversion Conversion Avg. $$ Unsubscribea Tablet Open Rate Click Through Click to Opena Conversion Conversion Avg. $$ Unsubscribe Smartphone Open Rate a Click Through Click to Open Conversion Conversion Avg. $$ Unsubscribe Multi-Open Combo Open Rate Click Through Click to Open Conversion Conversion Avg. $$ a Unsubscribe
    34. 34. Version B, the Responsive design email saw a double digit increase in sales of items that start at over $1,700 at a 94% confidence level. (A- Fixed Width) (B - Responsive) http://whichtestwon.com/bowflexs-responsive-design-test-results A- Fixed Width Open Rate a Click Through a Click to Open a Conversion Conversion Avg. $$ B - Responsive Open Rate Click Through Click to Open Conversion a Conversion Avg. $$ a Case Study
    35. 35. Failing in Testing is OK, as long as you learn something. Don’t test until you win/lose, test until you understand why.
    36. 36. Testing to Understand • Gradually introduce mobile optimization techniques • Keep as much similar creatively as possible until you have solid data • Stay focused on key data points, don’t get distracted by spikes in open/click • Test multiple emails over a an extended period of time in lieu of one off A/B tests.
    37. 37. Define goals • Branding • Performance • Production Efficiencies Download code samples • http://pages.exacttarget.com/ETDesign Identify a small team to pilot 1.Design 2.Code 3.Launch 4.Repeat repeat repeat Launch Do what’s best. Start now. Iterative testing
    38. 38. Q&AResources at: http://pages.exacttarget.com/ETDesign AlexWilliams CreativeDirector,TrendlineInteractive @alexcwilliams Kristina Huffman GlobalPracticeLead,CreativeServices,ExactTarget @krudz

    ×