πŸ—ΊοΈ
Hero photo: phone on dark surface showing the JET card map with location pins

Where can I use my Just Eat Takeaway Card?

Client: Just Eat Takeaway Duration: 2 months My role: UX Designer

Just Eat Takeaway provides employees with a pay card that can be used at various food and retail spots. However, employees had no clear way of finding out where exactly they could use their card. This project focused on designing a solution to help employees easily locate eligible spots nearby.

Employees were frustrated by not knowing where their JET Card was accepted. The existing approach relied on a static list that was hard to search, not mobile-friendly, and did not show proximity or location on a map.

Challenge 1: Displaying locations intuitively

The primary interface needed to show a map of accepted locations with clear markers. The solution was a full-screen map view with a collapsible side panel for filtering and list browsing.

πŸ—ΊοΈ
Map UI – full-screen location view
Netherlands city map with coloured category pins (food, supermarket, retail) and filter panel on the side

Full-screen map view showing accepted card locations with category filters

Challenge 2: Filtering by category

Users needed to filter by type of venue. A horizontal filter chip row above the map enabled quick category switching without leaving the map context.

πŸ–₯️
Desktop – map with filters
Browser view showing the full map with active category filter chips
πŸ“±
Mobile – map with filters
Phone showing the same map view with mobile-optimised filter chips

Category filtering shown across desktop and mobile breakpoints

Challenge 3: Onboarding screen

A clear onboarding moment was needed to introduce the feature to employees. A simple "Order food and more" splash screen was designed as the entry point.

πŸ‘‹
Onboarding screens – "Order food and more"
Tablet + phone showing the orange/cream intro screens with JET branding and feature introduction

Onboarding screens introducing employees to the JET Card locator feature

When a user taps a map pin or list item, a detail view opens showing the location name, category, address, opening hours, and directions link. Designed as a bottom sheet on mobile and a side panel on desktop.

πŸ“Œ
Spot detail panel
Map with right-side detail panel open, showing selected venue name, category badge, address, and opening hours

Location detail panel showing all relevant information for the selected spot

A complete style guide was delivered covering the component library, map pin states, filter chip variants, card and list item patterns, and loading/empty states. All components were annotated with spacing and interaction specifications.

πŸ“
Style guide – map pins, chips, cards
Component overview showing map pin variants, filter chips, list cards with spacing annotations

Developer handoff style guide with component states and spacing specs

Next Steps

Final Thoughts

This project reinforced the importance of designing for real user context. Employees checking their card options are often on the go, so a mobile-first, map-led approach was the right call. The key challenge was balancing information density with simplicity.

🏁
Final mockup – finished JET Card locator
Polished phone mockup on dark surface showing the delivered JET Card location feature