×
![]()
Look through this all-in-one profile of Indonesia's most famous food stall brand, Eatlah! From their menu to the history of the founders, every piece of information is capsuled using elements that scream out quirky, fun, and illustrative to enhance Eatlah's brand identity.
Product Research
Copywriting
Information Architecture
UI/UX Design
Design Systems
Design QA
Website Development
4 weeks
Maurelle Viyurdy
Grace Kelly
Christine Chen
Only for screen sizes 1440px and 500px (Only English)
June 2021
Even if Eatlah is quite famous in Indonesia, they don't have any all-in-one profile that customers can reference from. A company profile website is one of the keys to a strong brand impression and customer awareness. Therefore, there's a need to create a profile website for Eatlah.
In addition to delivering information about the brand in one place, this website aims to establish a stronger brand identity and give customers a sense of the food stall's experience and atmosphere.
Organizing Eatlah's extensive menu in a user-friendly way that doesn't overwhelm customers was challenging.
Therefore, we designed the menu in an option-based system. This system lets users choose an option, and more information about this menu will be displayed. For mobile, the amount of menu options displayed is streamlined into a carousel system due to the limited space.
Javascript functions were implemented to make the menu system's carousel arrows in the mobile design and menu thumbnails. This task was quite challenging as this was one of my early website development projects.
To make the arrows system on the carousel menu, I created functions and loops with If Else statements and Parsefloat to convert the contents into floating-point numbers. All images, menu names, and menu descriptions for the selected menu option are stored as arrays and changed through functions. The content changes are based on the targeted arrays.
1. Analyzing Eatlah branding
We researched the brand to better understand its mood, theme, and tone. However, we could not get much information about the brand as it didn't have a thorough company profile online. Therefore, referencing their social media, we designed this website with a fun, cheerful, and quirky vibe.
2. Planning the website pages and copywriting
After looking through the existing information online and comparing it with competitors 's websites, we decided to have a menu, outlets, contact, about us, and franchise section. We added a language button where users can choose between Bahasa Indonesia or English.
3. Designing the website
Using Figma, we designed the high-fidelity layout for desktop and mobile sizes. We displayed a main button to order food on the above-the-fold to capture customers' attention. The below-the-fold starts with a menu section, which is also accessible from the navigation bar.
I used mainly HTML and CSS, with JavaScript functions for the menu and outlets sections.
All information about each menu option is stored as arrays. To display the selected menu, the targeted array will be displayed by changing the displayed image's URL and the displayed text's innerHTML. For mobile screens, the carousel arrows are created with a JavaScript loop and If Else statements using Parsefloat.
The outlet's image is changed using a JavaScript function that's placed inside the buttons. The selected button is styled by adding a specific CSS class to it and removing this CSS class from the unselected buttons.
