Session Timeline

Learning Objectives

• Understand the purpose and structure of industry design briefs
• Learn to define problems clearly and identify target users
• Identify technical and business constraints for projects
• Write clear, measurable requirements as a team
• Understand the importance of early technical validation
• Build "Hello World" prototypes to test tech stack feasibility
• Validate that team can work with chosen technologies
• Identify potential technical blockers early in the project

Why Design Briefs Matter

Industry Design Brief Structure

1. Project Title & Team - Name, team members, roles
2. Problem Statement - What problem are you solving? Why does it matter?
3. Target Users - Who will use this? What are their needs?
4. Project Objectives - What will the project achieve?
5. Key Features - Core functionality (prioritized)
6. Technical Constraints - Technology, time, resources, expertise
7. Success Criteria - How do you know if you've succeeded?
8. Project Scope - What's included and explicitly excluded

Each section should be concise - typically 2-5 sentences

Defining the Problem

Good Problem Statements:

• Are specific and measurable
• Identify who is affected
• Explain why it matters (impact)
• Avoid jumping to solutions

Understanding Target Users

Writing Functional Requirements

Requirements should be:

• Specific: Clear, unambiguous description
• Measurable: Can verify if it's implemented
• Achievable: Technically feasible for your team
• Relevant: Addresses user needs or business goals
• Testable: Can be validated through testing

Non-Functional Requirements

Common Categories:

• Performance: Response time, throughput, load capacity
  Example: "Search results must load within 2 seconds"
• Security: Authentication, authorization, data protection
  Example: "Passwords must be hashed using bcrypt"
• Usability: Learning curve, accessibility, error handling
  Example: "Must meet WCAG 2.1 Level AA standards"
• Scalability: Growth capacity, concurrent users
  Example: "Support 100 concurrent users"
• Reliability: Uptime, error rates, data consistency
  Example: "99% uptime during operating hours"

Identifying Project Constraints

Defining Success Criteria

Managing Project Scope

Rule of Thumb: If you have 10 weeks, plan features for 7 weeks. Buffer time for integration, testing, and unexpected issues.

Design Brief Example

## Study Space Finder - Design Brief

**Team:** Tom (Frontend), Bob (Backend), Charlie (Database), Dana (Mobile)

**Problem Statement:**
Students waste 15-30 minutes daily searching for available study 
spaces across campus. Current systems don't show real-time availability.

**Target Users:**
University students (18-25) who need quiet study spaces. Mix of 
laptop users and group study needs.

**Objectives:**
- Provide real-time study space availability
- Reduce time spent searching for spaces
- Enable booking to guarantee space

**Key Features (MoSCoW):**
MUST: View live availability, filter by location/type, book spaces
SHOULD: Save favorite spaces, receive booking reminders
COULD: Social features (study groups), occupancy predictions

**Technical Constraints:**
- 12-week timeline
- Team has React/Node.js expertise
- Must integrate with campus authentication
- Free hosting (Heroku/Vercel)

**Success Criteria:**
- Functional web + mobile app deployed
- Real-time updates working
- 90% of bookings processed without errors

Team Decision Making for Design Briefs

Collaborative Process:

1. Individual Preparation: Each member researches similar solutions
2. Brainstorm Users: Create user personas together
3. Define Problem: Reach consensus on core problem
4. List Features: Everyone contributes feature ideas
5. Prioritize with MoSCoW: Vote/discuss to categorize
6. Assign Writing: Divide brief sections among team
7. Review & Refine: Everyone edits final document

Part B: Early Technical Feasibility

What is a "Hello World" Prototype?

• Minimal technical proof-of-concept
• Tests your tech stack setup and viability
• Validates team can work with chosen tools
• Identifies blockers early (before you invest weeks)
• NOT a full feature - just the simplest possible working example

Why Validate Technical Feasibility Early?

What Should Your Prototype Validate?

Choose ONE of these based on your project:

• Web App: Basic server + database connection + API endpoint
  Example: Node.js server returns data from PostgreSQL via /api/test
• Frontend + Backend: Frontend fetches data from backend
  Example: React app displays data from Flask API
• Database Operations: CRUD operations on a test table
  Example: Create, read, update, delete a "User" record
• External API Integration: Call third-party API successfully
  Example: Fetch weather data from OpenWeather API
• ML Model: Load a pre-trained model and make prediction
  Example: Load scikit-learn model, predict on sample data
• Mobile App: Display "Hello World" on iOS/Android simulator
  Example: React Native app with button that updates text

"Hello World" Prototype Examples

Tech Stack Setup Checklist

Essential Setup Steps:

1. Install Core Tools:
   • Programming language runtime (Python, Node.js, Java, etc.)
   • Package manager (npm, pip, maven, etc.)
   • Database (PostgreSQL, MongoDB, MySQL, etc.)
2. IDE/Editor Setup:
   • VS Code, PyCharm, IntelliJ, etc.
   • Extensions/plugins for your languages
3. Version Control:
   • Git installed and configured
   • SSH keys for GitHub (if using)
4. Test Communication:
   • Slack/Discord for team chat
   • Shared project board (Trello/Jira)

Example: Node.js + PostgreSQL "Hello World"

// server.js - Minimal Node.js + PostgreSQL example
const express = require('express');
const { Pool } = require('pg');

const app = express();
const pool = new Pool({
  user: 'your_user',
  host: 'localhost',
  database: 'test_db',
  password: 'your_password',
  port: 5432,
});

// Test route: fetch data from database
app.get('/api/test', async (req, res) => {
  try {
    const result = await pool.query('SELECT NOW()');
    res.json({ 
      message: 'Hello World!',
      timestamp: result.rows[0].now 
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

This validates: Node.js works, PostgreSQL connection works, API endpoint responds

Example: React + API Integration

// App.js - Minimal React component fetching from API
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('http://localhost:3000/api/test')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error:', error);
        setLoading(false);
      });
  }, []);

  if (loading) return 
Loading...
;

  return (
    

      
{data?.message || 'No data'}
      
Server time: {data?.timestamp}
    
  );
}

export default App;

This validates: React setup works, API calls work, data displays

Example: Python ML "Hello World"

# ml_test.py - Minimal ML model loading and prediction
import numpy as np
from sklearn.datasets import load_iris
from sklearn.ensemble import RandomForestClassifier

# Load sample dataset
iris = load_iris()
X, y = iris.data, iris.target

# Train simple model
model = RandomForestClassifier(n_estimators=10, random_state=42)
model.fit(X, y)

# Make a test prediction
sample = np.array([[5.1, 3.5, 1.4, 0.2]])  # Sample iris features
prediction = model.predict(sample)
probability = model.predict_proba(sample)

print(f"Prediction: {iris.target_names[prediction[0]]}")
print(f"Confidence: {probability[0][prediction[0]]:.2%}")
print("✓ Model loading and prediction successful!")

This validates: Python/libraries installed, model training works, predictions work

Common Technical Blockers & Solutions

Team Coordination for Prototyping

Divide & Conquer Approach:

Document Your Setup Process

Create a setup.md file with:

1. Prerequisites: Required software and versions
2. Installation Steps: Exact commands to install dependencies
3. Configuration: Environment variables, database setup
4. Running the Project: Commands to start all services
5. Testing: How to verify everything works
6. Common Issues: Problems you encountered and solutions

Before Next Lecture

1. Submit to Moodle:
   • Team design brief (complete version)
   • Setup.md file documenting your prototype setup
   • Screenshot of working "Hello World" prototype
2. Refine Your Brief: Incorporate any feedback from today
3. Expand Prototype: If time, try adding one more component
4. Read About Agile: Review Scrum Guide (link on Moodle)
5. Think About User Stories: How would users describe your features?