Designing the Customer-facing UI with TailwindCSS

[00:00 - 01:26] So if we want to create a booking UI that looks like something the customer has seen before so they won't be surprised, how do we figure out what that should look like? Well the obvious choice is to go and look for a competitor and there are certainly lots of competitors for booking so we could do that but the somewhat annoying thing about that is that you would probably have to create a user and sign up for something in order to get to see the actual UI. Maybe we could find something somewhere but I tend to do something and I find it is a bit simpler. So there's a website called Dribble that's Drib ble with 3B's which is a design website where designers of all kinds show off their work . So if you Google Dribble and then whatever you're looking for you're going to find lots of examples of designs for something that you're looking for. So if we Google Dribble and Scheduling for instance I find among other things this design that I like. So you can see here this is a sort of modal that is centered on the page and it has a header and then two calendars next to each other. I think that's quite nice it gives you quite a bit of selection when you're booking something and you can see which dates are available and then once you've selected a date it looks like you can select a time slot underneath. So if we were to create a use this as our starting point let me just try and sketch something really quickly here.

[01:27 - 03:28] I'll have this dialog here in the middle and we will have the header up here and then maybe these two calendars and if you've selected a date maybe you can select the time slot. I don't think we need to put them underneath each other like they did in this picture because we are just we're not going to say three spaces left or anything like that so we can just list them like this and then instead of like so we're going to need some more details obviously we want their email address and maybe we want some details about what they want done and we also want them to tell us what type of service they want done and we could obviously put that on the same page but I think that would get too complicated. So I think we should instead create a wizard out of this so if we add little back and forth buttons here we can create additional pages that the user will get to maybe before and after so this first one should only have a front maybe this is where they enter a description of what they want done and maybe they will select a type of service and then here on the end maybe there's going to be an email button and they can still go back from here but then they can submit everything on that dialogue. This seems like a fair place to start so let's use this as our approach to what we have. So one thing to consider now is whether or not this should be based on URL navigation so each of these pages could have a separate URL and we could do that with client-side routing so it's fairly simple to do but obviously if we do that we might be creating some weird situation for the user because if you the good thing about your own navigation is that you can bookmark a page or you can send a link to someone. Also the browser's back button works the way you expect it to.

[03:29 - 04:02] Those are all very nice things. On the other hand this type of wizard is not really something we want people to bookmark at least not in the middle of the flow. If somebody were to send say this page to their friend what do we want to happen actually because they have entered something over here and what would that mean then? So I think we just want one URL for all of this and then we're going to handle navigation as state. So we 're going to be looking at that but we're not going to get into that just yet that's part of the front end part of our course.