• Client

    Oddle Eats
  • Role

    Website, Mobile, Motion, Prototyping, UI/UX
  • Year

    2020-2021
  • Platforms

    Web & Mobile
  • Project URL

    https://ferdzlayno.com/wp-content/uploads/2021/01/Oddle-Demo.pdf

Desktop View

I started my work on the header and splash image. The header had too much going on and since the user is not yet signed-in, I decided to place all the header features in a sliding menu and leave just the sign-in button.

I moved the promo ads and focused on featuring the restaurants' best sellers that are available on the website. I always order food online and the first thing I look for is the availability of the restaurant and delivery in my location. So I added a location search bar as the main feature of the Landing page.

I made two samples for the splash image - both split-screen and full-screen. The restaurant's name and the location were included in that image and for the landing page content, I chose only the important features or details to make it short and avoid user's from scrolling.

UI Assets

Since I don't have access to brand guidelines, I just focused on enhancing the current UI features like colors, font, rounded corners, etc. A sticky header will appear every time a user scrolls down the page, it includes the location search form from the splash image. This makes sure that the user can search in any part of the landing page.

I decided to add illustrations because it looks more aesthetically nice and creates a balance between the text and images. In the product cards, I removed the "go to shop" button and replaced it with the whole product card button.

I kept the same minimum order, add to my list, and delivery fee features. I just added the restaurants' ratings to let the users gauge how many people are ordering in that restaurant.

Mobile View

I try to keep the same UI and behavior of the desktop view as the mobile view. Same header and search features. Sliding product cards and accordion dropdown.