I wanted to create this project to expand my skillset and try something new. Being invested in programming and game development, UI/UX Design intrigued me next and I was fascinated by the front-end design work. Figma was a rather simple tool to get used to, many of the screens were repetitive, but I learned a lot, like the typography, use of icons, transitions, wireframes, and prototyping. This project was a winning submission, originally created for a hackathon, Hack4Earth on Devpost, called "Find Your Adventure", but after the hackathon ended, I wanted to improve the project and I continued working on it, adding some improvements, and this is the final product.
Prior to getting started on my design, I wanted to design a simple UI to understand how I wanted it to look. Researching into UI and UX Design, I learned this process is called "wireframing", which involves designing a basic diagram that shows the structure and layout of a user interface. I didn't want to spend a lot of time wireframing, since I knew my ideas would change, add, and remove components on each screen as I developed them. I kept it simple, disregarding color, and focusing more on the skeletal framework of the screen design.
I created a basic template for important screen, including the title screen, the menu screen, the food description screen, profile screen, and some more. Develping these, helped me branch off to similar screens with the same features. For example, the menu screen and filter food item screen were alike, I used one wireframe screen to inspire the design for both.
This project opened my eyes to the world of UI and Frontend Design. Already having experience in coding, I got a touch of both worlds of programming and design. Figma was a good beginner friendly tool that easily bridged the gap to creating something advanced. Although there is a lot of improvements that I could add, some notable ones were a further implementation to the Help Center and adding a chatbot perhaps, adding a method to update the liked meals, and a screen to view the map journey of the food order and it's estimated arrival.
Since making this project, I've dabbled in UI increasingly, even creating one for this website, and the webpages that you're currently on. I understood the importance of the process of the design development and acknowledging the time it takes to create something creative is neccesary to reach a final result that I'm proud of.
To showcase my learning, you can interact with my food ordering app and find more information about this project on my Figma profile.