Fisheye added a lot of important features in the previous iterations, and there were a lot of problems with different styles of the same components in the design and front-end, or different interaction effects with the same style, and the front-end style of the system lacked consistency. The reason is that the design and development process lacks unified planning for components and styles, if not solved, new styles may be introduced in subsequent product iterations, and the inconsistencies may accumulate more and more, and the design styles and front-end code will become more and more redundant.

Therefore, while redesigning Fisheye Dashboard page by page, the design team started to organize the UI Kit, including the specification of fonts, colors and logos, and standardized the design of common front-end components, including drop-down menus, forms, pop-ups, notifications, breadcrumbs, tables and so on. We organized the position of each component used in the system and all the changes of the components into a unified document. The front-end colleagues will write out the organized component styles through code, and gradually replace the existing component styles in the system, so that all components in the system have a uniform style and interaction effects.

Role: UI component design, UI Kit organization

Contributor: paula

UI Kit - Style - Typography

UI Kit - Style - Typography

UI Kit - Dashboard Cards

UI Kit - Dashboard Cards

UI Kit - Dropdown

UI Kit - Dropdown

UI Kit - Dropdown

UI Kit - Dropdown

UI Kit - Dropdown

UI Kit - Dropdown

UI Kit - Forms

UI Kit - Forms

UI Kit - Modal

UI Kit - Modal

UI Kit - Notification

UI Kit - Notification

UI Kit - Breadcrumb

UI Kit - Breadcrumb

UI Kit - Tabs

UI Kit - Tabs

UI Kit - Toolbar

UI Kit - Toolbar