Designing a Dating App in Adobe XD

hey everyone and welcome to my very first behind the design my goal with this series is to show you a little bit about my UX process whether it be for a project just for fun like this one or a project that I'm spending months and months on for my residency so today I'm gonna be showing you how I came up with the idea wrote my problem statement made some user flows and then finally developed some high fidelity designs that are prototype and animated I thought about redesigning an app that is super prevalent now throughout Kovich so I asked you guys on instagram if you'd rather see me free design instacart or zoom and zoom by far got the most votes so that's what I started out doing but as I was thinking about my idea and the project I decided I wanted to do something a little bit more fun a few weeks ago I was talking to a friend of mine who actually is dating virtually on FaceTime and has been doing that for a few months and I thought that was really interesting and something I hadn't thought about before the prospect of dating apps right now is really interesting because you're not really going to meet up on these dating app so I just thought I could come up with an idea to transform zoom into a dating app that could solve a few different problems so I didn't want to go crazy with this app I wanted to focus on a specific user and what they would want to get out of it even separate from Kovan so what I'm focusing on for this is someone who wants to meet other singles virtually like on a dating app but without participating in swipe culture a lot of people I've talked to who are on dating apps have gotten to a point where they're either addicted to swiping or they're just not getting really good quality dates from swiping so I thought that using video conferencing technology could be a super cool idea to solve this problem so I started by sketching out some user flows that could use video conferencing as a way for singles to meet each other I had a few different ideas my first idea was the idea of group video dates so you know a big group of people and zoom probably like a lot of you are doing right now with your friends and family but it's all new people that you're meeting and it could be based on shared interest so you could just have group conversations about things like travel or tech or you know whatever you might be interested in and then I started exploring that idea a little bit and I thought about actually speed-dating and the idea of speed-dating virtually and so that was really interesting to me and I decided to pursue that idea for this project so once I decided that that was the solution I wanted to go with I decided to take my user flows onto the computer and XD and make them a little bit more refined sometimes during a project this is where I would wireframe and actually create grayscale screens to show what would go on each screen but for this I wanted to keep it kind of simple and get straight to designing so instead of wireframes I actually created these cards that I turned into a little bit more of a fleshed out flow so as you can see each of these cards has a title of the screen as well as what should be included on that screen so it's really just bullet points to remind myself what I need to include when I get to designing that screen then once I built out the whole flow of the app I wanted to hone my focus a little bit instead of designing out every single screen that this app needs I wanted to just focus on the most important ones and it's totally okay to do that for your portfolio and your case studies as long as you have a reason for which screens you included and which ones you didn't and you should be able to answer questions about what would happen if someone clicked a certain button that's not necessarily in your prototype you want to think about the whole flow but then you can focus on high fidelity designs for just a focused group of the flow so for me I wanted to focus on the process of browsing through different zoom events based on shared interests so you should be able to browse through these categories and different events and actually join them and then see which events you've joined in your homescreen and of course the other flow I wanted to include was the actual date itself so what are the interactions that are involved in the series of speed dates how do you go from one day to another how do you match with someone after a date and what can you do with a person once you've matched so now that you have a little bit of background I'm gonna walk you through my final designs and then get into the nitty-gritty for some of these interactions to show you how I created them okay so I'm just gonna walk you through all of these screens that I designed for this app and then I'll go through and show you quickly how I created some of the interactions that are a little bit more unique and complicated just in case you're interested in learning some XD tips along the way so first let's leave the prototype okay awesome so this is the first screen that a user would land on this is their home screen and what we're seeing is first they're gonna be shown events that are happening soon and give them the opportunity to go right into the event and then they're also gonna see events happening this week and if we use or had even more events you would be able to scroll and see those next we're hopping over to the zooms for you screen and this is where you can scroll through tons of different events that are happening so these ones are happening this weekend based on your interests these are all of the events happening based around the travel interest and food and art so these categories just come from your preferences so if your user and you've typed in that you are interested in travel food you know tech design that kind of thing that's why these things will come up and so what you can actually do as if a event is interesting for you you can look and see some more details about it and that will show you you know when it's happening the description as well as some events you might be interested in that are related and then of course you can join the zoom so for this I've created a button with two different states so this is the success state so it says you're going view your zoom so we can go and this takes us back to home and now you can see this for wine lovers event is now on your home screen because you're attending it and so now let's say that a user wants to hop into an event that's happening right now so you can click enter to zoom and there's this handsome guys just waiting for you on the video chat so this is just to show you know of course it doesn't look very realistic but this image is just to show you that a you would probably see you know like waiting for Jeremy and then when Jeremy also joined the speed date you would see him and you guys would chat and you would only have ten minutes to chat because it is a speed date so and that's the timer that would hypothetically be counting down and then there's this little guy so you can actually pop him out and then you can it may be the conversations getting kind of stale and you need to you know maybe just prompt each other with a fun question to answer so the app just provides randomized questions that you can ask here and here you see your kind of progress bar so since it's a speed date you might even have like eight or ten people that you're speaking with and so this is just showing you that you're you know this is showing you you're on the second-to-last speed date so that is kind of cool and then you can collapse that again and then let's say that particular date those ten minutes are up then this is going to pop up and if I were really designing this app I might make this screen a little bit more interesting to me it's a little bit boring but just for the sake of time I wanted to get the idea out there so now you can say okay did you feel a potential connection with Jeremy and so maybe I say yes and then it shows you it's a match and so now once you've matched with each other you can actually set up dates to zoom one-on-one and message each other but in this case there are actually more dates happening within your speed date event so you don't really do anything with Jeremy yet but you click on next date and now you're having the exact same type of thing with the next person so this is Joseph you can collapse and open up at this modal and then you can do the same exact thing so okay maybe I wasn't super into Joseph no worries not every day can be a match made in heaven so now you're finished and so what I wanted for this last screen at the end of your date was kind of just a summary page so your matches from this zoom so we've got the cover photo and then we have each person that you did match with so no need to point out the people you didn't match with but maybe you did match with these three guys and so you can go through and go straight to message them or you can go back and view all of your matches so this now is my matches tab so I can see everyone that I have matched with and then go in to the messages with each person so let's say that an incoming message comes from Elijah so I'm gonna go into that and now I can see the messages that I have with him so he just sent me this first message and this is kind of where I'm wrapping up the prototype is on this screen but the last thing that I definitely wanted to point out was that I've created this button this ask out button so like we talked about earlier once you're matched with someone you can actually ask them out on a second video date so you can create an invite here and so that's what that's for okay so the first thing I want to show you is how I created the screen of zooms where you can scroll through all of these events and different categories so it's super easy with the new feature in Adobe XD so I'm going to show you how I did it first what you want to do is you want to group everything that you want to scroll vertically on the page so that's kind of like normally how you would see something scroll and normally you would have to just lock this at the bottom and everything else would scroll if you extended the length of your artboard and then capped it off at you know wherever the end of the artboard might be but this makes it a lot easier so what I did was I grouped together everything that I want to scroll vertically and then I'm just clicking on this vertical scroll button so then what I want to do is make sure that I've got everything I want in the frame and nothing more so we're gonna kind of just bring it over here just to see so I think that's kind of where I want it to start and so therefore it shouldn't go past here the scrolling so that's kind of how I'm doing it for that but then what's even cooler is that you can do the same thing for vertical scrolling or for horizontal scrolling so what you do is you select the group of all of these events in a horizontal line and you do the same thing except this horizontal scroll button so do that and then same thing you have to set the constraints for where you want it to scroll so I'll do that in a second once I move it over to this artboard but I want you to kind of be able to see what's happening here so that's where we want to start right here and right here so then I'm gonna move all this over give it 20 pixels and then what I can do is I can actually click on these and make sure that we're starting at the beginning of the artboard and ending this constraint at the end we're just going to do that for all of these awesome and now okay let's see how this looks so we're going to play it awesome it Scrolls perfectly that way there we go and that's exactly how we want it to look so you should definitely check out scroll groups if you haven't updated yet in Adobe XD I feel like there's so much you can do with this so definitely it tag me on Instagram or I don't know send me your stuff on dribble if you do anything cool with this because I feel like it could make for a lot of really awesome prototypes the next thing I want to show you is how I created this sort of pop out and so what I did was I created it in two different states so we'll kind of remake it off to the side um let's see so we just need a rectangle here we need his name back 20 pixels we need this timer which also give 20 pixels right then I'll grab this guy so right now I'm just I'm just grabbing things I'm not actually animating anything yet so then we need our Ghost button so that means me make this a good bit higher cool and I always start with this state that has more going on or more content and then kind of remove from there with the second state so that's what we're doing here awesome so as you can see these are all the elements we need to create this so now what I'm going to do is select everything make sure to deselect our photo and then we can create a component by doing command K and then once it's a component we can add different states so we'll do the plus button over here to do a new state and then in this state we want to change things so that it's the closed state so we'll need that closed so in the closed state we really don't need this button and we don't need this progress bar so what I'm gonna do is just drag it off to the side and decrease the opacity and then we also don't need all the space of course so what I'm gonna do is bring this down and we're just gonna make this into a little button so we're gonna drop this guy over and turn him so he's really just the open button at point and then since we have all of this empty space we can kind of move the name down so that it's just above our timer so here is the closed state and now once we've got those two states designed you can see make sure everything looks good in each one now we can hop into prototype mode and we want to select this close button tap to bring up our animation or our interaction panel and then we want Auto animate to be on and we're gonna choose the closed State and then let's try snap for this cool and then we have to do the reverse so we're gonna select this guy and we want on top for that to auto animate back to the default State cool so let's check out what this looks like make sure this looks how we want it awesome so that's exactly what we wanted and if you haven't used auto animate before it's really cool so what it basically does is it looks at the components or I guess the objects that you have in each state and it will look at the difference between them and then animate in between so that it looks really smooth so that's just a way to make animations look so so smooth and I love putting snap on because then it looks even cooler okay awesome so now lastly what I want to do is talk about how I did these matches screams so I'll show you what I'm talking about here what we want is for a new message to pop up here and it's really easy to do that now with stacks so I'm going to kind of recreate it so what I did was I've got all of these components and I grouped them together and then just checked off stock and so that actually makes it so that you can move things around and it's a content aware tool so when you're moving things around it knows the space that you want to keep between them and so it keeps it nice and even so I'm going to use that function in order to create that interaction of some one of a new message popping up so what I've got is this first artboard that we're starting out on and then I want the next artboard to be the new message so we've got this person is going to message and so we can turn on the notification state that I created so the same way that I created two different states in the previous example I just changed some things around so I put the actual message that he and I added this notification dot here and so that is really all we have to do and then we hop into prototype mode again and what I've done is we are going to make it so that once I press the end key this interaction is going to happen so we want Auto animate and maybe we don't want snap maybe we want ease in and out and so that is going to auto animate between these two our ports so let's check it out to the side so I'm pressing and and this is just I'm using n because this is really something that would happen behind the scenes without this user needing to take an action it's just something that's happening this person is messaging you and so as the person controlling the prototype I just wanted to have a way to kind of cue that new message so pressing N and perfect it slides right up and we have this new message if you have any questions about UX design or Adobe XD whether it be research prototyping planning your project creating case studies building your portfolio anything like that please leave them down below in the comments and I'd love to read through them and try to cover them in a future video thanks so much for watching and I'll see you next time bye [Music]

Channel: Maddy Beard

Views: 4,364

Keywords: ux design, dating app

Id: tPq0jmCQzro

Length: 21min 20sec (1280 seconds)

Published: Thu Jun 18 2020