A touch screen web application for GP practices to survey patients and offer suggested pathways depending on the answers given. The project also included development of an admin web application to edit questions and view responses.
Screenshots taken from a test installation using the default NHS colour palette
-
Start screen
-
NHS friends and family test (FFT)
-
FFT completion
-
Survey start
-
Survey question incomplete
-
Survey question completed
-
Survey completed with follow-up advice according to what was selected
Designing a touchscreen platform
This project was a spin-off of a form app that we built for another client. The NHS is awash with forms for patients to complete, which led us to build out a product that could support wider use cases.
In this case the software leverages touchscreen panels installed in GP practices for patient check-in, and provides options for completion of the ubiquitous friends and family test, and an optional survey.
I supported another developer who built the application framework and functional aspects of the software.
I was responsible for mapping out the user journey, and designing a UI, in this case optimised for a 21 inch 16:9 panel, and coding of the UI. We had a test panel installed in the office, which allowed us to test the usability of the UI and the physical characteristics of the hardware.
Balancing creative engineering with maintainability
In our team I was the only developer with any real knowledge of HTML/CSS best practice, semantic, DRY markup, accessibility etc. As much as I could write quite bespoke code, at the same time, you need to make something that other developers can pick up in the future. I investigated a number of frontend frameworks, and looked at ones which could balance the needs of creative engineering with ease of learning.
As we were using Angular for the application layer, I integrated, bootstrap sass, node-sass and ng-bootstrap frameworks for front-end code and rendering of interactive components. Bootstrap, whilst opinionated, is less so than alternatives assuming you compile from SASS, which allows for clean customisation. It is a well documented framework, and also widely used with plenty of support on StackOverflow, important factors in my consideration.
Whilst the rendered screenshots may still look a bit Bootstrappy, this was more due to the fast turnover of this project. I still had to write a lot of bespoke CSS - Bootstrap's grid for example is aimed more at responsive websites than an app UI, and I had to create reusable templates with flexbox-based scrollable panels and toolbars. Hopefully though the code strikes a good balance between support for creativity and future maintainability.
-
Admin questions overview screen
-
Original sketch for questionnaires creation screen
-
Admin view question info
-
Admin view/edit question - original sketch
-
Admin edit question
-
Admin responses report table
-
Admin response detail view
-
Admin responses table marked as copied
Bringing this approach to the admin area
The second set of screenshot are taken from the web-based admin area of the same application, for use by GP administrative staff. It is built with the same technologies for the touchcreen above, but layout optimised for desktop usage.
As with the touchscreen, I was responsible for devising the user journey and layout of the UI, keeping in mind a generic approach that could be used in other projects. As with the touchscreen, I was also frontend dev on the UI, and used the same frameworks and principles as outlined above.
I enjoyed this project on both the touchscreen and the admin area, in particular creating UX foundations and an architecture for the frontend that could beneift future projects.
Case studies
Through my career I have worked across the full development lifecycle, from UX and UI design, to development and project management. UX is the heart of everything I do. This is a selection of recent work.
