Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
For this wireframe, we will create a survey and tip screen for the ridesharing app.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
For this wireframe, let's create
the survey and tips screen for
0:00
the ride sharing app.
0:03
At the end of every ride,
0:05
we wanna show a screen which allows
the user to leave a rating for the driver.
0:06
We wanna make sure the app
gets this feedback so
0:11
they can assure they have safe,
friendly drivers in their network.
0:13
Also we want to provide an opportunity for
riders to leave a tip for the drivers.
0:17
I’m gonna use components from
the Wires UI kit to speed up the process.
0:22
This survey and tip screen will appear
after the rider reaches their destination.
0:27
I think it’d be cool to
show as an overlay so
0:32
the rider can see the end of their ride
in context to the feedback screen.
0:35
That way it doesn't seem disjointed.
0:39
There's pop over component in Wires
which is a great base design for
0:42
creating a pop over effect.
0:47
Copy the six pop over art board, and
paste it into your wireframing document.
0:49
Press Command + C to copy it.
0:54
Press Command + V to paste it.
1:01
We'll want to use a map in the background,
and luckily Wires also has one of those.
1:08
Copy and paste in the one locations and
maps art board.
1:13
To move the map to the back of the screen,
1:44
press Control on your keyboard
while clicking on your mouse.
1:47
In this menu, select Send to Back.
1:53
Let's also delete the unnecessary
components that we won't need.
1:58
I'm gonna change the title
here to Rate Your Driver.
2:16
And up here instead of Location,
a more appropriate title for
2:23
this would be You've Arrived.
2:26
I'm gonna make this bigger too.
2:31
I'm gonna delete these screens
that I'm not using anymore.
2:41
And I'm gonna switch
all this to gray scale.
2:45
The blue's a little distracting, and
I just want this to be all neutral colors.
2:49
I'm gonna get rid of this shadow,
and just add a simple border.
3:37
This is just a wireframe, after all.
3:42
I don't need anything too fancy for
the effects.
3:47
Let's revise the text in
the bottom gray rectangle to show
3:50
a destination address
along with the ride times.
3:55
Copy the check mark icon
from pop over seven, and
4:15
use that to denote the ride is complete.
4:18
You can nudge it with the up and
down arrows on your keyboard.
4:52
Now let's build out the actual survey and
tip content.
4:57
For the star rating, choose the stars
from the nine Filters & Search art board.
5:01
I'm gonna make this bigger and
center it on the screen.
5:28
Change the fill so
5:32
all the stars appear in their initial
default state, which is a lighter gray.
5:33
To easily select items, hold down
the Command key as you click into them.
5:37
This will make it easier to select
items which may be in groups.
5:43
Adjust the tip section
to show the tip options.
5:50
I wanna give a couple
suggested tip amounts so
5:54
the rider has a easy way to quickly choose
a tip amount, and also gets a sense for
5:57
an appropriate compensation for
a nice ride.
6:02
I'm gonna add a line to
break up these sections.
6:06
I wanna break out the rating
section apart from the total.
6:10
I'm gonna Control and click on
these to make them into a group so
8:25
they're easier to center on the screen.
8:29
Now I'm just gonna play with the spacing
to make it a little more organized.
8:39
I'm gonna make that map a little darker so
it's easier to see.
9:07
And them I'm gonna add a rectangle
behind the navigation,
9:13
so that way that stands
out better as well.
9:16
If you ever get lost in all the layers,
click the Layers icon and
9:32
then you can easily navigate
all the different layers.
9:35
That's it for my first wireframe.
9:47
At this point, I'd like to move on
to an iteration of this design.
9:50
I like the pop over effect, but
the tip section looks unbalanced, and
9:54
I want to clarify the connection
between the total and the tip.
9:58
I'm going to duplicate the art board by
selecting it and holding down the Option +
10:02
Shift key on my keyboard as I drag
it to a blank spot on the canvas.
10:06
Now I'm gonna edit this new
art board with my alterations.
10:12
In this new iteration,
the receipt looks more balanced, and
10:56
I like how the tip aligns
with the total amount.
10:59
I would normally keep iterating, but
this is where I'll stop demoing and
11:03
let you try it for yourself.
11:07
What ideas do you have for this screen?
11:09
What are its weaknesses?
11:12
What are its strengths?
11:13
How can it be improved?
11:15
Keep iterating on it.
11:17
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up