Complete BOBA TEA APP!

in #design2 years ago

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'!


Loading page

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.

Screen Shot 25630921 at 13.20.55.png


Profile page

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)

Screen Shot 25630921 at 13.21.02.png


Shopping page

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.

Screen Shot 25630921 at 13.21.09.png


Topping page

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

Screen Shot 25630921 at 13.21.15.png


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!
Screen Shot 25630921 at 13.21.22.png


Simple address and payment form

Ditto.

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

Screen Shot 25630921 at 13.21.27.png


Delivering page

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

Screen Shot 25630921 at 13.21.34.png


That simple! Now I'm learning to have a website version and will be working on Webflow so, gonna be quite a while.


Your opinion means the world :)

Sort:  

Will you be making Boba fet tea during May? I think that would be awesome

what is boba fet tea..?

Lol Bobafet is a character from star wars, I'm sure there's enough geeks who would fall for the gimmick and be willing to buy and share it on social media

OMG!!!

But why during May?

May is Star Wars month! Since May the 4th is Star Wars day aka May the 4th be with you! When I work in ecommerce we’d always plan this months ahead because it was always a profitable time to sell Star Wars anything

Wow, yer the beast!