Food order and delivery application exploration

So start thinking about these conventions and get them in place. You can be extra creative in other projects – or in a few select parts of this layout. These interfaces have become established conventions.

There’s usually some landing page, right? This one seems especially uninspired.

How are these grouped? What did you look at first? How many points of data are there? How many data resources? What happens if you search? What happens if you click a category? What filter options are there?

What does the user want? Are they able to get it?

(note that this view had a sidebar on the left)

These results feed will change as you type.

Is it searching all the restaurants in the world? Or just the ones that match the 90210 zip code. Does it get the data right when you get to the website and put in your zip code? Or after you start searching? How many things are clickable in this moment? How many different routes could you take?

How many components are on this page? Which things might be computed properties?

Currently, we’re not signed in. What happens if we click a little “favorite” heart icon?

(note that this view has no sidebar on the left)

What properties can these be sorted by? Can a “soup” also be a “specialty” – a “special” or “chef’s favorite?”

As a user, which things do you want to see first? Does the little jump-to menu on the left help? Does it feel cramped?

How many search boxes do you want? When I searched for the one on the right, it filtered down only the items with those words and also highlighted them.

Super helpful right? 80% love it. 10% hate it. Every review site ever?

Is there a less accidental way to display these? Or is this just what you get? Should you be able to upvote a review? Or would that lead to rampant cheating? What if people who had a more even number of negative and positive reviews got more power in the feed?

Is this 3D or what? It’s like there’s a page on top of another page.

What if we need to make an adjustment? Can you leave off an ingredient? What if you want chicken on one, and tofu on the other?

Seems to fit pretty well. Do they force the restaurant to take pictures? What if there at no images? Maybe they pay a photographer to go out there as part of their signup fee.

Note all of these errors! Looks like the adtech is trashy and broken as usual.

Apparently – we can’t actually put that thing in our cart.

Sticky Rice didn’t have a delivery vs pickup choice, did it? Maybe that’s because it was closed? So, that component would need to be aware of those hours.

This is an especially ugly sign-in! It’s so crappy – that for just a second, we wondered if this was a fake GRUBHUB scam. Those social icons are yuck.

What happens if you don’t have an account?

What are the pros of having this as a modal instead of a part of the page or its own page?

If was easy to find the payments area.

Everyone has gotten used to the convention of the little human bust icon up there in the corner right next to the cart button. It’s so common, that choosing not to have it there – is like choosing to hide it from your users.

Note GRUBHUB’s colors scheme. Orange is the primary color – and purple is the counter/highlight. What if each restaurant got to choose its colors? Would that help users find what they need? Or possibly choose which companies align with their personal style?

It seems like we have to change out our cards often. Maybe they all just expired in the same time period or something – or maybe it was because they got replaced with the type with chips. Either way, this screen seems to be the screen we use most. It doesn’t need to be an especially fun screen but this one is pretty boring.

What is up with this Google button?

It would be possible to put all of this data on one page and just scroll, right? But there are some pros to having their own sub-routes. For one thing, if you don’t do your homework at PE and end up answering phones at this place (JK) – then you could direct people straight to the right URL they need /profile/personal-info or /profile/personal-info. If those things don’t have a permanent URL, then they might change places and leave users confused and frustrated. Saying “Well, go to the home page – and scroll down about 7/8ths of the page – and then on the right box are there’s a link… or did they switch it out with the latest promotion…” isn’t good for anyone.

This modal popped up after putting something into the cart. It’s trying to make sure–that before we go any farther–that we are in a serviceable location. That’s good for everyone.

If the user has allowed the web app to query for their location – then that could be useful. But sometimes you are ordering food in the morning for your office party on the other side of town. Have you ever tried to buy something only to find that “your store” is in a town far away?

This restaurant has a spot for special instructions. But not all of them do.

The details of this visual language are a little off. Do you see what we mean? Which parts are causing the friction? This also seems like a good place to show the photo. Maybe this is a case where there isn’t one.

It’s interesting how in this case they are asking you to specifically say “non-vegan” for a “classic pepperoni pizza” (which is made with cheese and meat.

Do you see how the close button is different than in the other modal? That’s weird. This is a very reusable component. It’s not a place where these mistakes should be happening.

You can’t see it here, but this modal scrolls waaay down. There are a lot of options. When this happens, you start to wish you could break out of the modal and use the whole screen. But this isn’t a bespoke website. This thing needs to handle hundreds of menus as gracefully as possible.

It’s pretty small – but handy. Why not just go to the cart page? Would the user lose their place in the menu? Maybe they just want to see if they’ve ordered enough things – but don’t want to leave the page.

(Note that this one has a sidebar on the right)

How many unique page layouts are there in this app?

Not sure what this screen is. Marketing in the middle of the checkout process?

It seems like the actual order would have the main stage. Not very exciting. That button though…

I wonder if there is any user data proving the value of these.

Seems pretty clear. Footers, right? What can you do. That seemingly 3rd-party country selector feels off, though.

This view of the restaurants is much less fun than the other one. And it breaks connection like Netflix / by changing the thumbnails the user was used to from when they favorited it to begin with. This area looks like a not-so-hot stock CMS or something.

Yikes!

don’t copy this.

Also: this just in: the cool kids call them “Toasters” now or something.

Obviously, we’ll be here to help. But pretend this is your task. We’ll be trying to hit all the little user interface patterns.

You could do this with any framework, but this time we’ll be using Vite, Vue, Pinia, Firebase, Vuefire, and that whole crew of buddies.

This is your chance to take everything you’ve learned and plan this process from the high level. Don’t just dive in there and start hacking away 😉