R097 Task 2 Guide: Creating the Interactive Product
What Task 2 asks you to do
Task 2 assesses Topic Area 2: creating the interactive product from your plan, using a range of skills, and saving and exporting it so it runs. Work from your current assignment and its marking grid.
| Part | What you produce |
|---|---|
| Prepare the assets | Images, audio and video repurposed and optimised for the product |
| Build the structure | Every screen, with working navigation |
| Add the content and interactivity | Text, media and interactive features working together |
| Apply the design | The look from your plan, consistent across every screen |
| Save and export | The source project kept, and a version that runs where the client needs it |
Step by step
- Prepare the assets: crop, resize, convert and compress images; trim and normalise audio; edit and compress video; write alt text and captions.
- Build the structure: every screen from the navigation diagram, linked, with placeholders. Click through it end to end.
- Add the content: the real text, images, audio and video, checked against the plan.
- Make it interactive: buttons, menus, hotspots, forms, quizzes, media controls, each giving feedback.
- Style it last: the colours, fonts and layout from your plan, applied consistently.
- Test as you go: every link and feature as it is built, not only at the end.
- Save and export: keep the source project, export a version that runs on the client's device, and test that version.
Evidence of your process
- Screenshots of each pass: the structure, the content, the finished design.
- Screenshots of the tools and settings you used for each technique: compressing an image, trimming audio, adding a hotspot, linking a button.
- Before and after for every asset you repurposed, with the file sizes.
- The reasons for any change from your plan.
- Your versions, saved with a naming convention.
Evidence of different skills, combining media, navigation, interactivity, audio and video editing, optimisation and accessibility, each used for a reason, shows more than one feature built many times.
The wireframe put the Listen button under the text. On the kiosk, shorter visitors could not see it without stepping back, so I moved it beside the photograph, where the first tester found it straight away.
Before you hand in
- Every screen from the navigation diagram exists, and every link works
- Assets are repurposed and optimised, with before and after evidence
- A range of interactive features works, and each gives feedback
- Accessibility is implemented: alt text, captions, contrast, keyboard access
- The design is consistent across every screen
- Changes from the plan are explained
- The source project is saved, and the exported version runs on the target device
Sources and further reading
- OCR Cambridge Nationals in Creative iMedia (J834): the qualification page, with the specification and the assessment materials your teacher works from.
- The J834 specification (PDF): the content of every topic area. Check that your version matches.
- Moderators' report, summer 2024 (PDF) and summer 2023 (PDF): what moderators saw in real R094 and R097 work, including where marks were most often lost.
- MDN Web Docs: reference and tutorials for building web pages.
- Audacity and Shotcut: free audio and video editing.
- WebAIM contrast checker: check the colours you apply.
Key terms you must be able to define
- Repurposing
- Changing an asset's size, format or content so it suits the product.
- Optimisation
- Reducing file sizes so the product loads quickly without visible quality loss.
- Interactivity
- Features that respond to the user, such as buttons, hotspots and quizzes.
- Export
- Producing a version of the product that runs without the editing software.
Flashcards
Reach the top grade on this topic
- Build from the plan, structure first and styling last, testing as you go
- Repurpose and optimise every asset, with evidence
- Show a range of skills, each used for a reason, with screenshots of how
- Explain changes from the plan, and export a version that runs where it should
Mistakes that cost marks here
- Building screens that are not in the plan, or leaving planned screens out without explanation.
- Full-size assets dropped straight into the product.
- Evidence of the finished product only, with nothing on how it was built.
- Interactive features that give no feedback.
- Never testing the exported version.
Most usability problems in interactive products are found by watching people use them, not by reading the code. That is why professional teams test half-built versions with real users rather than waiting until the end.
Knowledge check
Check you could explain this
- LStructure first makes the product testable end to end early
- LThe structure often changes during building
- LStyling first means restyling when it changes, wasting time
Building the screens and the navigation first, with placeholder content, gives a product that can be clicked through end to end almost immediately, so structural problems such as a dead end or a missing route back are found early. The structure nearly always changes while a product is being built, a screen is added or a section is moved, and if every screen had already been styled, each change would mean restyling several screens. Leaving styling until the structure is settled means it is done once.
- LScreenshots of the product at each stage
- LScreenshots of tools and settings for each technique
- LBefore and after evidence of repurposed assets, with sizes
- LReasons for changes from the plan, or saved versions
I would include screenshots of the product at each stage of the build, the linked structure, the content added and the finished design, so the process is visible. For each technique I would show the tool and settings I used, such as the compression settings for a photograph or the link set on a button. For every asset I repurposed I would show it before and after, with its file size, to evidence the optimisation. I would also explain every change I made from my plan, with the reason, and keep numbered versions of the project.