Designing UI widgets for low code platform having a drag and drop UI builder

  • UI UX Design
appsmith/appsmithbanner.webp

Project overview

Low Fidelity Wireframes

We started with wireframes to cover key journeys, this helped us in defining the basic information architecture and validating it with the internal team including the client to gain input prior to initiating the UI phase.

appsmith/appsmith_wireframe1.webp
appsmith/appsmith_wireframe2.webp
appsmith/appsmith_wireframe3.webp
appsmith/appsmith_wireframe4.webp
appsmith/appsmith_wireframe5.webp
appsmith/appsmith_wireframe6.webp
appsmith/appsmith_wireframe7.webp
appsmith/appsmith_wireframe8.webp

User Onboarding

  • Register

    appsmith/appsmithonboard.webp
  • Login

    appsmith/appsmithonboard2.webp
  • Forgot Password

    appsmith/appsmithonboard3.webp
  • Quick Login modal

    appsmith/appsmithonboard4.webp
appsmith/appsmithonboard.webp
appsmith/appsmithonboard2.webp
appsmith/appsmithonboard3.webp
appsmith/appsmithonboard4.webp

Homepage & Editor View

On the homepage we have create new project, recent works along with few templates. We can also search for a project using the search bar and also have a option to share. The user can either launch the app or can also make changes to the app in the editor.

appsmith/appsmithhomepage.webp

Property Pane Editor

In the property pane we can edit the properties of the UI widget, in order to customise it for your purpose and using the lightning icon, you can call an api, execute a db query etc.

appsmith/appsmithproperty.webp

Table Widget &its Functions

  • Search

    appsmith/appsmithtable1.webp
  • Filter

    appsmith/appsmithtable2.webp
  • Download

    appsmith/appsmithtable3.webp
  • Hide/Show

    appsmith/appsmithtable4.webp
  • Row Height

    appsmith/appsmithtable5.webp
appsmith/appsmithtable1.webp
appsmith/appsmithtable2.webp
appsmith/appsmithtable3.webp
appsmith/appsmithtable4.webp
appsmith/appsmithtable5.webp

Other Components

We opted for a minimalist design approach and created a components library that served as the foundation for the app’s visual simplicity and clean design.

appsmith/appsmithcomponents.webp

Help & Documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

appsmith/appsmithdocumentation.gif

Share with end-users securely

For collaboration and teamwork capabilities, your project can be shared. You can invite via email and also by sending them the app link. Also, configure access by roles and groups for every entity, action, app, workspace, and instance with granular access controls for teams.

appsmith/appsmithshare.webp

Error States

For collaboration and teamwork capabilities, your project can be shared. You can invite via email and also by sending them the app link. Also, configure access by roles and groups for every entity, action, app, workspace, and instance with granular access controls for teams.

appsmith/appsmitherror.webp

Similar Portfolios

projects/licious.webp

Licious

We simplified their user onboarding, customer retention, and cross-selling campaigns for increased engagement, conversions, and high brand recall.

View case study
projects/agrostar.webp

Agrostar

Designed a platform which helps farmers with agri-inputs, content, and advice. It also offers products like seeds, fertilisers, tractors, pumps, pesticides, and more.

View case study

Come Experience - The Sketch Brahma Difference

our-service/sbPath.png
icons/arrowTop.svg