Designing UI using FIGMA

Designing coffee ordering and delivery application using FIGMA

This is a coffee ordering mobile application designed for a seamless user experience. It allows
users to browse coffee options, customize orders (size, quantity, ingredients), and manage their
cart with clear pricing details. Featuring intuitive navigation, personalized touches, and easy
checkout, it simplifies ordering coffee for pickup or delivery.

FIGMA

Figma is a cloud-based design tool used for UI/UX design, prototyping, and collaboration. It
allows designers to create and share designs in real-time, making it an essential tool for modern
product development teams. Figma operates directly in the browser, meaning users can access
their projects on any device without downloading software. It also provides a desktop
application for added flexibility.

One of Figma’s standout features is its real-time collaboration. Multiple team members
can simultaneously work on a design, leave comments, and provide feedback. This eliminates
the need for version control issues or constant file sharing. Its version history feature allows
users to track changes over time and revert to previous designs when needed.

Figma supports vector-based design, enabling the creation of responsive and scalable
designs suitable for websites, mobile applications, and software interfaces. It also includes tools
for interactive prototyping, helping designers link screens and test user flows without external
tools.Design systems and components in Figma promote consistency across projects, making
it easy to reuse elements like buttons, icons, and typography. With plugins for additional
features and integrations with tools like Slack and Jira, Figma has become a versatile, user-
friendly platform for designers, developers, and stakeholders alike.

Figma is highly accessible, as it works seamlessly on Windows, macOS, and even

Linux through browsers. Its auto-layout feature simplifies responsive design, enabling
components to adjust dynamically. Teams can create design systems for consistency and
efficiency. With features like plugins, templates, and prototyping, Figma streamlines
workflows, enhancing productivity for design and development teams.

1
 Designing UI using FIGMA

HOME PAGE

The screen presents four coffee options (Espresso, Cappuccino, Latte, and Americano)
in well-organized cards.
A personalized greeting, "Welcome, Vanishree", adds a user-friendly, engaging touch.
A simple hamburger menu on the top-left and search icon on the right for easy
navigation.
Large images of coffee products capture attention first, followed by the name, price,
and rating.
Warm tones (orange, maroon, beige) create a cozy and inviting coffee-shop feel.
Categories like Hot Coffees, Drinks, and Bakery are visible on the left, allowing easy
switching between sections.
Each coffee card has a + button to add items to the cart, improving user interaction.

2
 Designing UI using FIGMA

DESCRIPTION PAGE

The large cappuccino image immediately captures the user's focus.

Users can adjust coffee size (Small, Medium, Large) with highlighted icons.
A quantity selector with +/- buttons lets users choose the desired amount.
A clear "Ingredients" section mentions the main components (Milk), keeping
information transparent.
The price ("599 rs") is bold and prominent at the bottom.
Positioned centrally at the bottom, encouraging users to proceed with their order.
The curved design elements and subtle gradient in the background enhance visual
appeal.

3
 Designing UI using FIGMA

CART PAGE

The items in the cart are displayed clearly with images, names, quantity selectors, and
prices.
Each product has a +/- button to adjust quantity, making changes intuitive.
Subtotal, shipping cost, taxes, and total are presented in a clear, organized manner.
A “Proceed to Pay” button at the bottom stands out with bold text, guiding users to the
next step.
Orange and maroon tones continue to maintain brand consistency across the app.

The total price ("700 rs") is emphasized to ensure users are aware of the final amount.

4
 Designing UI using FIGMA

General UI/UX Design Features Across All Screens

1. Consistency:

o Fonts, colors, and spacing are uniform across the app.

2. User Engagement:

o Personalized touches (e.g., greeting user by name) make the app more
welcoming.

3. Clear Navigation:

o Simple icons and buttons ensure that users of all experience levels can navigate
effortlessly.

4. Interactive Elements:

o Quantity selectors, customizable options, and visible CTAs promote seamless

interaction.

5. Visual Appeal:

o High-quality product images combined with soft, modern backgrounds enhance

the user experience.

6. Accessibility:

o Large icons, text, and buttons ensure readability and ease of use.

Overall, the app design provides a smooth, visually appealing, and intuitive experience, with
a focus on customization, transparency, and easy navigation for users to order coffee efficiently.

Link to the page

https://www.figma.com/proto/d9Zug5QzxgOTQ1hkZ6Gsi2/Coffee-Shop-App-Design-
(Community)?node-id=3-171&t=TGiGWSeAXS95xg9O-1&scaling=scale-down&content-
scaling=fixed&page-id=0%3A1