Coign Generative UI Case Study

Financial Services
Generative UI
GenUI Kit

Coign members opened the app to pay their bill and little else. VGV used GenUI to turn charity voting into a personal way to explore causes. Now members proudly share the impact they made, and every share brings Coign free marketing and new engagement.

weeks to a working demo: 3
stakeholder interviews: 14
pain points consolidated: 91

01At a glance

Making the vote personal

01

The challenge

Coign’s differentiator is that cardholder spend funds charities members vote on. That vote ran through a quarterly survey with one flat list and no word back on impact.
02

Our approach

We used the “virtuous engagement loop” framework to design an experience for current members and prospects alike. With the loop in place, we saw that exploring charities is open-ended and non-deterministic, a natural fit for GenUI. We then built a design catalog, plus catalog and system prompts on top of the GenUI Kit, to create a discovery experience individualized to each member.
03

The results

We had a working demo within just 3 weeks. The POC takes a member from the home screen to a personalized vote and a shareable impact card. Coign can now change the flow by editing a prompt.

02The challenge

A brand built on giving, run through a survey

Coign is a credit card issuer built around one idea. A share of every cardholder’s spend goes to charities that members vote on each quarter. In an average quarter, that adds up to roughly $48,000.

The vote itself ran through SurveyMonkey, a third-party service outside the app that wasn’t fully aligned with Coign’s brand values. It also fragmented the experience. Members had to keep track of separate communication threads instead of having everything in one place inside the app.

Every member saw the same flat list of 30 to 40 charities, with no way to narrow it. One charity won each quarter, so most members’ choices produced nothing they could see. Then the app went quiet for three months. Outside of paying a bill, members had no reason to open it.

The format also didn’t scale. Coign was exploring a much larger charity portfolio, and a longer survey list would only make choosing harder. Members needed a way to navigate many charities and find the one that’s right for them.

Coign wanted to know whether AI could make the choice personal, show members what their money did, and give the brand a story to tell before enrollment reopened.

In their words

“We needed a reason for members to come into the app. Finding charities and making an impact is that reason. GenUI gave us an easy way to help members explore a huge number of charities, fast.”

Chief Technology Officer, Coign Chad Boyd

03The new member charity experience

From a quarterly survey to a personal giving experience

A GenUI charity flow that starts on the home screen, asks what matters to the member, and recommends causes with a clear reason for each pick. At each step, an LLM decides which UI card to show in response to the member’s input, moving the experience forward.

~$48K Given by Coign cardholders in an average quarter
30–40 Charities on one list, identical for every member
20% Of cardholders who hadn’t logged in to the app
6 Personalization questions the model can ask, skipping any already answered

04Our approach

Start where members already show up

Starting from the AI mandate

The charity work grew out of a broader AI strategy engagement. We ran 14 stakeholder interviews across six Coign departments and consolidated 91 pain points. One theme ran through all of them. Coign needed to grow engagement and acquisition without every department adding headcount.

In a POC workshop with Coign’s product and technology leaders, we chose one slice of the member experience to prove out first. We picked charity recommendation, voting, and impact, the one moment cardholders reliably show up for.

Discover and vote in the Coign app: the model answers Help me choose with veterans causes that have the strongest track record, and a Best Match card for The Bill of Rights Institute with Why is a good fit, See details and Vote — Every vote creates a shareable moment that pulls in the next member or prospect.

Share Preview in the Coign app: My vote, The Bill of Rights Institute, I helped fund ‘The Bill of Rights Institute’ this quarter with $154.50 of my Coign Card spending, with Instagram, Facebook, X and Save Image — Every vote creates a shareable moment that pulls in the next member or prospect.

Starting from VGV’s GenUI kit

VGV used its GenUI kit to help Coign stand up the experience quickly. The kit ships with built-in A2UI instructions and a library of design widgets. On top of that foundation, we wrote two Coign-specific prompts: a catalog prompt that tells the model which component to use when, and a system prompt that sets the voice and flow.

The model can only assemble UI from approved components. That constraint makes the experience robust and secure, and it’s why it ships so much faster. The kit’s prompts reinforce it with rules like “Facts come only from your tools, never from memory” and “never invent a charity, a policy, or a statistic.”

The kit also isn’t tied to one provider. It defaults to Google, with Gemini and Model Armor, but for Coign it ran on AWS with AWS’s guardrails to fit the client’s needs. The model is set in configuration, so switching providers didn’t mean rewriting anything.

Learn more about the GenUI kit →

Creating a design catalog

Whichever path a member takes, every screen has to look and sound like Coign. The model reads each member’s answers, picks the piece that moves the experience forward, and fills it in, without ever stepping outside the brand.

That consistency starts with a design catalog. Before the model could build anything, it needed a vocabulary: a set of approved, on-brand building blocks, from cause pickers to recommendation cards to a vote summary. Each one carries rules for when to use it and what data it needs.

Coign GenUI design catalog as wireframes, a question card with options and a button, single and multi select rows, priority sliders from Not priority to Very important, charity cards with a Why is a good fit note and Vote buttons, an answer card, a Vote recorded confirmation, primary and secondary buttons and a Q3 Charity vote open card — The Coign GenUI design catalog: on-brand components the model can assemble at each step.

A catalog in Coign’s brand, fueled by member context

The catalog holds the pieces the model can assemble. That includes a multi-select cause picker, sliders for what matters most, recommendation cards that explain why each charity fits, and detail views that show what a vote funds. Each item carries usage rules, so the experience always looks and sounds like Coign.

Members answer cause, orientation, and scope in any order. The model presents one high-confidence top pick, weighs each charity’s results and overhead, and hands off to a final vote. Members who already know their pick can skip the questions and vote from the full list.

The kit renders approved components, the backend layers prompts, and Coign’s data stays the source of truth.

Change the experience by editing a prompt

As you can see below, the system prompt sets the voice and flow of the experience.

The system prompt is where the experience design lives. It encodes which questions to ask, in what order, when to skip ahead, and how to recommend, so the model follows a carefully designed path instead of improvising. Because that design is written in plain language, refining it is a prompt edit and a round of QA rather than a new design-and-build cycle.

genui_system_prompt.dotprompt
# Tailors the assistant to your app. Ships empty.
---

For help choosing, walk them through the
personalization questions below, one per turn, in
this order. Skip any question the member has
already answered in their own words.

1. Category, a MultiSelect: "Which of these causes
   feels closest to home?" Offer the categories
   present in list_charities, one option each. Add
   "Not sure, show me options" as the last option.

2. Orientation, a SingleSelect: "Do you want your
   vote to help people directly or support
   long-term change?" Options: "Direct help for
   people", "Long-term policy & advocacy", "A mix
   of both", "Not sure, show me options"

Roll credits.

Who did what, and with which tools.

Client: Coign
Services engaged: AI StrategyExperience DesignGenerative UIDart & Flutter Development
Built with: VGV GenUI KitFlutter & DartAnthropic ClaudeAWS
Delivered: A design catalogCatalog and system promptsA working GenUI demo
Trademarks: Coign is a trademark of its owner and is used with permission. Charity names appear for illustration in the proof of concept.