For this wireframe, let's create the survey and tips screen for

the ride sharing app.

At the end of every ride,

we wanna show a screen which allows the user to leave a rating for the driver.

We wanna make sure the app gets this feedback so

they can assure they have safe, friendly drivers in their network.

Also we want to provide an opportunity for riders to leave a tip for the drivers.

I’m gonna use components from the Wires UI kit to speed up the process.

This survey and tip screen will appear after the rider reaches their destination.

I think it’d be cool to show as an overlay so

the rider can see the end of their ride in context to the feedback screen.

That way it doesn't seem disjointed.

There's pop over component in Wires which is a great base design for

creating a pop over effect.

Copy the six pop over art board, and paste it into your wireframing document.

Press Command + C to copy it.

Press Command + V to paste it.

We'll want to use a map in the background, and luckily Wires also has one of those.

Copy and paste in the one locations and maps art board.

To move the map to the back of the screen,

press Control on your keyboard while clicking on your mouse.

In this menu, select Send to Back.

Let's also delete the unnecessary components that we won't need.

I'm gonna change the title here to Rate Your Driver.

And up here instead of Location, a more appropriate title for

this would be You've Arrived.

I'm gonna make this bigger too.

I'm gonna delete these screens that I'm not using anymore.

And I'm gonna switch all this to gray scale.

The blue's a little distracting, and I just want this to be all neutral colors.

I'm gonna get rid of this shadow, and just add a simple border.

This is just a wireframe, after all.

I don't need anything too fancy for the effects.

Let's revise the text in the bottom gray rectangle to show

a destination address along with the ride times.

Copy the check mark icon from pop over seven, and

use that to denote the ride is complete.

You can nudge it with the up and down arrows on your keyboard.

Now let's build out the actual survey and tip content.

For the star rating, choose the stars from the nine Filters & Search art board.

I'm gonna make this bigger and center it on the screen.

Change the fill so

all the stars appear in their initial default state, which is a lighter gray.

To easily select items, hold down the Command key as you click into them.

This will make it easier to select items which may be in groups.

Adjust the tip section to show the tip options.

I wanna give a couple suggested tip amounts so

the rider has a easy way to quickly choose a tip amount, and also gets a sense for

an appropriate compensation for a nice ride.

I'm gonna add a line to break up these sections.

I wanna break out the rating section apart from the total.

I'm gonna Control and click on these to make them into a group so

they're easier to center on the screen.

Now I'm just gonna play with the spacing to make it a little more organized.

I'm gonna make that map a little darker so it's easier to see.

And them I'm gonna add a rectangle behind the navigation,

so that way that stands out better as well.

If you ever get lost in all the layers, click the Layera icon and

then you can easily navigate all the different layers.

That's it for my first wireframe.

At this point, I'd like to move on to an iteration of this design.

I like the pop over effect, but the tip section looks unbalanced, and

I want to clarify the connection between the total and the tip.

I'm going to duplicate the art board by selecting it and holding down the Option +

Shift key on my keyboard as I drag it to a blank spot on the canvas.

Now I'm gonna edit this new art board with my alterations.

In this new iteration, the receipt looks more balanced, and

I like how the tip aligns with the total amount.

I would normally keep iterating, but this is where I'll stop demoing and

let you try it for yourself.

What ideas do you have for this screen?

What are its weaknesses?

What are its strengths?

How can it be improved?

Keep iterating on it.