Disability
Design Lab

What I think about this stageThe brief said "Experimental and Raw", and my first instinct was to make everything rough, including the buttons. That is the trap. Rough chrome reads as personality; a rough control reads as broken, and for an audience with low vision it reads as nothing at all.So the aesthetic lives entirely on the parts you do not have to operate.I think most of the visual work I am proud of came out of that one line being drawn early.

The three decisions that shaped everything else

1. 01

   Browse by daily challenge, not product category

   Four challenges lead the homepage and the nav: Opening Containers, Getting Dressed, Writing & Drawing, Navigating Your Workspace. My assumption is that people arrive naming the task that stopped working, not a product type. Shop all is still there, as the second way in.

2. 02

   Two typefaces, two jobs

   Atkinson Hyperlegible sets everything a shopper has to read. The Braille Institute drew it to separate the characters low vision readers confuse. Space Grotesk is limited to headings and short labels, so the aesthetic never touches the sentence someone reads to decide whether a tool fits their hand.

3. 03

   Raw on the chrome, clean on the content

   Every hand drawn mark sits on the chrome (card outlines, chips, dividers, the rule under a heading), and each stroke is genuinely wobbled geometry drawn in two offset passes. NN/g warns that neobrutalism can strip the affordances that signal what is a control, so the controls and the copy stay conventional.

Final design

Eight pages, two breakpoints, one set of rules

Every frame is real Auto Layout and sets all three variable modes, so the 393px column is the desktop page reflowing rather than a second drawing of it. Click any screen for the full length.

What I think about this stageDrawing the mobile screen separately is the shortcut everybody takes, and it is how the two versions start disagreeing about what the product is. Making the 393px frame the same frame, reflowing, costs more up front and is the reason these eight pages stayed consistent while I changed my mind about the catalogue three times.If the phone layout is a second drawing, it is a second product.

• 

  Homepage

  Leads with the four challenges

• 

  Catalogue

  Filter sidebar, grid three wide

• 

  Product detail

  Variant chips, stepper, disclosures

• 

  Quick view

  A modal on a dimmed page

• 

  Shopping cart

  Line items beside a running total

• 

  Checkout

  No account required

• 

  Order confirmed

  Same arithmetic as the cart

• 

  404

  The hand drawn mascot, between the fours

The same eight at 393px

• 
  Homepage
• 
  Catalogue
• 
  Product detail
• 
  Quick view
• 
  Shopping cart
• 
  Checkout
• 
  Order confirmed
• 
  404

Click through it

The same screens rebuilt in Figma Make as a working site: real navigation, a cart that adds up, a checkout that submits. It loads on click, so nothing from Figma runs until you ask for it.

Launch the prototype

Hosted by Figma, so it can be slow to wake up. Open it in its own tab instead if it does not appear.

Where it landed, and what I would change

The thing I would take into any project after this one is that accessibility is cheaper when it is a constraint than when it is a correction. Picking Atkinson Hyperlegible and a 44px minimum target on day one cost me nothing; retrofitting either would have meant redrawing every screen. What I am missing is the part I could not do in a semester. None of this has been in front of a person whose grip has actually changed, and until it has, the whole organizing idea is a well argued guess. That is the first thing I would fix if this were real.