Image credits: Chumbak

(Re)Designing an iconic brand experience

Melvin John
Aug 18, 2017 · 9 min read

Chumbak is a Design Led Lifestyle Brand for products across Apparel, Home and Accessories. We retail over 100 categories across 20 stores pan India. We also retail through our web store, which has evolved into a highly interactive and fast growing online business with a heavy focus on building a powerful brand through engaging content and memorable buying experiences. With the rise of mobiles in India and increasing traffic on our mobile site, we decided it was high-time to develop a native mobile app to ensure every shopping experience is worth the customer’s time, money and effort. The hurdle for the Indian audience was that, customers were having a hard time downloading a single brand app on their phone. We had to motivate and push them hard if this was going to succeed. The vision was simple; provide customers of this iconic brand an omni-channel shopping experience.

Download the Chumbak Android App here

Step 1: Enhancing and Building the Vision

Chumbak Mobile App v1.0

The first step was to examine the then outdated native app that already existed, which had old design elements and a completely different design language which just did the basic function of exploring and browsing through our catalog and placing an order. Did it function and serve it’s purpose? Yes. But did it depict and portray our brand well enough and add to the omni-channel experience? No. So, we started to overhaul and revamp the entire experience from the ground up, which was daunting. There were a lot of unknowns, but we had to be comfortable taking risks. We had to fix on business, design and user goals.

Business Goals:

  • 3x increase in conversion
  • 100% increase in user session times
  • Decrease in cart abandonment

Design & User Goals:

  • Discoverability of new products and departments
  • Simplified browsing and checkout experience
  • Implement ease of use of app features to make it intuitive and faster

Step 2: Giving our customers what they needed

The main purpose of the app was to drive users into the product with as little hassle as possible. To do this we decided to minimise information on the app, giving the user a quick introduction with popping colours and very prominent calls to action. Our principle follows the premise of product as the Core Magnet (Chumbak). Since our products are designed with care, using them in marketing materials is an easy and obvious choice. We kind of strayed away a bit from the native Android and iOS experience and moved towards keeping it consistent with our mobile website to add to the omni-channel experience. Also because there was a lot of thought and effort made into the mobile web experience we’d gathered over the years and it worked well for us.

Bringing back the hamburger menu

There has been a lot of debate regarding the little three-lined button. This menu icon has a long and storied history that long predates mobile devices. Designers have used menu icons, in one form or another, since long before touchscreen smartphones gained dominance. While hiding your features off-screen behind a nondescript icon in the corner is usually considered a poor mobile design choice, it serves its purpose of condensing information, achieving a minimalist aesthetic, and keeping the app uncluttered.

Emphasizing Information, And Core Navigation

Whether it’s a navigation bar across the top, a product hierarchy hidden in a menu, or a list of the functions that your app performs on a landing page, this reliance on deliberate selection burdens users with discovery and choice. What to do? First, give them information — front and center. Most of the apps and sites we use lead with the key information, then put secondary functions off to the side. We tried to architect our solutions to the problems we face here by following the principle of designing from the center outward. Decide on a hierarchy of tasks, then stick to it. And make the user interface reflect the hierarchy.

Chumbak App’s hierarchy based on data, task likelihood and importance

Here at Chumbak, we design for actual devices and users. We don’t hold onto old assumptions or standard practices from other computing environments. We also try not to turn our app into something mobile friendly simply by changing its navigation menu into a bar. Instead, we re-architect them and design solutions that work for our users experiencing the unique user interfaces.

Shop Responsibly — The Home Page Experience

Crucial shopping elements and engaging customers interaction while pushing marketing content

One of our goals was to bring our catalog to our users face right off the bat. We had to put what the users wanted to see (offers, new products, departments) right upfront. While not necessarily removing functionality but neatly organising them in a way where the UI is clean and not cluttered and overwhelming. We also had to keep in mind the modular approach. As the app evolves, we can easily implement more capabilities. In retail apps, it’s quite common to pack too many features and too much information, this was no different at Chumbak. With this overload of features and capabilities came a sluggish, under-performing and overwhelming application. So it was time to cut down! 5 clicks to product page — gone! 4 step checkout — gone! Restructuring the navigation system, reducing the amount of ‘taps’ to a product, and allowing for a one-click checkout, allowed our apps to be faster in performance, more intuitive to use, and much more engaging.

Slicker, e-commerce friendly pages — The Catalaog/Department Page

Right information at the right time to keep choices simple

This was done keeping in mind the get rid of the “not so magnificent five clicks” to product page. We wanted to make sure our customer’s shopping experience is worth their time and effort both in our stores and in our digital experience. Whenever opening up the app, customers could find products they were looking for faster. No more scrolling through endless marketing content, we got right to the point of finding what the user was looking for. No more having to hunt for recommendations. No more endless taps to get to a gallery of products the user was searching for. We redesigned the catalog screen with the customer’s time and effort in mind.

Everything you need to know about what you’re buying — The Product Display Page

On-demand information has become more intuitive these days

People want to know what they’re getting themselves. Our job was to make it very clear, no matter how small their screen. Glorious product imagery, since our products are made with care, plays an important part. Small, pocket sized, concise information is put in place and additional information can be rendered if and only when a customer requests it. Our products have a lot of additional information whether it’s fabrics, product care, dimensions or FAQs. We’ve even put a small sized ‘model info’ for our apparel range so our customers get their sizes correct and how to confirm it using our well formatted size guides. We’ve placed out CTAs stuck to the bottom so it doesn’t hinder with the buying experience. One click checkout is also enabled using the BUY NOW button at the bottom adding to a more seamless and faster checkout flow.

Closing the Deal — Frictionless Checkout Flow

Designing a Seamless & Frictionless Checkout Experience is crucial

The major thing to keep in mind was to decrease cart and checkout abandonment. So we came up with a distraction free and frictionless flow, removing and restricting unwanted options that might divert the customer from completing his/her transaction. The motto was ‘less is more‘. The options were simple: select/confirm billing and shipping address, review discounts and final pricing, and finally place the order and receive confirmation. While limiting to these options, we allowed our customers to blaze right through the checkout experience. Money changing hands is serious business. It was better not to make a mess of the checkout process.

Feedback loops and Iteration design

When it comes to any design project, feedback is always important. This project was no different. Every functionality and feature required multiple versions, explorations, and trials. Every pixel coded had to earn its spot, but curiosity-driven science and exploring different real world concepts was always on the table. At times, we would run into various hurdles where the technology was limiting, or data showed otherwise, to meet our intended designs so we had to work through these previously unseen barriers, architect an alternate solution within these constraints. We worked as a close knit team that helped push each other further and harder.

Keep iterating and then iterate some more.

We built a completely separate ‘beta’ app to test out and validate our redesign concepts with real loyal customers. The response was helpful. Many of them provided us with valuable insights on how they perceived things from different angles. We are also implementing requests put forward and gifting them Chumbak goodies for their loyalty to the brand.

Step 3: Putting the fun in functionality

Little things mean a lot to us at Chumbak. Micro interactions have a huge impact when users interact with the app. Visual feedback has been taken into factor in a lot of places. A playful design gets users off to a quick start. We’ve built our on-boarding steps keeping this in mind. Why make something complicated when you can make it simple and joyful? The Chumbak app is all about making your shopping easier with us, and adding to the omni-channel experience.

Designing the user-flow sure is daunting

Tool of the trade

A longtime Photoshop user myself, I made the switch to Sketch a couple of months back (a little too late, yes *bad-poker-face*) and haven’t looked back. I love certain features of the program, such as the simple interface, the light-weight nature, and the infinite canvas, all of which makes life so much simpler. And what Sketch lacks, its plugins make up for. With Sketch’s tools, I was able to work through this project more smoothly, easily and quickly than I could have done using any other program. Sketch also introduced Sketch Cloud in their recent update (Sketch 46) which makes collaboration also easier (Earlier we used Craft Manager by Invision which also had prototyping capabilities). If I was to talk about Sketch’s features, I’d go on and on! So let’s reserve that for another day.

Stepping up the game

The need for personalisation and convenience are key reasons influencing brands to innovate with their products, strategies and marketing and distribution mix. There is a need for placing consumer convenience and experience at the center in an online and offline retail platform. Innovations should help shoppers decide how they want to shop, for what and where. They should also be given the convenience of their packages being delivered at home, in store or be able to pick it up and so on and so forth. Small and tiny steps are being taken to capitalise this omni-channel experience by Indian retailers. Chumbak is also paving it’s path towards enhancing customer experience to a whole new level. We are in the process of in-housing many of our tools that we use on a daily basis across and within departments, and are planning to open-source most of it. Read our love for open source here and why we are doing it. Drop us a mail if you are interested to contribute.

Update: The Chumbak Android app is up and running. Help us improve by giving us feedback, suggestions and inputs to app@chumbak.in.

Download the Chumbak Android App (Beta) here


This post was originally published on the Chumbak Engineering Blog

Melvin John

Written by

Designs often. Codes sometimes. Technology @Chumbak. Formerly co-founded @Codeyssus Labs. In love with simple designs and smart interactivity.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade