4. Prototype Methodology

The Brilliant basics prototype is a high-fidelity or coded prototype created for rapid-prototyping.

We use this approach to create a realistic and immersive experience so when we test with users, they believe they are using a real service and we get closer to their natural behaviours.

Tech choices

At the outset of the project, SSE required us to use Vue.JS as the preferred JavaScript framework for creating front-end patterns. We chose to use Nuxt.js to create the prototype - Nuxt uses Vue.js and adds features such as:

  • file-system routing
  • layouts
  • static-site generation
  • hot-reloading
  • code-splitting and bundling

This set-up allowed us to create user flows from reusable components and templates using logic and state management in a rapid turnaround time.

Code was deployed to GitHub and Continuous Integration was set up by deploying to a hosting service, Netlify.

Working practices

Working in time-boxed agile sprints can backload work for the developer. To avoid mini-waterfall, or “Wagile”, the developer should be involved throughout the design process:

Idea generation; the developer can highlight opportunities and technical constraints as well as creative and logical solutions.

Showing work early can avoid communication issues and flesh-out design flaws earlier. Take an iterative approach within a sprint.

Pair programming; developers and designers can pair-up to speed up redesign of coded elements from first iterations.

Watching user testing; all team members can add their unique perspective to capturing insight from user testing and can build a shared understanding of problems.

Recommendations

We recommend that in future design sprints, technical proofs-of-concepts are made to validate technical hypotheses and to ensure that the desired user experience can be achieved using technical choices made.

Next iterations should also include:

  • Robust form validation and improved logic
  • Diligent device/browser testing
  • Testing with people with Accessibility needs

  • Sprint 1 and 2

    • Pain Point - Submitting a meter reading through "My Account"
    • User Goal - Submit a meter reading by entering as little information as possible so I'm billed accurately
    • Start Page - start meter reading journey

  • Sprint 3

    • Pain Point - Making a non DD payment
    • User Goal - Enable customer to make online payment from multiple devices. Allowing customers to pay bills any time and anywhere with confidence
    • Start Page - start payment journey

  • Sprint 4

    • Pain Point - Signing a paper contract (by pen)
    • User Goal - To be able to access my contract online and digitally sign the contract at a time convenient to me.
    • Start Page - start contract journey

Code

Repo available at: https://github.com/cxpartners/sse-brilliant-basics-prototype. Please contact dave.martin@cxpartners.co.uk for access.

Further reading: