Product Management 101-Lecture 13- Wireframing the Twitter Homepage Video Lecture | Understand Product Management: A Complete Course

so let's try and understand how the
wireframe and design for the Twitter
homepage would have come about as I
mentioned let's look at it from the
perspective of the users and what are
the types of users that are relevant to
the homepage you have new users and your
returning users so what do you think
would be the expectation out of let's
say
a new user from Twitter's perspective
they would expect the new user to sign
up for the new user what he'd like to do
is actually check and see whether if
Twitter is worth signing up or not for
the returning user he just wants to log
in in both cases where both the
returning user as well as Twitter would
like the returning user to use the home
page to log in now that we've understood
this let us see how this translates for
the old user what do you think are the
elements that need to be on the page we
need to be very clear that we want the
user to login you would want him to put
his username which is a text field weird
water you put in his password which is
again a text field you might have a
Remember Me which is a checkbox you
could have a forgot password link and
you need to have a login button now for
the new user there are two things which
need to be done from the perspective of
Twitter you need to reinforce to the new
user that he needs to sign up therefore
you need to have some marketing text you
also need to have a sign a process now
that we've understood this let's look at
a basic wireframe of how this would have
looked first and foremost you would have
put in the header the header is the
navigation element that is on the top of
a web page then you become with a footer
footer refers to all those set of links
which are at the bottom of the page now
we start putting in the field which are
relevant so you put in the law the login
field for the user name the text field
the password which is on the text field
the login button the remember
his check box and the forgot password
isn't name you put in your marketing
text and now you focus on the sign up so
what are all do you need for signing up
you need the person to give us me his
email id and its password and of course
you need a sign up button you would also
want to reinforce certain things so in
your discussions you have come up with
the latest tweet let's keep that on the
home page alternately let's keep over
the dynamic background image these are
the ideas you should have comment during
the process of building the wireframe
this wireframe when it was given to the
design team properly translate it into
something like this so as you can see
this is your header this is your footer
this is your block in component this is
your sign up component this is your
marketing text so let's see a game how
does three reaches out to both city with
users for the new user he wants logging
so you have the login component both
Twitter and the returning user both have
to login for the new user he has the
option to sign up this is what Witter
wads and therefore it's keep kept a full
open field here because the new user
wants to check out what is happening you
put in some marketing text over here and
you keep showing some activity here that
is how the the wireframe got essentially
translated into the design