One of the most important projects I was involved with at Porto Seguro Faz was the redesign of their e-commerce website. Unfortunately some of the early sketches and wireframes are missing, hopefully, I will update this post with new material soon.
The goal of the redesign was to give costumers sufficient information about the offered services such as availability, price and any important small print leading to a correct purchase.
LandingService detailsCheckout
Early design proposal for the product page which featured some high-density information through the page. A brief description at the top highlighted the given service for quick reading. Content was grouped and formatted to include rich media and links for additional info
Fast-forward a couple of months, customer service interviews and research helped restructure and refine many of the content blocks of the page, moving down less important info and highlighting some of the most important ones.
Many of these changes went through a testing phase during which I setup A/B experiments to understand if the proposed changes would actually improve the product conversion rates.
Lastly, transactional emails were updated to better reflect the new visual design language, to prevent misinformation, recurrent customer services, and unneeded inquirers.
Email redesign showing all available information about the requested service order.
There were a handful of ideas, proposals, and experiments that didn’t see the light of the day, though. All in all, this a really good experience, particularly when some A/B experiments didn’t turn out the way the team expected.
My Role: UX/UI design, front-end development, CSS, HTML, and JavaScript.
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.
Admittedly, our mobile shopping experience was broken. I mean, it suffered big performance and usability issues because of our desktop website which didn’t support responsive layouts which required the user to pan and zoom to navigate whilst we had to support old browsers such as IE7/8, thus hurting page load times.
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.
Cardboard iPhone mockup and sheets of paper.
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.
A quirky storyboard depicting an use case for Wine’s mobile website.
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.
I’ve already used the software a couple of times by then and though it would be a no-brainer but the reality was that Axure seemed too complicated this time. I needed something with higher fidelity but still lightweight, which would allow me to mock pages with variable content, not just “Lorem ipsum” all over the place. Gosh, I hate Lorem ipsum!
So what I finally did was to build a live prototype using HTML, CSS and a handful of PHP and JavaScript functions to jumpstart the development, cutting off unnecessary Photoshop/Fireworks layout comps altogether. I worked closely with my colleague Hideki Katsumoto to pick the right colors, fonts, sizes and spacing for all page elements.
The project was well received by the stakeholders and was given the green light. From that on, we can easily reassess the pain points in the customer’s journey, tweaking and refining when necessary.
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.
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.