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.
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.
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.
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.
Different states & Measurements
How to use the components in real products ? (use cases)
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.
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
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