DAVE CLEMENTS: Hi, I'm Dave Clements, Head
of Design at Novoda.
DAVID GONZALEZ: Hi, My name is David Gonzalez,
and I'm Technical Product Owner at Novoda.
And Novoda is a software development house,
specialized on Android.
And we're based in London, Berlin,
and very, very soon in New York.
So we are going to show today how we use paper wireframing
to build native prototypes of our apps.
DAVE CLEMENTS: So initially, we start off
with an idea, which we will discuss with the client.
Go through persona, stories, et cetera,
break down the feature list, and begin drawing.
We work in sketch books, keeping it really simple, really fast,
so that you can iterate through those quickly and build up
user journeys with those images, which we can then
send to the client and have discussions over those.
OK.
So I start with just drawing a simple screen.
Let's say I'm doing a phone layout.
And there's a system bar and a navbar here.
And yeah, just start literally scribbling down
basic information.
Put some tabs here.
And we've got an area here with an image in.
And maybe that's a card with some bits here,
It's literally as simple as this,
really rough, not time wasting.
And I might just add the occasional bit here and there
of sort of this brush pens to give a bit of depth
so the client know what's going where
in terms of the hierarchy layer.
OK.
From there, we take the drawings that we've created,
cut them out, and pop them on a table.
And we as a group sit down with designers, developers,
et cetera, and just move things around, move screens around,
overlay parts of screens to basically
come up with user journeys that we feel
are good enough to show to the client.
From there, we send them along and wait for feedback.
So we've got these slices we've cut out,
these pages, these screens, whatever
you're going to call them.
And we didn't think, all right, we
need to create user journeys.
So the first screen--
DAVID GONZALEZ: We have the first--
that was the first screen, right?
DAVE CLEMENTS: We might have a navigation draw.
We know that's going to slide in and out.
So if you don't mind, we'd hold that back.
DAVID GONZALEZ: Yes, see that looks nice.
Yeah, it looks nice, huh?
Yeah.
DAVE CLEMENTS: Yeah.
It looks good.
DAVID GONZALEZ: I like.
DAVE CLEMENTS: And next page, we scroll it unto here.
DAVID GONZALEZ: Where are we going from here?
We have this.
DAVE CLEMENTS: This is showing that we can swipe up
and the title disappears.
The tabs lock.
Moving on, we'll click into-- let's just say that one.
This is actually not important for the moment where we go.
But the point is we're showing this user journey.
So then we may say, should we tap this area?
We get this pop up.
Once we've laid these out, and we've decided,
OK we don't need this, but this all user journey.
We just simply photograph that.
And then we'll upload that to say Basecamp or JIRA,
and the client can take it from there.
And then from there, we may develop further,
create more user logic flows, et cetera.
But this is the basic.
DAVID GONZALEZ: So the third phase, we
got to build a prototype.
So we get all the designs and all these asset
that we've been cutting out.
We'll put them on a native app.
So we would build an actual app that the client will use.
And he will use them.
They will play with it.
And they will decide internally if they like it or not.
And then if they don't, we just do it again.
Yeah, now what we would do is when
we have these images based Basecamp or on JIRA,
we'll put these on a very simple layout.
Here we have a frame layout.
And the other thing we do is just inflate it
and get some stuff like the images
and the pictures and the text from the headline.
And very easily displayed just put it here.
As you can see, you can have a very quick image
of how it's going to look like on the app.
So now this is-- what we're see here
is the first screen of the app in this case.
And this is a very simple logging and [INAUDIBLE]
activity.
And in this case as you can see, it's
just very simple layout, which is
showing frame layout of buttons.
Everyone single one has the listener set.
And then it is a very simple sketch UI.
So in this case, when we click on the login screen--
on the login button, we will go to the list of articles
that we just saw before.
And what we're trying to do is here
is when the user takes one of the items on the list,
it will go to the article.
And the article is just a very single fragment
with a very simple layout when they can just
see images and text.
And as you can see in this case, it's
just a scroll view with a linear layout.
And two items, which are frame layout, which
is the image and the text.
And with this, we pretty much build the whole UI for now.
So the only thing we need to do is just build the project,
compile it, and use the APK.
So what this allows us is to have a very fast interaction
with the client and very fast iterations on the process.
And this will make us save a lot of time
of developing and drawing things.
And that will be a much better outcome for the project.