SSE Pilot - Prototype Methodology

← back

The SSE Pilot 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 We ensured that our tech stack was inline with the SSE team. We use React.JS as the preferred JavaScript framework for creating front-end patterns. We chose to use Next.js to create the prototype - Next uses React.js and adds features such as:

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

We also used TailwindCSS to create styling and MobX for state management.

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:

Diligent device/browser testing Testing with people with Accessibility needs