Going responsive. UX and Front-end code

What’s the big deal?

Before joining Quirky, shopping on the platform wasn’t easy. You had two options: visit Quirky in your web browser and pinch and zoom to check out, or download the Quirky app and shop from there. Both were problematic: pinching and zooming wasn’t ideal, and downloading an app just to shop was unnecessary. The solution? Go responsive.

Together with Ryan Scherf, my co-worker at the time, we took it upon ourselves to make responsive styles a reality. We finished the job in two weeks.

Here’s what we decided:

  • Native UI elements We opted to override our custom elements with native ones (e.g. select dropdowns) so that they would work smoothly on various devices.
  • Removing hover states Double tapping elements is cumbersome, so we exposed hover elements on elements like cards on smaller screens.
  • Off-canvas navigation Quirky’s navigation had lots of subsections, which we were able to account for in an off-canvas navigation.

All sections covered We made sure each section of the Quirky platform (Shop, Invent, and Influence) was fully functional on smaller screen sizes

The results are in

We launched the responsive styles on January 13, 2014. Three days later, sales on mobile devices comprised 34% of all transactions, the highest in Quirky’s history. This moved Black Friday’s 31.7% down to second.

Visit Quirky