Figma Prototype

You have done need finding research, presented your findings with your customers, and reviewed any changes to the requirements that may arise from the presentation to your customers.

Instead of starting with a paper prototype or the “back of a napkin” sketch, we will be using Figma. At this stage of the design, we are focusing on identifying the screens to show, screen layout, navigation, and presentation of information/features. You don’t need to worry about the visual “style” or aesthetics at this point (you can do that with your GUI framework of choice later) so you may use placeholder images and textual content (lorem ipsum).

While you can add some simple interatcion with Figma, this prototype is low-fidelity and in not intended to be “interactive”. You can however create transition links from objects to different “screens” in your appliation to simulate your application’s “flow”. For example if you make a website where people can shop for goods online and put them in a cart, you might have a menu item for a specific category you want to show. In the list of all category items, you might have one that is interactive via click to transition to the carts screen.

You can look through figma community projects for ideas, but make sure that your project is uniquely yours and fits your particular domain/application.

While creating your prototype, think about your users, their tasks/activities, and our supporting readings.

Requirements

  • Basic application navigation present to demonstrate flow
  • Only worry about forward facing core features
    • Use your ten user story issues to guide this
    • If you need to know which screens or features are most important to see first, consult with your customers
  • DO NOT WASTE TIME MAKING IT LOOK LIKE A FULL FLEDGED APPLICATION
    • Figma can create convincing high-fidelity projects, but we are focusing only on presentation, exposed feature, and navigation
    • You can attempt a color pallete at this point if you like, but a monochromatic gray scale look to show contrast and content grouping is also acceptable
  • You may use components made from community Figma projects, but do NOT take an existing Figma project and simply tweak the design to suit your project

Submission

  • Create a folder called prototype in your dev team GitHub repo
  • Export the figma project, place it in the prototype folder and commit the file

Grade 15 points