GUI Development Process
Process: Fresh Development
Case Study: Live Project

Pre-requisites
Two documents are required for the work on GUI:
1. Requirements Document
2. Use Cases Document.

After that the GUI Design Process begins.

Step 1
List of requirements
After Interpretation of requirements and use case document, a preliminary list of information is prepared.

E.g.,

Step 2
Define a Strategy and create High-level screen flow design
Prepare a Strategy* and create Comprehensive Screen flow diagram on paper. We might need to modify several categories of information along the way. After 2-3 iterations, a complete flow of items will be ready on paper.
This step will also involve High-level** screen layouts on paper to view and understand the flow, as it will look on each screen. Usually this flow is required for understanding of the application and its flow.

Step 3
Detailed Screen flow diagram
Prepare a Screen flow diagram with full details - role, action, main screen, pop up screen, tabs (menu) etc.

Step 4
Creation of Demo / Prototype
Before creation of screens, a layout is made on paper to save time on iterations.
Based on the Detailed Screen flow diagrams, a full or a part prototype in html is prepared. If the full demo is not required, separate screens are prepared and then pasted in a document along with explanations and use cases. Testing by the PM and others also happens at this stage.

E.g., a set of screens may be for a particular role, where the details of an application can be set.
These screens will be based on the functional requirements and will fit the overall look and feel of the software. Compatibility in terms of addition of new features and modules is taken care of.

The same set of information, when needs to be accessed by the end user, will have a different look and feel. The user does not need to know the complexity of the application and needs to have a simple and easy flow of information.

Step 5
Preparation of Specifications document
This document will be based on the Prototype and will contain various inputs required for development of various screens. This document will be given to the development team.

------------------------------------------------------------------
* Strategy may be in terms of overall Navigation, addition or creation of Tabs in Menu, Grouping of similar objects, visualization of look and feel of the final product.

** High-level refers to screens where the fields and information displayed is not in full detail, but captures the basic flow of information.