# Final Project: Health and Fitness Mobile App

# Overview

Design a mobile application UI for health and fitness tracking. The app should provide a user-friendly interface to track workouts, monitor diet and view progress. Students can choose the platform for which they want to design, iOS, Android or generic Web app that works for both. This project will combine and leverage all the knowledge and practical skills aquired during this course. Plan your interface navigation, start with low fidelity sketches to validate flow and content. Plan your colour palette and typography as well as the key components you want to utilize in your UI. Below is a detailed description of each page's requirements.

# Pages Requirements

# 1. Splash Screen

Purpose: Create a welcoming and engaging first impression.
Elements:
- App logo
- Background image or color
- Loading indicator

Purpose: Authenticate users and allow them to create or access their accounts.
Elements:
- Input fields for email and password
- "Sign Up" and "Login" buttons
- "Forgot Password?" link
- Social media login options (Google, Apple, Facebook)

# 3. Home Page (Dashboard)

Purpose: Provide an overview of the user’s fitness activities and progress.
Elements:
- Navigation bar with links to Home, Workouts, Diet, and Profile
- Summary cards for workouts, calories burned, water intake, and steps
- Daily/Weekly progress charts
- Quick access buttons for logging a new workout or meal

# 4. Workout Page

Purpose: Track and manage workouts.
Elements:
- List of workouts with filters (e.g., cardio, strength, flexibility)
- Search bar to find specific workouts
- Button to add a new workout
- Workout details (name, duration, calories burned)
- Start/Stop button for tracking real-time workouts
- Option to save and share workouts

# 5. Add/Edit Workout Page

Purpose: Create or modify a workout.
Elements:
- Input fields for workout name, type, duration, and calories burned
- Dropdown for selecting workout type
- Save and Cancel buttons
- Option to add notes or tags

# 6. Diet Page

Purpose: Monitor and log dietary intake.
Elements:
- Daily meal tracker with sections for breakfast, lunch, dinner, and snacks
- Nutritional summary (calories, proteins, fats, carbs)
- Button to log a new meal
- List of recent meals with nutritional information
- Search bar to find specific foods or recipes

# 7. Log Meal Page

Purpose: Add a new meal to the diet tracker.
Elements:
- Input fields for meal name and quantity
- Dropdown for meal type (breakfast, lunch, etc.)
- Nutritional information input (calories, proteins, fats, carbs)
- Save and Cancel buttons
- Option to add a photo of the meal

# 8. Profile Page

Purpose: Manage user settings and personal information.
Elements:
- User’s profile picture and name
- Personal information (age, weight, height)
- Option to edit profile details
- Settings (notifications, privacy, account)
- Logout button

# 9. Settings Page

Purpose: Customize app settings.
Elements:
- Notification preferences (enable/disable notifications, set reminder times)
- Theme settings (light/dark mode)
- Privacy settings (manage data sharing options)
- Account settings (change email, password, delete account)

# Design Considerations

Consistency: Ensure a consistent color scheme, typography, and iconography throughout the app.
User Experience: Prioritize ease of navigation and intuitive layout with clear information architecture.
Accessibility: Design for accessibility, including font size and colour adjustments and screen reader compatibility.
Visual Appeal: Use high-quality images and icons, and maintain a clean, modern design well aligned with the platform you choose.
Feedback: Provide visual feedback for user actions (e.g., button presses, form submissions) by leveraging animations and micro interactions.

# Presentation and Prototype Walkthrough Due: Wednesday August 14th

Objective: Present your design solution and prototype to the class.
Format: 4 to 5 minute in-class presentation with slides and a prototype demonstration.
Feedback & Questions: Peers provide constructive comments and can ask questions on your presentation and design approach.

# Deliverables

High-fidelity wireframes for each page
Interactive prototype demonstrating navigation and functionality
Style guide page in the same file detailing colors, fonts, and other design components chosen.
Presentation of your designs

# Evaluation Criteria

Design Quality including:(60%)

Usability: The UI should be intuitive with correct information architecture and navigation (primary, secondary).
Aesthetics: The design should be visually appealing and consistent.
Functionality: The UI should support all specified features, requirements and interactions.
Accessibility: The design should be optimized for accessiblity for users with different needs.
Platform adherence: Whatever is your chosen platform iOS or Android, make sure to adhere to its guidlines and leverage its UI Kit.
Innovation: Creative and effective use of design elements to enhance user experience.

Presentation:(40%)

Clarity of speech and showcase of design process. Express yourself with a clear and high voice. Make sure what you are saying is logical, well sequenced and serving the intention of your presentation.
Content: Make sure your presentation content is logical showcasing your design process. What all did you d0 to arrive to the best solution that is your app? Include reseach, wireframes, low fidelity and testing results. Spend most of your time focused on your final deliverable.
Attitude and confidence:. Are you positive and inspiring? are you confident and proud of what you created? Are you showing your best work to the client inspiring their trust and confidence? Are you upset and defensive about everything that went wrong with your team and work process? Are you feeling stressed and negative and showing that to your client? -Time management: Are you using your 5 minutes well to focus on the most important aspects of your work?

# Guidelines to do your best work

You have 3 weeks at least to work on this final project that will have a huge impace on your final grade. Here are a few guidelines to do your best work:

Conduct market and comparative research to understand similar apps and inspire your design without crossing ethical boundaries and copying work.
Create a paper wireframe outlining your navigation and pages' details.
Validate your wireframes with teachers and two other people at least to make sure your flow and details are usable and intuitive.
Define your colour palette and typography based on the target audience for whom the app is intended.
Choose your platform, select your frames and jump into the visual design. take the time to craft what will be a reusable component.
Remember to leverage grids and layouts, margins and spacing that are consistent and dev friendly.
Leverage plugins to use appropriate images and icons.
Leverage pluging and tools to ensure your colours and designs are accessible.
Leverage UI kit for your chosen platform and adhere to its guidelines.
Connect your prototype all together and leverage advanced features to create animations and micro-interactions.
Create two modes for your users by leveraging Figma variables.
Prepare your presentation to span over 4-5 minutes. Include slides that talks about your design process and how you arrived at your final deliverable. You can speak to how you started with research and wireframes, how you tested and refined, how you selected your style guide. Use the majority of your time though to demo your final prototype with its complete navigation and interactions. Tell us about your design choices and what makes your design the wonderful final product that you made.