Group 37

Updated: 04/12/2016

Background Research: Design Guide

Introduction

Design Guide is a website which will have full documentation of the whole project available online. Additionally, it must have a common framework, such as for instance ReactJS, every current and future team will be using to suggest new components for user interface (UI) or any other functionality.

Our latest version of the Design Guide Website is available at this link.

Most of the current components are copied and pasted from the official React-Bootstrap forum, however, it will be filling with the new content when other teams establish the standard design, for instance for warning buttons, or finish their documentation. Additionally, our team was provided with a skeleton for the website, thus we used the documentation of the website and the menu built by previous teams.

Features

Name of the feature: Show code

Part of the project: Design Guide

Use case: Code can be copied by others, therefore maintaining similar design patterns in different parts of the project.

Limitation: The final solution will be limited to the library chosen.

Name of the feature: Show compilation result of the running code

Part of the project: Design Guide

Use case: Shows the result of compiling the code (server-side deployment) without needing to test and waste time.

Limitation: The final solution will be limited to the library chosen; there might be some issues with compilation on different browsers or devices.

Name of the feature: Page for uploading documentation

Part of the project: Design Guide

Use case: Allows teams to easily upload their documentation to the website to be available for anyone else requiring it.

Limitation: Must be formatted to fit the style of other documentation.

Name of the feature: Push new component to the website

Part of the project: Design Guide

Use case: When a new component is uploaded onto personal server, it then could be pushed to the website without needing to upload the code manually, therefore saving time.

Limitation: The difference between pushing manually and creating an application for it which will be doing it automatically might seem to not have the greatest priority.

Name of the feature: Defined styles for the website

Part of the project: Design Guide

Use case: Styles are either defined in the framework or style.css document; when a new style is defined every other team uploading new component or documentation will be using it to maintain common design patterns.

Limitation: The maintenance of such website will be very time-consuming if a team is allocated to check the consistency of styles; every team involved in the project must be informed about the styles.

Name of the feature:	Show code
Part of the project:	Design Guide
Use case:	Code can be copied by others, therefore maintaining similar design patterns in different parts of the project.
Limitation:	The final solution will be limited to the library chosen.

Name of the feature:	Show compilation result of the running code
Part of the project:	Design Guide
Use case:	Shows the result of compiling the code (server-side deployment) without needing to test and waste time.
Limitation:	The final solution will be limited to the library chosen; there might be some issues with compilation on different browsers or devices.

Name of the feature:	Page for uploading documentation
Part of the project:	Design Guide
Use case:	Allows teams to easily upload their documentation to the website to be available for anyone else requiring it.
Limitation:	Must be formatted to fit the style of other documentation.

Name of the feature:	Push new component to the website
Part of the project:	Design Guide
Use case:	When a new component is uploaded onto personal server, it then could be pushed to the website without needing to upload the code manually, therefore saving time.
Limitation:	The difference between pushing manually and creating an application for it which will be doing it automatically might seem to not have the greatest priority.

Name of the feature:	Defined styles for the website
Part of the project:	Design Guide
Use case:	Styles are either defined in the framework or style.css document; when a new style is defined every other team uploading new component or documentation will be using it to maintain common design patterns.
Limitation:	The maintenance of such website will be very time-consuming if a team is allocated to check the consistency of styles; every team involved in the project must be informed about the styles.

Existing Solutions

When considering existing solutions, our team mainly analysed different frameworks that could be used to ensure easy maintenance of the styles, safe development of the new ones and flexible deployment of the code on the server-side.

The client had previously tasked a developer with building a design guide website, however, for the most part it does not contain specific information with regard to frameworks and tools to be used. Regardless, we are able to use the skeleton of this website to add the additional features the client has requested. The client has also suggested using the SalesForce Lightning design system as a template for the design guide. He has also suggested, rather than follow the overtly complex UI specifications stipulated by the NHS, we use Lightning’s guidelines.