Case studies –

Scaling prototype design fidelity

Product design | UX / UI | Prototype

Prototypes play a vital role in the production of successful user experiences, in my role at Bluefrog I often test a product idea or design before progressing to development.

My approach is determined by the scope of the project or stage of development. For example I might quickly create a lo-fidelity prototype in Adobe XD to visualise a simple clickable flow between pages, whereas for a new business idea that requires client buy-in, I might opt for a higher fidelity approach.

Below is a quick look at how I apply these techniques during a project lifecycle.


Low fidelity prototype


High fidelity prototype


User Interface design

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


Using XD, Sketch and InVision to test a concept

Get in touch

If you'd like to discuss working together or just have a question for me, please get in touch:

andy@brightblackcreative.co.uk