Search and Discovery Experience

Key Screens:

Landing Page -> Explore Page -> Restaurant Details Page (Desktop)

Landing Page -> Explore Page -> Restaurant Details Page (Mobile)

1. Landing page

Scoped Painpoints:

🙁 On the landing page, user expects to see more food/restaurant options than campaigns and articles.

🙁 User is unsure of where to click to see all food options if they are open to browse generically and not looking for food from specific categories e.g specific cuisine type under highlights/featured articles section. There is also only one entry point to the explore page (where users can see all food options) via the explore button.

Solutions After:

✅ More generic restaurant suggestions e.g new restaurants, trending, restaurants with promotions and cuisine types and fewer campaign sections.

✅ More entry points to explore page -> every section brings users to the explore page and users are able to browse and filter restaurants easily within the same page.

Landing Page Before vs After (Desktop + Mobile)

2. Restaurant Search

Scoped Painpoints:

🙁 Users are unable to determine a restaurant's availability for pickup/delivery and do not have information on the lead time/time in advance that they have to order for e.g a specific item / from a specific restaurant -> inefficient, time consuming and frustrating when users are required to click into every restaurant's oddle shop and enter delivery details in order to find out if the restaurant is able to serve orders for a specific day.

Solutions After:

✅ Search feature as the first thing for users to enter their address and delivery/pickup timing so that they browse only restaurants that can accept orders on the specific day and time.

Bonus Feature:

✅ New reservation search to allow users to also discover restaurants with available seats on OddleReserve, a new Oddle platform.

Restaurant Search (Desktop + Mobile)

3. Menu Cards on Explore Page

Scoped Painpoints:

🙁 Too many restaurants displayed in a viewport, causing it to be overwhelming to browse

🙁 Delivery fee displayed in explore page is inaccurate and misleading as the fees are calculated based on the users' input location.

🙁 When users are interested in ordering from a restaurant and clicks on a restaurant card, they expect to be able to view a full menu and begin adding orders. However, they are brought to a page with restaurant details and are required to click another button to enter the oddle shop.

🙁 When ordering for pickups, users are unable to determine which restaurant has an outlet nearby due to the lack of information on the nearest restaurant outlet.

Solutions After:

✅ List layout that shows fewer restaurants in users' viewport each time e.g 4 on desktop each time instead of 8 previously.

✅ Clearer delivery fee copy when address has not been input by users "From $x" instead of a fixed amount

✅ Information on distance to nearest restaurant when users have entered their address

✅ Clearer and more explicit "order now" CTA button that brings user to the restaurant's oddle shop right away compared to the more hidden "visit shop" button that appears only on hover previously.

✅ More images of restaurant's top dishes and a quick menu view -> Users are able to quickly determine whether they have interest in ordering from a restaurant without going through multiple pages

Explore Page Before vs After (Desktop + Mobile)

Menu Card States (Desktop + Mobile)

4. Filters on Explore Page

Scoped Painpoints:

🙁 Overwhelming list of filters on desktop

🙁 Filter tags on mobile are hidden from view when user scrolls, making it difficult for user to access

🙁 Filter button on mobile has no active state, user does not know if a filter has been turned on

Solutions After:

✅ Compact filter list with a maximum of 4 filters shown for each category e.g dishes to ensure that list of filters is easily scannable and less overwhelming

✅ Active filter chips shown in fixed header for mobile view

Filters Before vs After (Desktop)

Filters Before vs After (Mobile)

5. Restarant Page

Scoped Painpoints:

🙁Users find it troublesome to have to click through the tabs to view reviews and operating information

Solutions After:

✅ Important details such as reviews and store operating information are shown explicitly instead of being hidden in tabs

Restaurant Details Page Before vs After (Desktop + Mobile)

Project Scopes

OE 1.0 (4 months)
- Low Fi Ideation: Wireframes brainstorm for landing page and search experience
- Landing Page, Explore Page v1

OE 2.0 (3 months)
- Phase I - Landing Page and Search v2 (with reservation search) + Menu Cards v1
- Phase II - Menu Cards v2 (more compact) + Restaurant Page

Design Versions

Low Fi Ideation: Wireframes brainstorm for landing page and search experience

Landing page

Landing page v1:
- New search feature for restaurants available for delivery vs pickup based on input address, date and time
‍
Landing page v2:
- Able to search for restaurants available for reservation based on input pax number and location
- Able to search within selected cities for countries such as Taiwan, Hong Kong and Malaysia for more accurate result
- New UI for these additional functions

Explore page

Explore Page v1:
- New compact search bar
- New menu Cards with more and clearer details?

Explore Page v2:
- Improved search bar design
- New filter UI
- Menu quick view
- SEO banner for key cuisine types

Restaurant details page

Restaurant Page Design:
- New search card
- New sections linking to OE articles, campaigns and store information