Fanfare.png

Redesigning D23: The Official Disney Fan Club weekly newsletter

 PROBLEM 

  • The previous D23 Fanfare template was very limited in presentation.

  • It presented the viewer with an overwhelming amount of information and clickable items.

  • 3 year old design

 GOAL 

  • Update current email newsletter design to drive stronger engagement 

  • Optimize content presentation and provide more flexibility in layout and design

  • Mobile optimization

 TARGET USERS 

  • D23 Members

 MY ROLE 

  • UI/UX Designer 

How did we make this?

  • Sketch

  • Adobe Creative Suite

DISCOVERY

Current Fanfare pain points:

Screen Shot 2018-02-21 at 4.24.31 PM.png
  • Videos & photos are limited in presentation
  • Overwhelming amount of clicks and information
  • CTAs not very compelling
  • Text/typeface can be hard to read
  • Lower CTRs towards bottom of the page
  • Low social button clicks
Screen Shot 2019-03-13 at 4.23.24 PM.png
Screen Shot 2019-03-13 at 4.23.35 PM.png

COMPETITIVE ANALYSIS

Disney Interactive
Oh My Disney
Disney Baby
competitors.png
Disney Channel
Disney Newsreel

Common Patterns:

  • Large central item above the fold

  • Clear and obvious CTA buttons

  • Mobile-friendly layout

  • Bright bold colors/graphics

  • Imagery on brand, minimal text

Newsreel Redesign Case Study:

ND_case_study.png

 SINGLE ITEM PROMO 

D23Fanfare_V9_SingleItem.jpg
  • Event invites

  • Promotions

  • More flexible space for text

 1 COLUMN BLOCK LAYOUT 

D23Fanfare_V4.jpg
  • Fluid layout

  • Flows easily

  • Flexibility in number of content items

  • Emphasizes more compelling imagery and CTAs

 2 COLUMN BLOCK LAYOUT 

D23Fanfare_V6.jpg
  • Allows space for more text without compromising imagery

  • More emphasis on the feature item

  • Hybrid approach

  • Content flexibility within each box

 2 COLUMN BROKEN GRID 

D23Fanfare_V8.jpg
  • Multiple items above the fold

  • More compact for less scrolling

  • Different levels of content hierarchy 

WIREFRAME EXPLORATIONS

MOCK UP EXAMPLES

D23Fanfare_V5_SingleItem.jpg
D23Fanfare_V1.jpg
D23Fanfare_V3.jpg
D23Fanfare_V4.jpg

STYLE GUIDE

PAGE1.jpg
PAGE2.jpg

SEE IT IN ACTION

See this week's Fanfare at d23.com/fanfare

SEE ANOTHER PROJECT