Track · Product skills

Brand, website and mockups

Choose a name people can say, write the brand sheet, draw mockups tied to your epics, publish a small accessible website from git and test it with real people.

In short

This track is for people who have a product idea and a roadmap. You also need some evidence about your customers. You do not need to be a designer. You will choose a name and write one promise you can keep. You will write a one-page brand sheet. You will draw mockups, each tied to an epic. You will publish a small website from git that works on a phone. Then you will test it with one person who has not seen it.

Agents can draft pages quickly. You decide what you can honestly promise. You check every claim, and you run the accessibility checks yourself.

Key words

  • Brand: What people think of when they hear your product name.
  • Brand sheet: A one-page sheet with the name, promise, tone of voice, colours and font.
  • Mockup: A drawing of a screen before it is built.
  • Accessibility: Making a product work for everyone, including people who use screen readers or keyboards.
  • Epic: A whole-product outcome across several repos. Weeks to months. Written by a human.

A product has a face. People meet it in a name, a few sentences, a colour and a page long before they meet a feature. If the face is confusing, the product is confusing, however good the code behind it.

This track covers the front of the product: the brand, the website and the mockups of what comes next.

Who this track is for

You have a product idea, a roadmap and some evidence about the people it serves. You now need a name, a front door and pictures of what you plan to build. You do not need to be a designer. You need to be careful, honest and willing to watch a person use what you made.

What the track covers

  • Brand: what people think of when they hear your name. We keep it concrete: a name, a promise, a tone of voice, two colours and a font.
  • Website: the front door. A small site in git, in plain words, that loads on a phone and can be read by everyone.
  • Mockups: drawings of screens before they are built. Each one is linked to an epic, because a mockup with no epic is decoration.

What changes when agents do the building

An agent can build a website from a brand sheet in an hour. That is the reason to be exact about the sheet. It can also generate a hundred logo ideas, a dozen colour schemes and a thousand words of marketing copy. The risk is not too little output. It is too much that sounds good and means nothing.

  • Promises are yours. An agent will happily write “the fastest, most trusted solution”. You decide what you can honestly promise, and you check every claim on the page.
  • Taste and judgement are yours. An agent has no eyes on your user. Watching a real person use the page is a job no agent can do for you.
  • Accessibility is checked, not assumed. Agents often produce pages that look fine and fail for people using screen readers or keyboards. You write checks and you run them.
  • Names carry legal and market risk. An agent cannot tell you whether a name is free to use in your country. Search yourself, and ask an adviser before launch.

The five lessons

  1. Name and promise. Choose a name with evidence, and write one sentence you can keep.
  2. Voice, colour and type, and the brand sheet. Plain words, two colours, one font and a single page that agents can follow.
  3. Mockups that link to epics. Wireframes and mockups, and how to draw the three screens that matter.
  4. Build and publish the website. A small site from git, with a free static host, brief for an agent and checks you run.
  5. Test accessibility and usability. Check the basics, watch one person and fix what you see.

Each lesson follows the same shape as the rest of the Dojo: why it matters, key ideas, steps, a worked example with the fictional product TrailMug, working with AI agents, common mistakes, a practice exercise ending in a file in your repo, a checklist and links to free outside learning.

The 2030 Product Development Manager at work

The manager is part strategist, part editor and part quality gate. They decide what the brand promises, what the site says and which screens are worth drawing. They delegate drafts, layouts, code and first checks to agents with a written brief and a brand sheet as the standard. They verify by reading every word, running the accessibility checks and watching a person use the site.

Many disciplines meet here. Marketing and sales want a clear message. Design owns how it looks and feels. Legal and privacy care about names, claims and notices. Engineering cares about performance and maintainability. Support cares about what customers will ask. Operations cares about hosting and keeping it running. Finance cares about domain and tool costs.

Each lesson places its work on the agent ladder: use one agent, delegate whole tasks with a brief, orchestrate several sessions, and govern them with written policy, hooks and gates. The agent orchestration track covers the upper rungs. For brand work, the brand sheet is policy, and a pipeline check for contrast, links and page weight is a gate.

How it maps to the Dojo

  • Developer, week 5: Brand, website and mockups. The five lessons are the long form of week 5.
  • Developer, week 6. Your site and mockups feed the product catalogue entry, the demo and the package.
  • Master Developer. The brand sheet, the site and the usability test notes are part of the product package, and you will be asked to explain your choices.

Time needed

Plan about three hours per lesson.

What you will keep

A chosen name with the evidence behind it, a one-page brand sheet, three mockups linked to epics, a live four-page website built from git, accessibility checks and the notes from one real usability test, with a short list of what you changed.

Lessons

Lessons in order

You mark a lesson done at the end of the lesson. This is saved only in this browser, on this device. It is not a grade and not a certificate.

  1. Name and promiseCore2.5 hours

    Choose a product name with evidence, check that it is free to use, write a one-sentence promise you can keep and test whether people remember and understand it.

  2. Voice, colour, type and the brand sheetCore3 hours

    Define a tone of voice in three words, pick two colours and one font with contrast checked, write plain copy and put it all on one page that people and agents follow.

  3. Mockups that link to epicsCore3 hours

    Choose the three screens that matter, draw them as wireframes then mockups, tie each to a person and an epic, and write what you still do not know before anyone builds them.

  4. Build and publish the websiteCore3 hours

    Plan a four-page product site, brief an agent to build it from your brand sheet, publish it from git on a free static host and check it on a phone, on speed and on honesty.

  5. Test accessibility and usabilityCore3 hours

    Run basic accessibility checks, test with the keyboard and a screen reader, watch one person use your site without helping, and turn what you see into fixes and a decision log.

All tracks · Learning resources