Sketch

Layout Sketch

Persona Sketch

Wireframe(Mock-up)

We created a simple prototype for our design guide.

Key Screenshots of final delivery

The login page

Template upload page

Form render page

HCI Principles

Visibility

Visibility issue is one of the most important principles. We placed the upload section in a pop-up box right in the middle which shows clearly to the user how to use it. All the templates available is visible to the user as soon as he logs in. There is a profile picture of the user which indicates the user he can manage his account status from there. Overall our project structure is quite simple so it is easy for the user to use. In addition, throughout the user journey they are accompanied by hints provided in the application

Feedback

We have various ways for the system to interact with the user and provide feedbacks. When the user upload the template, the file will be stored into the backend and immediately shown at the left sidebar. Also when the user is customising a form, the form will render immediately according to the changes made by the user.

Consistency

We have followed the PEACH standard rules to make the UI and throughout our project, we sticked to a consistent color scheme. In the sidebar, pop-up and menu, we used a library to make the styling consistent. For the form being rendered, bootstrap library is used to keep the UI nice and clear.

Constrains

In the future, we plan to make forms being able to directly interact with the backend and save information using it. In this case the user does not need to save the form to his local storage. This will improve the user experience and minimise the memory usage of the system. However, due to the API limitation, in a limited amount of time, it is difficult to realise the functionality for now..

Software Engineering Methodology

We have two choice of development strategies that can be helpful to our project, either develop everything in a traditional way or using agile development to cope with the constantly changing requirement.

Tranditional way of development focus more on requirement and design. 80 percent of the time and effort is devoted into design and once this is done, it will be hard to change. Constructing the project will then be the less important part as everything will just go with design and we don’t have to think too much about creativity.

Agile developent works in a different way. We are more focus on the coding part as the requirement will be changing following the building of the system. Our client can change his requirement according to the products produced so that during the development stage, he can see parts of product being built and decided what other features he would like to have in his product.

We are using the tradition methodology as we don’t meet out client frequently enough to follow agile development. We use Proof of Concept design to test different ways to realise user’s requirement so that we can choose the best one from it. Therefore, we would focus more on design part as it will be the foundation of our development process.