Designing Success for Responsive Design

Early July last year I teamed up with to start on re designing their website. The subject of the first mail wrote : Design and UI Work for Quiklo. The first thought, rather hint I had in my mind was that as usual there would be a bunch of smart engineers in a cozy lean start up who would require some hand holding on how design works and how it can help developing a successful product.

As usual the briefs and requirements started arriving in long documents and here is when I proposed a lean process to help us bridge the gap and identify how user and business goals. Quiklo team was sitting in Bangalore (South India) and I am in New Delhi (North India) so a little process meant we worked in tandem towards same objectives.

Knowing Quiklo

We started with a document/questionnaire which I shared with the Quiklo team to help me know specifics wrt their own company, their product and how they see great products being build around and what excited them.

  • Brand positioning
  • User age groups & personas
  • Product offerings Key goals
  • Key competitors
  • What was working well with existing website
  • What would they want from a new website
  • Which brands they loved and why
Feel before you think
Don’t jump into planning as soon as you’ve sighted a goal. Learn to be still and listen. Pay attention to the nagging voice. The uneasy stomach. The barely felt longing. Your subject may have something to tell you .
Resist the temptation to impose a cookie-cutter solution on an intriguing problem, or a groundbreaking solution on an insignificant problem … READ MORE

I believe each client is different when they are looking at what inspires them and connect their own likes and dislikes. While key design principles lay intact there is always a differentiator each client is looking in terms of output and it could be design approach, content, typography and commonly the visual style. While we designers have our own unique styles it’s important to connect with what each product owner sees as an inspiring outcome.

Early discussions questionnaire

User Stories

Post early discussions we started to collaborate on user stories as most IA was to be similar to what the existing product had and there weren’t many changes to user journey. User stories helped us to identify key elements and parameters to be used on each module and a defining of end user goals at each step. It also helped me vocalise user goals and user voice in each discussion with the stakeholders as they were collaborating on this from user’s perspective, however raise a flag where necessary to bring in any business or any technical blockers but at the same time helped to identify and work towards them in near future as well.

User Stories for Phase 1
Stories are how we understand and shape the world
Stories help us understand who we are in the world. They represent our values and our mental models. We need to understand the stories people tell so we can craft our own stories and our own products.

I am usually a big fan of user stories as it always helps everyone involved in the discussion to have conversations from users perspective, their goals and rather have any personal biases. Keeps everyone afloat on the realisation that everyone is working towards same user objectives. Also I believe it’s more agile and transparent when comes to working in remote teams. Not that I am against lengthy PRD’s but in my experience I have seen user stories function more effectively across teams due to it’s nature of simplicity directness.

Wireframes and user flows

There weren’t many new user flows in the existing product to be changed except a few and we collaborated on discovering neat experience around it as well. These flows helped the tech team to start to prepare to build stuff at their end while we iterated on the design explorations.

User stories set us well for the wireframes exploration and start working towards iterations on IA of each module. This was a responsive project so we were always thinking mobile up from day 1 and have our content prioritisation's strategy mobile first.

Collection of wireframes across modules

We also started having conversations and identifying key breakpoints here based on existing data with the help of the technical team at Quiklo and putting it together with the primary personas we were very definitive of being mobile first. This helped us take and defend design decisions at all times when proposing solutions to the team.

Real data is truth
Shortcuts make design more efficient. Sometimes, they also make it worse.
Injecting Lorem Ipsum and other dummy data into design during the creation process sucks. Dummy data leads to dummy design.
As a designer, you must get your mitts on real data early in the creation cycle. Data will alter your design brain.
Great design surfaces Truth, and real data is Truth.


Finally in a couple of weeks we were ready to start on the visual aspect of the product. In our early conversations we were asked to go free on choosing any colour palette independent of the existing brand but we chose to not do so as we didn’t see great value in just visual aspect of the brand be changed via colour palette itself and stick to the existing brand ethos. A basic mood board process started where we explored early styles we had in mind while preparing a few options.

Here again, we put together the data we have received from the stakeholders early on from the questionnaire and build design language around it bringing it closer to the product requirements wrt to user demographics and product positioning.

Good design makes a product useful
A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasises the usefulness of a product whilst disregarding anything that could possibly detract from it.

We were designing for 3 break points predominately larger desktops, Smaller Desktops/Tablets and finally mobile. On each design we constantly iterated on all breakpoints to understand the complexities, prototype early on the more doubtful design patterns to go responsive, animations for wow factor, illustrations versus imagery and discuss with the team back. A lot of challenges went whether or not to chose an adaptive approaches where required to achieve our goals on all mediums. Here rapid prototyping helped us to arrive at more concrete design decisions. We always strived for being 100% true responsive(saving costs on dev end) which is tough at times but these hurdles where identified early on and have our content prioritisation being mobile first helped a lot.

Some final pieces from the entire design

It has been 2 months now post final phase and we have received some great numbers from the product team at Quiklo. Post release of 2nd phase we were super gratified with the final outcomes we got out of the project.

  • New user registrations increments - Increased by 30%
  • Check out success rate - Increased three fold from 10% to 30%
  • Average stay on website - Bounce rate dropped from 45% to 30%
  • Increments on search usage - Increased by over 80%
Clear Purpose: Well-Defined Goals
People enjoy products that are designed for the audience and guided by a defined purpose and goals.

It has been a great example of a wonderful start up like Quiklo hiring a remote consultant design team and placing their trust on design bets while ensuring designers got all the possible knowledge required from business stand point to give an outcome worth it.

Hope you enjoyed our journey here as much as we did going through it. A huge shout out to QUIKLO team for their constant support. Do feel free to post any feedback and follow us for more updates:

DRIBBBLE . INSTAGRAM or reach out on EMAIL for any new exciting project.