Came across this perspective while listening to a couple YouTube interviews with Dan Mall. I understood it as him saying that there is no ideal design system or best way to build interfaces. It all depends on the needs of the product and preferences of those shaping and building the digital interface.

For me, a design system starts with reducing inconsistency that comes with rewriting code for common interactions or recreating the same component. It's more efficient for both designers and developers.

It helps with crafting better digital experiences by promoting continuity in the overall experience and tone. 

One challenge of design systems is that it's a living extension of collaborative thought processes around how to produce designs so there will be moving parts.

This is why there’s often a focus on documenting status and purpose of components. 

Some teams include a section on components that are in the works so everyone's on the same page. 
Some teams keep it really lean with documentation to encourage more experimentation. 
Many teams build products using an external design system because that covers their needs.

A design system is the way we agree to produce designs for a product or family of products

Generative AI can make errors and perceive patterns that don't exist. This occurs inherently by [[Why AI works is a bit of a mystery|their design]]. 

Datasets used to train models such as ChatGPT, DeepSeek and Copilot are skewed towards general knowledge. 

This is why domain experts will inevitably spot mistakes in AI outputs when the question requires highly specific knowledge. 

These models can be very convincing when it's bullshitting, generating reasonably sound explanations out of a thread of information, so it can take a discerning eye.

[[Well-targeted prompts can garner better outputs]], but its effectiveness will always be limited by insufficient training and data in a subject matter.

AI can hallucinate. Always check for accuracy

Specialised software facilitate specific workflows such as rendering 3D models, balancing account statements or accessing patient health records.

People who employ these apps usually need:
- More flexibility and control in the interface
- Less interruptions in dedicated workflows
- Terminology and [[Mental models research|mental model]] that fits their field-specific knowledge
	- For example, in medical imaging software, clinicians may refer to 'MPR' (Multiplanar Reconstruction) to manipulate and view scans in specific ways.

End-consumer products are designed by a wide audience such as word processors, web browsers and social media platforms.

People usually expect:
- Intuitive navigation 
- Straightforward user flows
- Ability to do relevant common tasks such as saving, liking, commenting or editing
- Concise and clear terminology that's grounded in real world understanding
	-  An example of unclear terminology was "Walls" when Facebook first launched. There's no concept of writing on a friend's wall in the real world. It's resulted in confusion around post visibility that persist today.

Within an end-consumer digital product, there may be power users and on specialised software, there are new users. A fun challenge in product design is balancing these needs across user types and flows.

Designing specialised versus end-consumer products

Software development often emphasises the function of a role over the individuals carrying it out. This extends to [[Use case, user stories and scenarios|requirements gathering]], where roles are predefined sets of behaviours and responsibilities.

An example of a role-based user story would go: "**As a** nurse, **I want to** administer medication **so that** patients receive their prescribed treatments," where nurse is categorised as a clinician on the system. 

Research by Polman and Emich in 2001 suggests that we're more creative when making decisions for others than for ourselves.

The first-person language of a user story can mislead us to believe that I can imagine accurately what the needs of our users are.

While user stories serve a purpose in defining solution details, there are many more techniques in the UX toolkit for requirements gathering that promote creative problem-solving such as [[thinking styles]], [[Mental models]], [[Persona stories]] or [[jobs-to-be-done]].

Roles versus personas in software development

In AI engineering, initialising a machine learning model is referred to as "pre-training". This process requires extensive amounts of training data.

As [Andrej Karpathy explains in his video on LLMs](https://www.youtube.com/watch?v=7xTGNNLPyMI&t=3710s):

> At a high level, internet documents are broken down into tokens (small chunks of  information) for sequence prediction by a model. Trillions of tokens go into this.

Knowing the exact data used to initialise MLMs is virtually impossible. Informed consent from web content authors for the right to use their data to train machines is not consistently implemented.

To train LLMs, machine learning models are progressively tasked with: 
- Predicting the last word of a sentence
- Guessing missing words in a sentence (through masking sentences)
- Predicting the next sentence 
 
No manual labelling of information is done. No parameters are defined in advance. Data used for training is extracted, cleaned and transformed with code.

Through algorithms and lots of data, a model makes a large amount of guesses and adjusts itself through rounds and rounds of computation.

The outcome of this stage is a base model, which sets the [[parameters]] of [[Why AI works is a bit of a mystery|the network]]. 

These are then fine tuned towards a specific task in post-training where many models undergo a process of [[Reinforcement learning with human feedback]].

How machines learn to mimic our understanding of language

A common web pattern is the clickable card that navigates users to more detailed content.

 I used to wrap the card in a link like this to make it clickable:
```
<a href="/link" target="_blank>
	<section className="property-card">
		<h2>Luxury living packed into a convenient apartment</h2>
		<span>1 bed | 1 bath  | 1 carpark spot</span>
		<p>Enjoy the best of Brisbane from this riverside haven. See if this studio apartment in South Brisbane is right for you.</p>
	</section>
</a>
```

Until I covered Scrimba's accessible development module in their front-end development career path where I learnt how the above works but…
## Why wrapping the card in a link can be an issue

When an entire card's content is placed in a link, a long string of text content will be read out before the person is told that it is a link. 

Screen readers can extract and list links on a page. When a link contains a large block of text from a card, it becomes a long, less digestible entry in that list.

Meaningful, standalone link text (e.g., "Explore accessibility resources") is preferred over lengthy card content.
## Place links within the card instead 

### Step 1 in HTML
- Place an empty link at the end of card content
- Add aria-label for screen readers

```
	<section className="property-card">
		<h2>Luxury living packed into a convenient apartment</h2>
		<span>1 bed | 1 bath  | 1 carpark spot</span>
		<p>Enjoy the best of Brisbane from this riverside haven. See if this studio apartment in South Brisbane is right for you.</p>
		**<a 
			href="/link" 
			target="_blank" 
			className="property-card-link" 
			aria-label="Learn more about this studio apartment in South Brisbane">
		</a>**
	</section>
```

### Step 2 with Tailwind CSS
- Size width and height of the link (`property-card-link`) over the entire card.
- The `:after` pseudo-element with `content: ""` and absolute positioning makes the entire card clickable, sitting on top of the content (`z-10`).
- The `cursor-pointer` on the card indicates clickability.
- Test focus states (I removed it from the link because the `project-card` handles the focus state)

```
.property-card {
	@apply relative bg-white hover:bg-stone-50 cursor-pointer;
	
	&:has(:focus-visible) {
		@apply outline outline-2 outline-offset-4;
	}
}

.property-card-link {
@apply w-full h-full;

	&:after {
		@apply absolute inset-0 z-10;
		content: "";
	}
	&:focus-visible {
		@apply outline-none;
	}
}
```

Implementing accessible clickable cards

These are working notes. They capture my current understanding of what I'm learning, so there's a good chance that what you read is wrong.

My hopes behind publishing pages of my digital notebook is to share what I'm learning or reading in case it may be useful to someone like sparking connections or inspiration.

The notes you see here have gone through some effort of concept distillation and connection with my own words.

That means that my noobiness will inevitably show. And over time, as I revisit and update notes, shifts in my thinking will be reflected as notes evolve from "weedy" to "evergreen".

All notes I share publicly have been cleaned up and clarified, though that might change in the future.

When pruning notes, I try my best to keep to this principle: Each note captures one idea.

To get a better idea of digital gardens, I recommend visiting:

- [Nicole van der Hoeven's Fork My Brain](https://notes.nicolevanderhoeven.com/Fork+My+Brain)
- [Maggie Appleton's digital garden on software and anthropology](https://maggieappleton.com/)
- [Duly noted by Jorge Arango](https://rosenfeldmedia.com/books/duly-noted-extend-your-mind-through-connected-notes/)

Many digital gardeners enjoy a process of [[bottoms-up note-taking]] because of the unexpected connections that emerge from the chaos.

Learning with the garage door up

In this book, Feiler analysed 225 life stories on how people navigated career setbacks, heartbreak and loss. He referred to these as life disruptors.

What stood out to me most was the length and frequency of life disruptions in today's age. He found that people go through three to five major transitions in their lifetime, each lasting about four to five years – adding up to nearly half of adult life.

To navigate both big and small periods of change, he identified acceptance, experimentation and storytelling as essential, encourage us to try new things, keep visible reminders of the past (a marker of growth) and connect with others.

He wrote on the positive aspects of navigating change:

> Transitions are periods of upheaval, but they are also crucibles of creativity.

# Book notes

Following [Nicole van der Hoeven's method of summarising books critically](https://nicolevanderhoeven.com/blog/20220902-how-to-take-notes-from-a-book-with-obsidian/), I've distilled this book into its main argument and offer a counter argument:

## Summary

> We tend to like linear narratives but that is rarely how life unfolds. From over 200 stories collected over thousands of kilo-meters on the road, Feiler found similarities in the phases that most people went through. This is what navigating change often encompassed:
>
> - **The Long Goodbye:** Experiencing pain, shedding old identities
> - **The Messy Middle**: Navigating uncertainty, experimenting, and seeking meaning
> - **The New Beginning:** Embracing change, finding fresh narratives, and adjusting to a new reality

## Thesis

> Storytelling is at the heart of change. Writing helps us reframe our anxieties into hope. It allows for emotional distance, turning raw emotions into clarity.
>
> Telling our stories helps connect the dots of our memories. It's through this process of meaning-making where we unlock our future selves and shift our narratives. It shapes how we view ourselves and lets us move forward and find a home in a new identity.

## Antithesis

> Feiler is optimistic about how we can transform our identities fundamentally through stories, even if those stories bend the truth. He views our sense of self as fluid, moulded entirely by inner narratives.
>
> But on the other side of that coin, there are parts of our identity that are beyond our control, where even if we wished deeply for it, it cannot be changed. These are the parts of our identities that are intertwined with our societal systems or even our own physiologies.

## Synthesis

> The power of the story we tell ourselves is undeniable. In cognitive behavioural therapy, reframing negative thought is the cornerstone of therapeutic change. Feiler's emphasis on storytelling can be a wonderful catalyst for agency and renewal.
>
> Perhaps Feiler's own research offers insight on how to cope with aspects of life beyond our control. As he shared, those who successfully navigate such tensions often say, "I didn’t choose this, but I can choose how I respond to it", recognising the crucial role of compassion and acceptance.

Life is in the Transitions by Bruce Feiler

These are native javascript functions that lets data be easily manipulated within [[objects]] or [[nested objects]].

## Map
This code is used when changing data type of the value.

In this example, an array of objects (pet bios) is transformed into a number (year born). That number is used to calculate current age in this example:
```
const nestedObjects = {
	pet01: {
		name: "Mango",
		species: "Cat",
		favouriteFood: ["fish", "turkey"],
		yearBorn: 2020,
	},

	pet02: {
		name: "Billy",
		species: "Dog",
		favouriteFood: ["everything"],
		yearBorn: 2015,
	},
};

// Object.values is a native javascript function. It returns an array in this example.

let petsAge = Object.values(nestedObjects).map((value) => 2025 - value.yearBorn);
```

## Filter
This code excludes items or only includes certain items in the subsequent array (depending on how it's coded).

In this example, I filter for pets that have everything as their favourite food. I get an array of object. In this case, it would be the object nested in pet02:
```
const nestedObjects = {
	pet01: {
		name: "Mango",
		species: "Cat",
		favouriteFood: ["fish", "turkey"],
		yearBorn: 2020,
	},
	pet02: {
		name: "Billy",
		species: "Dog",
		favouriteFood: ["everything"],
		yearBorn: 2015,
	},
};

Object.values(nestedObjects).filter((pet) => pet.favouriteFood == "everything");

```

## Reduce
This code is used to loop through an array of values and reduce it to one.

In this example, `reduce` takes three song streams and combines it into one value (i.e. total streams).

```
const trackStreams = {
	pleasepleaseplease: 200,
	espresso: 2000,
	feather: 50,
};

// reduced the array of numbers into a single number
	const totalStreams = Object.values(albumListens).reduce(
	(value, currentvalue) => value + currentvalue,
	0
);

```

Map, filter and reduce

How do seamless digital workflows happen? A special attention to mental models around people's processes may help if you're designing new software.

There are two types of models in software development:

- Functional
  - a diagram of how the system fulfils its purpose
- Structural
  - the relationship between objects or concepts in the system

In user-centred system design, Don Norman outlines these models:
- System image
- Design model
- User's model (Conceptual model)

Thinkmill's [Schema-led design](https://www.thinkmill.com.au/blog/visualising-a-schema-led-approach-using-figjam) bridges the gap between the software's structural model and user's model.

[OOUX's object mapping](https://www.ooux.com/resources/quickstart) by Sophia V Prater helps bridge a similar gap and communicates design decisions early.

These approaches help designers decide what aspects of implementation details to hide and show for coherent UX.

Mental models

The following is open to further refinement. I see a lot of value of having a hypothesis that explains the predicted outcome early on in execution.

It incorporates what I've learnt from CXL Academy's Conversion Optimisation Mini Degree while leading a 4-month redesign project at Enrola.

These steps are normally shared across a few roles such as a product manager and a product designer, so it may seem weird if you’re from a larger organisation:

1. **Articulate the problem and define the metric that matters most**

2. **Is this a relatively small design update (like adding a card or changing copy)?**

   - **Yes, small update:** Check volume of conversions to determine if an experiment is warranted
     - If over 1,000 conversions per month: proceed with plans for a split test later.
     - If less than 1,000 conversions per month: do not plan any split tests as results will not be helpful.
   - **No, big changes**: Experiments run on big changes is fine for providing proof of validation. It can offer assurance that the new direction is safe, but it won’t provide validity when pinpointing why.
   - If less than 1,000 conversions per month, taking big bets is the way to go.

3. **Know your target audience**
   - Who is the primary persona? What are their motivations, goals, needs and concerns in adopting a new solution? What is their context of use?
4. **Get started on content early**
   - Cannot stress how helpful this is. It doesn't have to be fully formed from the start, but an idea of web content helps with accessible design and development.
   - This ties to knowing your target audience: Determine what are the key messages you want to convey.
5. **Sketch possible solutions and agree on functionality**
6. **Formulate a hypothesis and experiment plan**
   - What is the predicted outcome? Where and what will you be changing? How many variations are you testing?
   - Calculate expected earned monetary value when minimum threshold for statistical significance is met.
   - Plan experiment details in advance such as amount of conversions needed and duration of test.
7. **Check for other experiments that might interact with your plans**
   - Are there other tests being run at the same time that could affect the viability of the experiment results or complicate analysis?
   - Simultaneous split tests are possible with little interaction between the tests.
8. **Design the solution, ask for feedback and iterate**
9. **Test solutions with users**
   - If it's a novel and innovative solution, definitely test with users.
   - Otherwise, testing conventional web patterns can be skipped with an experienced designer.
   - Test internally at the minimum.
10. **Release feature, launch experiment**
11. **View experiment results on predetermined end date (Usually 2 weeks after launch)**
12. **Analyse results and decide if releasing the feature**

The focus of a growth designer when there’s less than 1,000 conversions per month isn't that different. Rather, a sharper focus on unique value proposition, customer needs and competitive landscape is essential for taking better bets in absence of a volume of conversions.


Reflections on refining an impact-driven design process

**Are these the principles of responsible design?**

- Fundamental understanding of how the technology works
- Users themselves may be blind or unwilling to discuss the nuances of tech
- Co-design; users are partners in design
- Questions: What are the implications of this design decision?

**Emily Campbell on Design of AI: The AI podcast for product teams:**

> As designers, our role is to ask:
>
> - What is the individual within the system trying to achieve?
> - What constraints do they have? What information are they operating under? What information don't they have?


The role of designers in the responsible tech ecosystem

## Must-fix
- [ ] Error in loading images in digital garden

## Should-have

- [ ] Link to the next case study at the end of case studies
- [ ] Published date or last edited date on case studies
- [ ] Published date and last updated on notes
	- [ ] Sort digital garden notes by most recent first
- [ ] Better timeline of professional experience on About

## Could-have

- [ ] Improve footnotes formatting in HTML from markdown files
- [ ] Add animation on scroll effect mid-way through on long case studies
- [ ] On Digital Garden index, group notes by: All notes tagged with "Tech", Most recently updated notes, Newly added budding notes, All mature notes, All book/media notes
- [ ] Link to Figma prototypes in case studies
- [ ] API to call in content from Dribbble and Behance

## Won't have

- Fix check-lists on converted markdown files
- Add ability to see graph view of notes
- Add ability to view collection of notes within a tag/category
- Popover preview of a note on hover

## Done

- [x] Fix link styles globally
- [x] Images for my digital garden notes are symbolically linked to the public folder
- [x] Override default 404 page from Vercel with an explanation of private notes
- [x] Improve alt tags on images
- [x] Page descriptions
- [x] Link to Interaction Design Foundation profile
- [x] Link to All Notes from individual note in Digital Garden

Website plans and known bugs

We know how AI models responds to our **inputs** (such as text prompts, video or audio files) by providing **outputs** in turn.

What is invisible to us is the network beneath this exchange, the **hidden layer**:

![[neuralnetwork-AI.png]]

These [[How machines learn to mimic our understanding of language|networks form through a process of iterative computational learning]].

As the model gets more data, it seems to get better at tasks like language processing, pattern identification and reasoning.

But what is happening under the hood exactly? How are these connections forming? And why can AI do tasks it wasn't specifically trained to do so well? That's what tons of  scientists are trying to figure out with experiments like [Golden Gate Claude](https://www.anthropic.com/news/golden-gate-claude).

Digital garden

Start here

All notes