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