Contact Management System Wireframe Design

Wireframing     JUNE 12, 2016    

In software design and development one of the essentials before starting to develop the system is to get a clear picture on how the application would look like as the final product and think of the work flow and how the users would be working with the system. Wireframing is a technique useful in designing process of any product to ensure the final product is based on the user requirements and final result will satisfy the client.

In process of wireframe design of the product, the functionality of the system is not included and it only focus on the design of the user interface and the interactions. The blueprint of the product would ensure the overall structure of the product and reduce the complexity of the common tasks to ensure the user experience smooth interaction and not face complications in performing the tasks in the software.

This project is the wireframe design of a custom build contact management system which allow the client to collect the contact information of the potential assets and people into the local storage of the application and export the data after each event and data collection job. The design of the final product should be kept simple and also allow the client to collect large datasets and be able to modify the existing data through the admin panel.

Once the data collection is completed, the client can export the datasets to a Microsoft Excel datasheet and use it as consumable data in other software and systems.

The design of this system does not follow the conventional WinForms and standard desktop application and instead use the minimal concept and got inspired from the modern mobile and tablet applications. The main window of the application has two column layout which is used to display the menu which allow the user to switch the view at any time with a simple tap or click. The larger column is used to display the main content of the application and the user is able to resize the window and expand the main section of the application to their needs.


window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q027PK392X');