Demonstrating Wireframes in Adobe XD

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 Layera 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