Setting up the Theme and Design Execution
Setting up the theme or choosing the color for your app could be tricky but extremely impactful in building customer’s perception of the app, Every color symbolizes some thing or other you may find different individuals have different theories about different colors.
I wanted to choose a color which signifies freshness so I picked green not the conventional red color which is generally used for different food delivery apps. This app is not about hot food ready to be delivered to your door step, this app is about sharing surplus food it could be anything from raw eggs to chicken to vegetables to dairy products should be fresh and must have some shelf life and this aspect of freshness can be conveyed with a green theme.
Type face and font selection
On-Boarding and Authentication screens
Application starts with clean and neat on-boarding screen selling the main USP’s of the product that would surely encourage the user to signup in the application.
Post on-boarding will come signup screen with prominent social login at the top, since most of the users nowadays prefer signup through social accounts like Google and Facebook for quick access instead of registering through email and creating a password. Although there would be an option for the same if in any case user wants to signup via a different email. Post signup the app will start searching for the users nearby your location and will display a list of the users in a per-defined radius who are already sharing and receiving excess food via Cup”O”sugar.
Landing and Product page
Landing page is divided into 4 main CTA’s Up for Grabs, Neighborhood Needs, Share Items and Request Items along with a search bar from where user can directly search for what they are looking.
Up for Grabs
List of all surplus food products/items that are posted by the user in the app.
This shows what your neighbors are looking for within the location radius set by you in the app, you could help them by sharing any food item you have in surplus matching the need of your neighbors.
Here user can share any food product/item they have in surplus with them, one can share it with their neighbors who might be in need of it. Users can manually fill the details of the item they are sharing while creating the post or they can directly scan the bar code of the product if available which will automatically fetch all the info about the product.
This section helps the user to request for something which they are looking for. This will create a post in the app which will display in the neighbors need feed for other users of the app.
Product Listing Page
Product listing page (Up for grab) shows the list of products the address where they can grab the product that meets their current requirement. Each card shows the picture of the product, name of the person who created that post, description of the product. Users can also share and bookmark different products available in the list.
Detailed Product page
Product detailed page gives detailed and all the sufficient information like food description, Ingredients used, Nutrition label and expiry date that one would need before grabbing any food product. There is an option where user can directly contact the owner of the post via a chat module in the application. At the time of creating this detailed post user can either fill the details like name of the product, Nutrition label, Ingredients etc manually or they can directly scan the the bar code of the product which will automatically fetch all the information related to that particular product and will reduce manual effort of the users.
Customizing your feed
User can put filters on their feed which would bring them close to what they are exactly looking for. As far as design goes I opted for a very basic structure for filtering your feed, as show in the screen above filters have divided in in three main categories Diet, Food type, Diet type and Best before(expiry date), these main categories will be divided into different sub categories this would eventually help the users to get really close to their requirement and will help in reducing their effort of scrolling in the application. Another major factor that will affect the users feed in the application is location, as you can see in design above location screen will give a control to the users to reduce and increase the radius of their search, the feed will be adjusted according to the location radius set by the user.
Invite, Rate app and Error screens.
This project taught me that design is not only about aesthetic screens, I learnt how important it is to follow a user-centered design process, how important it is to understand your audience, analyzing the problems, researching and developing a scalable and feasible solution for present and for future.
That’s all everyone! Hope you all would like the designs and process I followed while working on this project.
Follow me on