Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Smashing Magazine Relaunch Case Study - Vitaly Friedman

UX Salon
May 25, 2018

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!

UX Salon

May 25, 2018
Tweet

More Decks by UX Salon

Other Decks in Design

Transcript

  1. A Little Story

    Of A Big Bang
    Redesign
    Vitaly Friedman, Tel-Aviv

    May 5, 2018

    View full-size slide

  2. Vitaly Friedman,

    co-founder of SmashingMag

    View full-size slide

  3. 1 2
    3 4
    Personality Techniques
    Summary
    Case Study

    View full-size slide

  4. 1
    Personality

    View full-size slide

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

    — à la Mark Boulton

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Photo credit: Jen Simmons

    View full-size slide

  9. Photo credit: Jen Simmons

    View full-size slide

  10. “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 full-size slide

  11. “…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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. “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 full-size slide

  16. “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 full-size slide

  17. 1 2
    3 4
    Personality
    Summary
    Case Study
    Techniques

    View full-size slide

  18. Make Boring
    Interesting.

    View full-size slide

  19. Make Boring
    Interesting.

    View full-size slide

  20. 1 2
    3 4
    Personality
    Summary
    Case Study
    Techniques

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. “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 full-size slide

  24. From scratch.

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. This typeface.
    Elena

    View full-size slide

  29. ce.
    That typefa

    View full-size slide

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

    View full-size slide

  31. Connections.

    View full-size slide

  32. Connections.

    View full-size slide

  33. Finding the

    right angle.

    View full-size slide

  34. Finding the

    right angle.*
    (Literally.)
    *

    View full-size slide

  35. Storytelling.

    View full-size slide

  36. Offboarding UX.

    View full-size slide

  37. 1 2
    3 4
    Personality Process
    Summary
    eCommerce

    View full-size slide

  38. 1 2
    3 4
    Personality
    Summary
    Case Study
    Techniques

    View full-size slide

  39. Meow!

    @smashingmag

    View full-size slide