Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Get inspired by looks created by the community.

Slide 4

Slide 4 text

Discover thousands of brands and millions of products.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

67% 22% 11% Mobile Tablet Desktop

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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 *

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Simplicity. SEO. Conversion from status quo. Speed.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

OUR WORKFLOW The entire project took 4 people 6 weeks.

Slide 18

Slide 18 text

Two designers & two developers in the same room

Slide 19

Slide 19 text

Great designs evolve in collaboration. Kill the waterfall.

Slide 20

Slide 20 text

Work with code as early and as much as possible.

Slide 21

Slide 21 text

Handle the visual design upfront in a style guide.

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

GRACEFUL DEGRADATION Desktop Down PROGRESSIVE ENHANCEMENT Mobile Up

Slide 30

Slide 30 text

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