Subway eat fresh, design freshHave 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).
- 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)
- We’ve now got 2 x CTAs (order or location). No brainer for the end user.
- 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.
- 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
- High quality imagery
- Legible text
- Prominent CTAs
- Clean and simple navigation
- Contemporary aesthetic
- Cleaner, larger font
- Reduction in visual density
Let's grow your business together.
Get design inspiration, practical takeaways and free resources to help you find and delight clients.