R097 Task 1 Guide: Planning the Interactive Product
What Task 1 asks you to do
R097 is assessed by an OCR-set assignment in three tasks, marked by your teacher and moderated by OCR, and it is worth 35% of the qualification. Your teacher gives you the current assignment; its wording and marking grid are what you are assessed against. In OCR's sample assignment, Task 1 carries 20 of the unit's 70 marks.
Task 1 assesses Topic Area 1: planning the interactive product. In outline:
| Part | What you produce |
|---|---|
| Interpret the brief | The client's requirements, the purpose and the target audience, in your own words |
| Choose the product and structure | The kind of product and its navigation structure, justified |
| Plan the structure | A navigation diagram of every screen and link |
| Plan each screen | Wireframes or visualisation diagrams for every distinct screen, annotated with interactions |
| Plan the assets | An asset table: every asset, its source, format and licence |
Step by step
- Interpret the brief: the client, the purpose, the audience, the content that must be included, and the constraints, including the device it will run on.
- Choose the product type and structure, and justify both from the purpose and the audience.
- Draw the navigation diagram: every screen a box, every link an arrow. Check it for dead ends, orphans and depth.
- Wireframe every distinct screen, annotated with what each control does and where it leads, and the error and confirmation states.
- Plan the interface: consistent navigation, clear labels, feedback, and accessibility from the start.
- Complete the asset table: every image, sound, video and font, with source, format, size and licence.
- Plan the testing and the work, if your assignment asks for them here: a test plan with expected results, and a work plan with dependencies.
A worked example on a different brief
The example is an invented client: Castle Hill Community Garden wants a touchscreen guide in its visitor hut, for families and older visitors, showing what is growing, the wildlife, events and a short quiz. Do not copy it; your brief is different.
A hub and spoke structure, because visitors stand at the kiosk for a minute or two with no instructions: every section is one tap from Home, every screen carries a Home button, and the kiosk resets itself after a minute so the next visitor starts at the beginning. A hierarchical site with sub-menus would bury the content these visitors want most.
hedgehog-photo · image · own photograph, taken in the garden · JPG, 1600 × 1067 after resizing · own work, no licence needed · alt text: "A hedgehog under the hedge by the compost bins".
What makes it strong
| Weaker evidence | Stronger evidence |
|---|---|
| The brief copied out | The brief interpreted, including the device, the setting and the audience's needs |
| "I chose hub and spoke" | The structure justified from how and where the product is used |
| A diagram with screens missing | Every screen and link, including the error states and the timeout |
| One wireframe of the home screen | Every distinct screen, annotated with what each control does |
| An asset list of file names | Sources, formats, sizes and licences, with permissions where people appear |
Before you hand in
- The brief is interpreted in your own words: client, purpose, audience, content, constraints
- The product type and structure are justified
- The navigation diagram shows every screen and link, with no dead ends or orphans
- Every distinct screen has an annotated wireframe, including error and confirmation states
- Accessibility is planned in: contrast, text size, alt text, captions, keyboard access
- The asset table is complete, with a source and licence for every asset
- The work is your own, and anything you used from elsewhere is acknowledged
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.
- diagrams.net: free for navigation diagrams and wireframes.
- W3C: WCAG 2.2 quick reference: what accessibility requires, to plan in from the start.
- JCQ: artificial intelligence: the rules on AI tools in coursework.
Key terms you must be able to define
- Navigation diagram
- A diagram of every screen in a product and the links between them.
- Wireframe
- A layout plan of one screen showing placement without styling.
- Attract loop
- A screen or sequence a kiosk shows while idle, inviting the next visitor to start.
- Asset table
- A record of every asset with its source, format, size and licence.
Flashcards
Reach the top grade on this topic
- Interpret the brief, including the device and setting the product is used in
- Justify the product and its structure from the purpose and the audience
- Plan every screen and every link, and annotate the interactions
- Plan accessibility and the assets before anything is built
Mistakes that cost marks here
- A navigation diagram that misses screens, such as errors and confirmations.
- Wireframes with no annotation of what the controls do.
- Choosing a structure without saying why.
- An asset table with no licences.
- Planning for a laptop when the brief says the product runs on a phone or a kiosk.
The idea of a page of linked 'trails' through information was described by Vannevar Bush in 1945, in an essay called As We May Think, decades before the first website.
Knowledge check
Check you could explain this
- LEach screen has a different layout or purpose
- LError and confirmation screens are often forgotten but seen by users
- LProblems are found before building, saving rework
Each distinct screen has its own layout and job, a content page, a form, a quiz question, a confirmation, so a wireframe of the home screen tells you nothing about how the others will work. The screens most often left unplanned, such as error and confirmation states, are ones users see constantly, and an unplanned one is where they give up. Wireframing every screen finds layout and interaction problems while they are still a sketch, rather than after content has been built into them.
- LInterpretation of the brief: purpose, audience, requirements
- LA navigation diagram
- LWireframes or visualisations of each screen
- LAn asset table, or a test plan or work plan
The plan should start with an interpretation of the brief: the client's requirements, the purpose of the product and its target audience, in the student's own words. It needs a navigation diagram showing every screen and the links between them, checked for dead ends. Each distinct screen should be wireframed and annotated with what every control does. Finally there should be an asset table recording every image, sound and video with its source and licence, and a test plan with expected results written before building.