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

Read more
Read more
Similar to
Popular now
Just for you