Project Setup
Need Help?
Section 2: Design & Development: Building Products That Matter
A comprehensive guide for educators and students to navigate the product design and development process, from identifying problems to testing prototypes.
2.1.1 Identify the Problem
Before diving into design, students must first define the specific problem they want to solve. This critical foundation sets the trajectory for the entire project and helps maintain focus throughout the development process.
A well-crafted problem statement articulates:
  • What specific issue needs addressing
  • Who is affected by this problem
  • Why solving it matters (impact and significance)
  • How current solutions fall short
Students should avoid vague, overly broad problems in favour of specific, actionable challenges. Remember, a precisely defined problem is already halfway to its solution.
Reflection Prompt: Why is this problem important to solve, and what impact might your solution have?

01:14

YouTube

2.1.1 Identify the Problem

Before diving into design, students must first define the specific problem they want to solve. This critical foundation sets the trajectory for the entire project and helps maintain focus throughout the development process. A well-crafted problem statement articulates: What specific issue needs addressing Who is affected by this problem Why solving it matters (impact and significance) How current solutions fall short

Resources Required:
  • Project brief template
  • Brainstorming worksheet
  • 30 minutes class time
2.1.2 Target Audience
Understanding who you're designing for is essential for creating products that truly resonate. In this module, students learn to identify and analyse their target audience, creating simple user personas that capture key demographics, behaviours, and needs.
Research
Gather data about potential users through surveys, interviews, and observation. Look for patterns in behaviour, pain points, and unmet needs.
Create Personas
Develop 1-2 user personas that represent your core audience segments. Include demographics, goals, frustrations, and relevant behaviours.
Empathise
Map what your personas think, feel, say, and do regarding the problem you're solving. This builds empathy and deeper understanding.
Well-developed personas help teams make design decisions from the user's perspective rather than their own assumptions. They serve as a constant reference point during product development, ensuring the solution remains user-centred.

Learning Outcome: Draft persona(s) that accurately capture your target audience's needs, frustrations, and motivations. Estimated completion time: 30-40 minutes.
Reflection Prompt: What did you learn about your audience that surprised you, and how might it change your approach?

02:36

YouTube

2.1.2 Target Audience

Understanding who you're designing for is essential for creating products that truly resonate. In this module, students learn to identify and analyse their target audience, creating simple user personas that capture key demographics, behaviours, and needs. Research: Gather data about potential users through surveys, interviews, and observation. Look for patterns in behaviour, pain points, and unmet needs. Create Personas: Develop 1-2 user personas that represent your core audience segments. I

2.1.3 Simple Business Plan
Even the most brilliantly designed products need a viable business model to succeed. In this step, students create a one-page business plan that outlines how their product could work in the real world.
Value Proposition
Clearly articulate what makes your product valuable to users. What specific benefit or solution does it provide that alternatives don't?
Cost Structure
Identify the key expenses required to create and deliver your product. Consider development, production, marketing, and operational costs.
Revenue Streams
How will your product generate income? Options include direct sales, subscription models, advertising, freemium approaches, or licensing.
Sustainability
Consider how your product will remain viable long-term. This includes environmental impact, scalability, and adaptation strategies.
The business plan doesn't need to be complex, but it should demonstrate thoughtful consideration of how the product creates value while covering its costs. This exercise helps students think beyond just the design aspects and consider the broader context of product viability.
Reflection Prompt: What would make your product idea sustainable in the long term, and what challenges might you face?

01:22

YouTube

2.1.3 Simple Business Plan

Even the most brilliantly designed products need a viable business model to succeed. In this step, students create a one-page business plan that outlines how their product could work in the real world. Value Proposition: Clearly articulate what makes your product valuable to users. What specific benefit or solution does it provide that alternatives don't? Cost Structure: Identify the key expenses required to create and deliver your product. Consider development, production, marketing, and oper

2.1.4 Design the Product: Homepage Sketch + Site Map
Before building a digital product, students need to visualise its structure and navigation. This step involves creating two essential planning documents:
These documents guide development, identify issues, and force students to think through the user experience and information architecture.
Reflection Prompt: How does your product design directly address the problem you identified and meet the needs of your target audience?

01:07

YouTube

2.1.4 Design the Product Homepage Sketch + Site Map

Before building a digital product, students need to visualise its structure and navigation. This step involves creating two essential planning documents: Homepage Sketch A rough visual layout of the main landing page that shows: Key content blocks and their hierarchy Navigation elements and their placement Call-to-action buttons and their prominence Overall visual structure and emphasis Site Map A hierarchical diagram showing how all pages connect: All main sections and subsections Navigati

2.2.1 Create the Prototype
With planning complete, it's time to bring the product to life with a working prototype. Students will use low-code/no-code tools to create an interactive version of their design that demonstrates core functionality.
1
Choose Your Tools
Select appropriate prototyping platforms based on your product type and technical skills:
  • Websites: Webflow, Wix, WordPress
  • Apps: Figma, Adalo, Glide, Bubble
  • E-commerce: Shopify, Big Commerce
2
Focus on Core Features
Implement the essential functions that solve your identified problem. Don't try to build everything at once. Start with the minimum viable product (MVP) that demonstrates your core value proposition.
3
Design Consistently
Maintain visual consistency with colours, fonts, and UI elements throughout your prototype. Create a simple style guide to help maintain this consistency as you build.
The prototype doesn't need to be perfectly polished or have full functionality. Its purpose is to demonstrate the product concept in a tangible way that users can interact with and provide feedback on.

Common Pitfall: Students often get caught in the "perfectionism trap" at this stage. Remind them that prototypes are meant to be improved through testing, not perfect from the start.
Reflection Prompt: What part of your prototype are you most proud of, and what was most challenging to implement?

01:47

YouTube

2.2.1 Create the Prototype

With planning complete, it's time to bring the product to life with a working prototype. Students will use low-code/no-code tools to create an interactive version of their design that demonstrates core functionality. 1. Choose Your Tools Select appropriate prototyping platforms based on your product type and technical skills 2. Focus on Core Features Implement the essential functions that solve your identified problem. Don't try to build everything at once. Start with the minimum viable produ

2.2.2 Test & Refine
The final step in the product development cycle is testing and refinement. Students will gather structured feedback from peers and potential users to identify strengths and weaknesses in their prototype.
Effective Testing Methods:
  • User observation: Watch people interact with your prototype without providing guidance
  • Task completion: Ask testers to complete specific actions and note any difficulties
  • Feedback surveys: Collect structured responses about usability and value
  • A/B testing: Compare different versions of key features
Feedback Capture Log:
Use a structured format to document feedback:
  • What worked well?
  • What was confusing or difficult?
  • Are there missing features users expected?
  • Does it effectively solve the identified problem?
After collecting feedback, students should prioritise changes based on impact and feasibility. Not all suggestions need to be implemented—focus on those that most directly improve the product's ability to solve the core problem for the target audience.

Success Indicator: The ability to receive constructive criticism gracefully and translate it into meaningful improvements is a key skill in product development.
Reflection Prompt: What was the most useful feedback you received, and how will you incorporate it into your next iteration?

01:33

YouTube

2.2.2 Test & Refine

The final step in the product development cycle is testing and refinement. Students will gather structured feedback from peers and potential users to identify strengths and weaknesses in their prototype. Effective Testing Methods: User observation: Watch people interact with your prototype without providing guidance Task completion: Ask testers to complete specific actions and note any difficulties Feedback surveys: Collect structured responses about usability and value A/B testing: Compare di

Student Tips for Success
1
1
Start Simple
Focus on creating a homepage before building additional pages to establish a strong foundation.
2
2
Experiment Freely
Don't be afraid to test different layouts and features to discover what works best for your users.
3
3
Use Templates
Save valuable time by starting with pre-built designs or components and customising them to your needs.
4
4
Seek Guidance
Share your progress regularly with mentors or peers for constructive feedback and diverse perspectives.
5
5
Time Management
Allocate specific time blocks for each task to stay on track and avoid falling behind schedule.
Resources for This Section
  • Guide to HTML & CSS Basics
  • Low-Code/No-Code Tutorials:
  • Coding Platforms:
  • Replit HTML/CSS Guide: A beginner-friendly guide to coding HTML and CSS using Replit, an online coding platform.
  • CodePen Basics: A detailed guide to using CodePen, a popular platform for experimenting with HTML, CSS, and JavaScript.
  • Support Worksheets
  • Guide to Using HTML and CSS: This worksheet guides you through the basic first steps for designing your prototype.
  • Iterative Design Log: This log is for students to track feedback and iterations on their prototype—a simple document template for recording changes and improvements.
  • Prototyping Tools Guide: This guide explains various tools students can use for prototyping, including low-code/no-code options and coding platforms.
Ready to get your product advertised to others?
Click below to get started on the Branding & Marketing tasks.