Closed Bug 647348 Opened 13 years ago Closed 13 years ago

Design Email Preference Center Pages

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
x86
macOS
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: wbowden, Assigned: ltom)

References

Details

Attachments

(2 files)

preference center content
97.98 KB, application/pdf
Details
Preference_center_funnel
124.31 KB, image/png
Details 
3 pages that will need to be mocked up:

Final copy has not yet been completed, but I've attached a shell of the three pages so you'll get an idea.  

Page 1 - New subscribers view of preference center 
- will only see three newsletters that we're marketing POST opt-in.  They won't see this until after they've already opted-in for mainstream news.

Page 2 - Existing subscribers view of preference center
- will only see this when they click the manage preferences link in our email communication.  This will show ALL emails they are receiving, including non-public lists like community, labs, etc.

Page 3 - Unsubscribe Confirmation 
- new page for unsubscribes that includes social media links and some questions to help us understand why they are leaving

Goal is to have preference center live by May 31.  Web dev will be working on a schedule for components.
Depends on: 647344
Thanks Winston.  Lets sync up this week to discuss this in person.  I'd like to understand the details and be sure I know what is needed and when.

    
    

    
  


  

    
    

    
  
Thanks Winston.  Per our discussion... Lets shoot to have this done by end of this month (April 30th), with iterations in-between.  I'll review the docs again and share any additional suggestions I might have.  cc-ing Lee.  I think he can help knock this out.

    
    

    
  
Hey all,
Here's a first round of mockups to mull over. Not sure if there are any copy tweaks we'd like to make etc, but I think this is a good place to start and may help surface any issues you may have. vC, the conformation page looks a bit empty, but I think that's the point? Is there a CTA to get the user to do something else from there?

http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_A_new_01.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_B_exist_01.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_C_confirm_01.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_D_unsubscribe_01.jpg

    
    

    
  
Thanks Lee.  Great start, and definitely helps to have a visual to point out the strengths and weakness.  To be honest, I see a lot of weaknesses right now :(  the content just really needs to be tightened up more.  Here are some thoughts:

* Not sure if we need the social media box there, when we have it in the footer.  It feels really redundant, but I do like the box that Lee designed.  
* I think we need a blurb to explain the subscribe/unsubscribe picker... right now it's not clear what I'm looking at and if it's something that requires action from me or not. 
* Related to that, I"m not sure if the copy at the top is quite right... this is a mix of "thank you for subscribing, and next steps on choosing your preferences".  I think just having CHOOSE PREFERENCES isn't enough, would be nice to have a 1-2 blurb to explain what this page is, no?
* The vC confirmation page feels really really empty, as Lee noted.  It almost looks like the page hasn't loaded / an error.  We either need more content here, or another way to fix.... 
* The unsubscribe page feels a bit messy to me right now... I like the blog character, but there's too many All CAPS, and the giant BYE is kinda offputting.  It's also a bit distracting... 

Sorry if that was mostly negative.  I think the designs are off to a good start here, but we should now use this as a reference to polish up the content and fill in the gaps.....   happy to talk more in person.  Let me know what you think...
OS: Mac OS X → All

    
    

    
  
I agree with these points, Tara. If you guys have time today, we can all get together and talk it through, if you think that would help.
OS: All → Mac OS X

    
    

    
  
Copy is being tweaked in bug 647344. Maybe talk with Winston while you're both in the office today...otherwise I think you're set to do another pass.

    
    

    
  
Hello er'body,
So, I spoke with Winston & Tara last week about next steps and we think there are some layout and copy changes we'd like to explore. I did a couple of quick revisions to vA (new users who just signed up for Mozilla & You) and vD Unsubscribers. These mockups are not complete solutions, but I think they will help put into context, the hierarchy of the pages and help us think about our messaging:


http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_A_new_02.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_D_unsubscribe_02.jpg

A - Mozilla & You specific prefs/form is primary - "Save Preferences" CTA added
  - Our Other Newsletters section is secondary w/ more "form-like" radialbuttons
  - Let's Be Friends/ Connect section is lowest priority 
  - Simplified footer

D - Simplified design (removed fun "BYE" illo)
  - Submit button added to primary CTA - "why are you leaving?"
  - room for a goodbye message w/ subtle link to come back

Let's get the convo moving around these 2 pages first. I think further changes to vB will be a result of our discussion of vA. 

Thanks!

    
  
Assignee: tshahian → ltom

    
    

    
  
Thanks Lee!  I think these are definitely a huge improvement.  Few quick thoughts:

A: 
* Overall, much better.
* Little confused about the subscribe/unsubscribe checklist.  Is this a full list of other ones they may have already subscribed to, and ones they might be interested in?  I feel it's weird to have both buttons unchecked... it's a bit confusing.  
* Similarly, the button to save preferences shouldn't be on the left.  It makes sense there, but then what do you click on when you go through the checklist and choose your other preferences?  feels weird to go back and click the botton to its left.
* I like the social media bits at the bottom... we could even pump this up slightly. but otherwise, clean and nice.

D:
* Definitely very simple. I wish we had an illustration here.  But, it's best to keep it clean and focused. 



Winston, thoughts?

    
    

    
  
ping!  our original deadline to get this done was April 30th.  Has that been extended? Could you post an update here please wrt next steps? time is running short :)  Thanks.

    
    

    
  
Thanks for the ping.  Haven't forgotten about you.  I've been tied up trying to finalize newsletter content.   

Version A:

Connecting with Matej on copy tomorrow.  A few thoughts now - I think the header "Mozilla & You" is wrong.  Those settings below relate to all newsletters.  Let's change it to "Your Preferences" for now.   

Good point on the unsubscribe check box list.  What about adding in the newsletter they just subscribed to - mozilla & you - and placing a check beside that one and the rest (if they arent subscribed) would be blank. 

+1 on button placement.  

+1 on social media  

Version D

I think we need to make this a little more interesting. We should add in the social media portion so they can connect with us there if they want. I'll work with Matej on some copy direction for D.  

Overall - I think this is a big step in the right direction.  One thing I do want us to keep in mind - this page will change.  We may add/subtract newsletters and/or questions.  The more flexible we can make it, the better.  Having said that - as far as I can tell - this looks like an easy layout to update. 

Thanks all!

    
    

    
  
Talked with Matej.  He's working on the headline and the description below for version A. It'll be a similar word count - so no major design edits.  

Do you guys have what you need to proceed with the next round of design edits?

    
    

    
  
Hey Lee.  do you have what you need to iterate?  

Winston, do we have more time to knock this out?  Or are we still shooting for eod 4/30?  Seems like we're getting close, but would definitely be great if we had a tiny bit more time given that copy content is not quite there yet -- and design needs a bit more work.   Let me know how things look from a deadline perspective.

    
    

    
  
I'm cool pushing into early next week if we need to.  

Matej worked on the copy for version A.  I like the direction.  See what you think:

HEADLINE:

You’re All Set!
But Wait, There’s More.

Copy underneath headline:

Want to get the most relevant info? Tell us a little more about yourself. And
while you’re here, sign up for other Mozilla news.

    
    

    
  
Also- regarding copy for version D - not a lot of edits.  

Headline:
You've been unsubscribed.

Copy:
We're sorry to see you go. Would you mind telling us why you're leaving?

(DROP DOWN BOX)

If you change your mind, you can always come back (hyperlink).

Have a nice day!
The Mozilla Team

-----

Still want to stay connected to Mozilla but not by email? Stay in Touch!

[Facebook icon] Like us                       [Twitter icon] Follow us

* Also - let's add some kind of illustration.  Maybe the yeti since we use him for our email CTA in the footer?

    
    

    
  
Hey Lee - here's the copy for the success page.  Thanks!!


Thanks for updating your email preferences.  

While here, why not check out some more Firefox awesomeness.  

CTA 1
Get Up and Go

It’s your Web anywhere you go.

Get Firefox for mobile >>

CTA 2
Added Extras

Make Firefox do more with add-ons.

Find out how >>

CTA 3
About Us

What's Mozilla all about?

We're glad you asked >>

    
    

    
  
Thanks Winston! Here's a new mockup for the Success page (C):

http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_C_confirm_02.jpg

- I put the same truncated footer, that we're using in the vA page onto this one

    
    

    
  
Winston, thoughts on these?  looks good to me.

    
    

    
  
After looking at my last version of the Success page (C), I thought I'd circle back to the Unsubscribe page (D):

http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_D_unsubscribe_03.jpg

- I liked the non all-capped page title for this page. 'Shouting' that the user has unsubscribed seemed a bit negative to me. Going with a more subdued header fees better to me.

- After our conversation last week, Winston - having dropped the illo, I thought that giving our form/submit a border would help focus our user to interact with one last CTA. The page seemed very 'floaty' to me before.

Let me know your thoughts! Lee

    
    

    
  
"floaty" :)   Agree that the all-caps screaming is no good.  The page is a bit empty... but perhaps that's OK.  quick question (sorry to be saying this now)...but how many options do we have in the drop-down menu?  Not seeing the rest, I wonder if a check-box approach would work too.  Perhaps there are more reasons than one that they are leaving... and you're not forcing them into a default selection of "you send too many emails".

    
    

    
  
Looking good. Yeah - not a bad idea on the check box.  We have five options.  They are:

-	You send too many emails.
-	Your content wasn’t relevant to me.
-	Your email design was hard to read.
-	I didn’t sign up for this.
-	I’m keeping in touch with Mozilla on Facebook and Twitter instead. 

Also - let's add in the line from comment 16.  This is a good spot to give the other channels.  

Still want to stay connected to Mozilla but not by email? Stay in Touch!

[Facebook icon] Like us                       [Twitter icon] Follow us

    
    

    
  
Yeah, I like that idea of using the check boxes vs. 1 answer feedback. I'll mock the page up w/ the 5 options and add the Stay in Touch section. Stay tuned...

    
    

    
  
Cool.  Is it worth adding an "other" ?  if their reason doesn't fit any of those?

    
    

    
  
Not saying we have to do this right away, but eventually this might be a fun place for a sad illustration. I'm thinking of Curly with a single tear running down his cheek...

    
    

    
  
That was our initial intent, actually.  But we didn't have an illo that fit.  I did tell Winston though that I'd like to do an illo for newsletter (DDL style).. and a sad face of some sort here would be great.  Maybe the Yetti since he's the one that's presenting the email engagement box in the footer.

    
    

    
  
http://mozilla.seanmartell.com/yeti.png 

"Way to go. You made Yeti cry."  

:)

    
    

    
  
Haha nice.

    
    

    
  
William has two request for the social media portion on these pages:

- can we change 'social media' to 'social networks'? This will keep it consistent with mentions on mozilla.com

- can we have the Facebook 'Like us' appear first and have Twitter 'Follow us' on the right? It's more consistent with mozilla.com and more people are on Facebook as well

    
    

    
  
Hey - 

Two things.  Checking in on how we're doing with the edits. 

Also - spoke with Alex Fowler today.  We're discussing being more blatant on the preference center about turning open/click tracking on and off.  We'd like to test two versions of the main preference center page.  One is the version you're working on finalizing.  The second would simply include two lines of copy that would go where we have HTML vs. Text in the first version.   Something like this:

Enable Tracking (default) - (100 characters or so with value prop of open/click tracking)

Disable Tracking - (100 characters explaining text only email). 

For now, you can just use filler copy.  I'm going to file a separate bug for Matej to assist with the copy. 

If you have a second on Tuesday, we can sync up and discuss.

    
    

    
  
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_A_new_04.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_C_confirm_02.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_D_unsubscribe_04.jpg

Hey Winston,
Here are the latest mockups (3 of 4) 
I know we want to wrap these up soon. I was hoping that you could take another pass at that content doc - so all the requests are up to date and consolidated into one place. That way we're not iterating on every change per comment. I'm in the office today, so maybe we can sit down and go thru these again, just to make sure we're on the same page. Thanks!

    
    

    
  
Would be great to sit down and talk through these today.  I'll hunt down the Winston!

    
    

    
  
Glad we got to sit down yesterday and hash this out.
Here are the latest round of jpgs:

http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_A_new_04.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_B_exist_02.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_C_confirm_02.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_D_unsubscribe_05.jpg
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_E_feedbackconf_01.jpg

- versions D and E (unsubscribe and feedback confirmation) I still think the 'no frills' approach is more fitting here. The social butterfly scene for a background - though pretty -seems a bit incongruous to me. I could be wrong, but I'm assuming we're phasing away from those backgrounds too...?

    
    

    
  
Hey guys, this looks great. Not sure if it's the right place for something like this, but what if we added a "sniff" to the end of page E? Like this:

Thanks for telling us why you're leaving. (*sniff*)

    
    

    
  
Thanks Lee.  Looks good to me, and I like the clean (no box) approach.

Winston?

    
    

    
  
Nice! Good call on the one column layout in version B.  Two edits and then I think we're good to go.

Can we add in one option into A and B - add under Country:

Choose your preferred email format:
- HTML 
- Text-only

I thought we had talked about putting the social media on the last piece - the feedback confirm - imageE.

Regarding comment 34 - I think that makes a lot of sense, but I'd like to have an image to go along with it. Let's leave as is for now and revisit when we have an illustration. 

Other than that, I think we're ready to pull the trigger.

    
    

    
  
Thanks Lee!  One more thing.  On the social links on prefs_e - can we do a horizontal treatment - similar to what you did in prefs_a?

    
    

    
  
Actually - if it's easier for you - I can't just have web dev make that edit. Feel free to send over PSDs.  Looks awesome.  Thanks for all your work on the project.  Very excited about where we ended up on the design.

    
    

    
  
Thanks William and Lee!  lets wrap this up with a nice bow and ship it.

    
    

    
  
Let me copy William on the bug... to make sure he gets your thank you message.

    
    

    
  
you guys just look so alike!  I"m so very sorry.  How about I buy you coffee tomorrow?  sorry sorry.  Or, one free entrance into the land of creatives (inside joke for others on this bug).

    
    

    
  
Free entrance into the land of creatives - winning.  :p  Any association with William is clearly a compliment.  :)  Night.
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED

    
    

    
  
Final PSDs are linked here:

http://intothefuzz.com/leetom/Mozilla.com/PSD/email_prefs_A_new_03.psd
http://intothefuzz.com/leetom/Mozilla.com/PSD/email_prefs_B_exist_02.psd
http://intothefuzz.com/leetom/Mozilla.com/PSD/email_prefs_C_confirm_01.psd
http://intothefuzz.com/leetom/Mozilla.com/PSD/email_prefs_D_unsubscribe_02.psd
http://intothefuzz.com/leetom/Mozilla.com/PSD/email_prefs_E_feedbackconf_01.psd

Winston, regarding horizontal layout of the Social links (comment 38), I changed this bc I thought it would look strange not resting outside of the background box that I removed. I mocked it up here so you can see it:
http://intothefuzz.com/leetom/Mozilla.com/JPG/email_prefs_E_feedbackconf_02.jpg

*both layers are in the PSD, so whatever you choose you can let webdev know, and it'll be there!

    
    

    
  
Thanks Lee!   By "horizontal" we actually meant to have them sitting next to each other vs. stacked on top.  Not to move it back to the bottom. I agree that would look weird :)  But... it's something that's easy to edit in implementation.

Thanks again Lee!  and WINSTON.

    
  
Depends on: 656957

    
  
No longer depends on: 656957

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: