Product Design


Canvas App Builder


What is Reference Data feature?

This is one of the top Canvas features that generates revenue



Enhance the User Experience by adding features - ability to upload/edit/delete/view reference data from inside the app builder.



Idea 1
Click “Choose Reference data” > Dropdown menu open and select existing data > blue circle will be enabled > user can add the new data or View, Edit, Download, Delete icons.


Idea 2
Click “Choose Reference data” > module open: user can Add new data or choose existing data > when user hovers over the “Reference Data” function, View, Edit, Download, Delete icons will display.



Idea 3
Click “Choose Reference data” or Click + icon to add the new Reference Data > View, Edit, Download, Delete icons will display below the dropdown> Module will open: user can Add the new data or choose existing data > when user hovers over the “Reference Data” function, View, Edit, Download, Delete icons will display.

We chose Idea 3

  • More exposure to add new Reference Data options rather than choosing Data
  • References and see the ‘Add’ option.
  • Very small UI styling needed to be updated with less time to development.
  • Could re-use this style from other feature area.
  • Visually grouping this feature will confuse users less.
  • Project

    Edit, Upload, Error screen
    I decided to show this step on top of the entire data reference box so users can focus on the Edit or Upload function. Since the user clicked on the “Add” icon, users do not need to be disrupted by other unnecessary options.



    If the Reference Data option is already divided by user groups or any internal users without permission to access, the user will not have the ability to edit, view, download, or delete it. I decided to make the icon to disable rather than removing the icons. User can hover over the Disabled icon and the tooltip function will appear so that user can be aware of what possible features they can have and why they are not able to click those icons.

    You can only change simple UI style using CSS, so idea 2 couldn't be implemented from this iteration


    What I learn

    Removing extra steps on web-page and adding the simple short cut on the actual application on the Canvas App Builder was a huge success comparing the historical numbers of uploading to the “Reference Data” capability. I got great feedback from the sales team and users that loved this new design and it also increased the work productivity.

    However, we have many other feature requests and kept adding without re-thinking the process of building the entire forms. If we keep adding more features on the left-side panel the user will be confused. I wish we could have a deeper user study before we design/develop features and find out what users really need not just what users want to have in this application.