Tag: UX

Posted on

Designing an UI/UX-based Project for a Customizable App

Project Title: Designing an UI/UX-based project for a customizable app that prevents a person from “High Screen Time”. This UI/UX design for an app & more Projects also includes “Custom Portfolios”, and Banner-Design for an online education platform.

Project Tools: Adobe XD, Anima, Adobe Photoshop Undraw, GradientUI, Adobe Fonts, Adobe color.

Project Duration: 6-7 Weeks.

Project Files: The project files include numerous “png files”, Browser supported links, and a project report.

REFERENCE LINKS:

• Youtube
• Behance
• Pinterest
• Adobe Tutorials

UI & UX PROJECT FEATURES:

  • The Idea of Creating an app design that would focus on being minimalistic and target the main objective of reducing screen time.
  • The title of the project is “Unplug” which fits perfectly with our goal.
  • The app includes features like custom alarm, statistics, and one-click-detox.
  • A signup page and feedback page have been created in accordance with the app design to attract customers and improve app performance.
  • User experiences have been set up to have numerous feedbacks with the goal-objective kept in mind.

SIGN-UP PAGE AND FEEDBACK PAGE DESIGN

Banner Design & Landing Page Design Features:

  • The Banner is designed accustomed to the customer needs and contains the important tagline “STAY LOCAL AND WORK GLOBAL”
  • The Banner Design contains an idea of digitally marketing an online course on “Machine Learning” with mini tags explaining the features of the online course.
  • Coming to the design tool, for the banner, I have used Adobe XD, and the logos are imported from different resources using png format.
  • The landing page design is accustomed to an individual and contains the detailing of the person’s achievement in an attractive way
  • The landing page is designed in both “Light-mode” and ‘’dark-mode’’. The main idealogy behind designing a portfolio page is to attract people to know more about the person’s work and this can improve for people seeking jobs or companies looking for employees.
  • The landing page can also be used for a portfolio website.

BANNER DESIGN AND LANDING PAGE DESIGN

APP-FEATURE DESIGNS

CONCLUSION

The project took around 5-6 weeks to complete. The basics of understanding a UI & UX design and how to execute it. The goal was to resolve the complex issue of reducing “screen time” so that the customers could focus on much more important things and improve their work consistently. The project helped me understand the key principles of design and how to adapt them to our daily project and to provide users with all the necessary features required for the goal. The add/banner design helped me understand the view of a UI designer from a digital-market side and how its system work. For the portfolio design which would further help in CV and resume-building.

FUTURE WORK

  • Since I have learned some of the most basic things in UI & UX designing, I would like to gain much more expertise and experience in the field and learn how such designs solve real-world problems.
  • Adobe xd has regularly been updating itself and so learning new skill sets would be a constant work to improve me.
  • I would learn one step further by linking java-script codes and style sheets with the designs thus making a fully-fledged front end for a website or an app.
  • Since the user-testing field is evolving continuously, I would learn various user stories and try to improve them by using them in various projects.
Posted on

Food Recipe Cross-Platform Android and IOS Application Project

Surely there are many Food Recipe Cross-Platform apps that offer a wide variety of options to choose from, but most of them are online only, and those that are offline lack either that multitude of options or are devoid of proper UX and structure.

Modules and Description:

1. Smart search filters:

Users can search or filter recipes by name-based ingredients and diet. When a user searches for an ingredient, all the related recipes to that ingredient will be shown to the user, and a search based on a diet is also displayed. For example, some people are allergic to some ingredients and wish not to include them in their meals. The user will be able to search the recipe based on diet or other requirement factors. The search filter will return the appropriate recipes depending on the type of search.

Search by name, base-ingredients, diets,.

2. Categorized view:

In our application, all recipes are categorized into various cuisine, food types, diets, and varieties. We collected the exclusive authentic recipes of various countries and their cuisines are categorized on the type of food and the specific diet that the user is seeking varieties.

Recipies are categorized into cuisine, food types, diets, vegan, etc,

3. Curated Collections:

We’ve gathered recipes from famous chefs around the world and listed their signature recipes and collected various information and data about these recipes from popular websites and articles.

Curated recipe collections from famous chefs, web articles, etc.

4. Pantry Manager:

Every user can manage their own personal pantry with the help of a pantry manager, which we have included in our application.

5. Meal Planner:

Manage your pantry using our pantry manager and Plan your meals for family dinners, parties, and other social gatherings.

6. Shopping list:

Add recipes to your shopping list and browse the required ingredients with a quick glance.

We have also given a feature where the user can add ingredients to the shopping list. So that the user can track all the missing ingredients and purchase them all at once later when he/she visits for grocery shopping. These shopping list features take out all the work for you, whether you want to share a virtual list with your family and friends, or check out the nutrition facts for whatever you’re buying. It can be used and created by more than just a cell phone, as some apps can integrate with smartwatches.

 7. Skill Guide and Glossary:

Under the skill guide and glossary section, we’ll provide the user with various information on cooking techniques. Like knife skills, etc., and including a ‘Dictionary’ to understand common culinary terminology. This section is basically dedicated to starters who do not have experience and match knowledge in cooking.

Offline wiki on knife skills, cooking techniques, and various other culinary skills including dictionary to better understand common culinary terms

Activity Diagram:

  • View Recipe

The user shall be able to see the recipes in the application. In other words, the user shall be able to access the Recipe Forum, where all the user’s recipes are posted and ordered by the date of creation. Our application allows users to view recipe lists with images and titles. Single recipes can be viewed with images, recipe titles, and details of cooking directions. 

  • Search for a Recipe

 The search functionality will provide the users with a shortcut to find their targeted recipes if posted before by the users.

  • View Ingredients

The user of the app shall be able to view the ingredients of a certain recipe.

  • Add Recipe as Favourite

Once the user accesses the recipe information, he/she shall be able to mark a recipe as a favorite. Our application allows users to save recipes as favorites. When a user performs a search operation, the result is a list of recipes. Each recipe in the list has a favorite button on it. Users can add recipes by clicking on the favorite button.

The user shall be able to access the recipes that he/she marked as favorites.

 Result Screen Shorts

  • Recipes are categorized in the form of cuisines (based on countries and origin).
  • Fast food items are categorized into Burgers, Pizza, Noodles, and Sausages.
  • We have also collected the signature dishes of some of the world-famous chefs under the Chefs Curated category.
  • We have a category named ‘Meals’, were further divided into 6 categories:

– Lunch

– Breakfast

– Dessert

– Dinner

– Salad

– Soups

  • We also have a special Category. Here, the user-specific recipes are collected. For instance collection of vegan recipes is included.

External Interface Requirements:

  • Hardware

The Food Recipe Cross-Platform mobile app will be operating on Android and iOS.

  • Software

The mobile app will be compatible with the mobile and tablet(Android app) last versions.

Developer Requirements:

Hardware Requirements:

  • OS: macOS-64bit and Windows 7 (64bit) or later
  • HDD:1.23GB if windows or 2.8GB if MacOS for Flutter SDK
  • RAM:4GB (minimum)
  • Processor: Intel i3 3rdgen or AMD equivalent

Software Requirements:

  • OS: macOS-64bit and Windows 7 (64bit) or later
  • Tools: Flutter SDK
  • Android Studio/Visual Studio Code or any other IDE supporting dart
  • Git
  • Windows Powershell 5.0(only for windows users) 

User Requirements: 

  • OS: Android Jellybean or newer and iOS 8 or newer
  • Hardware: iOS devices (iPhone 4s or newer) and ARM Android devices
  • Storage Space: ~200MB
  • RAM: 2GB

Conclusion:

  • So by using this application users can cook different recipes at their homes.
  • They can also manage their diet.
  • They can manage their time.

The Food Recipe Cross-Platform application meets with the enterprise-class application principles. It is designed to be performing, scalable, extensible, and highly available.

Future Scope:

In future work, I am planning to persist in developing more mobile apps and entering deeply the world of Android development. Food Recipe Cross-Platform has helped me to gain a lot of development skills and enrich my background, as I spent the previous 4 months searching for every tiny detail that concerns the development of android applications. Thankfully, I have built a good knowledge.

Therefore, any upcoming Food Recipe project of mobile application development will undoubtedly be within my reach. In addition, as to the future of Recipe Organizer, I will deploy it in Google PlayStore and update the app from time to time if necessary. I will export my database soon and then buy an account in Google PlayStore to publish the app. Also, I will monetize my application using Admob.

Download the complete Food Recipe Android and iOS App Project Code, Report, and PPT.