Page 1

Scottrade Designing for Mobile January 7, 2011


Scottrade

Mobile Trading Site Audit & Design Strategy Designing for Mobile Designing for Mobile

2


Scottrade Designing for Mobile

Contents Mobile  Trading  Site  Audit   •  • 

Content Audit   UX  Audit  

Design Strategy   •  •  • 

Observa:ons &  Trends   Peripheral  Brand  Experiences   Func:onality  &  Moving  Forward  

3


Scottrade

Mobile Trading Site Audit Content & UX Audit Designing for Mobile

4


Scottrade Designing for Mobile

Mobile Trading  Site  Audit:  Content   Redundancies:      As  the  marke+ng  site  is  developed,  the  following  content  should  be  removed  from  the     m.sco;rade.com  experience  .   Why  Choose  ScoHrade?   •     Online  Trading-­‐Easy  and  Affordable   •     Outstanding  Support  for  Every  Trader   •     Leading  Trading  Tools  &  Research   •     A  Full  Line  of  Investment  Products  

5


Scottrade Designing for Mobile

Mobile Trading  Site  Audit:  Content   Redundancies:      As  the  marke+ng  site  is  developed,  the  following  content  should  be  removed  from  the     m.sco;rade.com  experience  .   FAQ   •     What  features  are  available  on  the  mobile          site?   •     Why  is  mutual  fund  research  not  offered?   •     Can  I  access  historical  account  informa+on?  

6


Scottrade Designing for Mobile

Mobile Trading  Site  Audit:  Content   Redundancies:      Because  of  its  popularity,  the  Symbol  Search  func+on  driven  by  *Wall  Street  on     Demand  should  be  offered  on  the  mobile  marke+ng  site  even  though  it  appears  on  m.sco;rade.com.      

*Design Constraint!   WSOD  integra+on  limits  our  ability  to   design  a  fluid  HTML  structure.    Limita+ons   include  the  distor+on  of  the  interface  as  it   rotates  or  expands.  

7


Scottrade Designing for Mobile

Mobile Trading  Site  Audit:  UX   Branch  Locator:      The  design  of  the  Sco;rade  Branch  Locator  (Know-­‐Where  Solu+ons)  has  a  dis+nct     “look  &  feel”  that  appears  to  be  a  departure  from  the  current  m.sco;rade.com  experience.    Prior  to   moving  forward  with  design  we’ll  need  to  know  which  direc+on  is  most  appropriate.   Design  Inconsistencies   •     Old  Sco;rade  logo   •     “Menu”  vs.  “Home  Icon”   •     Yellow  “Contact  Us”  without  the  phone              icon   •     Search  box  has  no  instruc+ons   • Zip  Code?   • Area  Code?   • City?   • State?  

8


Scottrade

Design Strategy Observations & Trends Designing for Mobile

9


Scottrade Designing for Mobile

Design Strategy:  The  Landscape   Process:    In  an  effort  to  fully  understand  the  compe++ve  environment  and  gain  insight  from  peripheral   brands,  EMG  analyzed  the  following  mobile  experiences:  

Direct Compe:tors  

Peripheral Brands  

10


Scottrade Designing for Mobile

Design Strategy:  Mobile  Web  vs.  The  App   EMG’s  research  yielded  two  dis+nct  observa+ons:  

Observa:on #1   Most  Direct  Compe+tors  appear  to  be  focusing  efforts  on  the  “app”  experience  at  the     expense  of  their  mobile  website  experience.  

Observa:on #2   Most  Direct  Compe+tors  fail  to  present  a  clear  call  to  ac:on  in  their  mobile  websites.  

11


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #1:    Most  Direct  Compe+tors  appear  to  be  focusing  efforts  on  App  experience  at  the     expense  of  their  mobile  website  experience.  

12


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #1:    Most  Direct  Compe+tors  appear  to  be  focusing  efforts  on  App  experience  at  the     expense  of  their  mobile  website  experience.  

13


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #1:    Most  Direct  Compe+tors  appear  to  be  focusing  efforts  on  App  experience  at  the     expense  of  their  mobile  website  experience.  

14


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #1:    Most  Direct  Compe+tors  appear  to  be  focusing  efforts  on  App  experience  at  the     expense  of  their  mobile  website  experience.  

15


Scottrade Designing for Mobile

Design Strategy  :  Key  Takeaway   Key  Takeaway   There  is  a  clear  opportunity  for  Sco;rade  to  design  a  mobile  (marke+ng)  website  that     delivers  a  consistent  experience  across  all  digital  channels.  

16


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #2:    Most  Direct  Compe+tors  fail  to  present  a  clear  call  to  ac:on.  

iPhone app   download  with   the  op+on  to   “hide”   Users  must  scroll  to  the   bo;om  of  the  page  to  reach   “Important  Informa+on”  

17


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #2:    Most  Direct  Compe+tors  fail  to  present  a  clear  call  to  ac:on.  

Contact Us  placed   alongside  five  other   ac+ons  without  any  clear   hierarchy.  

18


Scottrade Designing for Mobile

Design Strategy  :  Mobile  Web  vs.  The  App   Observa:on  #2:    Most  Direct  Compe+tors  fail  to  present  a  clear  call  to  ac:on.  

Users must   first  scroll  to   the  bo;om   of  the  page.  

User is  given   op+ons  to  click  to   call  or  receive  a   call.  

19


Scottrade Designing for Mobile

Design Strategy  :  Key  Takeaway   Key  Takeaway   There  is  a  clear  opportunity  for  Sco;rade  to  design  a  mobile  (marke+ng)  website  that:     1.  Presents  clear  calls  to  ac:on   2.  Demonstrates  the  value  of  opening  an  account  with  Sco;rade  

20


Scottrade

Design Strategy Peripheral Brand Experiences Designing for Mobile

21


Scottrade Designing for Mobile

Design Strategy  :  Peripheral  Brand  Experiences   Why  Peripheral  Brand  Experiences?       1.  Online  mobile  banking  sites  demonstrate  similar  design  features  and  func:onality  as  the  intended   Sco;rade  mobile  marke+ng  site.     2.  Banks  “get  it”  when  it  comes  to  designing  seamlessly  across  mul+ple  plaborms  

Peripheral Brands  

22


Scottrade Designing for Mobile

Design Strategy  :  Peripheral  Brand  Experiences   Example:    Bank  of  American  mobile  website  vs.  app.    Seamless  experience  +  clear  desired  ac+ons.  

23


Scottrade Designing for Mobile

Design Strategy  :  Peripheral  Brand  Experiences   Example:    Ally  Bank.    Well  organized  content  +  social  integra+on  

24


Scottrade Designing for Mobile

Design Strategy  :  Peripheral  Brand  Experiences   Example:    Ing  Direct.    Clear  call  to  ac+on  +  small  doses  of  brand  personality  

(Ing mobile  website)  

(Ing mobile  app)  

25


Scottrade

Design Strategy Functionality & Moving Forward Designing for Mobile

26


Scottrade Designing for Mobile

Design Strategy  :  The  Menu  BuHon   Observa:ons:      Drop  down  menus  are  appropriate  when  a  brand  needs  to  communicate  dis+nct  pieces     of  content  that  appear  non-­‐related  (Why  Choose  Sco;rade  +  mobile  trading  site).    However,  the  menu     divides  the  experience  (this  is  an  issue  when  you  have  a  wide  range  of  desired  user  ac+ons).    

27


Scottrade Designing for Mobile

Design Strategy  :  The  Menu  BuHon   Observa:ons:      If  we  determine  that  a  menu  is  s+ll  necessary  for  both  experiences,  it  is  important  to     use  similar  design  and  func+onality  across  all  plaborms.       Example:    When  ac+vated,  E*TRADE's    menu  pushes  page  content  down  and  allows  users  to  scroll  lee   or     right  to  access  more  pages/tools.    How  might  this  experience  be  translated  on  a  mobile  website?  

(E*Trade mobile  app)  

(E*Trade mobile  app)  

28


Scottrade Designing for Mobile

Design Strategy  :  The  Menu  BuHon   Observa:ons:      If  we  determine  that  a  menu  is  s+ll  necessary  for  both  experiences,  it  is  important  to     use  similar  design  elements  across  all  plaborms.       Example:    Bank  of  America  (see  slide  23).   Example:    IGN  uses  similar  iconography  across  both  experiences.  

(IGN mobile  website)  

(IGN mobile  app)  

29


Scottrade Designing for Mobile

Design Strategy  :  The  Menu  BuHon   Observa:ons:      Breaking  up  content  on  the  menu  is  another  way  to  display  non-­‐related  pieces  of     content  that  may  appeal  without  interrup+ng  the  experience..       Example:    Fidelity  uses  four  main  icons  to  direct  users  to  specific  content  and  then  offers  a  fieh  to     presumably  “less  used”  pages/tools  on  the  site.  

(Fidelity mobile  app)  

(Fidelity mobile  app)  

30


Scottrade Designing for Mobile

Design Strategy  :  Moving  Forward   Strategy:    Design  and  develop  a  func+onal,  ac+on-­‐oriented  marke+ng  site  built  to  deliver     relevant  informa+on  about  the  benefits  of  opening  a  Sco;rade  account  and  driving  mobile  leads  by     quickly  and  easily  entering  users  into  a  lead  funnel.   Recommenda:ons:    Based  on  the  research  and  prior  design  work,  EMG  recommends:   1.  Making  all  calls  to  ac+on  clear,  prominent  and  accessible.   2.  Leverage  the  popularity  of  the  Symbol  Search  func+on  by  making  it  available  on  the  marke+ng  site.   3.  Integra+ng  the  most  current  design  elements  (colors,  fonts,  terminology,  icons)  in  order  to  create   consistent  experience  across  mul+ple  digital  channels.   4.  Design  a  more  intui:ve  menu  that  does  not  separate  the  user  from  the  intended  experience.   Considera:ons:    In  order  to  achieve  these  goals  EMG  will:   1.  Develop  a  mobile-­‐specific  persona  inspired  by  the  Savvy  Investor  (ideal  customer)  to  guide  ini+al   design.   2.  Consider  all  constraints  third  party  applica:ons/tools  present  prior  to  design  (Know-­‐Where   Solu+ons,  WSOD).   3.  Learn  about  any  unique  func:onality  or  features  being  developed  for  the  ScoHrade  app  so  that  the   experiences  are  consistent.  

31

Designing for Mobile  

description

Designing for Mobile  

description

Advertisement