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 Tradus.com.
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 :
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.