Flipkart, the online shopping giant, provides a great service. But the application could certainly be improved in terms of UX, Visual design and typography.

Objective

Identify type related problems and try to provide the best solution.

Fonts

Flipkart uses four different typefaces : Arial, Helvetica, Raleway and Museo. In most pages there’s only one typeface throughout the page’s body.

Raleway

Raleway font created by the foundry, The League of Moveable Type, was initially crafted as a single style thin display font. Two other typographers added several other styles to Raleway.

Raleway features both old style and lining numerals. Old style numerals integrate very well with text, they are better than lining numerals when used in passages which have no.s, dates or prices.

Lining and oldstyle numerals in Raleway

Lining numerals vs oldstyle numerals with Raleway font

With oldstyle numerals, the numbers in the paragraph shown above blend in very well, whereas in the case of lining numerals they are very prominent and disturbs the reader.

Flipkart uses oldstyle numerals in places where it’s inappropriate.

Lining Numerals in Flipkart

Most browsers do not support it yet but here’s the CSS to achieve it.

font-family:’raleway’;

font-variant-numeric: lining-nums;

-moz-font-feature-settings:”lnum” 1;

-moz-font-feature-settings:”lnum=1";

-ms-font-feature-settings:”lnum” 1;

-o-font-feature-settings:”lnum” 1;

-webkit-font-feature-settings:”lnum” 1;

font-feature-settings:”lnum” 1;

Raleway Bold

The Chrome render for Raleway Bold vs actual Raleway Bold. Browsers try to create a faux bold which sometimes mess up the type that results in a poor look. The font hasn’t been served to Flipkart’s webpage which is why the faux bold is being created.

Raleway bold vs faux bold

Museo

Museo is a good choice for display or text. It was initially created as a serif font but extended with a sans-serif companion. Now there are lot more styles in Museo. Flipkart uses Museo for their product pages.

On Flipkart’s application Museo doesn’t load at all, because the font doesn’t exist on their server. Instead, it just falls back to Helvetica.

Museo file not found

Visual and typographic hierarchy

Each of the product in the listing page has a maximum of 7 items in it, few of which are optional.

Anatomy of a product in the listing

The star marked items are there for each and every product in the listing.

With this hierarchy, the listing page looks asymmetrical and ugly because the price of the product, which is shown on top in the visual and typographic hierarchy, keeps shifting positions.

Flipkart’s product’s listing

This behaviour can be attributed to the optional items. Many times, the price of the items do not line up. Unlike in Fab, where the product names are always of a single line, product names in Flipkart vary. There is no definite solution to achieve this, unless all the names are curated or a character limit applied to the product names to make them fit into one line.

Product listing in Fab

Modified Hierarchy

If the hierarchy is modified to alter the placement of the price just after the product name, the listings will all line up. This leads to a pleasing look. In this scenario, the price line up depends only on the name of the product and not on multiple parameters.

It is best practice to group digits into doublets or triplets depending on the currency.

Emphasis can be provided to elements by changing colour, font style or size. EMI and discount information could use a bit of an emphasis.

The symbol next to ratings is not required. The hover dialog does not always open on the right. For e.g., in the last column, the dialog pops up towards the left.

Before

actual page

After

after making the changes

Different Listing Layout

different layout in Flipkart

The listing pages in clothing section of Flipkart follows a completely different style. The font used on this layout is Raleway and there is neither visual nor typographical hierarchy. The numbers use oldstyle numerals and there is a colour difference between product name, price and discount. The difference isn’t prominent because the font size is so small that it doesn’t make enough contrast.

The same problem of contrast arises because of the wrong choice of colours at the left filtering options.

Color contrast on the text

The numbers next to the discount indicates the quantity of products for which there is a discount. It is written in the colour #c9c9c9 which is barely visible. To maintain consistency across the application these numbers could also be enclosed in parenthesis.