BTEC Level 2 Unit 7 Introduction to Website Development Answer Guide

08 Oct, 2026 /

Author : Christopher Anderson

This answer guide covers Unit 7 Introduction to Website Development from the Pearson BTEC International Level 2 Qualifications in Information Technology. It explains every Pass, Merit and Distinction criterion across the three learning aims, shows what your website evaluation, design documents and test evidence should contain, and gives model paragraphs and a worked test log you can adapt for your own site.

What the Unit 7 assignment asks you to do

The unit is usually split into no more than two assignments. First you investigate how organisations use websites; then you take a client brief, design a site to meet it, build it and improve it through testing and feedback.

  1. Investigate (aim A): compare at least two websites with different purposes — for example a news service and an online shop — looking at what each is for and the front-end and back-end components that support that purpose.
  2. Design (aim B): identify the purpose and user requirements in the given brief and produce design documents: site structure, wireframes, a style guide, and a list of assets and accessibility features.
  3. Develop and test (aim C): build the site from your own design, test it for functionality, quality and usability, collect feedback, make changes and explain why.

Learning aims for Unit 7

Learning aim What it covers
A: Understand the uses and features of websites Purposes (promoting products, e-commerce, providing a service, information); front-end components such as navigation, branding, layout and accessibility; back-end components such as shopping carts, search, chat and contact forms
B: Design a website to meet user requirements Purpose, audience and complexity; UX design (information architecture, wireframes, clickable prototype); UI design (style guide, rendered designs); assets and accessibility
C: Develop and test a website to meet user requirements Text, tables, forms, navigation, interactive components, colour schemes, styles and templates; multimedia; browser compatibility; testing, feedback and refinement

Pass, Merit and Distinction criteria explained

Criterion What it asks How to evidence it
A.P1 Outline key purposes of different websites used by organisations One short section per site stating who it serves and what it is for
A.P2 Outline key components of different websites used by organisations Annotated screenshots naming front-end and back-end components
A.M1 Explain purposes and key components of different websites Say how each component helps the site achieve its purpose
A.D1 Evaluate the effectiveness of different websites in relation to their purposes and key components Strengths, weaknesses and a judgement for each site, with a comparison
B.P3 Identify the purpose and user requirements for a given website brief A requirements list drawn from the brief
B.P4 Produce a basic website design to meet user requirements Site map and simple wireframes
B.M2 Produce a detailed website design for a given brief Full wireframes, style guide, asset list, navigation plan, test plan
B.D2 Produce a comprehensive website design for a given brief All of the above, fully annotated and linked to each requirement, with accessibility planned in
C.P5 Develop a website using own design, testing and refining for functionality, quality and usability using feedback from others Working site, test log, feedback records
C.P6 Explain reasons for changes made following feedback and testing A change log with a reason for each change
C.M3 Develop a website using own detailed design, refining against test results, including rationale for changes Changes traced back to specific tests or feedback
C.D3 Develop a website using own comprehensive design, refining against test results, with a justified rationale for changes and further improvement Justified changes plus realistic suggestions for future improvements

How to answer Learning aim A: uses and features of websites

Pick two sites whose purposes clearly differ. Use the same headings for both so your comparison is easy to follow.

  • Purpose: who the users are and what the organisation wants them to do (buy, book, read, contact).
  • Front-end: navigation menu, search bar, logo and colours, page layout, images and video, mobile layout, accessibility features such as alt text and readable contrast.
  • Back-end: shopping basket and checkout, user accounts, search engine, live chat, contact forms, content management.
  • Effectiveness (A.D1): test a real task on each site — find a product and reach the checkout, or find today’s weather story — and judge how well the components helped.

Example paragraph: The supermarket site is built around selling, so the search bar sits at the top of every page and the basket total is always visible. Searching for “oat milk” returned results in one step and the “add” button worked without leaving the results page, which keeps shoppers moving towards checkout. However, product filters were hidden behind a menu on mobile, so finding a specific brand took four taps. For a site whose purpose is quick repeat shopping, this is a weakness worth fixing.

How to answer Learning aim B: designing the website

  1. Requirements (B.P3): list what the client wants and what users need — for example “show opening times on every page”, “contact form”, “gallery of past work”, “works on phones”.
  2. Site map: the pages and how they link. Pearson’s unit guidance sets learning aim B as designing a website of at least five linked pages, so plan five or more at every grade.
  3. Wireframes: one per page showing where the header, navigation, content, images and footer sit, for both desktop and mobile.
  4. Style guide: colours with hex codes, fonts and sizes, button styles, logo use.
  5. Assets: list each image, video or icon, its source and whether you have permission to use it.
  6. Accessibility: alt text, heading order, colour contrast (WCAG guidance asks for at least 4.5:1 for normal-size text), labelled form fields.
  7. Test plan: what you will test and the expected result, written before you build.

Example paragraph: The client said most enquiries come from people on their phones, so the wireframes start with the mobile layout. The navigation collapses into a menu button, and the “Book a table” button stays in the header on every page because booking is the main task users came to complete. Body text is dark grey (#222222) on white, which gives a contrast ratio well above the 4.5:1 guideline.

How to answer Learning aim C: developing and testing

Build from your own design, then prove through testing that the site works and improves. Keep dated evidence of every version.

  • Use the tools the unit lists: text, tables, forms, navigation, interactive components, colour schemes, styles and templates, plus embedded multimedia.
  • Test functionality (links, forms, buttons), quality (spelling, image quality, consistent styling) and usability (can a new user complete a task?).
  • Check the site in at least two browsers and on a phone-sized screen.
  • Collect feedback from real users — classmates, the client or family — using a short questionnaire.
  • Record each change, the test or feedback that caused it and why it improves the site.

Example paragraph: Two of the five testers said they could not tell the gallery images were clickable. I added a hover effect and a small caption reading “Tap to enlarge”, then retested with two new users, who both opened an image without help. I kept the change because the client’s main requirement was to show previous work, and the gallery is useless if visitors do not realise they can view it in detail.

Worked example: test log and change record

Test Expected result Actual result Action
Click “Contact” in menu on every page Contact page opens Broken link on Gallery page (typed contact.htm) Corrected to contact.html; retested — pass
Submit form with email left blank Error message, form not sent Form sent with no email Added the required attribute to the email field; retested — pass
View home page at phone width Single column, no sideways scrolling Banner image wider than screen Set image max-width to 100%; retested — pass
Open site in a second browser Same layout and fonts Pass None
Screen reader reads gallery Each image described Two images had no alt text Added descriptive alt text; retested — pass

Under the table, write a sentence or two for each change explaining why it matters to users. For Distinction, add further improvements you would make with more time, such as a booking system or compressing images to speed up loading, and justify each one.

Common mistakes that cost marks

  • Choosing two websites with the same purpose, which makes A.D1 comparison weak.
  • Describing what a site looks like without saying how components support its purpose.
  • Designs that the final website does not follow — your site must be built from your own design.
  • Testing only at the end, with no evidence of changes made as a result.
  • Changes listed with no reason, or reasons that do not mention the test or feedback.
  • Using images from the internet without permission or credit.
  • Ignoring mobile layout and accessibility.

How to move from Merit to Distinction

For A.D1, finish each site analysis with a clear judgement on how effective it is for its purpose, and compare the two. For B.D2, make the design comprehensive: every page wireframed, every requirement traced to a design feature, a complete style guide and accessibility planned from the start. For C.D3, refine against test results, justify each change in terms of user requirements, and suggest realistic further improvements with reasons.

FAQs

Do I have to hand-code the website?

Your brief and centre will say which tools are allowed. Many centres expect HTML and CSS; whatever you use, the site must be built from your own design.

How many pages does my website need?

Pearson’s guidance for this unit expects a website of at least five linked pages, whatever grade you are aiming for. Beyond that minimum, quality and how well the pages meet the user requirements matter more than adding extra pages.

Who should test my website?

Ask people who match the target audience where possible. Record who tested, what they did and what they said.

What is the difference between wireframes and a style guide?

Wireframes show where things go on each page. The style guide sets how things look — colours, fonts, buttons — so every page is consistent.

Can I use a website builder template?

Check with your tutor. If templates are allowed, you still need your own design documents and must show how you adapted the site to the brief.

Studying IT at a higher level as well? See our BTEC Level 3 Unit 1 Information Technology Systems answer guide. If you want a tutor to check your design or test evidence against the criteria, you can get expert help with your BTEC assignment.

Get AI-Free Assignment Help Instantly

Facing Issues with Assignments? Talk to Our Experts Now! Download Our App Now!

WhatsApp Icon