Build Low Fidelity Wireframes

Build Low Fidelity Wireframes

1. Build Low-Fidelity Wireframes Vishnu Gopal

2. Where is your team now?

3. 1. You’ve Shortlisted an Idea 2. You’ve got a clear Product Narrative

4. If you haven’t done both of those, please go back and complete those targets . You can’t build wireframes without having a Product Narrative.

5. Why is this important?

6. Before you build, it’s a good idea to know what is it that you are building.

7. A wireframe is a visual depiction of your customer UX flow.

8. It’s a collection of “screens”. Each “screen” is what the customer sees at a certain point in the Product Narrative.

9. Let’s look at some examples:

10. In the previous screenshot, each “screen” of a mobile application is mocked up.

11. Here the wireframe “screen” maps to an app screen, but it’s sometimes not like that. Like for example: when an error occurs , you might want to denote that using a different wireframe “screen”

12. As you can see here, you can also use wireframes to describe just one portion of customer UX . In the previous image, it’s “What happens when the user clicks the Share button?”

13. The purpose of a wireframe is to communicate & clarify. So, you can use annotations (the yellow circles in the previous example) to clarify intent and purpose.

14. Annotations (as in the previous example) also describe how customers move from one “screen” to another.

15. In short: somebody looking at your wireframes should be able to figure out how the user will enter your product , and how he will travel through your product.

16. How do you start building wireframes?

17. Two principles: 1. Lower-fidelity ones are better to start. 2. Build from the “inside out”.

18. 1. Low fidelity to start. Fidelity = how close to the final product the wireframe is.

19. The one on the left = Low fidelity. The one on the right (looks like a real product) = High fidelity

20. But lower fidelity is the best when you start. Why? Because Low fidelity lets you concentrate on the Customer User Experience & not the Visual Design.

21. Second principle: Build from the “inside out”.

22. Build from the Inside Out = Build the most important UX of your product first , and then the second most important, and so on.

23. Let’s illustrate with an example. Let’s imagine that you are building a Uber clone.

24. Your Uber clone has these 10 “screens”: Signup Login Type Destination Finding Car Car Available Car Not Available Car Arrived On Trip Destination Reached Fare Collection

25. Step 1. Your task: pick the most important “screen” first and wireframe that.

26. How do you find which is most important? Answer 2 questions. 1) Which screen does the customer use the most? 2) Which is the screen if it breaks, the user will not be able to use your product at all?

27. One answer to question 2) above is always the Login/Signup screen. For the purposes of Alpha, ignore Login & Signup flow . (we’ll cover Onboarding flows later)

28. So aside from Login & Signup, which screens are important based on this criteria? 1) Which screen does the customer use the most ? 2) Which is the screen if it breaks, the user will not be able to use your product at all ?

29. These are the screens available: Signup Login Type Destination Finding Car Car Available Car Not Available Car Arrived On Trip Destination Reached Fare Collection

30. This is more art than science . But according to my judgement, the only reason anybody opens an app like Uber is to find a car. So the screen that’s most important is simple: Type Destination

31. Cool, so Step 1 done. You have identified which is the most important “screen”

32. Now Step 2 is to answer this question: within that screen, what is the most important element?

33. i.e. within Type Destination , what is the most important element you should wireframe first?

34. To make this clear, let’s look at a concrete real-world example.

35. This is how the new Uber app approaches the problem.

36. Let’s assume this is the final build of your app. Which element would you wireframe first?

37. Remember: this is the Type Destination “Screen”.

38. Is it this?

39. or this?

40. It’s pretty obvious that it’s this destination entry area.

41. So: wireframe that first!

42. Then extend that area outwards.

43. And outwards.

44. Note: you should probably leave common navigation to the last .

45. This is what we mean by Build from the “ inside out ”.

46. That’s it! :)

47. Let’s recap: 1. Lower-fidelity wireframes are better to start. 2. Build wireframes from the “inside out”.

48. Todo: Based on your Product Narrative, build a set of Low-fidelity Wireframes for your Product.

49. There are several online tools available to build Low-fidelity Wireframes.

50. There are several tools available to build Low-fidelity Wireframes. https://moqups.com is a good tool to start.

51. See Rubric too for more info.