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

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.

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.

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.

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.