Subway Eat Fresh, Design Fresh.

Have you ever thought about ordering Subway online? No, not through UberEats or MenuLog. Through their website. As a leader of sandwich artists around the world, Subway’s digital experience is far from leading. It feels like a neglected arm of the Subway brand bucket that doesn’t align with contemporary UI/UX practice. Sure, the average person probably won’t use subway.com directly to place an order. But the lack of consistency in the brand and a failure to adopt modern digital best practice makes for a poor online experience. As sandwich lovers, we’ve designed a new Subway homepage experience. What do you think?

Positioning 

There are six unique messaging statements on the current homepage (yep, a tad overwhelming and illegible on your mobile screen). Keep it simple and don’t overcook the info you’re sharing with users. 

• We’ve got one core message that promotes ordering 

• Clear real estate for promotions and deals

• And a crisp image showing exactly what you can expect (that tasty tasty sub). 

Information Architecture

The old homepage had multiple layers to the navigation, messaging and CTAs. 

• Our new hero slider features one core message + CTA at a time

• All buttons are consistent from slide to slide (in position & shape)(which sets and maintains user interface expectations)

• Clear ‘order’ button and location search as the primary nav items 

• Popular menu items categorised clearly below the hero banner

• Other general content is peppered throughout in a subtle way (nothing overwhelming or dominating the order and menu CTAs)

CTAs

Less is more. The user has gone from a chaotic set of messages, sliders and images that act as call-to-actions, but realistically weren’t your traditional CTAs (ie. the old homepage lacked CTAs buttons at all).

• We’ve now got 2 x CTAs (order or location). No brainer for the end user.  

Don’t worry, we haven’t forgotten the other reason users come to subway.com - to suss out the menu. We’ve ensured that a glimpse of the menu is available below the fold. 

• The menu itself features a hierarchy of popular items. 

• The list is outlined not only in writing but with supporting imagery as they’re quicker for users to understand and act upon.

Navigation

The old nav was split between two lines. We hate to be picky...but it also had very small, pixelated icons. The ‘menu’ icon also wasn’t particularly clear - is this a menu or am I ordering?

• We’ve collapsed everything onto the one nav line 

• Introduced larger icons that clearly represent their purpose 

• Scrapped the ‘menu’ icon and replaced this with a location tracker (again encouraging users to find their closest Subway to order)

• Maintain the tidy hamburger menu for all other pages

Do you think we should have maintained the menu icon as well? Join in the convo on Linkedin to share your thoughts.

Aesthetics

The layout of information is pretty dense (even worse when viewing within a small mobile screen). It creates a cluttered, poor aesthetic reminiscent of circa 2000 web design. No thank you. We’ve cleaned things up. 

• High-quality imagery 

• Legible text 

• Prominent CTAs 

• Clean and simple navigation 

• Contemporary aesthetic 

• Cleaner, larger font 

• Reduction in visual density 

So what do you think?

Should we pitch it to the Subway marketing team? Join the convo on our LinkedIn page here. Check out the full shebang below.

UX/UI analysis are our jam. If you’d like a free consult on your digital register here or drop us a line on greg@lamb.com.au. We’ll talk through your goals, pain points and highlight a set of improvements to enhance your user experience.