Most of my design work is for other people. A client brings me a problem, and I figure out how to solve it on their website. For a while I hadn't made anything just for myself, so I started Daily UI, a list of 100 design prompts, one at a time. Prompt number one: design a sign-up page.
Here's how that went, from picking a pretend business to the things I'd need to get right if I actually built it.
Picking the business
Daily UI tells you what to design, but not who it's for. With a client, that part is handed to you. Here I was the client, so I had to invent it.
I asked Claude for a list of business ideas and picked the first one without thinking: a coffee subscription for people who work from home. Then it hit me that I've never liked the smell of coffee. To me it smells a little like wet cement. Pretend or not, I didn't want to spend a week selling it. So I kept the audience, remote workers, and changed the product to lunch kits delivered to their door.
My first name choice, Desk Lunch, turned out to be a real business already. I went with Midday Co.
Even a pretend brand is something you live with while you work on it. Pick one you can stand.
Deciding what goes on the page
The original idea also had customers pausing or skipping deliveries. That happens after you sign up, on a different page, so I cut it down to one reassuring line: "Pause or skip anytime."
That still left about a dozen things to fill in: the plan, a delivery day, name, email, password, address, and payment. All on one long page, that's overwhelming. So I split it into steps. It adds a few clicks, but each step feels small. You're ordering lunch, not doing your taxes.
Choosing how many lunches
Early on, the form tried to work out your order for you. How many people are eating? How many days a week? I went back and forth on those questions for a while before I realized I was trying to plan the customer's life for them.
So I gave them one number to choose. The plan is 4, 6, 8, or 10 lunches a week. What you do with them is up to you. Eat two in one day, share one. I don't care.
Each option is a card that shows its price per lunch, so you can tell right away that bigger plans cost less per meal. Behind the scenes, those cards are a plain set of radio buttons, which screen readers already handle well.
Looking back, I spent a lot of time on the details of that helper before I'd settled what we were selling and how it was priced. The foundation comes first, and the details come after.
Plain first, then spice it up
My first pass used only plain form fields, with no pictures and no color. It worked, but it was flat, and nothing stood out.
The second pass added personality without changing what the form asks. Spice level became three peppers that fill in, like a star rating, with Mild, Medium, and Hot written underneath. The peppers back up the words. They don't replace them. The level you choose also gets a border and a check mark, so you don't have to rely on color to tell. Dietary styles became cards with photos, and allergens became tags you tap on and off.
Choosing fonts
For headings, I wanted a plain font without the little feet on the letters, and with a two-story lowercase "a," the kind with a hook over the top. A one-story "a" is just a circle with a stem, and it's easy to mistake for an "o."
For the main text, I used a font with serifs, the little feet on the ends of letters. That's a common choice for longer reading. But big, dramatic serifs change the shapes of letters, and I've had trouble reading those myself. So I picked fonts with small serifs, where every letter is still easy to identify.
I didn't use a font designed specifically for low-vision readers. Midday Co. isn't a site for blind people. It's a lunch company. That's the point: good design and blind-friendly design don't have to be separate things.
Phones, tablets, and computers
I designed the page at three sizes: phone, tablet, and desktop. The delivery-day picker is a row of weekdays, like the top of a calendar. As the screen gets smaller, the labels get shorter: Monday, then Mon, then just M.
That creates a tradeoff. At the smallest size, Tuesday and Thursday are both "T." Someone using magnification and panning left to right will usually see the "W" next to one of them and figure it out. Usually isn't always, but I decided it was worth it.
If I built it
A design is a picture of a website. A screen reader can't read a picture. The labels a screen reader announces come from the code, so the build is where most of the accessibility work happens. Here's what I'd need to get right:
- Each step announces where you are, like "Step 2 of 4: Your plan."
- Each day button shows "M" but tells a screen reader "Monday."
- The peppers are decoration. A screen reader hears Mild, Medium, or Hot.
- Each allergen tag says whether it's selected.
- Each dietary photo either gets a short description or is skipped when its label already says everything.
Then I'd test it myself with a screen reader and with magnification. Looking over the code doesn't replace actually using the page.
Where it ended up
I published the design on Figma Community, where designers share files they can copy and build on. Three people copied it in its first week. That isn't much, but it isn't zero, and zero is what I'm used to.
Figma isn't accessible with a screen reader, so this write-up is the version you can read.