During the 2020 pandemic, I co-founded Masala Makers, an Indian food cloud kitchen, with a business partner. This project gave me the chance to dive into brand design, art direction, social media design, and a bit of UI study. I loved how we embraced bold colors and a brave, maximalist concept.

The Branding

Masala Makers logo is a vibrant blend of influences. Together, these elements encapsulate the authenticity and heritage of our spice blends.

Inspired by vintage Indian store signs, the font exudes maximalist charm. The half-sliced onion, a culinary symbol, represents the core of our masalas, stewed for hours to create rich flavors. Drawing from Indian art, our logo incorporates intricate patterns reminiscent of the country’s diverse architecture.

The UI study

The UI study was more of a “what could have been” scenario if we had expanded, not something we implemented. It was fun imagining the brand’s future and how it could grow online. Overall, working on Masala Makers let me showcase the vibrant essence of Indian cuisine, creating a feast for the eyes as well as the palate.

Objective

Create an app concept for Masala Makers, a cloud kitchen I opened during the pandemic; to motivate users to place orders directly through one platform, rather than utilize the brand’s multiple social media platforms for ordering.

Challenge

Designing the Masala Makers app from the ground up means that it needs to have a better experience than directly ordering through social media. The information needs to be accessible and the brand still recognizable. It is also a challenge to translate the brand’s playful identity into an app.

My Solution

Include essential information about each dish in the app without overwhelming the user. Enabling users to add, remove, and customize orders would eliminate the necessity of contacting a customer representative.

Typography

Cabinet Grotesk is a geometric sans-serif typeface chosen for this app. It’s playful but clean and easily readable. It also has 8 styles making it versatile for UI design.

Color Palette

The vibrant colors in the original palette are eye-catching for ads but can be straining if used in every screen.

I addressed this by choosing a single color and utilizing various shades.

Atomic Design Method

Built a simple design system using atoms, molecules, and organisms.

Atoms

Includes:

• Text Styles

• Color Styles

• Icon

• Logo

Molecules

Includes:

• Buttons

• Tabs

• Avatars

Organisms

Includes:

• Dialog

• Input

• Menu

Start-up & Onboarding screens

1. The Startup screen opens with the logo on a Masala Orange background.

2. The Onboarding screen immediately starts with the option of logging in, sign up, and ordering without creating an account.

Home screen

1. The Home screen begins with location settings and account settings you can change before ordering.

2. Popular dishes are featured first followed by other menu items categorized by tabs.

3. Add orders to the cart quickly with the + button.

4. View cart button immediately brings you to the check out screen.

Item Detail & Check Out screen

1. Modify order quantity with + or — buttons.

2. Choose add-ons for your order.

3. Input notes for the restaurant for any substitutions, diet, or allergies.