#27 "Working mocks are everything": Talking with two designers from SmartBank about the era where designers call the OpenAI API
I'm chihokotaro, a product designer at Ubie. In this episode of Ubie Design Radio, we welcomed putchom and hasegawa from SmartBank to talk about AI character design and prototyping for the AI household account app, "OneBank."
In addition to the main AI character "Oneban-kun," OneBank is home to a variety of unique characters: "Devil Oneban," who is harsh and encouraging; "Naruyoni," who is sweet and praises everything; and "System-san," who guides users through features. We asked them about the design of this AI feature called "Oneban Talk" and how designers were involved in its creation.
This was the longest episode in Ubie Design Radio history, and the four of us had endless things to talk about, but I've picked out three particularly impressive themes to introduce.
Working mocks are everything—calling the OpenAI API directly from the front end
What putchom kept repeating was the verification method unique to products using LLMs for prototyping, where "static mockups are meaningless." Usually, at SmartBank, they have a planning-based process where they form hypotheses through user interviews and then design solutions, but they said the development of Oneban Talk this time was a bit different.
I actually started by building a working mockup on the web front end, because for things like agents, static mockups don't really mean much, and I felt that the value itself wasn't really visible in the initial stages. —putchom
putchom called the OpenAI API directly from the front end, launched a "working mock" accessible only to employees, and had them provide feedback while they played with it. They then updated the system prompt based on that feedback to improve the quality of the responses—that was the approach they took.
The fact that you can't see the contours of the value of an AI product unless you actually touch it was exactly the same for the AI partner we are developing at Ubie. I also feel that the fact that we are now in an environment where we can actually "build" things is having a major impact on the development experience.
Three characters and "Money talk depends on the person and the situation"
There are three characters in Oneban Talk. "Oneban-kun," who responds flatly; "Devil Oneban," who is harsh and encouraging; and "Naruyoni," who is sweet and praises everything. When we talked about why they separated the characters, hasegawa shared this insight.
When you want to save money, you want someone to be harsh and tell you not to spend it, but when you're really feeling down, you want them to comfort you gently. It's just that what people want to be told varies so much, and you can't explain it in one go. Even the person themselves doesn't know why they feel that way, and we knew there were things that couldn't be decided by rules. —hasegawa
For money, the person you want to talk to changes depending on the individual, and even for the same person, depending on the situation. The design of Oneban Talk was to accept that by allowing users to "choose a character."
I personally don't have the courage to talk to the Devil yet (...), but the moment you choose the Devil, you have motivation regarding your household finances. It takes courage to choose that unless you have the desire to face it seriously! I felt that the act of choosing a character might reveal how that person approaches money, and I felt the potential for the experience to deepen by having options.
Organizing system prompts in layers—Base layer × Character layer
As for what they were ingenious about during development, putchom mentioned the design of the system prompts. Since they needed to provide system prompts for each of the multiple characters, they consulted Claude on how to organize them...
It suggested creating a base prompt and a character prompt. The base prompt contains conditions like what the OneBank app is, and things you shouldn't say when outputting, which are placed in that basic base section. (omitted) As for the character side, you write the character's personality, the priority of judgment when such a question is asked, the character's judgment axis, and their code of conduct. —putchom
They separate the base layer (app premises, prohibitions, available tools) and the character layer (personality, judgment axis, code of conduct), combine them on the server side, and pass the prompt. Furthermore, by defining "different character modes" as separate characters in the implementation, they are keeping the complexity down.
Conclusion
As fellow travelers in the close space of building products using AI, both SmartBank and Ubie, I was able to hear some truly tangible stories. The attitude of trying things out immediately with a working mock, how to approach the delicate area of money, and tips for designing system prompts—I think this is an episode from which anyone building an AI product can take something away.
Thank you, putchom and hasegawa!
🎙️ You can listen to the full episode here