DIGIT Design System Approach

The Objectives

Design principles define the way visual elements are used so that users find it easy to interpret, navigate, and use the application interface. User requirements translate the key dynamics that shape the principles of UI design. It provides answers to key questions like -

1. How can I make it easier for users to perform the actions?

2. How do I avoid frustrating users with irrelevant information?

3. How do I ensure the user experience is smooth and pleasant?

Effective design is one where the UI is invisible. Users are not distracted by irrelevant objects or information.

DIGIT Design Objective

"Keep it Simple" is the central theme guiding the design principles of the DIGIT platform. Simplicity that helps users navigate through the screens without any doubts or hassle.

DIGIT Design Principles

• User-centric

  Does your application design meet the expectations of your target users? A basic question defining UI design standards. If we do not understand our user needs, our design will never carve a pleasant user experience. And, this understanding should not be based on mere assumptions. Our design standards apply established research data and best practice tenets to provide a seamless user experience.

• Reusable

  It is all about creating a meaningful, engaging, and satisfying user experience. Each component is reusable across modules, which makes it easier to replicate. DIGIT design usability standards outline the requirements of digital service portal users.

• Accessible

  Accessibility reflects how easy it is for different types of users to use your application. Is the design inclusive enough to accommodate non-tech-savvy users or users with certain disabilities? Answers to these questions can promote your application adoption statistics. The DIGIT design system applies the well-researched W3C standards to its interface design principles. Some of the basic accessibility standards applied in DIGIT include -

  • Grouped sections

    Screen content is grouped in a way that ensures the linkages between sections are clear to users. The platform UI applies distinct heading styles and predictive text labels for clarity.

  • Meaningful labels

    Short descriptive labels are used across forms and action fields to assist users and help them understand the purpose of the field.

  • Visual cues

    The text colour on the foreground applies an adequate contrast ratio to the background colour to improve readability.

  • Interaction cues

    The interactive elements on the screen make use of visible cues to identify the existing link states and indicate required user action. For instance, a link is highlighted in a different colour on mouseover.

  • Navigation cues

    Application navigation links follow a consistent style and naming convention on DIGIT screens. Clear headings and the use of breadcrumbs make sure users can switch screens easily.

  • Help cues

    Use of question mark symbols adjacent to required fields routes the users to the contextual help text that opens as a small pop-up window.

• Mobile-First

  DIGIT design cues apply the mobile-first approach to ensure increased user participation and adoption by all stakeholders. The following design principles define our focus on delivering a seamless UI experience to users across devices.

  • Intuitive navigation

    The interface design follows the rules of simplicity, consistency and clarity in the use of text, labels and interactive elements. The use of visual cards and cues makes it easier for users to find their way around.

  • Content easy

    The application interface uses short, simple and easy-to-understand content labels to avoid visual clutter. Important bits of text are highlighted and appear on top to ensure users do not miss out on relevant details.

  • Single-input screens

    Each screen fetches or provides a single input detail only. The page header provides a clear indication of the input or information type displayed on that page. This ensures users know what is expected action on the specific screen.

  • Responsive layouts

    The screen layouts follow the responsive design approach to ensure an optimised experience across devices and gadgets used to access applications.

• Localisation

  Our interface is tuned to match the localised requirements of our users. The app screens, information, headers, notifications, and tracking details can be easily integrated with local language needs. Below are the key design principles that support our localisation needs.

  • Dynamic layouts

    The DIGIT application screens use dynamic layouts that ensure optimised space for the display of content in local languages.

  • Localized fonts

    The interface supports specific fonts that ensure seamless visibility of content in various languages.

• Data-Driven Design

  Our design principles are based on user experience data and research insights. Service prototypes go through stages of testing. Analytical insights help us identify user pain points and reimagine the interface design for improved adoption. This iterative process highlights the limitations of existing interface designs.

• Low Bandwidth Scenarios

  Finally, we understand the frustration of slow-loading apps. With more users accessing applications on their mobile phones on the move, bandwidth issues assume a key priority in defining usability and engagement. Our design principles cater to low bandwidth users that ensure a seamless user experience even when the internet speed is not so good. Design practices like optimized images and the addition of lite versions of apps minimize response times.

• Open Source

  Free to adapt, apply, and reuse. We believe in sharing best practices with the community to promote clean and effective application designs.