Creativity vs. UX

As you can see from the screenshot above, Oath Pizza follows this pattern. Logo is always in the top left corner and clicking on it takes you back to the homepage.

In contrast, Flatbread places its logo in the bottom right corner and doesn’t use it as a homepage link. The logo is also not visually distinctive, which makes it hard to find in the first place.

(Note: I would have never spotted the logo had I not googled it. Initially, I thought that it was the flying tomato at the top. However, it’s just a button that links to the Locations page).

The logo in the bottom right corner is present only on the homepage. Once you navigate to the other areas of the website, it disappears (which might explain why it’s not a home link, after all).

Depending where you are on the website, there are a few different ways to get back home:

If you are on the Menu page, you can return home by clicking the large “Flatbread Company” sign in the top center.

Or, if you are on either History or Locations page, you can click use a navigation menu in the top left, where “Home” link is one of the options.

At first I didn’t even notice the explicit “Home” button because I was too focused on finding a way to return home implicitly, by clicking a company logo. Inability to locate a clickable logo made me feel disoriented.

Speaking of buttons, let’s move on to our next point…

Buttons

Buttons should look like buttons to help users spot interactive elements and they should remain consistent throughout the website to ensure users don’t miss any clickable items.

OTTO website follows these principles — their buttons are square, red, and they darken on hover. This consistent design makes it easy to quickly navigate the website.

We can’t say the same about Flatbread buttons. Their design varies across the website and at first glance, it’s hard to distinguish which element is clickable and which is not. Most of the buttons also don’t have a hover effect, other than a pointer cursor.

Some Flatbread buttons, for example, look like road signs:

And some look like leaves:

Some are one of a kind:

And some, as seen before, are colorful flags:

While unpredictable button design sounds like a guaranteed way to annoy the user, I, on the contrary, had the opposite experience. Instead of feeling frustrated, I was captivated to figure out clickable areas of the website and discover new buttons. I have to admit though that I wasn’t in a rush and I realize that my reaction could have been way worse under different circumstances.

Menu / Navigation

Just like buttons, navigation should stay consistent throughout the website and look interactive. It should also be well-organized, placed in familiar locations, and user should always be able to tell where they are on the website.

Oath Pizza follows these guidelines:

• Menu is always at the top, where users expect to see it.
• Menu is located in the same spot, no matter where on the website you are.
• There’s a visual indicator to keep users aware which section of the website they are in (the color of the current section name changes to yellow).
• Menu links look interactive and change color when you hover over them.
• Link labels are understandable and familiar.
• Overall, menu is well-organized — everything you might need to access can be easily found in the main menu.

Flatbread navigation, however, is a bit disorganized.

On the homepage, we see a small main menu at the top with only three options — Home, History, and Locations:

Aside from the main menu, there are links for Company Store, Gift Card, Gift Card Balance and Online Ordering.

At the bottom of the page, there’s also a Job Application link, in addition to repeated Gift Card options and separate links for every location.

Once you navigate to one of the main menu links (in this case, Locations), navigation shifts its position to the top left corner and displays new links — Menu, Contact, Directions, and News.

However, Locations link is no longer present, which makes it impossible to visually indicate on the menu which section the user is in.

In addition, there’s a separate Mobile Oven link just a little bit below the main menu. Apart from it being difficult to spot visually, the link label is also unclear — it’s hard to tell whether “Mobile Oven” stands for “Catering”, “Online Ordering”, or perhaps, “Truck”. While it’s hard to deny that “Mobile Oven” is a cute name and surely adds to the character of the website, using it as a link label could be confusing to the user due to its ambiguous interpretation.

This isn’t the only example of unclear link labels on the website. As mentioned above, homepage has two similar sounding buttons, “Gift Card” and “Gift Card Balance”. While “Gift Card Balance” is more or less straightforward, “Gift Card” could be interpreted in a variety of ways. It becomes clear that it’s a button for buying a gift card only after you click on it. Therefore, it would make more sense to rename it to “Buy Gift Card”. We could also enhance the label for the first button by renaming it to “Check Gift Card Balance”.

This was a lot for navigation, so let’s summarize:

• While Flatbread main menu is located where users generally expect to see it, it shifts its position depending where on the website you are.
• Menu links change as you navigate around, so you can’t be certain that you always have access to all available options.
• For the most part, current section link isn’t shown on the menu, which makes it impossible to indicate user’s location via the menu. Even if the link is present (as it is the case with the Home button), there’s still no visual indicator.
• Some link labels are vague and can be interpreted differently.
• The structure of the website isn’t well-organized. There are important links that are not part of the main menu, which makes it hard to grasp the overall navigation hierarchy.

Whereas buttons, despite their unconventionality, lead to an enjoyable user experience, I can’t say the same about the menu. Whether it was structured intentionally or not, it was disorienting and made it challenging to get around.

Bonus — Locations

Obviously, not every website has a Locations page, so this one is rather specific to certain types of websites such as stores, gyms, and in our case, restaurants. While there is not much information available on designing a perfect Locations page, it’s not hard to spot some common trends.

Here are some examples from a few popular restaurants:

Oath Pizza has one page for all locations, which are organized in an accordion list. Clicking on a location displays info such as address, phone, hours and whether there’s online ordering, rewards, breakfast, and other features.

OTTO Pizza is similar. The only difference is that instead of an accordion, there is a two-panel view — list of locations on the left and information about the selected restaurant on the right.

Unlike Oath and OTTO, Regina Pizzeria doesn’t have a separate page for all locations. Instead, the list of locations is in the main menu dropdown. Each location has an individual page, where you can find the address, phone, menus, and hours.

While the above examples may vary in their implementation of a Locations page, they aim to achieve the same goal. Their main purpose is to quickly give users information about a specific restaurant — where it’s located, ways to contact it, any features, etc.

Flatbread, once again, is different. First, there’s a general Locations page as well as an individual page for each restaurant. Second, going to an individual restaurant page doesn’t display quick facts about the place right away.

Instead, there’s a unique illustration and, in many cases, a paragraph describing the selected restaurant:

Locations page — Paia (Flatbread Company)

Pretty neat, isn’t it? I don’t think I have ever spent ~20 minutes browsing locations on a restaurant website. Like most people, I usually find info for the one I’m interested in and leave. Here, however, I was so charmed by the illustrations and descriptions that I ended up going through every single one.

I can imagine that drawing these illustrations and writing descriptions took quite a bit of energy and time. Even though they are objectively unnecessary for a functional Locations page, they are fascinating nevertheless. Nowadays, it feels like we are constantly rushing to only do the bare minimum, so it’s great to see that there are still examples out there showing us otherwise.

The purpose here is clearly different than that of the previous examples — it appears that the owners of the Flatbread Company strive to capture and pass on the atmosphere of the place, as opposed to simply writing out contact info and adding menu links.

Obviously, the contact info is still available— it just takes one extra step to get there. After you go to the specific location page, the menu in the top left corner displays “Menu”, “Contact”, “Directions”, and “News” options. (Yeah, some links don’t work and some link to the same page… We already know that the menu isn’t the best though).