ministryofjustice / hpcds-screens

Browse screenshots of HPCDS prototypes and scenarios

HPCDS prototype screens

Browse screenshots of HPCDS prototypes and scenarios.

http://ministryofjustice.github.io/hpcds-screens/

You can view prototypes as an overview, or select a screen for more detail and then step through them in order.

Running the app locally

The app is very simple. You can view screens locally by opening the root index.html file in a browser.

It works especially well in Chrome's presentation mode. Your experience may vary in other browsers.

How to contribute your screens

Adding your screens is a great way to showcase the problems you've solved. It also allows us to ensure consistency across all our services and helps to identify design patterns.

Screenshots of production services are better than prototypes as they show what’s currently seen by our users. Also, it’s not easy to screenshot a service that requires authentication.

Creating pull requests are the best way to contribute. So, you'll need to know how to use GitHub.

Option 01

You'll need to have node installed to contribute screens using this option.

Using the command line tool (CLI), you can create a service and add screenshots you’ve taken, scenario by scenario. The prompts in the CLI are straightforward:

1. Run the tool

1. Open your terminal
2. Navigate to the root directory
3. If this is the first time you've run the tool you'll have to run npm install
4. Type npm run add
5. Follow the prompts

You’ll be given a list of the services that are already in the app and the option to add a new one.

To add a new scenario to an existing service

• Select the service from the list
• Hit enter
• Enter the name of the scenario

To add a new service:

• Select 'create a new service'
• Hit enter
• Enter the name of the service
• Enter the name of the scenario

2. Add your images

Each service has its own folder in /service. Add all your images into the scenario folder in the service's images directory.

Return to the command line and hit enter. Your screenshots will be renamed (to make them web friendly) and ordered chronologically according to when they were created. This means that as you've captured the screens while navigating through a journey, they’ll be in the same order in the app.

Capturing screenshots

On OSX, Paparazzi is the best way to capture screenshots. You can set the maximum and minimum widths for the screens (1024px wide is best), and it can capture images in batches.

Nixon is a tool that allows you to automate screenshot capture using CasperJS or PhantomJS.

On Windows you can use the Awesome Screenshot plugin for Chrome.

You can also use services like BrowserStack or Sauce Labs for automated serverside screenshot capture.

Future enhancements

We plan to add more functionality to the app to make it even easier to take screenshots and add them to the app.

Through the UI, you’ll be able to:

• add notes to each screen
• rearrange the screens
• take screenshots

Acknowledgements

• The authors of https://github.com/hmrc/hmrc-screens