Overview
​
This section provides some of the sample design assets I have created to use for interaction design on a daily basis. There are a lot of tools and templates out there to start with. Material Design even had a Theme Editor tool to generate Axure and Sketch assets for you, but unfortunately the tool has been retired.
Final Design
​
Below are three sample pages from the project that I did in Axure.
Sample design patterns
This is one basic landing page black/white wireframe with chart on the top and grid on the bottom. In my Axure wireframe asset library, I created templates for Navigation, Page Layout, Widgets, Fields Layout and so on. These become handy whenever there is a similar use case. It can also keep design consistent across the product.
Final Design
​
Below are three sample pages from the project that I did in Axure.
Color Schemes
This is one sample color scheme based on our brand colors. It is in Sketch.
​
We do have a centralized product platform with established design assets. But we also work on many innovative design projects when we can come up with our own design systems. I do use material design kit for Sketch and Figma.
Final Design
​
Below are three sample pages from the project that I did in Axure.
Sample Page with Color Scheme
In this example, I applied one of the color schemes that I came up with based on our brand colors to a proposed dashboard design. It is created in Sketch.
Older Design Pattern - Inline Editing Pattern (2017 - 2018)
Overview
​
This inline editing pattern came out of a large project for fund managers of our Alternative Investment System to manage the balance sheet of their ~800 property accounts. In this project, multiple data tables were involved. Users not only need to view the data in the table, but also need to make changes to the data.
​
Challenge
​
In numerous projects that I have worked on for the Bank, data table is always the key design challenge. Users want to view data and even edit data whenever necessary. The basic rule is to separate the viewable mode from the editable mode. Therefore the typical design solution is to provide an actions column and bring up a modal window with details for editing when users click on one of the actions. But in this project, I explored in-line editing, allowing users to change data without navigating to a modal window.
Process
​
First, I searched for existing in-line editing patterns online and found these two to be very helpful:
Secondly, since the table that we use in our company is UI Grid, I researched UI Grid and found out that it can be editable cell by cell. My ultimate design objective was to allow users to edit table data with minimum clicks.
Final Design
​
Below are three sample pages from the project that I did in Axure.
Editable Table Row
In this example, the first row in the table is at the editable stage.
Final Design
​
Below are three sample pages from the project that I did in Axure.
After Editing the First Row
In this example, data in the first row has been updated with clear indication. Users have the ability to undo it.
Final Design
​
Below are three sample pages from the project that I did in Axure.
After Deleting the First Row
In this example, data in the first row has been deleted with clear indication. Users have the ability to undo it.
Older Design Pattern - Table & Graph Pattern (2017 - 2018)
 |  |  |
|---|
Older Design Pattern - Communication Pattern (2017 - 2018)
The purpose of this pattern is to define how approvers communicate with each other in order to retrieve more information before making the appropriate approval decision.
Older Design Pattern - Workflow Approval Pattern (2017 - 2018)
This pattern allows users to track where the request is currently at and who has approved or rejected the request.
Disclaimer: Even though I have masked the confidential data and added some fictional content for presentation purpose on this page, the project is proprietary and shouldn't be copied in anyway by any other company. Thank you for your understanding.