This text is more of a log of events than other articles, as I had absolutely no control on objectives, process or deadlines.
I was hired to create a prototype for an application. The ongoing project is quite large. I was tasked with “something to demo inside a fortnight”, although I thought this was actually three weeks worth of work.
They wanted a wizard to acquire data from end-users. This is to be responsive and be useful on tablets. This work is not a complete product, in that other companies where hire to build other sections. There is a testing copy installed 1
For me, this is a very front end project.
Goals of prototype
- Be responsive.
- Be mobile focused, or rather to be run on tablets.
- Implement supplied state table, as a series of Q & A.
- Implement the supplied look at feel images.
- Integrate with the extra third party API according to supplied docs.
- Render results according to supplied outline.
- Render a statement of declarations derived from the questions.
Discussion on technology
This was a public artifact in a green field development. I initially pushed hard for a reasonable level of tech infrastructure (e.g. a new PHP interpreter available, not just a PHP interpreter).
As the “middle people” && wanted a fast turn round time, I provided solutions using as many libraries as possible. As I personally don't own a large number of mobile devices, using libraries should have a known quality of functionality. I encouraged them to supply help texts to describe the inputs (the target users of this will have a range of educational backgrounds, and may not speak English as a first language).
I implemented this inside Symfony2, as running via a framework would provide a lot of basic features (input validation for example). I added the “standard features” of input validation (so for example, a NI number must be a valid one). I was then told to remove it. It was more complex then expected to get the default input focus to the correct location, but I did it.
After the second week, they decided to hide the forms in the user interface, and make the prototype behave like the Q&A thing in the ms help wizard. For many of the questions, there is no logical need to “hit submit”, as the extra click does nothing. The user interface allows going back to the previous question, if the user realises they made an error. I implemented this via JS, in a fairly standard fashion. The questions with multiple inputs still need a submit button ~ like entering degree details ~ or the one can't enter the required data.
Some of the questions allow entering multiple points, for example enter all your GCSEs. This required different interface mechanisms, but mostly was a problem with the layout, as there was more things per screen then on other questions. I added scripting to duplicate form inputs for the required number of times. The JS on this bit was quite well organised.
For the fourth week, they concentrated on the declaration (previous undetailed, despite my clarification requests). This was to be statements rendered about the data was previously supplied. They issued a list of change requests, but ending with an accordion.
In the fifth week, they decided to put the form back in for the first section of data (which was gathering personal details). Again this was alot of things to fit into a single screen, especially at the expected tablet screen size. I iterated until it looked okay.
&& This is a gender equality situation, the expression “middle man” has no place in current operations.