Dung Le
Dispatcher App
Atomic Design System
Yojee's rapidly expanding product necessitates a design system capable of accommodating its grand scale. In order to meet this demand, we have adopted the Atomic design methodology to develop a design system that is both scalable and easily manageable. Moreover, our approach involves creating message templates and promoting a consistent style for effective on-screen communication. By leveraging these techniques, we aim to achieve a design system that is both efficient and aesthetically pleasing.
Atoms
We develop these elements based on brand identity. These are the basic elements used in our app. From these elements, we build up more complex components
Molecules
Molecule provides mix elements from atoms level. These molecules set a standard combined items in used.
Organism
Organism sets a standard for large component in page
Template
Data List Page
The manage section organizes input data from clients. The data list page is the first page of each section. It displays all data in the table view.
Centralized Communicating Messages
We provide a consistent and unified approach to default messages related to actions like deleting or editing items. These warning messages occur frequently and across the system. Previously, users received different messages and guides, leading to confusion. By systematizing this content, we aim to provide more explicit guidance to our users.
Single Delete’s Pop Up Component
Bulk Delete’s Pop Up Component
Single Edit’s Pop Up Component
Single Edit’s Pop Up Component
Manage Section
The existance problems
-
The Management tab controls input data. Previously, the UX in this section was not consistent.
-
Buttons put everywhere
-
The adding data flow does not the same on every page. Different flows cause confusion.
-
This section needs more space to show data but the menu
Solutions
-
We built a template page for input data with a consistent flow.
-
The table view for all data pages with page navigation at the tabletop right.
-
The add- button is on the top right corner
-
When the second level menu moves to the top, it clears space for displaying more content
Before
After
