Download - Build Low Fidelity Wireframes
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.
It’s a collection of “screens”. Each “screen” is what the customer sees
at a certain point in the Product Narrative.
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”
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?”
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.
Annotations (as in the previous example) also describe how customers move from one
“screen” to another.
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.
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.
Build from the Inside Out = Build the most important UX
of your product first, and then the second most important,
and so on.
Your Uber clone has these 10 “screens”:
SignupLogin
Type DestinationFinding Car
Car AvailableCar Not Available
Car ArrivedOn Trip
Destination ReachedFare Collection
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?
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)
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?
These are the screens available:
SignupLogin
Type DestinationFinding Car
Car AvailableCar Not Available
Car ArrivedOn Trip
Destination ReachedFare Collection
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
Let’s recap:
1. Lower-fidelity wireframes are better to start.
2. Build wireframes from the “inside out”.
There are several tools available to build
Low-fidelity Wireframes.
https://moqups.com is a good tool to start.