AI Bot

Tough Talks

Role

Product Designer & Front‑End Developer

Timeline

16 Hrs (logic, design, development, deployment)

Team

Me (client was non‑technical)

Tools

FigJam, Figma,Lovable, V0, Bolt, Replit, ASU SSO, Github, Vercel.

Scope

IA, vibe coding, integration, ASU SSO access control, deployment

Live Link

Highlights

100% of protected routes gated by ASU SSO

16 hours from brainstorming design development deployment

Embedded with the existing, non‑changeable chatbot while preserving its functionality

Scalable Design

New conversation types can be added by simply creating new hub entries.

Introduces a clear Conversations hub, FAQ & Survey.

Project Description

Tough Talks is an AI-powered role-playing bot that helps Arizona State University(ASU) users practice difficult conversations in a safe, guided environment.

fig. Client Bot Without Product Shell

When I joined, the chatbot technically worked but there was no navigation, no onboarding, no way to discover conversation types or gather feedback. Just a single chat interface floating in space.

The Challenge

The challenge was to build a complete shell around a non-changeable chatbot UI in under 48 hours. The client’s chatbot came pre-packaged with its own navigation bar and internal controls like “New Chat” and a collapsible menu.
This created an immediate conflict: if I added a traditional app shell, it would duplicate navigation elements and confuse users.

The Solution

Navigation

My solution was to separate concerns.

1

The shell would own the main navigation and structure.

2

The chat page would have its own minimal navbar, isolating the embedded chatbot and preserving its built-in controls.

Conversations

A hub listing types of conversations.

To make system scalable for New conversation types introduce conversation page for no structural rework.

Each type routes to a chat page where the existing bot is embedded.

FAQ

Central place for common questions about scope, usage, and best practices.

Survey

Enables continuous improvement without changing the bot.

Information Architecture

I started in FigJam for mapping a simple, yet scalable structure:

Building Fast With Vibe Coding

Because of the short timeline, I preferred vibe coding

I wrote below detailed prompt describing requirements and tested multiple AI dev tools like Replit, Lovable, Bolt, and v0.

“Build a public GitHub repo called tough‑talks.<br>Tech stack: Next.js 14 (App Router) with TypeScript, Tailwind CSS, React‑icons, shadcn/ui.<br>Pages & routes:• / Home – hero (H1: Mastering Tough Talks), two CTA buttons (Start Now, Learn more / FAQ), illustration placeholder.• /chat – full‑width iframe that loads BOT_IFRAME_URL env var, inside a card component with heading “Educator Conversational Role‑Play Bot”.• /faq – accordion list with four sample questions + answers.• /survey – centered text, one CTA button to SURVEY_URL env var.Navigation bar: ASU logo left, links (Home | Chat | FAQ | Survey) right, underline active link.Tailwind color palette: primary #8C1D40 (ASU maroon) and neutral grays.Add ESLint + Prettier config, Tailwind base/styles/utilities, and a README that includes local dev steps (pnpm dev).Output a complete repo I can download or push public.”

on chat page i want you to remove TodayChallenging Conversation abo...Challenging conversation about...just keep 2 buttons on that panel and i have some content to put in conversation types :Conversations with StudentsPractice how to approach a range of student-related issues; such as missed assignments, inappropriate behavior, academic dishonesty, or emotional distress. This simulation allows you to test out different tones and strategies, helping you build empathy, clarity, and confidence before the real conversation.Conversations with K-12 ParentsExplore how to navigate tough conversations with parents, whether it’s about academic performance, behavioral concerns, or differing perspectives on student needs. The bot helps you rehearse calm, constructive responses that foster collaboration and mutual respect.Conversations with ColleaguePrepare for complex workplace conversations with peers or supervisors. Whether you're resolving a conflict, offering feedback, or negotiating responsibilities, this option helps you build professional communication skills that support respectful and effective dialogue.FAQ's1. How is my data used? Is it private?Answer: The conversation you have with the bot is private and data is not shared in any way. As a good practice though, please use fictitious names in your conversation.2. What types of questions can the bot be used for?Answer: The bot can be used to practice a wide range of difficult conversations, including those with students, parents, or co-workers. Whether you're navigating a sensitive topic, giving constructive feedback, or addressing a conflict, you can choose the scenario that fits your needs. The tool is highly flexible and adaptable to your specific situation, making it useful for a variety of professional and educational contexts.3. How long will it take to complete a conversation with the bot?Answer: The conversation should last less than 15 minutes but you are free to continue the conversation as long as you see fit.4. Do I need any special training to use the bot?Answer:  No, you do not need any special training to use the bot. It’s designed to be user-friendly and accessible, even if you have no prior experience with AI or simulations.5. What guidelines does the bot use to engage in conversation with me?Answer: The bot uses the Principled Innovation framework from ASU, which draws on moral, civic, intellectual, and performance assets to guide conversations that create positive change for humanity. Rooted in psychological theories of Humanism, the bot fosters empathy, respect, and personal growth by emphasizing the inherent worth and dignity of each individual. This approach supports ethical decision-making and encourages constructive dialogue grounded in compassion and shared human values.6. What is the purpose of the bot?Answer: The bot is designed to simulate a realistic difficult conversation so you can practice how to respond effectively. By rehearsing and exploring different strategies in a safe environment, you’ll feel more prepared and confident, which will ultimately increase your chances of a successful real-life interaction.7. After I finish the bot is there anything I need to do?Answer: Yes, we’d like you to complete a short survey to share your experience. Your feedback helps us improve the bot and make it more useful for future users.8. Can the bot give me advice or make decisions for me?Answer: No, the bot does not provide advice or make decisions for you. It is designed to simulate conversations and help you explore different ways to approach difficult situations. The goal is to help you reflect, rehearse, and build confidence in your own communication skills.9. What if I make a mistake during the conversation?Answer: That’s okay! This is a safe space to learn and grow. The purpose of the simulation is to explore different approaches without any real-world consequences. You’re encouraged to try new strategies, rephrase responses, or even restart the conversation at any time.10. Can I revisit the bot to practice again later?Answer: Absolutely. You’re welcome to return and practice different types of conversations whenever you’d like. Repetition and reflection are key to building confidence and improving communication skills over time.

After experimenting, v0 produced the cleanest foundation.

I then customized the scaffolding:

1

Implemented routing logic for each page.

2

Added ASU SSO authentication gates for all protected routes.

3

Embedded the bot via secure iframe to avoid UI collisions.

4

Designed clean visuals directly in Figma and tuned them in code.

5

Finally, I created a GitHub repo and deployed to Vercel, end-to-end in just 16 hours.

Impact

In less than two days, Tough Talks transformed from a single chat page into a structured, navigable product.

My Reflection

This project was a reminder that good UX isn’t always about adding new features sometimes it’s about framing what already exists so it feels usable, scalable, and real.

By blending quick AI-assisted development with strong IA and design thinking, I turned a disconnected bot into a cohesive product experience in less than 48 hours.

Create a free website with Framer, the website builder loved by startups, designers and agencies.