System Design Proposal - Final Project Guidelines

Hi Teleborters! Congratulations on reaching until the end of Program AI-2: Artificial Intelligence, Machine Learning & Computer Vision. Now there is only one final step left before you have completed the program, which is to do the System Design Proposal.

In this project, you are tasked to write a System Design Proposal to propose a new AI-related project to your teachers and friends. The main goal here is to test your ability to design and propose a new system to your potential clients and supervisors.

For more information on why system design is important, check out the article by GeeksForGeeks right here.

:emoji:️ Project Roadmap

graph TD
    A[Phase 1: Research & Ideation] --> B[Phase 2: System Design]
    B --> C[Phase 3: Documentation]
    C --> D[Phase 4: UI Prototype]
    D --> E[Phase 5: Final Review]
    
    A --> A1[Identify Problem]
    A --> A2[Research Solutions]
    A --> A3[Define Objectives]
    
    B --> B1[Design Modules]
    B --> B2[Select Technologies]
    B --> B3[Choose Algorithms]
    
    C --> C1[Write Proposal]
    C --> C2[Create Diagrams]
    C --> C3[Add References]
    
    D --> D1[Sketch Design]
    D --> D2[Create Mockups]
    D --> D3[Document UI]
    
    E --> E1[Review Checklist]
    E --> E2[Polish Document]
    E --> E3[Submit Project]

General Requirements

The General Requirements of the proposal are as follows:

1. Make a copy of this template and write your report
2. Minimum 5 pages (not including Cover, Table of Contents, User Interface, and References)

:bulb: Tip Start early! A good system design proposal requires time for research, iteration, and refinement. Begin by brainstorming multiple project ideas before settling on one.

:emoji: Milestone Checkpoint #1

Before proceeding: Have you completed your project ideation? Make sure you have:

• Identified a real-world problem to solve
• Researched existing solutions
• Confirmed your idea uses AI/ML concepts from the course
• Discussed feasibility with your team

Front Page / Cover

The front page should contain the following information:

1. Program Name (eg. Program AI-2: Artificial Intelligence, Machine Learning & Computer Vision)
2. Project Title (eg. Attendance Tracker)
3. Full names of Group Members, Group number and Class

You may replace the fields given in the template with this information.

Problem Statement (1/2 Page)

This section will introduce the reader to what kind of problems your project aims to solve. The following information regarding the problem can be written:

1. Background of problem (where the problem originates from)
2. Effects of such problem (negatively affected some people)

:warning: Warning Common Pitfall: Choosing a problem that's too broad or vague. Instead of "solve climate change," focus on specific aspects like "detect illegal deforestation using satellite imagery" or "optimize energy consumption in smart homes."

There are many problems in the world that AI can help to solve, some of them are:

1. Problems in healthcare and wellbeing
2. Problems in the educational field
3. Poverty

For more inspiration, you may have a look at the 17 SDGs in the world.

:bulb: Tip Best Practice: Use statistics and real-world examples to support your problem statement. This makes your proposal more compelling and shows you've done your research!

Solution (1/2 page)

This section briefly informs the reader about your solution. The following information can be included:

1. Title and brief description about your project.
2. Who is going to use the system / program.
3. (Optional) A logo of your system / program.

Objective (1/2 page)

This section informs the readers regarding the objectives of your system. A minimum of 2 - 3 objectives are required in your proposal.

:bulb: Tip Write SMART objectives: Specific, Measurable, Achievable, Relevant, and Time-bound. For example: "Reduce attendance recording time from 10 minutes to 30 seconds using facial recognition."

:emoji: Milestone Checkpoint #2

System Design Check: Before moving forward, ensure you have:

• Clear problem statement with supporting evidence
• Concrete solution that addresses the problem
• 2-3 SMART objectives
• Initial ideas for system modules

System Modules (1 page)

This section provides a good overview on what the key components of your system are and their intended uses. Each key component of your system will be called a module with each of them having their very own description and features.

As an example, here is one of the modules of the Attendance Tracker System.

In the example module Face Detector, we can see that its main usage is to detect faces in a given image or video. To achieve this goal, the Face Detector module will have the following capabilities:

1. Able to detect the person's face in an image.
2. Able to locate the person's face in an image.
3. Able to draw bounding boxes around the person's face in the image.

It is recommended to have at least 3 - 4 modules for your system.

:warning: Warning Common Pitfall: Creating modules that are too complex or overlapping. Each module should have a clear, single responsibility. If a module does too many things, consider breaking it into smaller modules.

Tools & Technologies (1 page)

This section informs the reader regarding what are the tools and technologies involved in your system. You should also provide a brief description regarding how the tools will be integrated into your system.

The tools & technologies will be divided into software and hardware. Here is an example:

Here is a short description regarding how the tools will be integrated:

In my system, Python will be used as the main programming language. VSCode will become the main code editor which is used to code the programs for the system. 1 laptop will be used to code the website which will then be deployed onto a server.

Make sure that all the technologies proposed are used to implement all your system features.

:bulb: Tip Pro Tip: Research the compatibility between your chosen tools before finalizing. For example, ensure your ML framework works well with your chosen deployment platform.

Algorithms (1/2 page)

This section informs the reader regarding what algorithms you will be using in your system. You should also provide a short description on how you are going to use the algorithm. Here is a simple example:

It is recommended to have at least 2 - 3 algorithms for your system

:warning: Warning Remember: Don't just list algorithm names! Explain WHY you chose each algorithm over alternatives. For example: "YOLOv8 was chosen over R-CNN because it offers real-time detection capabilities essential for live attendance tracking."

Users (1/2 page)

This section informs the reader regarding who the users you are targeting for your project. As an example:

It is recommended to have at least 3 - 4 user groups for your system.

Social Impact & Limitations (1/2 page)

This section informs the reader regarding what the social impacts (advantages) and limitations (disadvantages) of your system will be.

You can include how you will be solving the stated limitation in the future.

:emoji: Milestone Checkpoint #3

Technical Design Complete: Verify you have:

• 3-4 well-defined system modules
• Appropriate tools and technologies selected
• 2-3 algorithms with justifications
• Clear user groups identified
• Social impacts and limitations documented

References

In this section, you may include the links to any references you used to complete your project.

User Interface

Please refer to the guidelines for Final Project Prototype.

System Design Proposal Part 2 - System Prototype Guidelines

:bulb: Tip Encouragement: The UI prototype phase is where your project comes to life! This is your chance to showcase creativity while maintaining usability. Don't worry about making it perfect - focus on clearly communicating your vision.

System Prototype

The main purpose of a system prototype is to show the readers:

1. What would your final system look like in the form of a user interface.
2. How can they interact with the user interface.

Sketch your Design

The first step to complete a successful design is to always sketch it out on a piece of paper. However, showing your teammates what you have sketched proved to be difficult in an online environment. This is where you can use Google Jamboard to work together with your teammates and draw the initial sketch of your user interfaces. For more information on how to use Google Jamboard, watch this video.

After getting a good idea on what your system is going to do, open a Google Jamboard and start sketching!

The number of sketches depends on how many interfaces your system will have. In general, web applications will consist of the following pages:

1. Home page: This is the main landing page for the application. It often provides an overview of the application's features and allows users to navigate to other pages.
2. User profile page: This page displays information about the logged-in user, such as their name, email address, and account settings.
3. Products & Services page: This page will act as the interface for users to interact with your AI & Other products, whether it be a chatbot, object detector or sentiment analysis.

You are not required to have all the pages stated above. However, make sure that your design fulfills the features stated in your proposal. For more information on useful pages, you may refer to this video.

For this project, make sure to have at least 2 - 3 user interfaces sketched out for your system.

:warning: Warning Common Pitfall: Jumping straight to high-fidelity designs without sketching. Low-fidelity sketches help you iterate quickly and avoid getting attached to specific design details too early.

You will need to refer to this sketch while completing your design. At this stage, you can show this design to your instructor and seek their approval.

An example of sketch designed using Google Jamboard:

:bulb: Tip Design Tip: Use the "Crazy 8s" technique - fold a paper into 8 sections and sketch 8 different UI ideas in 8 minutes. This helps generate creative solutions quickly!

Select your Tool

The next step is to select a suitable design tool. For this purpose, you may choose one of the following:

• Draw.io
• Canva (better creativity)
• Figma (more tools, less beginner friendly)

For draw.io, you may watch this Youtube Playlist by draw.io to learn the basics.

For canva, this video shows an example of how one can design a recipe website using canva.

For Figma, you may watch this video to learn how to use it. However, compared to the other options, figma is much less beginner friendly.

If you have other tools you are more familiar with, feel free to use them.

Start Designing

Now with the initial sketch and your tools ready, it's time to start designing. Make sure to work together with your teammates to complete the design.

:bulb: Tip Best Practice: Follow these UI design principles:

• Consistency: Use the same colors, fonts, and spacing throughout
• Clarity: Make buttons and actions obvious to users
• Feedback: Show users when actions are processing (loading spinners, progress bars)
• Accessibility: Consider users with disabilities (color contrast, text size)

:emoji: Milestone Checkpoint #4

UI Design Progress: Before finalizing, ensure:

• All sketches are complete and approved
• Design tool selected and team trained
• Consistent design language established
• Key user flows are clearly represented

Explain Your Design

After completing your design, the next step is to explain the design to your readers in words. This information should be written under the User Interface section of the proposal.

In general, here are the information needed to explain your UI to your users:

1. What is the purpose of the page.
2. What are the major components in the page.
3. How can user interact with the components in the page.
4. Other key points / attractions.

As an example, here is a sample explanation regarding the Attendance Tracker page from the sample report:

User Interface

Figure 1: Face Detection Page

This figure shows the user interface in which users can interact with and use the attendance tracker. In this figure, the webcam output is displayed at the center, where the face detection takes place and bounding boxes are drawn around the object. The face is then identified by the face recognizer and the person's name will appear on top of the bounding boxes, along with how confident the face recognizer is at the person's identity.

On the right hand pane, we can see the number of students that have recorded attendance with, in this case 10. The students who attended and students who have not attended the lesson would also be marked as shown there.

:rocket: Extension Challenges

Ready to go above and beyond? Try these advanced challenges:

Challenge One: Interactive Prototype

Instead of static mockups, create an interactive prototype using:

• Figma Prototyping: Link your screens together with clickable elements
• Marvel App: Turn sketches into clickable prototypes
• Adobe XD: Create advanced interactions and animations

Challenge 2: Technical Architecture Diagram

Create a detailed system architecture diagram showing:

• Data flow between modules
• API endpoints and connections
• Database schema design
• External service integrations

Challenge 3: AI Model Comparison

Conduct a comparative analysis of different AI models for your use case:

• Create a comparison table with metrics (accuracy, speed, cost)
• Include benchmark results from research papers
• Justify your final model selection with data

Challenge 4: Business Model Canvas

Develop a business perspective for your project:

• Revenue streams and cost structure
• Key partnerships needed
• Value propositions for each user group
• Market analysis and competition

:bug: Debugging Tips

Common Issues and Solutions

Issue 1: "My proposal is too technical for non-technical readers"

• Solution: Add analogies and real-world examples. Use diagrams instead of lengthy explanations.

Issue 2: "I can't think of enough system modules"

• Solution: Break down your main functionality. Consider: data input, processing, storage, output, user management, and analytics modules.

Issue 3: "My UI looks unprofessional"

• Solution: Use design templates, maintain consistent spacing (8px grid), limit color palette to 3-4 colors, and get feedback from peers.

Issue 4: "I'm unsure if my algorithms are appropriate"

• Solution: Research similar projects on GitHub, read research papers, and consult the course materials for algorithm applications.

:warning: Warning Final Check: Before submission, have someone outside your team read your proposal. If they can understand your project without additional explanation, you've succeeded!

:emoji: Final Milestone

Project Completion Checklist:

• All sections complete and meet page requirements
• UI prototypes are clear and professional
• Technical details are accurate and well-explained
• Document is proofread and formatted consistently
• References are properly cited
• Team has reviewed and approved final version

:bulb: Tip You've got this! This project is your opportunity to showcase everything you've learned in AI-2. Take pride in your work and remember - the best proposals tell a compelling story about solving real problems with AI. Good luck, Teleborters! :dart: