Dittory

Scope

Year

Links

Online apparel shopping can become a tiresome experience because of the tens of thousands of choices. Buyers want more choices but when given those choices they fatigue and may even opt not to buy. We simply don’t want to get paralysed by choices. Attribute filters help narrow down the choices but it’s a demanding process, one that constantly requires user intervention.

How nice would it be if an app shows only the products that you would like, ones that would fit you and to sweeten the deal, shows products not only from a single store but from all of the major stores? That’s exactly what Dittory aims to do. It learns your taste from explicit choices you make while using the app and use this information to narrow down products. The founder of Dittory, Chaitanya approached me with this idea and I immediately agreed to work on it. My job was to design an app that understands users’ tastes, without getting in their way and shows products that fit their tastes.

Design Principles

Going along with the underlying theme of Dittory I had two major principles guiding my design choices.

The user should never be paralysed by choices.

Apparels are visual. So, make the exploration visual; every product listing and choices should emphasize visuals.

Discovery of products

There are two major components to Dittory: discovery and personalization. Both are heavily intertwined with each other. On starting the app a user lands on the live apparel feed, where products are shown based on his interests. Browsing the feed becomes all the more interesting because it allows for serendipitous discoveries of products closely matching users' interests. The feed is also how the app learns a user’s tastes day-to-day, when she 'likes' a product.

I kept the feed simple to give prominence to the products. Only two types of items appear in the feed and in a consistent style: products and offers/announcements. The products occupy half or full width and the offers cover the entire width. To make more space for the product photos I made them bleed to the edges. This also gives the app a modern, minimalistc feel. Only the bare minimum product information is shown, along with the like button.

While the feed is a more fun way to discover products, on some occasions a user may want to browse all products. So, I provided a quick way for them to disable personalisation, in the navigation drawer. I kept the apparel categores shallow so that it’ll be easy to navigate between them. Wherever there are more options, such as brands, we provided search functionality. Once a user clicks on a product thumbnail he’s taken to the product details page where he can explore similar products.

Browse apparelsProduct listing - single column

Landing screenBrowse by brand

There are the usual filter/sort options only here all those options are always turned on by default, according to a user’s personalization preferences. Of course, a user can always change the options while browsing the products.

One of the important differentiators of Dittory is the ability to filter products based on thousands of specific shades of colors. While some users may prefer this level of granularity most of them would like to select few basic colors and see products closer to those colors. I provided a basic color picker for these users and an advanced color picker for those who want more control. In the advanced color picker a user can select one of the basic hues and then select the shades pertaining to that hue.

FilterColor picker - basic

Filter with searchColor picker - advanced

Product details

Product reviewsBagCheckout

Personalization

Personalization is at the heart of Dittory. The more a user personalizes the more accurate the products would match her tastes. Personalizing is still work and users are averse to anything that resembles work. So, I had to find ways to encourage them to personalize.

Dittory learns users tastes in two ways: The first is when a user adds items to wishlist. Liking a product is one of the natural actions of a user and so I only had to place a like button to get them to do it. The second way is to make a user proactively enter personalization information under settings. It includes users’ body measurements, favorite colors, style, brands, etc. We have to constantly prompt them to personalize and do it as non-intrusively as possible.

Personalization question with multiple answersPersonalization prompt

We use 4 ways to prompt users to personalize:

By showing an overall personalization score wherever possible. I showed it in the launch screen where it’ll really catch the eye of the users as they have nothing to do but look at the screen while waiting for the app to load; and in the navigation drawer. I also showed the percentage completion of individual categories in their corresponding settings screens.

Messages interspersed in the feed and product listing.

Toasts (messages that appears from the bottom of the screen and disappears after a timeout)

Pop-up dialogs: This is an intrusive method and we use it less often. We had to resort to it because personalization is the very essence of the app and has the biggest impact on the users’ experience; if a user didn’t personalize at all he can’t enjoy the core benefits of the app—in many ways, design is about finding a good balance between opposing interests.

PersonalizePersonalize - style

Personalize - profilePersonalize - categories

Onboarding

Signing up to try out an app is a barrier between the users and the app. Usually, it’s better to allow them to explore the app without signing up and ask them to sign up only when it’s indispensible for the working of the particular feature the user is trying out. Here personalization being the core of the app experience we had to ask users to sign up upfront and also answer at least a few basic personalization questions. If the users signs up using facebook we access the information from facebook and they can move on without setting up personalization.

Launch screenWalkthroughSign upPersonalizationSign up with email

Visual design

To give prominence to the products in the product lisitings I used a soft color scheme throughout the app but without compromising readability. The app being in the apparel space I wanted the products to add color to the app. So, I used a white–grey palette with colors limitied to indicate selection (check marks and radio buttons) and notifications (badges, error message, etc.).

The team already had a logo in place when I went onboard. The logo consisting of a set of colorful polygons that forms the shape of a butterfly suits the nature of the app very well. However the colors looked limited and didn’t depict the colorful nature of Indian apparels very well. So, I reworked the colors and we finally settled with the existing one. The colors are arranged according to the hue values, just like a rainbow, which makes the logo look less jarring and more pleasant. It has ​more depth compared to the ​​flattish original; some ​shades are lighter and some are darker and they are evenly arranged, which makes the logo a little more interesting.

Got something to discuss?

Every so often you come across a designer that exceeds your expectations in every way. Rakesh is one of those guys. He communicates superbly, has a clear thought process and works promptly and efficiently. Most often he’s able to take what you have a vague idea about and turn it into a finished product with flair and polish. I really enjoyed working with him and will recommend his service to anyone who needs great design.