Case studies –

Scaling prototype design fidelity

Product design | UX / UI | Prototype

Prototypes play a vital role in the production of successful user experiences, below is a brief look at how I utilised varying degrees of prototype fidelity during the life cycle of a conceptual project.

Low fidelity prototype

Low fidelity prototypes allow quick and easy creation, testing and iteration. In the example below (an in-house product I designed at Bluefrog) I built an initial interactive prototype using HTML and CSS.

Taking care to focus on functionality and not aesthetics, I was able to quickly adapt and improve the product until we were happy the idea worked.
— View the working prototype.

Low fidelity prototype created in HTML

Screenshots illustrating functionality

High fidelity prototype

My initial prototype provided proof of concept, I now had to build on this with a higher fidelity approach so we could perform initial usability testing and demonstrate the product to clients.

Taking the earlier HTML and CSS code, I designed in the browser to apply a visual layer that incorporated branding, photography and a more realistic appearance.
— View the working prototype.

High fidelity prototype created in HTML

Screenshots illustrating functionality

User interface design and InVision

Finally I designed the user interface in sketch, incorporating all of the feedback and findings from testing and client demonstrations, and uploaded my screens to InVision.

Here I was able to present and test the final interface design using InVision's simple, clickable 'hot point' approach. This also provided an interactive reference point for the engineering team as we progressed to build.

Moving towards a final interface design

UI design

Adobe XD and Sketch

Occasionally it is necessary to output a clickable prototype straight from a design tool. Adobe XD and Sketch both offer these facilities which, despite being basic in terms of transitions and sharing are often the quickest method for prototype creation.

Mapping out a user flow in Adobe XD

Get in touch

If you have a question for me please get in touch at: