Part 1

You’ve been tasked to update the Click and Collect section of the Joe’s and Bros website. Use a prototype software of your choice to mock up one idea. You only need to do the first page of the menu.

The first thing I noticed was that the ordering site looks very different from their main page, it is not consistent enough with their look. Also, I would much rather see the whole menu on one page where I could select the items I want to order rather than needing to click on each category and only seeing those items. This would make it easier to compare items and prices as well. However, I would add a menu bar at the top so people could jump to specific categories if desired.

Part 2

Based on the website examples we have seen today, make a list of which other changes you would make to the Joe’s and Bros website?

Overall, everything would need more consistency, structure, and attention to detail. They should also focus on higher quality images, the quality of their writing and placement/size of text and design elements. The biggest issue I see with their site is the lack of consistency, without which it is hard to build a brand image.

Home Page

1. The menu bar on top should be just one line. I would move the logo to the left and make it smaller so there would be enough space for each item on the menu bar. I would adjust the sizing if needed to make sure everything fits and is uniform and pay attention to equal spacing between each word.
2. Where it says “Pre-Order your Food” in big letters, I would make this a clickable link as well that takes you to the Click+Collect page. Also, while the yellow background to this text really stands out, I do not see yellow anywhere else on the page, so I would change this and stick with the brand colors as consistency is essential to the brand identity.
3. Right below this, I would work on the grammar, punctuation, and placement/flow of the text. Although they have a casual language and business style, they should still focus on being more professional when it comes to the quality of their writing.
4. I would reconsider the font, or if this is important to their identity, I would introduce a secondary font that is more pleasant to look at and easier to read. I would use their current font for headings and the secondary font for body text.
5. I would replace the 3 pictures on the top left with higher quality photos. Although they are okay and they would not deter me from ordering (if it’s a family business), those first three images would be better to use for social media posts. Taking some better photos or even hiring a photographer would up their game. After looking at their gallery images, I noticed that they actually had quite a few beautiful, high-quality images that could be used on their home page. Using the images they have appropriately and in the right places would strengthen their brand image.
6. The image colors of the Gillabey St. location doesn’t work well with the blue and black font colors placed on top of it; there is not enough contrast. This would need to be changed/re-configured in some way using the appropriate image with the brand colors only (I would not use black for the “view menu” part, which is pretty much invisible).
7. I don’t know if it’s just me, but I don’t quite understand this sentence: “OVER THE SUMMER AND AFTER A FEW LATE NIGHTS DREAMING WE HIGH FIVED ON JOE’S + BROS.” – I feel like this does not communicate their vision and dreams appropriately.
8. The icons for “drink good coffee”, “eat better food”, “listen to great music” are way too big. I don’t think this is necessary as it takes up a lot of space. Personally, I would also reduce the font size in most cases as well as the design elements.

Other pages

1. There seems to be some random color usage here and there as well. For example, one menu uses green text for their headings. I did not see this color anywhere else. It is also inconsistent with the look of the other menu. However, later I noticed that the location uses this green color as part of their interior design, so perhaps this is how this location is distinguishing itself. In this case, however, the other location should also have an extra color. As many things on their website, this lacks consistency which makes the brand a bit confusing.
2. The links to the menus on their catering page doesn’t work at all. I also noticed that in the drinks section of their menu there is an item “decaf” that doesn’t cost anything at all, this seems like an error as well. They seem to have errors on their site here and there, which could frustrate the customer and/or make them look unprofessional. This is not elevating their brand image.
3. I would work on organizing the menu items in a more structured way and give a consistent look to both. The headings need more structure as they look haphazardly placed. Also, on the Gillabbey menu the one item under SALADS is center aligned while everything else is left aligned, so this would need to be fixed. Uppercase and lowercase letters are used in a completely random fashion when listing ingredients and in some other areas as well.
4. Beverages and Smoothie Bowls have an icon while the other categories do not have one, again, they are inconsistent, not to mention the icons are too large.
5. The beverages section looks different on the two menus and they are a bit oddly placed as well. Also, the menu on the website is a bit inconsistent with the menu on the Click+Collect page.

There may be many more things, but these are the ones I noticed first…and this is getting long. 🙂