From Website
to Shop

The project changed. That’s normal.

A simple site mainly publishes information. A shop also has to handle products, stock, money, customer data, orders, confirmations, errors and trust.

Before “Shopify or WordPress?”…

Work out what the site must actually do. Choosing the platform first is like buying a kitchen before you know whether you’re opening a bakery or a sushi bar.

Persona → scenario → use case

A persona describes a kind of person. A use case puts that person in motion.

Start with a story. Then make it real.

Trigger

They arrive from social media.

Goal

Buy one product.

Main path

Product → options → cart → delivery → payment → confirmation.

Exceptions

Sold out? Payment fails? Address invalid? They change their mind?

Success

The order is recorded and the customer knows what happens next.

Write five shop use cases

Try to cover different people and moments, not five versions of “buy something”.

• New customer discovers a product
• Customer buys on a phone
• Customer asks a question before buying
• Shop owner adds or edits a product
• Shop owner receives and fulfils an order
• Something goes wrong

Now translate use cases into requirements

A “simple website” can become a $96.5m problem

The Bureau of Meteorology rebuilt its website after years of work and public beta testing. When the new site launched in October 2025, many regular users still struggled with things that had once felt automatic.

There is no single “weather user”

The BOM redesign is a good reminder that an audience can contain people doing completely different jobs.

“The information is still there” isn’t enough

Regular users had built mental models: they knew where to click, what the radar looked like and which shortcuts got them to the answer fast. Changing those patterns created friction even when the underlying data still existed.

Now steal the lesson for your friend’s shop

Your shop will also have first-time visitors, repeat visitors, an owner who needs to update it, and people who arrive with different expectations.

Domain ≠ hosting ≠ DNS

These three things work together, but they are not the same thing.

ICANN describes DNS as the system that connects human-readable domain names to the IP addresses computers use to find one another.

What does “register a domain” mean?

You don’t buy a domain forever. You register the right to use it for a period of time through a registrar, then keep renewing it.

So what is hosting?

A website needs computers connected to the internet to serve its pages, code, images and data when someone visits. Hosting is the service that provides that environment.

CMS = Content Management System

A CMS gives people a way to create and manage website content without opening the source files every time.

WordPress is an open-source publishing platform/CMS. Its plugin system lets you add functionality without rebuilding the core software.

Core + extensions

Modern platforms are often built as a useful core that can be extended with plugins, apps or integrations.

Translation: “There’s an app for that” is the beginning of a decision, not the end of one.

Three broad routes

We’re not choosing yet. We’re learning enough to make the choice for a reason.

What must we know before choosing?

• What is being sold?
• How many products?
• Sizes / colours / variants?
• Physical, digital or both?
• Stock tracking?
• Pickup, shipping, both?
• Where can customers be?
• How will payments work?
• Who updates the shop?
• How technical are they?
• What is the budget?
• How custom does the design need to be?

Accessibility is part of the design

Not a “fix it at the end” checkbox. People need to be able to perceive, understand and operate the site in different ways.

In Australia, the Australian Human Rights Commission points digital product teams to technical standards and guidance that support equal access for people with disability. WCAG is the main international web-content standard.

WCAG’s four big ideas: POUR

WCAG 2.2 has testable success criteria at three conformance levels: A, AA and AAA.

What does this change in the actual build?

Chloe already caught this

The Qwerty Labs palette exploration already includes a Colour contrast adjustment from the earlier “Colder” variation. That is design-system thinking: don’t just choose colours — decide how they are allowed to work together.

For normal text, WCAG AA requires at least 4.5:1 contrast. Large text can use 3:1. Here is what the current palette does when we measure some useful pairings:

Now repeat the process

Chloe did this for Qwerty. Do the same for your friend’s palette: test it, find the weak pairings, then decide which colours are for text, backgrounds, buttons, accents and decoration.

Bonus: find one combination you like visually that fails, then solve the design problem without simply abandoning the colour.

The orange button problem

This short case study is useful because it shows the tension between what can look clearer and what the measured contrast ratio says.

Accessibility testing is a toolkit

W3C maintains a filterable list of evaluation tools for websites, mobile apps, documents and source code. Automated checks are useful, but they’re one part of evaluation.

Your HTML + CSS work still matters

The Raspberry Pi lessons gave you the browser-language layer. None of that disappears when a CMS or ecommerce platform arrives.

What to bring to the next session

Resource launchpad

Everything from the deck in one place. The first seven are the sources DC supplied for this learning path.