Background
At Wine.com.br, we’d known for some time that the store’s mobile traffic had increased day after day, sitting roughly at 25% of the total traffic at the time. On the other hand the mobile e-commerce conversion rate was lagging behind of what was expected, well below the measured for customers coming from desktop or tablets.
The goal was to improve customer engagement with a more thoughtful design and blazing fast loading times.
The Process
With that prospect in mind I started to sketch some pages and built a rough but useful paper prototype which helped me get sense of the device.
Another cool thing I made was a couple of storyboards. At first they seemed a little silly — they featured some cartoonish star-shaped human figures — but after a while I realized they were excellent on bringing light to some of the context in which the mobile website could be used.
After some consideration I moved on to Axure RP to make some diagrams and draw the wireframes with a bit more of fidelity, perhaps adding some interactivity to make things swift and understandable for both developers and managers.
After some consideration I moved on to Axure RP to make some diagrams and draw the wireframes with a bit more of fidelity, perhaps adding some interactivity to make things swift and understandable for both developers and managers.
Diving into CSS and HTML
Fortunately, we were able to push some great improvements to our front-end workflow. To begin with, we ditched the monolithic, conventional way of doing CSS with a modular, component-based, BEM-like architecture that gave us more control over our style sheets, improving overall performance and maintainability.
.OffCanvas {
position: relative;
width: 100%;
overflow: hidden;
}
.OffCanvas-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 100%;
}The naming convention is heavily inspired by Nicolas Gallagher’s work with some minor additions. To glue everything together we choose LESS as our CSS preprocessor and Grunt as the task manager.
The process also included the creation of image sprites, icon fonts, touch icons, retina images and so on.
Results
The CSS work and development efforts to cut JavaScript footprint combined resulted in page load times twice as fast as the desktop version and a 25% increase in the e-commerce conversion rate over the previous months.
