Vaibhav Kanwal

designer & developer


Saying NO to Responsive Design & finding your design mojo

It's early 2014 and we've been busy in making your online shopping experience easier, quicker & more pleasant. There's so much exciting stuff happening at Tradus that we'd love to share with you.

To make it shopper friendly & to appeal to our growing number of mobile users who love to shop from their smartphones, we launched a new mobile web app. We went a step further and redesigned

It is fresh, clean & cheerful which makes your experience more enjoyable.

In this preliminary post, we'll share the process behind the whole redesign saga. The author insisted we break this post into different articles for the sake of brevity. We decided it was a great idea to do series on our prototyping & designing workflow.

Understanding different Mediums

On designing for desktops & devices of the post-PC generation

The sketches started out on paper and eventually made their way to a wireframing tool like Balsamiq Mockups. Our focus from the beginning was towards a mobile led design & development. We discussed, designed and worked towards integration of our building blocks yet something was amiss. It just did not feel right. We were spending too much time iterating over designs which were thought to have been completed.

We soon realised that there was nothing wrong with the designs. We were trying to solve the wrong problem.

We learned that the amount of information required for the buyer to make an informed decision was essentially the same on both Desktop & mobile devices. However, it made little sense to squeeze in the all the content structures to fit into the small mobile estate as the expectations for a person surfing from the comfort of his Home/Office Desktop are vastly different than those surfing on a tablet in a coffee shop.

  • Desktops allow the luxury of having advertisements, promotional offers & other useful information related to the product while the same may look unappealing and distracting on a mobile device
  • There exists a large majority of potential buyers running lower end mobile devices which must not be left out in the process of building & optimizing for higher end device akin to iPhone, iPads & Galaxy S4 etc.
  • On one end of the spectrum you have these amazing touch controlled, fast, responsive devices with beautifully large screens to allow seamless interaction between the user and the system, while on the other end there are small, under-powered, gesture-less feature phones which must make their way to a successful transaction.
  • The ubiquitous nature of the web makes it affordable to create a pleasant experience for a regular user & an immersive rewarding one for an evolved mobile afficianado

Starting with Responsive Design

Stumbling on real-world problems

Our initial layouts worked on different mobile screens and looked beautiful. It was interesting to see how the different components communicated with the ecosystem of the medium.

We decided to use 4 major breakpoints :

  1. 320px
  2. 480px
  3. 768px
  4. 1024px

Our designs thus worked for a majority of phones that had support for Media Queries. We had been able to create a functional, well designed and efficient flow from the Landing Page/Home Screen to the listing pages leading to successful conversion.

It did not take much time to see the shortcomings of this approach. E-commerce allows opportunities for cross-selling, promotions and comparisons between products & different sellers - which are not effectively utilized on a small screen.

In order to take advantage of increasing screen estate, we had to find other ways of presenting this information. Responsive suddenly felt restrictive and we were running into trade-offs between performance & marketing potential.

The opportunity to cross-sell different products based on past purchases, proximity to sellers or popular choices which is easy to do on a large screen suddenly became challenging. Trying to shrink-fit the components made for larger views (think banners) led to bad design decisions.

We had to come up with a better way to organise our catalogue which was not held back by screen resolutions but instead offered value to the user.

Moving ahead with RESS

Responsive Design with Server Side Components

We dropped the fully responsive approach in favour of RESS and made changes necessary to accommodate our mobile users and offer a full experience to desktop counterparts. Using this new approach we are able to fully embrace m-commerce without compromising usability on small screen devices.

With this new found wisdom, we were able to march ahead and redesign search list view, product view & mobile checkout flow which focused on single hand operation on a portable mobile device while our desktop experiences do not shy away from using the extra pixels available to them.

We extensively used Twig templates to separate out mobile & desktop specific markup components. We also benefited from Sass by making our stylesheets more modular.

In the coming posts, we will share our prototyping process. Check out my Prototyping Starterkit.

Runs on Jekyll with help from Liquid and SCSS.
Handyman Git helps secure all HTML & CSS in place with friend Markdown.