La (re)naissance d'une marque sur le web

Étude de cas: notre travail pour Yellow Bird Project — www.yellowbirdproject.com

Transcript

1. La (re)naissance d’une marque sur le web
   

   View Slide

2. PROCESSUS DE CRÉATION D’UNE MARQUE
   SPÉCIFIQUEMENT POUR LE WEB
   DESIGN WEB + IDENTITÉ VISUELLE
   

   View Slide

3. STUDIO DE DESIGN DIGITAL
   EXPERTISE DANS D’AUTRES DISCIPLINES DE DESIGN
   

   View Slide

4. Le design web
   VISUEL
   STRUCTURE
   RÉDACTION
   +++
   

   View Slide

5. Yellow Bird Project
   DEUX PASSIONNÉS DE MUSIQUE D’ARTISTES
   INDÉPENDANTS
   T-SHIRTS CONÇUS PAR LES ARTISTES
   VENDU POUR SUPPORTER DIFFÉRENTES CAUSES
   

   View Slide

6. View Slide

7. View Slide

8. AU REVOIR SIMONE BLOC PARTY BON IVER
   BROKEN SOCIAL SCENE CLAP YOUR HANDS SAY
   YEAH DEVENDRA BANHART ELVIS PERKINS
   GRIZZLY BEAR HAYDEN HOLLY THROSBY
   JOSEPH ARTHUR K-OS KING CREOSOTE LAURA
   VEIRS LITTLE BOOTS METRIC MY BRIGHTEST
   DIAMOND NEW PORNOGRAPHERS OF
   MONTREAL RA RA RIOT RILO KILEY STARS THE
   DEARS THE MAGIC NUMBERS THE NATIONAL
   THE SHINS WOLF PARADE WOLFMOTHER
   

   View Slide

9. ACOUSTIC NEUROMA AIDS SOCIETY OF CANADA
   ALS SOCIETY AMNESTY INTERNATIONAL ART
   FOR CHANGE BREAD & ROSES COMMUNITY
   FUND BRITISH HEART ASSOCIATION ELLIOTT
   SMITH MEMORIAL FUND GLASS CASTERS UNION
   GREENPEACE INTERVAL HOUSE LAKE ONTARIO
   WATERKEEPER LE CHAINON MERCY CORPS
   MUSICOUNTS NATURE CONSERVANCY
   ONExONE PABLOVE FOUNDATION TEENAGE
   CANCER TRUST WHALE MUSEUM WORLD
   

   View Slide

10. Mandat initial
    ADAPTATION DU SITE EXISTANT :
    DESIGN + INTÉGRATION
    

    View Slide

11. Potentiel du projet
    MUSIQUE D’ARTISTES QUE NOUS RESPECTONS
    CAUSES QUE NOUS VALORISONS
    CLIENT EN LEQUEL NOUS CROYONS
    

    View Slide

12. Recommendation
    SITE
    + IDENTITÉ VISUELLE
    + RÉDACTION
    

    View Slide

13. Potentiel du projet
    MUSIQUE D’ARTISTES QUE NOUS RESPECTONS
    CAUSES QUE NOUS VALORISONS
    CLIENT EN LEQUEL NOUS CROYONS
    

    View Slide

14. Potentiel du projet
    MUSIQUE D’ARTISTES QUE NOUS RESPECTONS
    CAUSES QUE NOUS VALORISONS
    CLIENT EN LEQUEL NOUS CROYONS
    FLEXIBILITÉ DE CRÉATION
    

    View Slide

15. Mandat adapté
    REPARTIR À ZÉRO
    

    View Slide

16. Création d’une marque pour
    le web : principaux défis
    

    View Slide

17. Principaux défis
    SEULE VITRINE : EN LIGNE
    ÉQUILIBRE ENTRE ESSENCE DE MARQUE
    ET TECHNOLOGIE
    SORTIR DU LOT
    

    View Slide

18. Identité visuelle
    

    View Slide

19. Identité visuelle
    INDÉPENDANT
    ESPRIT COLLECTIF
    JEUNE
    CAUSES NOBLES
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. Décisions
    ILLUSTRATION
    ICÔNE : OISEAU
    TYPOGRAPHIE UNIQUE
    

    View Slide

24. Exploration
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. Illustrateurs :
    Recherche de collaborateurs
    

    View Slide

32. EE Storey
    

    View Slide

33. EE Storey
    

    View Slide

34. View Slide

35. View Slide

36. +
    

    View Slide

37. View Slide

38. View Slide

39. Wireframe
    

    View Slide

40. FOOTER NAVIGATION
    Logo
    List of all bands
    Charity drop-down
    Cart count + link to checkout
    Newsle er signup
    Main navigation:
    Home
    Catalog
    About
    Gallery
    Press
    Blog
    User profile:
    Login/Logout
    Welcome Firstname
    Account link
    Footer:
    Contact
    Shipping
    FAQ
    Vendor info
    Returns
    Privacy Policy
    Size Chart
    MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK)
    CART COUNTER
    + LINK TO CHECKOUT
    LIST OF ALL BANDS
    + CHARITY DROPDOWN
    LOGO
    NEWSLETTER
    PERSISTENT
    UI ELEMENTS
    HOME
    1. Branding headline/statement/tagline
    2. Product announcement (new shirt)
    3. About YBP / Mission (+ link to About)
    4. Full catalog (thumbnails + band names)
    5. Latest news (from Blog)
    6. Latest Press
    7. Promotion space
    8. Song player (+embed link)
    Callouts/Special bu ons:
    9. Theme Song Page
    10. Guitar Lessons
    11. Tweet Team
    12. Press
    13. Blog
    Phase 2:
    Twi er Feed
    Poll
    2. PRODUCT ANNOUNCEMENT
    4. FULL CATALOG (THUMBNAILS + BAND NAMES)
    3. ABOUT YBP / MISSION (+ LINK TO ABOUT) 11. TWEET TEAM CALLOUT
    10. GUITAR LESSONS CALLOUT
    7. PROMOTION SPACE (IF NEEDED)
    8. SONG PLAYER (+EMBED)
    + 9. LINK TO THEME SONG PAGE
    5.. LATEST NEWS
    + 13. LINK TO BLOG
    6. LATEST PRESS
    +12. LINK TO PRESS
    1. BRANDING HEADLINE/STATEMENT/TAGLINE
    FOOTER NAVIGATION
    Logo
    List of all bands
    Charity drop-down
    Cart count + link to checkout
    Newsle er signup
    Main navigation:
    Home
    Catalog
    About
    Gallery
    Press
    Blog
    User profile:
    Login/Logout
    Welcome Firstname
    Account link
    Footer:
    Contact
    Shipping
    FAQ
    Vendor info
    Returns
    Privacy Policy
    Size Chart
    MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK)
    CART COUNTER
    + LINK TO CHECKOUT
    LIST OF ALL BANDS
    + CHARITY DROPDOWN
    LOGO
    NEWSLETTER
    PERSISTENT
    UI ELEMENTS
    PHOTO GALLERY
    1. Page Header
    2. Page navigation
    3. Photo thumbnail area
    4. Photo thumbnail (w/user and product name)
    8. ‘Submit a photo’ bu on
    5. ‘Browse by product’ drop-down
    6. ‘Browse by user’ drop-down (?)
    7. Featured galleries (users) list
    9. Most popular photos (?)
    3. PHOTO THUMBNAIL AREA 5. BROWSE BY PRODUCT DROP-DOWN
    6. BROWSE BY USER DROP-DOWN
    7. FEATURED GALLERIES LIST
    9. MOST POPULAR PHOTOS
    1. PAGE HEADER
    1. PAGE NAVIGATION (PAGINATION) 8. SUBMIT A PHOTO BUTTON
    1. PAGE NAVIGATION (PAGINATION) - REPEAT 8. SUBMIT A PHOTO BUTTON - REPEAT
    4. PHOTO THUMBNAIL
    (W/ USER AND PRODUCT NAME)
    Logo
    List of all bands
    Charity drop-down
    Cart count + link to checkout
    Newsle er signup
    Main navigation:
    Home
    Catalog
    About
    Gallery
    Press
    Blog
    User profile:
    Login/Logout
    Welcome Firstname
    Account link
    Footer:
    Contact
    Shipping
    FAQ
    Vendor info
    Returns
    Privacy Policy
    Size Chart
    MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK)
    CART COUNTER
    + LINK TO CHECKOUT
    PERSISTENT
    UI ELEMENTS
    1. NAME OF PRODUCT
    2. IMAGES OF PRODUCT
    6. DESCRIPTION OF PRODUCT 14. PRODUCT SPECS (AA INFO)
    7. BAND INFO
    13. CHARITY INFO
    5. GALLERY THUMBNAILS (+ LINK TO GALLERY)
    8. SHARE BUTTON (SHARETHIS)
    16. UPLOAD PICTURE BUTTON
    9. SIZE SELECTOR
    15. SIZE CHART LINK
    11. OUT OF STOCK/SOLD OUT MESSAGE
    10. ADD TO CART BUTTON
    3. ZOOM BUTTON + 4. ADDITIONAL PHOTOS
    12. PREVIOUS /
    NEXT BUTTONS
    FOOTER NAVIGATION
    MAIN NAVIGATION USER PROFILE (LOGIN/ACCOUNT LINK)
    CART COUNTER
    + LINK TO CHECKOUT
    LIST OF ALL BANDS
    + CHARITY DROPDOWN
    LOGO
    NEWSLETTER
    USER PROFILE
    1. Page Header
    2. Greeting
    3. Profile Details (+edit) box
    - User avatar
    - Name
    - Email address
    - Address
    - Phone
    - Etc.
    4. Order history box
    5. Pending
    6. Shipped - track bu on
    7. Completed orders - re-order bu on
    8. Photo Gallery box
    9. Most recent photos (preview)
    10. See all your photos bu on
    11. Add photos
    12. Contact Customer service (form)
    1. PAGE HEADER
    + 2. GREETING
    3. PROFILE DETAILS (+ INLINE EDIT)
    4. ORDER HISTORY BOX
    12. CONTACT CUSTOMER SERVICE (FORM)
    8. PHOTO GALLERY
    9. MOST RECENT PHOTOS (PREVIEW)
    10. SEE ALL YOUR PHOTOS BUTTON
    5. PENDING ORDERS
    6. SHIPPED ORDERS (IN-PROGRESS)
    7. COMPLETED ORDERS
    11. ADD PHOTOS
    

    View Slide

41. Design !
    

    View Slide

42. Environnement concurrentiel
    DESIGN
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. Opportunités de
    différenciation
    DESIGN
    

    View Slide

59. 1. Style d’illustration
    DESIGN
    

    View Slide

60. 2. Look fait à la main
    DESIGN
    

    View Slide

61. 3. Contribution collective
    DESIGN
    

    View Slide

62. Approche visuelle
    DESIGN
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. Navigation
    DESIGN
    

    View Slide

68. View Slide

69. View Slide

70. Typographie
    DESIGN
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. Slogan
    DESIGN
    

    View Slide

79. DESIGN
    TSHIRTS + CHARITY (TO THE TUNE OF INDIE ROCK)
    

    View Slide

80. DESIGN
    

    View Slide

81. View Slide

82. Photographie
    DESIGN
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. Gallerie de photos
     DESIGN
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. Panier
     DESIGN
     

     View Slide

109. View Slide

110. Mon profil
     DESIGN
     

     View Slide

111. View Slide

112. Blogue
     DESIGN
     

     View Slide

113. View Slide

114. Infolere
     DESIGN
     

     View Slide

115. View Slide

116. View Slide

117. View Slide

118. Pages d’erreur (404)
     DESIGN
     

     View Slide

119. View Slide

120. Succès
     

     View Slide

121. + 34 000 visiteurs / mois
     

     View Slide

122. Chiffre d'affaires doublé
     

     View Slide

123. Augmentation de
     positionnement dans les
     moteurs de recherche
     

     View Slide

124. Maintien de crédibilité
     

     View Slide

125. Extension de l’image visuelle
     

     View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide