Delivery App

Info

And finally, here is my baby, my pride (until now) an application I started thanks to the Microsoft UX/UI Design course, where I was only required to create 4 or 5 screens.

But it sparked my curiosity like you wouldn't believe, so even after finishing the course, I decided to keep improving it and putting into practice all those ideas I had in mind.

This project consists of a food delivery application, including all the sections that an application for our daily use should have.

Where it's essential to put into practice absolutely everything I've learned about design so far, from the basics of graphic design such as typography, color palettes, and visual harmony, to creativity, just to name a few.

I've also utilized the incredible tools that Figma offers, including components, animations, transitions, shortcuts, and all those amazing features that truly make it my favorite hobby, and it reminds me why I am so happy designing.

Home

I feel very proud because the only assets I used were the Memojis, keyboard, and the images you see here.

But I created all the icons myself, from the home, bookmarks, and profile icons to the iOS interface elements like the battery, Wi-Fi, signal, and the status bar, etc.

I learned this thanks to other projects that I can't share here due to the company confidentiality, but they gave me the confidence to avoid reusing assets.

On this screen, we can see several important elements that I focused on making look like a real application.

These include the option to change the delivery location, the search section, and most importantly, the shopping catalog.

This helped me master my skills in Figma, specifically regarding vertical and horizontal scrolling, as well as the prototyping of the application, making it fully functional and allowing users to navigate the interface in a very intuitive, clean, and smooth way.

Starting with the address section, it was a lot of fun because it was one of the last things I worked on.

My initial idea was simply to add a screen with a keyboard and simulate being able to type in the address, but at this point, I had already added too many details to the rest of the interface, I couldn't keep it simple, so I wanted to go further and make it look more realistic by including saved locations, just like we would normally do.

This way, users have the option to edit each address, giving them the opportunity to modify or delete any of them, and taking them to a fully personalized screen for each address, showing the location, they are about to edit or delete.

And as happens throughout the application, it allows you to return to the main screen again.

Continuing with the search section, it displays recent searches, allowing you to swipe independently from left to right through each of the four recent search lines that appear.

This provides a visual harmony, clean transitions, and gives you the option to return to the main screen or go to the location editing section from this screen, maintaining the feeling that you are interacting with a real application at all times.

If we continue by scrolling down, we can see two new sections, one featuring discounted products.

My initial idea was to simply list all the discounted products, but that felt too unintuitive and might even be annoying for most users.

Personally, I find it tedious when applications feel like an endless journey, having to scroll all the way to the bottom to reach the end.

So, I decided to add just two sections, allowing users to swipe left to right through each of these two lines from the same screen, giving us a view of all the discounts in those sections.

If the user wants to see the complete list of discounts, they can click on "See all" which will take them to another screen with a list of all the discounted products, just like in a normal application.

At the end of the Home section, we find a Stores section that functions quite similarly to the Discounts section.

Drawing from my own experience as a user with little self-control when it comes to shopping apps, I wanted to create a clear, clean image without too much visual noise.

To wrap things up, we have a component specifically designed for rating the application. No matter which star you click on, that star will light up, turning off the stars to the right that may have been lit.

Bookmarks

This section is quite simple, showing us a screen where the bookmarks we add as we shop will appear.

It features a purchase button that takes us directly to the store.

You can interact with the bottom menu, navigating from one screen to another, no matter which section of the application you are in.

Notifications

Returning to what I mentioned at the beginning, the initial idea for this application was to design the shopping section.

However, I truly found in Figma a tool that I am passionate about, that entertains me, and that sparks my creativity to levels I didn’t even know existed.

That's why I decided to design the other screens, allowing the user to feel like they are interacting with a real application.

Thus, I created this notifications section, where users can scroll up and down to navigate and read all their notifications.

Profile

And to wrap up this incredible journey (forgive my enthusiasm, I’m really excited about everything I was able to create and how much I enjoyed doing it), I designed the profile section, adding the options that I, as a user, would expect to find here.

This allows users to navigate between screens intuitively, no matter what screen you are on, just like in the rest of the application.

Personally, and as I mentioned before, I get very excited when reflecting on each completed project, as it allows me to realize everything I've learned and to understand that if my mind imagines something, I have the ability to make it a reality.

This particular project is, for me, a culmination of everything I've learned so far, bringing to life each and every idea that came to mind.

I'm thrilled to know that there are still many things to learn, and I will enjoy every moment of it.