Design Standards for Delhivery

The website to present the design guidelines for Delhivery products. 

Why Standardise the design ?

Every company with a designed identity or brand mark needs a design standard. It serves as a reference for your in-house team, or for any external designers or agencies we work with. 

 

A style guide helps to:

  • Avoid distortion and deviation from the brand design

  • Define the tone and essence of the company

  • Make the products consistent

  • Efficiently consume the design by developers

  • Avoid usability confusions by setting common behaviour patters across the products

 

These benefits increase user’s sense of mastery over the product, increase their ability to get things done with ease and increase their overall satisfaction with the experience.

The Approach
Few Concerns Identified

From the multiple catchups that I had with the developers, we had identified few of their concerns and decided to solve them through design. Some of those concerns are:

  • Direct provision to copy the html codes for the components from the website. 

  • Need to know the different use cases for the components, as few of the products have already used components incorrectly.

  • Standardise the icons used in the products and have a central repository from were the fontfile can be downloaded

  • Refine the CSS file used for the style sheet. 

  • Components should have angular compatibility

  • Need access to all the versions of the webstandards released.

IA Defined
The Principle
How the site works ?

The Web / Mobile developers can direct themselves to their respective platform from the landing page of the website.

The landing page for the Web-standard consist of a banner which shows the latest version details and the downloadable assets like sticker sheet(for designers) & custom CSS file(for developers) in the first fold as shown below.

The banner, on scroll will become the  sleek header (with proper transition)for the website with the content tabs placed in the centre.

Components

The First Fold of the page contains the representation of the UI component where the user can click and see the interaction behaviour along with the provision to copy the html. 

The developers can copy the html for the respective UI component directly from the page by clicking on the copy code icon. Also if required can view the html by maximising the html window with the help of the icon provided.

 

As the user scrolls down, more details regarding the UI component will be exposed.

Like:

Different states & Measurements

How to use the components in real products ? (use cases)

Icon Library

The entire package of icons used across all the products can be viewed here and the fontfile containing all the icons can be downloaded directly from the page. Provision for searching the required icon is also provided in the page. 

Templates

This tab will contain all predefined and generic page layouts like Login page, Forgot password, signup(if any), Basic layout with header and side nav prefixed etc.

Will be updating soon..

Before and After
Listing page
Dashboard
After effect of the new design standard
  • Improvement in colour contrast

  • Better readability - Bigger & Bolder font

  • Clean & minimal - More breathing space 

  • Better brand reflection

  • Removal of redundant elements​​

  • Productivity - Direct Ctrl+C & Ctrl+V of htmls, Reduction in dev time for basic page layouts, direct AngularJS codes, minimising the learning curve for new joinees, Modularity, sharing of code using package managers ensuring better version control

  • Error Reduction - Information on use cases for components, less effort on the code review 

  • Reduction in application size - standardising icons to font file. Refining CSS/SASS

Copyright © AnulalVS 2015, Mumbai,Maharashtra, India.