Design
Product box and mockups: what, how and with which tools
The course asks for a product box at inception (Fag-1) and quality mockups in the client presentation (Fag-2). This page explains what each must contain, how to make them step by step, which tools you can use (Figma, Google Stitch...) and includes a complete example.
The product box: the vision in a box
Imagine your product sold on a shelf. The product box is the box: a front, a back and little space to convince. It forces you to decide what it is, who it is for and why anyone would want it. It comes from Innovation Games and is one piece of the Agile Inception Deck.
Ride smart.
Free- Live stations
- Cleaner routes
- Badges for riding
- See where bikes are now
- Pick the cleanest route
- Earn badges and challenges
“Now I know there is a bike before I leave home.”
Marta, test user (made-up quote)
Front
- Name and logo that are easy to remember.
- Slogan: one sentence that states the benefit.
- One strong image showing the product in use.
- 3 or 4 features, written as user benefits, not as technology.
Back
- Short description and the list of key features.
- Screenshots or illustrations of the interface.
- Requirements: platform, price, data it uses.
- Optional: a user quote or an award (if invented, say so).
What is assessed: a clear vision, the 3 or 4 most representative features and an attractive design. It must be coherent with the elevator pitch and the NOT list. In the hand-in it can be a link to an external resource.
How to make a product box, step by step
One team afternoon is enough. Do it together: the conversation is worth as much as the picture.
- Write the vision in one sentence: "For [who] who [need], [product] is a [category] that [benefit]. Unlike [alternative], our [difference]".
- Pick 3 or 4 features that make people buy. If you have ten, you have not decided what it is yet.
- Give it a name, logo and slogan. Check it does not already exist on Google Play or as a domain.
- Find a strong image: a screenshot, an illustration or a photo. If it is by someone else, check the licence and credit the author.
- Assemble it in Canva, Figma, Google Slides or PowerPoint: one vertical rectangle for the front and one for the back; for the box effect, add a side or use a box mockup template.
- Run the 5-second test: show it to someone who does not know the project and ask what it is about. If they miss it, simplify.
Typical mistakes
- Too many features, or features written as technology ("REST API with Spring").
- It does not say what makes it different from what already exists.
- Text too small or low contrast: on a shelf it would not be read.
- It does not match the elevator pitch or the NOT list: coherence between the three is assessed.
- Logos or images from other brands without permission.
Mockups: see the product before building it
A mockup shows what the user will see without writing code. It helps the team agree, sells the product to the client and tells developers what to build. Fag-2 asks for the most critical ones; after that, mock up what the sprint will build.
| Level | What it is | What it is for | Time |
|---|---|---|---|
| Sketch | Hand drawing or Excalidraw. | Exploring ideas and discussing them as a team. | Minutes |
| Wireframe | Boxes and labels, no colour or final typography. | Deciding the structure and hierarchy of each screen. | Tens of minutes |
| High-fidelity mockup | Real colours, typography and content. | Presenting to the client and guiding development. | Hours |
| Clickable prototype | Linked mockups that simulate the journey. | Testing the flow with real people. | Hours or a day |
A good mockup
- Real content (station names, prices, dates), not "lorem ipsum".
- The whole journey of the critical stories, not loose screens: draw a navigation map.
- The states that change the screen: empty, loading, error and success.
- Consistent components and style: same colours, typography, spacing and buttons on every screen.
- Mobile first: touch targets of at least 48 dp and text with enough contrast (WCAG AA, 4.5:1).
- A story tag (US-12) on every screen, so it is clear what each mockup covers.
Tools to make mockups
No tool is mandatory. Pick one everybody can edit and export. Plans and limits change often: check the current terms before deciding.
| Tool | What it is | Good for | Cost and notes |
|---|---|---|---|
| Figma | Collaborative design in the browser, with components and clickable prototypes. | High-fidelity mockups and team prototypes. | Free plan; students can get an education plan (it must be verified). |
| Penpot | Open-source alternative to Figma, in the browser. | The same as Figma, without relying on one vendor. | Free. |
| Google Stitch | A Google Labs AI tool that generates screens from text or an image. | A fast first draft and variants of a screen. | Free while experimental; limits may change. Exports to Figma or code. |
| Balsamiq | Wireframes with a sketch look. | Discussing structure without being distracted by styling. | Paid, with a trial. |
| Excalidraw, paper | Freehand drawings. | Sketches in minutes, in the meeting. | Free. Take a photo and attach it. |
| Canva, Slides | Design and presentation editors. | The product box and slide graphics. | Free plan with templates. |
Generating mockups with Stitch (and other AI)
Stitch does not replace design: it gives you a first draft in seconds that you must then review. The key is what you ask for.
- Prepare the story: which data is shown, which actions exist and which states (empty, error).
- Write the prompt with: platform, purpose of the screen, who uses it, concrete content, components, style and constraints.
- Generate screen by screen and repeat the same style (colours, typography) in every prompt so they stay consistent.
- Iterate with small changes: "bigger buttons", "show the empty state".
- Review it against the story: is the text real? Did it add features you do not have? Is it readable?
- Export to Figma or as an image and keep the prompt for the report.
A sample prompt
Prompts usually work better in English; the text you ask for on the screen can be in Catalan or Spanish.
Mobile app (Android), screen "Nearby stations".
Users: people in Barcelona who ride Bicing.
Show: a map with station pins coloured by availability, and a bottom sheet for the selected station
(name "Pl. Catalunya", 7 free bikes, 13 free docks, a green "Get directions" button).
Style: clean light theme, rounded cards, green accent #58cc02, 48 dp touch targets, high contrast.
Text in Catalan. Do not add features that are not listed.Watch out with AI
- They add things. If a feature appears that is not in the backlog, delete it or write a story.
- They can be inconsistent between screens: redo them with the same theme.
- They have no accessibility judgement: check contrast and button sizes.
- Do not upload confidential data or other brands' logos.
- If you use them, explain the process in the report, just as with code assistants.
Example: from sketch to mockup
The same Bici Verda screen at three fidelity levels. Each step answers a different question: what is there, where does it go and how does it look.
What is there?
A map, the stations and a card with a button. Five minutes with a pencil, to discuss as a team.
Where does each thing go?
Boxes and labels: header, map, station card and a single primary button. Still no colour.
How does it look?
Colours, type and real content: Pl. Catalunya, 7 bikes, 13 docks. Tagged with story US-12.
Notice that the final mockup carries the story tag (US-12), real content and a single main button.
Example: the four states of a screen
A complete mockup is more than the happy path. This is the nearby stations screen with nothing nearby, while loading, when the network fails and when all goes well. Design all of them before you code.
EmptyWhat does someone with nothing nearby see?
LoadingWhat happens while the data arrives?
ErrorWhat if the network fails?
SuccessThe happy path, with confirmation.
How to hand it in
The product box goes in inception 1 and the critical mockups in the presentation and in inception 2's report.
- Keep the images in the repository, for example in
docs/mockups/US-12_nearby-stations.png, and link the source file (Figma, view-only). - Link the mockup to the Taiga story so whoever implements it has it at hand.
- In the report, one image per screen with a caption saying what it shows.
- For the presentation, export to PNG at the slide's size: do not use blurry screenshots.