The first protocol developed by Backed facilitates peer-to-peer lending, using an NFT as collateral for a loan.

### Context: NFT Loans

A prospective Borrower sets the loan terms they'll accept and deposits their NFT, which is then visible to potential Lenders. If Lenders like the terms, they finance the loan and have the opportunity to seize the collateral if the loan and its interest isn't paid upon maturity. Lenders are also able to 'buy out' active loans by proposing better terms (such as a lower interest rate). In this event, the initial Lender is repaid and awarded any accrued interest, and the loan begins again at the new terms with the new Lender as counter-party.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F08b2667b-1dcb-4b22-bd86-c46f092188c3.png?alt=media&token=b1d4a18f-0cc3-4b5a-8722-5359fde373cb","id":"08b2667b-1dcb-4b22-bd86-c46f092188c3","width":1059,"height":898,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

The details of loan offers (both for new loans and active loans) is presented as cards on the homepage. These details show the key terms of an NFT-backed loan: the collateral NFT, the amount borrowed, the interest rate, and the duration.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F4d915cc0-6331-4bc8-bced-20f9d1ec2a5b.png?alt=media&token=ee1bbf70-5eb3-41ce-96e7-6842d93d43cc","id":"4d915cc0-6331-4bc8-bced-20f9d1ec2a5b","width":1738,"height":1250,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

### Creating a Loan

The biggest design challenge of this project was simplifying the loan-creation flow that a potential Borrower encounters. This flow involves different actions, critical decisions, and multiple onchain transactions. To mitigate that complexity, the design presents the work as a single, simple task flow. The goal is to build a sense of clarity and trust for the Borrower, to increase the number who are able to complete the task and deposit their NFT into the protocol.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F5eeba93f-6ce6-4509-a256-3610b514ecea.png?alt=media&token=a77d1440-ad69-443e-876f-4273e22b96cc","id":"5eeba93f-6ce6-4509-a256-3610b514ecea","width":1645,"height":662,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

The first step of the design process was breaking the workflow down into discrete steps. The most important constraint at this stage was to complete the loan creation process on one screen, so that users are able to begin with the end in sight and complete the task as a series of small, safe, and clear steps.

Even before connecting their wallet, a user can see the entirety of the work ahead of them:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2Fe5e7d6ce-8d14-4a49-870e-68b86fd944d4.png?alt=media&token=9a83eebe-ccb1-4221-95db-f9a00543ae09","id":"e5e7d6ce-8d14-4a49-870e-68b86fd944d4","width":2806,"height":1902,"filename":"Screen Shot 2023-07-06 at 8.54.28 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F1054dea5-38ff-456c-bdfb-612423c787cd.png?alt=media&token=9f1b357b-b7a3-4a24-b6ce-cebaeec587f8","id":"1054dea5-38ff-456c-bdfb-612423c787cd","width":2806,"height":1902,"filename":"Screen Shot 2023-07-06 at 9.06.35 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F4e23048f-d063-4038-baa7-e0fbf70c4b12.png?alt=media&token=568464a1-2473-4c95-a2d5-8f6f8753896c","id":"4e23048f-d063-4038-baa7-e0fbf70c4b12","width":2806,"height":1902,"filename":"Screen Shot 2023-07-06 at 9.07.59 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2Fa1ef3afe-8881-42ab-b671-1a66ea5aaf04.png?alt=media&token=b00590e4-a313-4083-9f68-926c55d8171e","id":"a1ef3afe-8881-42ab-b671-1a66ea5aaf04","width":2806,"height":1902,"filename":"Screen Shot 2023-07-06 at 9.12.23 PM.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2Fd1cb59d3-3f74-4ff2-88b6-6d5453ca1c80.png?alt=media&token=4d2fd2ac-0d8c-4a39-8438-3f7914270761","id":"d1cb59d3-3f74-4ff2-88b6-6d5453ca1c80","width":2806,"height":1902,"filename":"Screen Shot 2023-07-06 at 9.33.09 PM.png","type":"image/png","caption":"","border":false}]}
```

A critical piece of feedback uncovered in testing early prototypes of the flow was that users needed clear descriptions of each step. Rather than rely on tooltips (which are rarely recognized and opened even when they're needed), I decided that if the form itself was presented in a single column, a persistent 'help bubble' could follow the user through the flow and explain each step.

This detail tested well and had the added benefit that, post-launch as the team heard feedback from real users, it was easy to adjust and add to the copy in each bubble.

### Transaction Buttons

Another principle guiding the design is to treat on-chain transactions as flows in and of themselves, using the button element as progress indicator both across the whole form and within each on-chain step. This "button" is wearing many hats, but its ability to span that complexity is what allows the form as a whole to appear simple despite its technical complexity.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F8002b77b-0b19-49af-b7f6-ce566a872131.png?alt=media&token=4d9b46c1-9f41-4cf7-8f9c-212aca2384f4","id":"8002b77b-0b19-49af-b7f6-ce566a872131","width":1706,"height":1158,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

A subtle detail in these buttons is to leverage the tried-and-true HTML spec for clickable links (blue) and links-that-have-been-clicked (purple). While it's an aesthetic decision as much as anything, these colors offer a slight affordance to users. In contrast, the typical color-codings of green/red for go/stop or success/failure are so overloaded as to often make them *more* confusing for any semantic significance they carry.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F4602079a-c03c-4bda-aa4e-b49af99d2e79.png?alt=media&token=ac420934-d64f-473e-9c33-79e4a9e81179","id":"4602079a-c03c-4bda-aa4e-b49af99d2e79","width":1792,"height":992,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

To some degree, all clicks that trigger an on-chain transaction feel like *risky* *clicks*. In the case of creating a loan, it's critical to communicate exactly what will happen the the loan is created and the Borrower mints the ticket that acts as a receipt. This is the reason one of the final steps of the flow is a simple "Review" toggle that shows the user a summary of the transaction they're about to execute.

Finally, when the Borrower creates the loan and "Mints Borrower Ticket," they receive an NFT that represents their position, as does a Lender when they choose to finance a loan.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F105c86d5-4a0b-4892-82eb-02c5cce1c9cd.png?alt=media&token=098cc2f3-2ad9-487e-80a1-51e286ebd6f6","id":"105c86d5-4a0b-4892-82eb-02c5cce1c9cd","width":1738,"height":862,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

This NFT uses on-chain SVG art that I created as part of this project. The benefits of the art being entirely on-chain are many:

* Because the art itself is stored on the blockchain, it can be rendered eternally and updated based on transaction data

* **Loan Status** and **Interest Accrued** can be calculated and displayed in real time, in fact the interest math in this NFT is the source of record and determines the actual interest that is paid when a loan is closed

* The rights and obligations of Borrower and Lender are transferrable — whatever address holds the ticket is the de facto Borrower or Lender

* Finally (and purely aesthetically) the colors in the background gradient can be derived from the assets used in the loan (for example, all loans for WETH have the same light blue as one component of their gradient)

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FKAgTnAyYAflraC0IOt53%2F6e87b4cb-a3b7-41e6-b487-db35444dae66.png?alt=media&token=651aba4d-0f6f-4a72-a854-7c7b638a1871","id":"6e87b4cb-a3b7-41e6-b487-db35444dae66","width":1922,"height":1464,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

### Project Retrospective

This project was the first lending protocol created by Backed, a team that consisted of myself (design) and three engineers. While the loan creation flow and other details of withbacked.xyz were effective and modestly successful (nearly $100k in loans facilitated) the team used the learnings from this version to launch a second, entirely new protocol at papr.xyz, which you can [read about here](https://read.cv/ringenberg/zWJ2N30sEDhh2Z35Iqi5).

Creating An NFT Loan

**What a fun time to be a designer!** AI is powering new tools, new capabilities for creators, and new territory for software design. The tech is so transformational that the design patterns and norms we've settled on in the past won't necessarily work for this new generation of tools. And without shared mental models and predictable interactions, users can end up frustrated and confused.

**So what's a designer to do?** How will we discover the "best practices" of human/AI interactions? I believe we can speed up the process by thinking out loud and working out in the open. If we share the rationale behind our design choices our judgements become richer, our opinions become more nuanced, and we can start to see themes and common threads that link successful moments.

### Context

DuneAI is a tool for querying blockchain data. In the past, Dune users had to write complex queries to build charts and dashboards of onchain data. But now anyone can describe the data they want to see and DuneAI will write the query as SQL code, run it, evaluate the results, and return them. This process isn't always quick but it's incredibly powerful!

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2F9d784239-4126-4004-b262-96dd5d1ffbcf.png?alt=media&token=79995909-b76b-486d-8733-901039fd36b0","id":"9d784239-4126-4004-b262-96dd5d1ffbcf","width":1662,"height":800,"filename":"2 states 3.png","type":"image/png","caption":"","border":false}]}
```

DuneAI launched in the fall of 2023 and represents the work of an incredibly talented technical team on which I served as designer. These design notes cover some of the important details and the thinking behind them. They aren't prescriptive and will change as the team continues to build and explore this space, but I hope they serve as an invitation to discussion.

### Detail: Call to action

We've all clicked the most classic button-text a thousand times: *Add to cart. Sign up. Log in. Search.* But the button copy that initiates an AI prompt is new territory. We lack the vocabulary to describe what these tools do — in some sense it is highly technical. In another sense it is pure magic.

Here's DuneAI's main prompt input as it loads, how it looks after a prompt has been entered, and how it looks while the prompt is running:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2F155226d8-6984-4957-acfd-f1301ec85fc1.gif?alt=media&token=b2c229e2-a84e-4619-99c5-325acd9047db","id":"155226d8-6984-4957-acfd-f1301ec85fc1","width":2020,"height":592,"filename":"dune ai loading.gif","type":"image/gif","caption":"","border":false}]}
```

The primary input of DuneAI asks, "What do you want to know?" It gives the user a role to play and puts them on the spot. The technology powering the prompt is inscrutable, as would be a button with a technically-accurate CTA like "Execute prompt." Instead the button says "Find out," focusing on the value that the tool hopes to deliver.

If there's a single industry standard evolving in this space, it's the use of ✨ as an icon to evoke the magic of AI. These particular sparkles use the geometry popularized by OpenAI and add a little extra dash of magic by glittering while the tool is working.

### Detail: Token highlighting

The single variable with the biggest impact on the performance of DuneAI is a well-written prompt. But this is a new language for users! Having some example prompts is an easy way to steer users towards effective syntax and sufficient detail.

As users, we don't intuitively know what will work best or what's irrelevant. For example, asking politely doesn't make much of a difference to DuneAI. But accurately named blockchains, specific tables, exact addresses and project names have a huge impact on the output. The tool identifies these different tokens in the prompt and categorizes them as it searches for applicable data sets. So the examples highlight these important words with different colors for different token types.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2F8f5d8cc0-71f9-49b2-bca5-2f45825b6fa6.png?alt=media&token=1a77f0ad-7d34-48db-a829-24ff7b17d029","id":"8f5d8cc0-71f9-49b2-bca5-2f45825b6fa6","width":1372,"height":508,"filename":"Screen Shot 2023-11-10 at 5.20.25 PM.png","type":"image/png","caption":"","border":false}]}
```

It's unlikely that users will deduce the system or categories represented. But the goal of this visual detail is to draw attention to technical specificity, model clarity, and help users write prompts that are a little bit better. The header on the page uses this highlighting as a visual conceit as well. Again, it's unlikely that it will operate on a literal level. But a prompt that's a little bit better can lead to a result that's a lot better!

### Detail: Work in progress!

Some AI tools operate like chatbots, replying immediately. DuneAI operates more like Midjourney, working through an entire creation flow that can take a long time — sometimes seconds, sometimes minutes. By describing the work as it happens, the interface tries to build trust and patience. It's a reminder that behind the magic is some very heavy lifting.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2F8731585e-368d-4731-a9fa-1c82e816354b.gif?alt=media&token=d84edc52-2047-48e9-ae35-9176faf191ed","id":"8731585e-368d-4731-a9fa-1c82e816354b","width":2574,"height":926,"filename":"rolling ellipses set.gif","type":"image/gif","caption":"","border":false}]}
```

Animated, rolling ellipses communicate that work is still happening, even if the tool sits on a step for a long time with no sign of progress. Showing the elapsed time acknowledges that waiting, as if the tool is saying "I'm paying attention to how long this is taking!" And, "I know that your time is valuable." And, "Hold on a sec, I'm still cooking."

### Detail: Positive Reinforcement

Even after all that waiting, it's not guaranteed that the query DuneAI has written will return the result the user had in mind. Search results that disappoint are not new territory for users, but what's totally unprecedented is a tool's ability to learn from your feedback! Every new prompt that DuneAI is part of its training set, and the reinforcement training it receives from human feedback makes the model better the more its used.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2Ff78d3390-c890-4057-88f9-8ab1563a1e77.gif?alt=media&token=4469c839-7015-4a81-86d8-9eed8301e5ea","id":"f78d3390-c890-4057-88f9-8ab1563a1e77","width":1458,"height":158,"filename":"dune ai rate hover.2023-11-11 13_17_42.gif","type":"image/gif","caption":"","border":false}]}
```

First and foremost, this element communicates that a result was successfully returned (that's why it's green!). Using 👍 and 👎 emoji makes the barrier to leaving feedback as low as possible, and is honest about the (low) level of sophistication of the signal. The accuracy score communicates that DuneAI is self-evaluating and frames the feedback as fundamentally about accuracy: "Was this the query you were hoping to run?" rather than "Does this particular data mean good news for you?"

### Detail: Big Picture

Tools with new capabilities can't rely on established patterns. The more AI tools we experiment with (and design!) the more expectations we'll have about how they behave. But until that time, it pays to be as explicit as possible. So DuneAI introduces itself at the top of the page with a simple value proposition:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FQIKO6LJLP3EtcL1CsdMn%2F32aac6b8-fd64-4eb3-bb61-0bc0b0c5400a.png?alt=media&token=540a5382-c3c6-4b3a-824f-b8923b9775bc","id":"32aac6b8-fd64-4eb3-bb61-0bc0b0c5400a","width":2362,"height":394,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

As in the example prompts, the key words are styled as highlighted tokens. The literal connection to prompt engineering is even more tenuous here in the context of marketing copy! But the title sets the tone for the tool. Amid all the other elements and design details, what matters most are words.

While Dune's interface is set in IBM Plex (Sans and Mono), this text is set if IBM Plex Serif, as if it's being elevated to a headline. Written text as the technological innovation upstream of all this AI magic. If there's a single takeway or first-principle for AI design here it's this: *words matter.*

DuneAI Design Details

Making the fastest, most-customizable video player on the internet also the most-accessible.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2Fd4d8c63d-da75-4648-a447-5e672dfb4b31.png?alt=media&token=f886a1bf-6867-4b8d-a80f-85c23ab4ae2c","id":"d4d8c63d-da75-4648-a447-5e672dfb4b31","width":931,"height":131,"filename":"accessibility icons.png","type":"image/png","caption":"","border":false}]}
```

## Context

As a hosting platform, Wistia loads a video over 60 million times a day on every device type imaginable, on any connection, everywhere in the world. As the lead designer of the video player, that means focusing on efficiency (every kilobyte counts!), usability (every click counts!), and removing any barrier to access that a viewer might encounter. The team set an internal goal of having the most accessible video player on the internet, and I partnered with an engineer to study WCAG's accessibility standard and begin an audit. Meeting our goal began with a few tweaks but quickly grew into a much larger project.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2F9423dafa-5c78-4620-b023-006cbe46e733.png?alt=media&token=3410b1a2-cbd6-4a43-a6bd-162d74f50d38","id":"9423dafa-5c78-4620-b023-006cbe46e733","width":905,"height":781,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

## Video Player

To begin with, there are a host of visual adjustments needed to make sure every UI element was sufficiently high-contrast. The goal of Wistia's player is to keep the focus on the content and let the container take the back seat, which is why the player uses transparency to reduce the visual weight of the controls. Making sure every possible scenario meets recommended contrast levels required extensive tweaking and a new, high-contrast play bar, whose design followed the visual language of the icons.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2F9aaf099e-2bac-4f80-b6e8-c19abbae333f.png?alt=media&token=82d541bd-1154-48ab-92a4-1836378e896d","id":"9aaf099e-2bac-4f80-b6e8-c19abbae333f","width":1264,"height":1128,"filename":"wistia player.png","type":"image/png","caption":"","border":false}]}
```

These visual updates were paired with technical improvements to make the player screen-reader friendly, keyboard navigable, and able to support Audio Descriptions. These are all important aspects of accessible video, but there are some aspects of video accessibility that we can’t just fix behind the scenes.

## User Choices

Some important aspects of accessibility depend on choices our customers make, like configuring Captions and Audio Descriptions, or taking the time to add alt-text descriptions to their video’s thumbnails. Control over the look and feel of the player is one of the features our customers mention most as their reason for choosing Wistia, so it's important to preserve even the customizations that can make a video inaccessible (like hiding all the controls on page load). But we *could* make sure customers never make those choices without realizing what's at stake.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2Fb51cefc9-7d45-4b77-a8cc-050abc3e6c3e.png?alt=media&token=f90aa853-5ef3-4ae0-b286-d76964462aa4","id":"b51cefc9-7d45-4b77-a8cc-050abc3e6c3e","width":1830,"height":1680,"filename":"Wistia microcopy.png","type":"image/png","caption":"","border":false}]}
```

## Microcopy

In order to help our customers choose accessibility, the product has to educate users about the technical details, convey the value of taking action, and guide them through the work. Clear and concise copy is the backbone of the best interface design. Before designing any changes in the app, I first developed language for explaining video accessibility in an easy, approachable way. I drafted and workshopped the copy, and tested it with users to make sure it was technically correct and comprehensible. These five tooltips explain the basics of video accessibility in only 86 words!

Accessibility can be an intimidating topic, and by suggesting the audience that benefits from each of these features, the explanations engender empathy and motivate the user to take action. While testing revealed that the message was clear, it was another challenge to put this copy in the appropriate context.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2Fbe1ddc81-eca4-4bf6-9569-4c67a68839b1.png?alt=media&token=d3b01f2d-a0d1-4500-ba9b-4f7edce40364","id":"be1ddc81-eca4-4bf6-9569-4c67a68839b1","width":1752,"height":1604,"filename":"customize panel.png","type":"image/png","caption":"","border":false}]}
```

## Checklist

One of Wistia’s most popular features is the control and rich video customizations the platform offers. With richness comes considerable complexity, and accessibility features and details appear in many different places. To guide users from section to section, I designed an Accessibility Checklist to serve as an education tool and navigational guide while users are customizing their video.

The checklist elements show either a pass or fail state, and on hover or keyboard focus they display a tooltip with an explanation of the feature. Clicking on them opens the relevant section in the customize tool set, where a user may make the needed change. These sections all link to robust documentation and back to the checklist, which displays a success message once all the accessibility criteria are met.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2Fe0ab19d0-99ff-4eda-9218-5adabaca5084.png?alt=media&token=b85e8520-95bd-4e45-b88c-f4fc9e64faf4","id":"e0ab19d0-99ff-4eda-9218-5adabaca5084","width":1752,"height":1604,"filename":"color picker.png","type":"image/png","caption":"","border":false}]}
```

## Picking accessible colors

While most of the customization sections support the necessary functionality, one element that required a full redesign was the color picker that sets the color of the video player. In order to guide users towards darker colors (but still allow for inaccessible options), I redesigned our color picker and structured it to emphasize hue and lightness and deprioritize saturation. It allows the spectrum to toggle between all possible colors and only those that result in high-contrast controls. My favorite detail of this design is the animated transition, which communicates how the spectrum is being constrained and conveys how far a low-contrast color must "travel" in order to reach the minimum contrast threshold.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FZxZHtssWJAPvO9tChVke%2F8bf35aac-3ffb-434c-9caf-f394ab1ae59f.png?alt=media&token=4fe5c2d6-a788-4ed0-a490-d667cd58060e","id":"8bf35aac-3ffb-434c-9caf-f394ab1ae59f","width":1748,"height":292,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

## Success!

Once all the issues have been addressed, the top-level view of a video's customization settings shows that the Accessibility Checklist is complete. This means that the video passes WCAG’s AA-level accessibility standard, which is no small feat! This is particularly valuable for government agencies and universities, which may be obligated to meet that standard, and it’s a standard most video platforms cannot meet. This differentiating feature led directly to new sales within days of launching, and was an opportunity for Wistia to publicly express its values of inclusivity and to lead the industry with good design.

Video Accessibility

How to design better company-branded gear that's less wasteful, more fun, and more personal?

Company-branded swag can be fun to make and fun to receive. Unfortunately, it's often boring and almost always wasteful (how often does that logo-tshirt make it into regular rotation?). This project explored a better way.

**The key design insight is that people already own things they like.** Instead of putting the company logo on *something nobody wants*, we can put it on *something they already own*.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2Fn3L8hy3yQLvveauCJTfK%2F6c534832-79ec-4163-b70d-b691ff74aa1c.jpg?alt=media&token=9619ac8c-3b47-4e47-a563-44a9b00090fa","id":"6c534832-79ec-4163-b70d-b691ff74aa1c","width":2368,"height":2368,"filename":"4B95032B-5B65-4929-B0E6-375DD298476B.JPG","type":"image/jpeg","caption":"An embroidered Lenny, on an old LL Bean shirt.","border":false}]}
```

I art-directed, organized employees to bring in a wardrobe staple (that they already knew they liked), and coordinated with an embroidery studio that added a ~~little LaCoste crocodile~~ our office dog, Lenny.

The official logo at Wistia is two swooshes, which isn't nearly as endearing. Lenny is *especially* endearing, and a frequent star of videos. The art is by a talented illustrator on the design team, Michelle Fine.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2Fn3L8hy3yQLvveauCJTfK%2Fa72636d9-3af2-4e88-96c7-302b152855c5.png?alt=media&token=36d86306-0e2c-45c0-9d11-0ee04aa956bf","id":"a72636d9-3af2-4e88-96c7-302b152855c5","width":2512,"height":1476,"filename":"Screen Shot 2021-04-26 at 11.15.02 PM.png","type":"image/png","caption":"","border":false}]}
```

As Director of Design at Wistia I had the opportunity to illustrate and art-direct many company-branded tees, totes, and stickers. Years later, the pair of socks with the little dogs on them is the only one I still love to wear.

Corporate Swag

*papr* is a novel mechanism for decentralized lending, and Backed's second protocol targeting the space.

The Backed team comprised a designer (myself) and three engineers.

*"papr" is pronounced "paper"* and stands for "Perpetual APR". This name hints that APR is perpetually changing based on the market, and also provides a fun and fitting visual language of dot-matrix printing and graph paper.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2Feeec0530-e36b-4246-b8a8-eba84228a396.png?alt=media&token=d9ed578f-95ed-4da9-be59-a693efe45f1a","id":"eeec0530-e36b-4246-b8a8-eba84228a396","width":1686,"height":1120,"filename":"image.png","type":"image/png","caption":"Each papr token has its own bright graph-paper theme that serves as a contextual affordance for users interacting with similar pages across different subdomains.","border":false}]}
```

### How it works

It's a complicated protocol in a complicated space!

The interface and interactions are full of tricky challenges, but the biggest challenge of all is explaining how it works. Once you "get it" it's very exciting, but the learning curve for complex protocols at the intersection of DeFi and NFTs is quite steep. Here's the best ELI5 illustration:

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2F9b4b4d69-b80e-4bd3-9dcb-5fce767958a3.png?alt=media&token=0cc95424-d9e5-4f1f-9fbf-4433eb2d8fa4","id":"9b4b4d69-b80e-4bd3-9dcb-5fce767958a3","width":1336,"height":966,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Like all things crypto, the rabbit holes lead to more rabbit holes, so coming up with a simple metaphor with an intuitive value proposition (balance = good) gives users on both sides of the market a simple place to begin.

Borrowers are willing to pay interest in order to get loans. Lenders are willing to give loans in order to earn interest. The fairest interest rate happens when the demand from both of those parties is balanced.

papr makes this possible by building the lending mechanism out of a token that trades freely on Uniswap.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2F83a2e7c8-ebf4-40cb-b713-1d35a9869ea3.png?alt=media&token=c92b3ec3-1fe3-477d-8787-3d26bafb7557","id":"83a2e7c8-ebf4-40cb-b713-1d35a9869ea3","width":1702,"height":1222,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

* "High borrower demand" happens when Borrowers create more loans, minting and selling papr tokens, and pushing down the price of papr tokens.

* When Borrowers close their loans, they rebuy papr tokens — the amount the tokens have gone up in price is the equivalent of an interest charge that they must pay.

* "High lender demand" happens when Lenders see papr tokens rise in value (due to the inflation that happens when Borrowers repay loans plus interest) and choose to buy and hold papr tokens. This purchase

Because these buy/sell actions take place in a Uniswap pool, they transmit "perfect information" to the market. The ETH/papr swap price can be thought of as an oracle for exactly what interest rate reflects market sentiment.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2Fbee464a9-4a32-41f9-a620-a4c8e7091d6c.png?alt=media&token=5eb856f3-a4a4-4066-b61e-ee1afa4d4f4e","id":"bee464a9-4a32-41f9-a620-a4c8e7091d6c","width":2000,"height":906,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

Throughout the development of the protocol, my design work was focused on clarifying the concept through copywriting and these diagrams. As its function became more clear, the design work shifted into ultralight prototypes on testnet and then to the frontend that was launched for mainnet in early 2023.

### Design Details

One particularly helpful design choice made at the onset of UI work on was to use the classic-HTML `<fieldset>` element (think: Craigslist) to organize the UI. Because the work was so experimental, we often had to build a rudimentary interface in order to understand the constraints and opportunities. These nicely-labeled sandboxes (that's the `<legend>` element) kept our UI organized as it evolved, and the constraint of a fixed width forced us to be concise and avoid anything that wouldn't translate well to a mobile screen.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2F7a19f150-755d-4a36-b8f8-a83c95f34f8f.png?alt=media&token=4976448b-5110-4561-9861-18fd9c30e665","id":"7a19f150-755d-4a36-b8f8-a83c95f34f8f","width":1148,"height":1450,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

One of my favorite elements is that "Impact Projection" diagram that is made with ASCII art. This hyper-simplification helps keep the focus on the relationship between the values represented. This goal of simplification is perfectly met with the vintage-office-printer aesthetic I chose for papr.

Here's an early exploration for the aesthetic, which went harder on looking like a bank statement you might receive in 1996.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2Fea88ca8a-7235-4559-b44e-2e193af7a138.png?alt=media&token=847765b2-0f90-4b87-b212-eea3f3e650ef","id":"ea88ca8a-7235-4559-b44e-2e193af7a138","width":1496,"height":766,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

### Transaction Buttons

Another element particularly well-suited for the task at hand is the transaction buttons. A common need in crypto is to approve an asset for use before a user is able to use it to complete a transaction. Each of those steps needs to be completed onchain, which means a button click is not an instant action, but a series of states. These buttons report their status and even link to proof on etherscan once the transaction is successful.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2Fy62WHmaXGQbra5dogsRw1v4ji1G3%2FzWJ2N30sEDhh2Z35Iqi5%2F36b35e24-2bbb-43dc-a6b9-a7e030a18b52.png?alt=media&token=1b176e7f-233c-4e75-ba48-684aa89455cd","id":"36b35e24-2bbb-43dc-a6b9-a7e030a18b52","width":1636,"height":672,"filename":"image.png","type":"image/png","caption":"","border":false}]}
```

### Beyond Interface

Another unique factor in designing a crypto protocol is that its core functionality is live on the blockchain and can be used with no interface at all. So while the front-end client the team built was how we most often imagined users interacting with the protocol, it was important to imagine and design for other contexts. In this tweet, I imagined how the core functionality of papr loans would look if it were incorporated in the Uniswap interface and design system.

This turned out to be a fantastic exercise in paring down complexity!

```cv
tweet
https://twitter.com/jringenberg/status/1626659542485327884
```

### Project Retrospective

The novel protocol design began as a mad-scientist experiment — the market mechanism made sense on paper but we didn't know if it would actually *work* in real life. The experiment proved a success! Interest rates rose and fell as Borrowers and Lenders expressed their demand.

Unfortunately, the demand the expressed for NFT-backed loans from both parties was pretty small. As of 2023, the protocol had facilitated about $150k of loans, which isn't enough to justify development by a full-time team.

While the protocol continues eternally on the Ethereum blockchain, Backed decided to wind down operations, including hosting the front-end client documented in these designs.

papr Loans

Hello! This is a summary of my work and background.
If you want to find out a little more about me, check out jringenberg.com.

Software Design

Backed V1

Unique conditions and design responses for Dune's AI tool, which creates charts of blockchain data from simple, natural language questions.

DuneAI Design Notes

Design notes on exploring patterns in the AI-design space in general, and for Dune's AI tool specifically.

DuneAI

Better Swag

Backed V2

This microsite is a gallery of furniture projects. Woodworking is a constructive hobby, literally, and it's also a practice of material awareness, instinct, and craft.

Woodworking

This gallery is a collection of NFT projects I have designed. They are all drawn and animated in SVG code which is stored entirely onchain, allowing the art to update based on transaction data.

Onchain Art

Led the design of Wistia's platform tools and video player.

Principal Product Designer

I joined a “10% project” focused on peer-to-peer lending which incubated Backed, a startup funded by Coinbase Ventures.

Product Designer

Scaled the design team from myself (first design hire) to a team of 7 designers and researchers.

Director of Design

Incubated at Coinbase, Backed launched a series of protocols exploring peer-to-peer and peer-to-pool lending using digital assets as collateral.

Founding Designer

Provided mentorship within design discipline and defined design direction for Dockwa, a sailing/marina app.

Joe Ringenberg

Side Projects

Projects

Work Experience

Education