Appendix E: Figma Tutorial
Contents
Appendix E: Figma Tutorial¶
This tutorial shows you how you can use Figma to help you create your digital prototype.
Before you Start Prototyping¶
You have completed your paper prototype and collected feedback from your clients. Now you can use the feedback you receive to create digital (high-fidelity) prototype that is much closer to what the final version of system-to-be would look like.
Similar to paper (low-fidelity) prototype, you will use your digital prototype to run usability tests with end-users/clients, collect more feedback, and refine your design. If you discover any problem during usability testing, you can go back and modify your design. By the end of the process, you have a validated prototype before you start coding.
With that in mind, we want to remind you of some important key points:
No.1: Digital Prototype Is High-Fidelity¶
Compared to low-fidelity prototype, high-fidelity prototype is much closer to the final version of your system-to-be. You need to be a lot more specific, introducing colour scheme, styling, images and meaningful, realistic content into it. There are not only major navigation elements, but also the more detailed ones in digital prototype. It is what the real product would look like - except there is no code.
No.2: Completeness of Scenarios¶
During your usability test, you will have tasks for your users/clients to perform. It’s really important to make sure that these scenarios in your digital prototype are complete. What does that mean? Let me give you an example.
Imagine that you have a scenario where a user needs to book a hotel room. On the interface, you have an option to confirm or cancel. You made sure that the “Confirm” button is clickable, and you prepared the transition to the next page. But the “Cancel” button is non-clickable. During the usability test, your client clicks “Cancel” and nothing happens.
The example above is an incomplete scenario. It’s better to have 4 - 5 complete scenarios than creating 100 pages but a lot of buttons are non-clickable. Remember - you want to run usability test and observe your users interacting with the system to improve your design. Half-completed scenarios won’t help you with that - it will even create confusions for users/clients. If you are designing a large system and there are a LOT of scenarios or user stories to cover, we advise you to:
Ask yourself: what are the most important things that users must be able to accomplish on the application? What user stories MUST be tested?
Select 4 - 5 user stories or scenarios from your list, and start prototyping. Make sure they are complete.
No.3: Don’t Give the Answer Away¶
Let’s use our booking hotel room example again. Make sure you don’t give away clues or describe the steps to your users. Don’t say “First you would log in, then you would click the Find Destination button, then you would browse all the hotels available, then…” the instructions that you give will prevent you from discovering design flaws. Instead, set up a little scenario for your users, provide them with context and observe how they complete the activity. For example, a better task would be:
You are planning a trip with your family to Sydney from 24th December - 2nd January. You want to book a hotel room. Visit our site and see what’s on offer.
Extra Resources
If you haven’t checked these resources out, we highly recommend you have a look:
This tutorial gives you more guidance and advice on how you should run your usability tests.
This article explains the number of users to run usability tests with.
Figma is free for students. Check out this website to verify your education status.