UI Design, UX Research, and Prototyping

Food Diary Mobile Application

Background

The Food Diary App project aimed to create an intuitive and engaging platform that allows users to track and manage their food intake seamlessly. The app leverages augmented reality (AR) and artificial intelligence (AI) technologies to provide real-time nutritional analysis and personalised dietary recommendations, catering to university students.

Project Year - 2023

Project Type - Academic Project

My Role - UI/UX Design, Wireframing, Prototyping, Usability Testing

Tools Used - Figma, Adobe Illustrator

Scope and Design Rationale

The scope included designing key screens such as the Home screen, Meal Recording, AI Food Analysis, Food Diary, and Calendar Integration. The design rationale for the Food Diary App was to create a user-friendly interface that integrates AR and AI to enhance the user experience in food tracking. The design focused on intuitive navigation and visual appeal, ensuring that the app is both functional and engaging. By catering to the specific needs of various user groups, the app was designed to promote healthy eating habits in a way that is accessible and easy to use.

IDEA

A smartphone application designed to help users track and manage their food intake effortlessly. The app uses augmented reality (AR) and artificial intelligence (AI) to provide real-time nutritional information, making healthy eating easy and accessible for everyone.

Design process

  1. User selection:
    - Chose to target university students among the provided audiences.
    - Narrowed down the target audience by analysing their behaviours, needs, and pain points to brainstorm additional application features.

  2. Task Analysis:
    - Picked 9 key tasks analysis to develop for this project
    - These selected tasks were refined to align with the user interface (UI) flow and enriched with more detailed sub-tasks.

  3. User flow:
    - Developed the user flow based on the task analysis

  4. Inspiration research:
    - Conducted research on popular applications and well-established UI designs to gain inspiration for our app's design.
    - Explored features found in current food diary apps in the market to identify potential functions to incorporate into my application.

  5. Grid System:
    - Designed an 8-pixel, 4-column grid system to form the basis of our design.

  6. Colour and Typography style selection:
    - Explored various options before finalising the colour and typography styles that best suit my design.

  7. Wireframe:
    - Produced wireframes of low-fidelity, mid-fidelity, and high-fidelity to visualise the application.

  8. Prototyping:
    - Designed an interactive prototype linking all high-fidelity wireframes to ensure seamless testing.
    - Created a demo video showcasing the prototype, covering all tasks and explaining the rationale behind each design decision.

User Flow Diagram

Key features - AR Food Analysis

Key features - integrate calendar

final thoughts and learnings

The Food Diary App project demonstrated the power of combining innovative technologies like augmented reality (AR) and artificial intelligence (AI) with user-centric design. The experience underscored the importance of making complex functionalities accessible and engaging for users of all ages. Through iterative design and usability testing, I learned the value of continually refining the user experience to meet diverse needs. This project highlighted how thoughtful UI/UX design can promote healthier eating habits by providing users with intuitive tools that make food tracking both easy and enjoyable. It reinforced the idea that when design and functionality align, technology can empower users to control their health and well-being.