$30 off During Our Annual Pro Sale. View Details »

How STYLIGHT went responsive

nonsquared
October 10, 2013

How STYLIGHT went responsive

We don’t decide how people access our websites. They do. And increasingly it’s on mobile devices and tablets.

nonsquared

October 10, 2013
Tweet

Other Decks in Technology

Transcript

  1. FINGER FRIENDLY
    How STYLIGHT went responsive (in 6 weeks).
    [email protected] · @stylight_eng

    View Slide

  2. We want to build the best place to discover fashion everyday.

    View Slide

  3. Get inspired by looks created by the community.

    View Slide

  4. Discover thousands of brands and millions of products.

    View Slide

  5. We don’t decide how people access our websites. They do.
    And increasingly it’s on mobile devices and tablets.
    SUCKED
    OUR MOBILE EXPERIENCE

    View Slide

  6. 67%
    22%
    11%
    Mobile Tablet Desktop

    View Slide

  7. How can we offer a compelling experience
    on all of these devices?
    SO MANY DEVICES, SO MANY SIZES

    View Slide

  8. ONE SITE TO
    RULE THEM ALL
    DEVICE SPECIFIC
    EXPERIENCES
    Responsive Mobile sites

    View Slide

  9. ONE SITE TO
    RULE THEM ALL
    DEVICE SPECIFIC
    EXPERIENCES
    Responsive Mobile sites
    * Valid alternative, responsive design isn’t the
    singular best solution for all circumstances
    *

    View Slide

  10. WHY RESPONSIVE?
    Four reasons why we have decided to move on with
    a responsive design for STYLIGHT.

    View Slide

  11. Simplicity.
    SEO.
    Conversion from status quo.
    Speed.

    View Slide

  12. Simplicity. No need for a separate mobile presence, allows us to have a
    single site at a single URL with a single code base and set of files to be used.
    SEO.
    Conversion from status quo.
    Speed.

    View Slide

  13. Simplicity. No need for a separate mobile presence, allows us to have a
    single site at a single URL with a single code base and set of files to be used.
    SEO. Google officially recommended the responsive design. This is what we
    want – the leading search engine telling us how to handle your mobile traffic.
    Conversion from status quo.
    Speed.

    View Slide

  14. Simplicity. No need for a separate mobile presence, allows us to have a
    single site at a single URL with a single code base and set of files to be used.
    SEO. Google officially recommended the responsive design. This is what we
    want – the leading search engine telling us how to handle your mobile traffic.
    Conversion from status quo. We converted our existing desktop
    website into a responsive one. There was no need to completely rebuild it.
    Speed.

    View Slide

  15. Simplicity. No need for a separate mobile presence, allows us to have a
    single site at a single URL with a single code base and set of files to be used.
    SEO. Google officially recommended the responsive design. This is what we
    want – the leading search engine telling us how to handle your mobile traffic.
    Conversion from status quo. We converted our existing desktop
    website into a responsive one. There was no need to completely rebuild it.
    Speed.
    * not really mobile first.

    View Slide

  16. Simplicity. No need for a separate mobile presence, allows us to have a
    single site at a single URL with a single code base and set of files to be used.
    SEO. Google officially recommended the responsive design. This is what we
    want – the leading search engine telling us how to handle your mobile traffic.
    Conversion from status quo. We converted our existing desktop
    website into a responsive one. There was no need to completely rebuild it.
    Speed. If designed and developed correctly, a responsive website will improve
    the overall performance, because it is made for both desktops & mobile devices.
    * not really mobile first.
    Source: http://blog.evolvecreativegroup.com/post/2013/07/09/Responsive-Web-Design-vs-Mobile-Site.aspx

    View Slide

  17. OUR WORKFLOW
    The entire project took 4 people 6 weeks.

    View Slide

  18. Two designers & two developers in the same room

    View Slide

  19. Great designs evolve in collaboration. Kill the waterfall.

    View Slide

  20. Work with code as early and as much as possible.

    View Slide

  21. Handle the visual design upfront in a style guide.

    View Slide

  22. Do not document, do not deliver photoshop files. Prototype it.

    View Slide

  23. Do not document, do not deliver photoshop files. Prototype it.

    View Slide

  24. Do not document, do not deliver photoshop files. Prototype it.

    View Slide

  25. HOW IT TURNED OUT
    Improved KPIs on all devices, but still way to go
    in our mobile experience.

    View Slide

  26. Before Responsive After Responsive
    Goal completion rate mobile and tablet traffic
    +24%

    View Slide

  27. Before Responsive After Responsive
    Average visit duration mobile and tablet traffic
    +36%

    View Slide

  28. View Slide

  29. GRACEFUL DEGRADATION
    Desktop Down
    PROGRESSIVE ENHANCEMENT
    Mobile Up

    View Slide

  30. GIVE IT A TRY!
    Send us your feedback & get in touch with us.
    [email protected] · @stylight_eng

    View Slide