Lo-Fi Prototype

PDF: About Prototyping + Examples

Student Examples

How to create a clickable prototype

  1. Keep it simple: Remember these are LO-FI to MID-FI – which means monochromatic and very basic – NO additional design elements. Include enough information for someone to complete tasks and explore its functionality, usability, and user flow.
  2. What screens? Refer to your user flows that you created and identify what screens you need to create and link together in order to later test people on your redesign. If you are making a lot of changes to the app, this could end up being several screens that you will need to create in order to effectively test it out on people in the coming weeks. Try and make a minimum number of screens to test people on completing at least three different task variations.
    1. For example, if this were an e-commerce app, make one prototype that includes possible user flows that lead to buying something, creating a profile, and subscribing to a newsletter? 
    2. This is again just the minimum requirement, I encourage you to create enough screens that test out all of your new updated changes to your product.
  3. What layouts? Refer to your narrowed down wireframes and use those layouts in your prototype. 
  4. FYI: You will be testing people on this prototype during class on Tuesday and taking notes on what improvements to make.

Figma Comprehensive Demo

Below is a thorough Figma Demo I created for another course that you can use as a reference. The example in this video is more hi-fidelity than what I want you to create at this stage. Make sure you keep it monochromatic and don’t add any photos or too many details yet.

In the video I go over the following:

  • How to sign up and create a new project and file. 
  • Go over the interface and the organizational structure. 
  • How to create “frames,” assets, styles, and components.
  • How to link screens together (at the 29:40 mark in the timecode).
  • How to preview and share your prototype. 
  • How to copy over UI elements from another Figma Toolkit file to save time. (see some toolkits below)
  • Also show how to make overlay and hover states, and have screens be scrollable, while keeping some elements fixed in position. 

Figma Shorter Demo

I also created this one for another course. It is much shorter and way less detailed. Disregard my references to the Sketch prototyping software within the video – this isn’t relevant for our course.  

Figma Tutorials and Resources:

Figma Lo-Fi Wireframe Toolkits

You can download any of these lo-fi wireframe toolkits (or another one that you find) and use the UI elements if you would like to speed up the process.

  • You should still make your own Figma file and then copy over the elements you want from the toolkit you choose. 
  • Remember you are still creating your own layouts and basing decisions on your current brand, but many UI elements have been standardized and conventions are in place – so it sometimes makes sense to copy over navbars, keyboards, buttons, icons, and so forth – this can also help with appropriate sizing. 

How to download one:

  • For all of these toolkits, you need to first be logged into Figma, and then click on “Duplicate” in the top right of the toolkit webpage and it will open up a new tab in Figma. 
  • Once inside a Figma toolkit, look at the “Pages” menu on the left side and you will find “Components” you can copy over to your Figma project if you want. 

How to Turn In:

  1. Lo-Fi (or Mid-Fi) Prototype link posted to #project2 Slack Channel and in a Google Doc in your Google Drive.
  2. This interactive prototype is clickable and navigates through all your different screens to achieve various tasks in your product redesign.
  3. Use Figma or Adobe XD.