Kendo UI Web Components

 

Progress

 

Date

 

Tools

Adobe XD, Figma, Aha!

 

Responsibilities

  • Competitor analysis & research;
  • Back-to-back design implementation consultations with engineers;
  • Building component structure in compliance with the Telerik Kendo UI Design System;
  • Have an active part in building the Telerik Kendo UI Design System;
  • Optimizing processes within our day-to-day tasks;
  • Collaborate & consult with designers, engineers, PMs.
  • Implementation in 3 separate themes (Kendo UI Default, Bootstrap & Material);
  • Onboarding a new team member onto the design ecosystem;
  • Create prototypes and wireframes;

 

OrgChart

Research and design:

  • Using Card Component as a basis;
  • Drill Down feature for nesting cards;
  • Color coding for organization departments;
  • Drill Down functionality helps the user narrow down to a specific card in order to reduce clutter and concentrate on a specific item/s;
  • Drag & Drop – moving items across the chart & reorganizing the scheme according to the change. Visual hints are also implemented as a more user-friendly approach;
  • Editing functionality;

 

ColorPicker

Design revision, introducing features:

  • Complete interaction states
  • Option to revert to the original color and to clear the current color.
  • Contrast ratio compatibility (accessibility compliance)
  • Tabular switch between modes

Gantt

Planned vs. Actual feature implementation within the original design:

  • Introduced functionality for tasks that are done early, delayed, and prolonged tasks;
  • Planned task span indicator;
  • Milestone update for early & delayed tasks;
  • Accessibility compliance.

Gauges

Design revision:

  • Introducing more compliant colors;
  • More variants for displaying data across all types of Gauges;
  • Building the component basis.

FloatingActionButton

Research + Design

  • Sizing variations;
  • Interaction states;
  • Sub-items;

ExpansionPanel

Research + Design

  • Title + Subtitle container;
  • Expanded state;
  • Interaction states.

PopOver

Research and design:

  • Using Card Component as a base;
  • Orientation instances.