The Smashing Magazine Relaunch Case Study - Vitaly Friedman

You’ve been there: big bang redesigns are usually a very, very bad idea. Redesigning and rebuilding an existing website from scratch is risky and unpredictable, and in many cases the level of complexity is highly underestimated. In mid-2016, Smashing Magazine decided to make a big switch from the existing setup to an entirely new design, focusing on microinteraction and copywriting.

In this talk, Vitaly Friedman, editor-in-chief and co-founder of Smashing Magazine, will share some of the insights into Smashing Magazine’s Relaunch in 2017 — with decisions made, failures, successes, lessons learned and shady’n’dirty techniques used along the way. Among other things, you’ll learn how Smashing Magazine’s new design came about, how we started, and all the stumbling blocks we discovered (and had to solve) along the way. Beware: the session will contain at least 27 illustrations of cats!

Transcript

1. View Slide

2. A Little Story

   Of A Big Bang
   Redesign
   Vitaly Friedman, Tel-Aviv

   May 5, 2018
   

   View Slide

3. Vitaly Friedman,

   co-founder of SmashingMag
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. 1 2
   3 4
   Personality Techniques
   Summary
   Case Study
   

   View Slide

9. 1
   Personality
   

   View Slide

10. Humanity.
    

    View Slide

11. Humanity.
    

    View Slide

12. “The design process is weird and
    complicated because it involves
    people and systems, which often
    are weird and complicated.
    

    — à la Mark Boulton
    

    View Slide

13. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
    

    View Slide

14. Junior Designers vs. Senior Designers, https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. Photo credit: Jen Simmons
    

    View Slide

24. View Slide

25. Photo credit: Jen Simmons
    

    View Slide

26. “If we want to stand out — to outperform
    our competitors — we need to delight
    customers with a remarkable design and
    a unique, charming personality. Be slow
    and mindful. With an unprecedented
    attention to detail…
    

    — à la Mogens Møller
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. “…We should underpromise, overdeliver.
    Capture attention and guide it skillfully.
    On the web today, it all boils down to one
    single thing: outstanding storytelling
    through great art direction.
    

    — à la Mogens Møller
    

    View Slide

31. Arthur Rackham, “Goldilocks and the three bears”
    

    View Slide

32. Arthur Rackham, “Goldilocks and the three bears”
    

    View Slide

33. Arthur Rackham, “Goldilocks and the three bears”
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. “We should underpromise, overdeliver.
    Capture attention and guide it skillfully.
    On the web today, it all boils down to one
    single thing: outstanding storytelling
    through great art direction.
    

    — à la Mogens Møller
    

    View Slide

44. “We should underpromise, overdeliver.
    Capture attention and guide it skillfully.
    On the web today, it all boils down to one
    single thing: outstanding storytelling
    through great art direction.
    

    — à la Mogens Møller
    

    View Slide

45. 1 2
    3 4
    Personality
    Summary
    Case Study
    Techniques
    

    View Slide

46. 2
    Techniques
    

    View Slide

47. Friction.
    

    View Slide

48. Friction.
    

    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. View Slide

59. View Slide

60. View Slide

61. View Slide

62. Make Boring
    Interesting.
    

    View Slide

63. Make Boring
    Interesting.
    

    View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. Focus.
    

    View Slide

75. Focus.
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. View Slide

85. Signature.
    

    View Slide

86. Signature.
    

    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. View Slide

103. View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. View Slide

110. View Slide

111. 1 2
     3 4
     Personality
     Summary
     Case Study
     Techniques
     

     View Slide

112. 3
     Case Study
     

     View Slide

113. Problem.
     

     View Slide

114. Ad-blockers.*
     Please absolutely use one if you can!
     *
     Text
     

     View Slide

115. Advertising.
     50% revenue decline yearly.
     01
     02 66% users blocking ads.
     Membership.
     

     View Slide

116. View Slide

117. “We needed to create a tool for
     the magazine, a CMS for 2500
     articles, a comments engine for
     200,000 comments, an
     eCommerce platform for
     purchases, a subscription
     service, a job board, and a
     membership auth/login.
     

     View Slide

118. From scratch.
     

     View Slide

119. Team.
     Daniel Mall
     Design
     Front-End Sara Soueidan
     Andrew Clarke
     Exploration
     Front-End Ilya Pukhalski
     IA, UX, Type Marko Dugonjic
     (Cat) Illustrator Ricardo Gimenes
     

     View Slide

120. Team.
     Daniel Mall
     Design
     Front-End Sara Soueidan
     Andrew Clarke
     Exploration
     Front-End Ilya Pukhalski
     IA, UX, Type Marko Dugonjic
     (Cat) Illustrator Ricardo Gimenes
     

     View Slide

121. Back-End Mathias Billmann
     Marketing Joe Leech, Paul Boag
     Animation Sarah Drasner
     Accessibility Heydon Pickering
     Daniel Mall
     Design
     Front-End Sara Soueidan
     Andrew Clarke
     Exploration
     Front-End Ilya Pukhalski
     IA, Usability Marko Dugonjic
     (Cat) Illustrator Ricardo Gimenes
     

     View Slide

122. View Slide

123. Text First.
     

     View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. This typeface.
     Elena
     

     View Slide

134. ce.
     That typefa
     

     View Slide

135. a
     Mija
     

     View Slide

136. View Slide

137. View Slide

138. View Slide

139. View Slide

140. View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. Components.
     

     View Slide

149. Patty Toland, FilamentGroup, “Design Consistency for RWD”, https://t.co/Tb0q1gMwQS
     

     View Slide

150. View Slide

151. View Slide

152. View Slide

153. View Slide

154. View Slide

155. System.
     

     View Slide

156. View Slide

157. View Slide

158. View Slide

159. View Slide

160. View Slide

161. View Slide

162. View Slide

163. View Slide

164. View Slide

165. View Slide

166. View Slide

167. View Slide

168. View Slide

169. View Slide

170. View Slide

171. View Slide

172. View Slide

173. View Slide

174. View Slide

175. View Slide

176. View Slide

177. View Slide

178. View Slide

179. View Slide

180. View Slide

181. View Slide

182. View Slide

183. View Slide

184. View Slide

185. View Slide

186. View Slide

187. View Slide

188. View Slide

189. View Slide

190. Connections.
     

     View Slide

191. Connections.
     

     View Slide

192. Finding the

     right angle.
     

     View Slide

193. Finding the

     right angle.*
     (Literally.)
     *
     

     View Slide

194. View Slide

195. View Slide

196. View Slide

197. View Slide

198. View Slide

199. View Slide

200. View Slide

201. View Slide

202. View Slide

203. View Slide

204. View Slide

205. View Slide

206. View Slide

207. View Slide

208. View Slide

209. View Slide

210. View Slide

211. View Slide

212. View Slide

213. View Slide

214. View Slide

215. View Slide

216. View Slide

217. View Slide

218. View Slide

219. View Slide

220. View Slide

221. View Slide

222. View Slide

223. View Slide

224. Storytelling.
     

     View Slide

225. View Slide

226. View Slide

227. View Slide

228. View Slide

229. View Slide

230. View Slide

231. View Slide

232. View Slide

233. View Slide

234. View Slide

235. View Slide

236. View Slide

237. View Slide

238. View Slide

239. View Slide

240. Offboarding UX.
     

     View Slide

241. View Slide

242. View Slide

243. View Slide

244. View Slide

245. View Slide

246. View Slide

247. View Slide

248. View Slide

249. View Slide

250. Respect.
     

     View Slide

251. View Slide

252. View Slide

253. Respect.
     

     View Slide

254. View Slide

255. View Slide

256. View Slide

257. View Slide

258. View Slide

259. View Slide

260. View Slide

261. View Slide

262. View Slide

263. View Slide

264. View Slide

265. View Slide

266. View Slide

267. View Slide

268. View Slide

269. View Slide

270. View Slide

271. View Slide

272. 1 2
     3 4
     Personality Process
     Summary
     eCommerce
     

     View Slide

273. 1 2
     3 4
     Personality
     Summary
     Case Study
     Techniques
     

     View Slide

274. 4
     Summary
     

     View Slide

275. View Slide

276. View Slide

277. View Slide

278. View Slide

279. Meow!

     @smashingmag
     

     View Slide

280. View Slide