Group session July 1st

Lesson Intro

Now that we’ve explored the ecosystem a bit – and we’ve got a handle on the data, lists, and components… now, let’s make a plan. What are we going to do with them?

What do we actually need to make?

These layouts are nothing new to you

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.

Landing page

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

Default layout

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)

Restaurant detail page

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?


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?

Single item modal

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?

Small screen item detail

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.

Some restaurants have different options

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.

Sign in

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?

Profile overlay

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?

Payment settings

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.

Confirm delivery address

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?

Add item modal

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.

Variations in the add item options

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.

Sometimes there are a lot of options

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.

Fly-out cart view and order total

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…

Extra hover information

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

Marketing spots


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.

"Flash messages"


don’t copy this.

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

OK! You've got this. Make it happen.

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 😉

Group session July 1st