![Home.png](https://static.wixstatic.com/media/5b1a56_b46569a72c43412f9473a005fd8a3839~mv2.png/v1/fill/w_900,h_600,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/5b1a56_b46569a72c43412f9473a005fd8a3839~mv2.png)
VEGGA
OVERVIEW
Vegga is a mobile app that allows you to order fresh vegetables and fruits directly from the local markets.
TOOLS
![figma.png](https://static.wixstatic.com/media/5b1a56_9a5b4a8857d94715916c655a3f024db2~mv2.png/v1/fill/w_22,h_22,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/figma.png)
![illustrator.png](https://static.wixstatic.com/media/5b1a56_a4193c0d5e254130ac757157950ef591~mv2.png/v1/fill/w_24,h_24,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/illustrator.png)
![photoshop.png](https://static.wixstatic.com/media/5b1a56_aed5952d023c41019b75ccec85284c38~mv2.png/v1/fill/w_24,h_24,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/photoshop.png)
I created this UI design after my mom got frustrated with the daily increasing prices of vegetables and fruits.
PROBLEM
The hiked prices of fruits and vegetables.
An example:
One day my mom went to the market to buy some fruits and veggies, but the price was so high that she came back with a few vegetables. The following day she found one bhaiya(vendor) who was selling vegetables at the market rate with a minimum margin. And this simple anecdote gave me an idea to design Vegga App.
SOLUTION
Vegga App tries to deduct the extra cost added by the retailers by simply getting the fruits and vegetables directly from the local markets and vendors.
MVP
Getting the Vegetables and Fruits delivered at the minimum cost by:
-
Providing vegetables and fruits directly from the local markets.
-
Providing direct contact with the vendors.
-
Providing minimum delivery cost.
-
Providing the lowest price.
COMPETITION
Start-ups that are into food and grocery delivery:
Swiggy, Bigbasket, Zomato, etc.
Key takeaways:
-
They all provide faster deliveries.
-
They provide extra features (like discounts) with their pro version.
PRODUCT STRUCTURE
Below are the main screen and design that I've built for our design:
-
Start Screen
-
Getting Started
-
Login Screen
-
Home Screen
-
Vegetable Screen
-
Fruit Screen
-
Chat Screen
-
Product Screen
-
Order Confirmation
![Structure.png](https://static.wixstatic.com/media/5b1a56_108f9143dd184997b2b2900243a9c1ec~mv2.png/v1/fill/w_588,h_344,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5b1a56_108f9143dd184997b2b2900243a9c1ec~mv2.png)
DESIGN
Let's get into the design now and the things I've done to solve the problem
1. Start Screen
![Logo.png](https://static.wixstatic.com/media/5b1a56_e62f3b3f7f6c4df28d1af1337f4fa674~mv2.png/v1/crop/x_124,y_120,w_850,h_1764/fill/w_220,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Logo.png)
This screen was simply created to showcase our logo and nothing else.
2. Getting Started
![Getting Started.png](https://static.wixstatic.com/media/5b1a56_fc48b108e51f4d628706b080ffaeb0a9~mv2.png/v1/crop/x_92,y_131,w_847,h_1737/fill/w_223,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Getting%20Started.png)
This screen was simply created to encourage users to click on the button to get started.
3. Login
![Login.png](https://static.wixstatic.com/media/5b1a56_6d0c3f13b20643cc89b3831f0fc9d577~mv2.png/v1/crop/x_109,y_123,w_839,h_1755/fill/w_218,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Login.png)
Users can simply sign in or log in using their phone numbers.
4. Home Screen
![Home Vegga.png](https://static.wixstatic.com/media/5b1a56_3781986ea5c64f23be89f9966d03959b~mv2.png/v1/crop/x_119,y_112,w_820,h_1785/fill/w_210,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Home%20Vegga.png)
Users can simply navigate through the home page.
5. Vegetable Screen
![Vegetable Page.png](https://static.wixstatic.com/media/5b1a56_9b4c14f765a446da80a13324cd9b00dd~mv2.png/v1/crop/x_23,y_109,w_833,h_1782/fill/w_214,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Vegetable%20Page.png)
This screen was created to help users to add vegetables to their carts.
6. Food Screen
![Food Page.png](https://static.wixstatic.com/media/5b1a56_a4b5d7369fe34b1f86582fa62515dcad~mv2.png/v1/crop/x_135,y_131,w_808,h_1737/fill/w_213,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Food%20Page.png)
This screen was created to help users to add fruits to their carts.
7. Vendors Screen
![Chat 1.png](https://static.wixstatic.com/media/5b1a56_411a94355d5c4b6da66008cf88c97bba~mv2.png/v1/crop/x_130,y_106,w_820,h_1796/fill/w_209,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Chat%201.png)
This screen help users to find the nearest vendors.
8. Chats Screen
![Chat 2.png](https://static.wixstatic.com/media/5b1a56_aa9b6e15fe64465f93e6a90936ce1a5a~mv2.png/v1/crop/x_138,y_107,w_817,h_1793/fill/w_208,h_456,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Chat%202.png)
This screen shows the number of vendors available and the user has talked.
9. Chat
![Chat 3.png](https://static.wixstatic.com/media/5b1a56_c8af480242f14091b5e58e23360d3fde~mv2.png/v1/crop/x_121,y_107,w_810,h_1780/fill/w_208,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Chat%203.png)
This screen shows the chat between the user and the vendor.
10. Product Screen
![Product Page.png](https://static.wixstatic.com/media/5b1a56_df9cf215ce2843ea935c47129eaae58e~mv2.png/v1/crop/x_103,y_128,w_814,h_1741/fill/w_213,h_456,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Product%20Page.png)
This is a product page where users can add the products to their carts.
11. Cart Screen
![Order Details.png](https://static.wixstatic.com/media/5b1a56_d6c29a4e41294dd59ad06c1dff8622ce~mv2.png/v1/crop/x_98,y_117,w_806,h_1754/fill/w_209,h_455,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Order%20Details.png)
This screen shows the number of products added by the user in their carts.
12. Checkout Screen
![Checkout.png](https://static.wixstatic.com/media/5b1a56_91701b5417a54883adaa03371e39200b~mv2.png/v1/crop/x_29,y_120,w_810,h_1761/fill/w_210,h_457,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Checkout.png)
This screen helps users to submit their orders and head towards making the payment.
13. Payment Method Screen
![Card.png](https://static.wixstatic.com/media/5b1a56_0d1852e364d749f6975459ad77aa7f20~mv2.png/v1/crop/x_34,y_42,w_335,h_658/fill/w_232,h_456,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Card.png)
This is a payment method screen where users can add payment methods.
14. Success Message Screen
![Success Message.png](https://static.wixstatic.com/media/5b1a56_7319eed0f3ba4b94a470a8b9d565f6ca~mv2.png/v1/crop/x_130,y_113,w_816,h_1765/fill/w_211,h_456,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Success%20Message.png)
This screen shows the success message to the user when their order is placed.
BEHIND THE SCENES
I tried to keep things simple and unique. And I think the best designs are the ones that make things simpler for the user.
![Behind the scenes](https://static.wixstatic.com/media/5b1a56_d56552d2a328496896fee414378cf2fe~mv2.png/v1/fill/w_600,h_420,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Behind%20the%20scenes.png)
LEARNINGS AND TAKEAWAYS
-
Vegga App helped me to dig deep into designing. It was a great learning experience that helped me to think of the solution differently. It was all about trying new designs and figuring out what works better. It simply helped me to figure out my weak areas and the areas I have to work on.
-
I think the key takeaway is keeping things simple and authentic. While designing the Vegga App, I realized that it's not about applying everything you know about design. Instead, it's about figuring out one thing and sticking to it.
-
Obviously, the first impression matters. Vegga App is all about providing fresh veggies and fruits at the best prices. And putting the user experience first is vital because people will only care about how they use the product.