Tada, what would you like to order to day?
Finally, after 4-5 days of 4-5 hours a day of work on this cute little app. Disclaimer: It's just an app for me to practice app design. You can't actually order these delicious looking boba tea on it :/ - Anyways, as mentioned on my previous post, I use Figma to design and prototype the app. Easy peasy just a bit confusing at times.
Colors : I wanna use as simple yet stylish color as possible. Wanna make it somewhat modern and minimal so, 4 main colors and nothing else: Black, gold, white and deep red.
Now, let me walk you though the app a bit and see what's cookin'!
First thing when you open the app, you will see this black page with my cute boba tea shop logo along with the shop name... Loading..
Sign up and Log in
Then, once it's done loading, you can either log in or sign up.
First, we got a profile pic, name, and email. Users can upload pictures and edit their info on this page. They can also swipe right to the orders page to see past orders with the rewarding points from ordering through the app.
Super cool loading page!
Another loading page here but this one is way cooler, when it's loading, you can see the milk tea getting sucked through the straw little by little.. till it's done loading (I'm so proud coming up with this #lol)
This one you can scroll up and down and choose your favorite type of tea before heading to the toping page to choose sweetness, topping and quantity.
As mentioned, this toping page is for you to choose sweetness, topping, and quantity. The sweetness level will pop up as an overlay with 25% opacity bg. This page also includes the price so you know how much are you at before you hit that 'add(to bag)' button
Shopping bag page
Add a few more of the same types of boba tea, remove it completely and choose either to pick it up in-store or have it delivered for $5 (Hella cheap! I know!!). Then, if you end up deleting all the items then, that's when the 'Your bag is empty' come in so, let's get some boba!
Simple address and payment form
Then, when submitting payment, I use the same boba tea cup with the milk gets sucked up the straw as a loading gif. Again, love it :D
This, I use smart animation to make it move smoothly closer and closer and the timing counting down until you boba has arrived! If you see it in motion, it's super cool!
Well, just like a regular delivery app but when it's all done by you then, it feels much cooler than it actually is #lol
That simple! Now I'm learning to have a website version and will be working on Webflow so, gonna be quite a while.