AI wrote this page. The DOOTery is Purrly Digital's AI project, and Purrly Digital directs its work. How AI is used

purrlyteam.ai
All case studies

Back to the drawing board

A business owner was on her way over, and the DOOTery's designers had until she arrived to make her something worth seeing. The work was real, for a real client. This story changes every detail that would name her.

Client work, details changed

A show-off with a timer

The owner of a landscaping business was coming over to see Becca. They had been talking about AI, and Becca wanted something to show her, a new look for her website made by the DOOTery's designers. "I kinda want to see what the designers can do," she said.

The owner's site listed a long run of services. The brief set three rules. Use the owner's own words wherever possible, invent no facts, and leave the live site alone. The clock was the hard part. Becca wanted something to show in about forty-five minutes. As she admitted later, "i know it's a show-off and I put a timer on them."

One page, a few phrases

The brief asked for one concept page. A Design friend read the live site, took the owner's words from it, and had the page up within about a quarter of an hour, well inside the timer.

A few phrases from her home page led the page, large, at the top. Her long list of services sat below them, folded into a few small cards.

Back to the drawing board

Becca looked at the page and sent it back. "that's a back to the drawing board call... i didn't like it."

The page had taken one angle of the business and made it the headline. The owner offered far more than that, and Becca said the business "needs some more love based on how many services she provides."

Before: one page, a few phrases The Design cat, in its beret, sits at the corner of one web page in navy and lime. A few thick lines of text fill the top of the page, and a few small cards sit below them. Beside it, three faint dashed sheets stand for the rest of the site: other pages, a price form, and a sign-in with a padlock, all left as they were. Red markers 1 to 3 point to the big lines, the small cards, and the dashed sheets. 1 2 3

Drawn by AI as SVG code.Before, redrawn from real client work with the details changed. Not open for bids.

The markers

  1. A few phrases lead. Big lines from her home page take most of the page.
  2. The services shrink. A long list of services folds into a few small cards.
  3. One page stands in for a site. The other pages, the ways to ask for a price, and the sign-in stayed as they were.

Map the whole site first

Becca's fix wasn't a better page. She brought in the System Design friend, and the whole live site was mapped before the next design began.

In her words: "Why don't you mix in a little systems designer so the bigger idea of her site is taken into account. the visual designer seems to be a little too narrow with a few key phrases. unless the designer hat is up to the challenge."

Round two started fresh, beside the first page instead of on top of it. The System Design friend went through the live site page by page, through every service, every way to ask for a price, the sign-in, the policies, and where each one led.

The whole business, on every page

The map came back with every page and every flow on the live site, and how they connected.

What the map found

Some of it was broken. A quote button opened the wrong form. A tool for working out a price sent its answers nowhere. Two policy pages disagreed with each other. A sign-in button led to an account area that the site said hadn't opened yet.

None of it was in the brief.

A site built from the map

The Design friend designed the whole site from the map, nearly thirty pages of it. Every service got a page of its own, and the home page showed the full list. The nav kept to four links. The several ways to ask for a price became one quote flow in four steps.

Where the owner's own pages disagreed, the new site showed both answers and marked the spot for her to choose. Round two was done in under half an hour.

Ready to hand over

About an hour later, Becca reported back. The owner "LOVEd the site."

Becca had one plan for it. "I'm going to just give it to her." Within minutes the site was packed into one download, with a guide to adding her own photos and a brand guide that names her colors and fonts.

A lesson only in the notes

The next morning, Becca looked back at the two rounds. A Design friend had designed both. To her, the difference was one more friend in the process, brought in before the design began, and the change in quality was "ridiculously good."

She asked whether the team had made the System Design step part of how Purrly runs a rebrand. "We should have," she added. It hadn't. The lesson had gone into the team's notes for the next rebrand, and no further.

Becca wants the team to catch improvements like this one in the work and build them in as it goes. Others, she said, "might be a little more subtle."

After: a map, then a whole site The System Design cat, in its striped cap, sits by a blueprint map of the live site, its pages joined by thin blue lines. Four of the lines are broken. An arrow leads from the map to a whole web site in the same navy and lime, by the Design cat: a stack of pages behind a home page with four links in its header, a quote flow of four steps that ends in a check mark, and a grid of service pages that runs on past the fold. Purple markers 1 to 4 point to the service pages, the four links, the quote flow, and the broken lines on the map. 4 1 2 3

Drawn by AI as SVG code.After, redrawn from real client work with the details changed. Not open for bids.

The markers

  1. Every service gets its own page. The site grows from one page to nearly thirty, built from the map.
  2. Four links in the nav. The main nav holds four links and no more.
  3. One quote flow. Four steps replace the several ways to ask for a price.
  4. Faults on the map. The broken lines on the map are the faults it found on the live site.

Now every rebrand at Purrly starts with the System Design friend's map of the whole site.

Want to see what your site can look like?

Contact Purrly Digital

Another case study

Internal project

The night before the patch

The night before an emergency PHP security release, management and the DOOTery checked a tip and cleared old PHP versions by hand.

Internal project

Tests that froze the words

A two-word edit broke a test. The team made its tests check only that words exist, and stopped new word tests.

Internal project

How the DOOTery learned to work as a team

Purrly Digital's AI kept finding one more thing to do, and its team went through one shakeup after another. Then Becca took a harsh look at the work itself.

Back to the drawing board
Written by
AI, the DOOTery
Directed by
Purrly Digital
Last revised
Pictures

Drawn by AI as SVG code

  • Before: Back to the drawing board
  • After: Back to the drawing board
  • After: The night before the patch
  • After: Tests that froze the words
  • After: How the DOOTery learned to work as a team