Custom Signage creator - Web App

General information for the business: We sell bespoke signage
Kind of development: New program from scratch
Description of requirements/functionality: Sign design editor

We want to emulate and improve the custom sign maker on this site: http://www.buildasign.co.uk

We need a web application that will facilitate the designing of custom made signage.

The application must be coded in such a way we can easily alter things & administer expansions such as: pricing, sizes, shapes, colours, materials, types of sign (banner/ canopy etc), additional options/extras (e.g. ability to illuminate the sign), upselling / cross promotional options. This can be done in a way we can add or edit the code directly or you create a web based administration panel.


Requirements:
Web application, HTML, Javascript/Jquery, MySQL database, PHP.

The web application needs to be integrated into our php wordpress installation and should not require any additional plugins to run. It should function & display correctly for a customer using any popular internet browser on PC, Mac, tablet or smart phone. So using HTML 5 and a responsive layout will be required. Flash is not a viable option.

Customers need to be able to design their sign from start to finish using only the visual editor.

The customer will be able to edit their sign as easily as possible and completely independently from the site it is integrated into.

We should be able to pass "in" information to the sign creator web app as the customer loads it. e.g UserID, email address, then we can reference the customer at the end of the process.

Sign Creator

1. The customer will choose which type of sign they require,
a. Choosing either traditional sign, lettering, banner, pavement board, vehicle
b. Choosing either Blank or from a template.

2. The customer must be able to choose the shape and dimensions of their sign:
a. by entering their dimensions (which then need to be validated) or choose from a small list of standard sizes
b. by choosing from a list of shapes or create their own

3. The customer can add a photo of where the sign is to be placed as a background guide

4. The customer will add elements to the design using a toolkit beside the editor including:
vector images library, text (font, size, colour), a colourwheel, and the ability to upload their own images with basic photo manipulation (such as crop, rotate, resize).

5. The customer will be able to drag these elements around to determine their position on the sign, these elements will be added as seperate layers to allow the customer to position elements over others.

6. The customer will be able to edit the different layers : change their order, delete.

7. The customer will be able to resize, rotate, move & align selections (shapes, vectors, uploaded images, text).

8. The customer will be able to view a larger proof copy of their design anytime during the editing process.

9. Once decided on a final design the customer will be be presented with a final proof copy.

10. The customer will choose which material they require. Depending on their type of sign they can choose from options such as: corrugated plastic, aluminium, self-adhesive vinyl.

11. The customer will also be able to choose how they wish to display the finished sign. Depending on their type of sign they can add futher options, such as: to add grommets to the corners of the sign, or to have the sign double-sided.

12. Alongside this final image will be a text box detailing the signs contents and selections made thus far by the customer.

13. The customer will then be given the option to go back and edit their design before adding it to basket.

14. The customer can chose the quantity they want to Add to Basket

15. We should then try upsell the customer by showing other options for use of their sign. Such as: their sign on the side of vehicle, with a percentage discount if they bought both.

16. The customer will be able to share their completed design (with our branding overlaid) to facebook or via e-mail with intergrated share buttons.

17. The customer can save their design and come back to it at a later date. For this we would ask the customer for their email address and a password.

18. On Add to Basket &/or Save we need to generate a "sign design ID" and pass this "out" to the containing website along with any of the entered customers details. This allows us to add to our shopping cart system.
Specific technologies required: HTML, MySQL
Extra notes: We want to emulate and improve the custom sign maker on this site: http://www.buildasign.co.uk