Close Button
Startup User
Decision Maker
Developer User
Sarah Waleed

Founder of an EdTech startup

🗓️

34 years old

👩‍💻

Tech Fluency: Low to Moderate

🇦🇪

Dubai, UAE

🎯 Goals:

  • Automate internal support and employee onboarding.

  • Maintain accurate, up-to-date responses by training the chatbot on internal documents and monitoring unanswered questions.

  • Provide 24/7 access to company knowledge and policies.

❌ Pain Points:

  • Difficulty setting up bots without technical skills.

  • Lack of content control, approval workflows, and version tracking.

  • Concerns around security, access permissions, and compliance.

🧩 Needs:

  • A simple onboarding setup (wizard-style) to upload and configure knowledge sources..

  • Pre-built templates for common use cases like FAQs or course assistants.

  • Clear pricing explanation and support content.

*This is a placeholder image, not an actual user
Mohammad Faisal

Product Manager

🗓️

41 years old

👩‍💻

Tech Fluency: High

🇩🇪

Berlin, Germany

🎯 Goals:

  • Automate onboarding and reduce support tickets

  • Train chatbot on product documentation

  • Monitor unanswered questions, improve over time

❌ Pain Points:

  • Frustrated with lack of analytics or control

  • Wants version history of knowledge base sync

  • Seeks compliance clarity (GDPR, data privacy)

🧩 Needs:

  • Bot performance insights (charts, query logs)

  • Integration with internal docs & analytics tools

  • Admin controls and bot versioning

*This is a placeholder image, not an actual user
Raed Abduulrahman

Developer

🗓️

27 years old

👩‍💻

Tech Fluency: Advance

🇸🇦

Riyadh, Saudi Arabia

🎯 Goals:

  • Embed bots into Webflow, WordPress, or React apps

  • Offer AI chatbot as a value-add to his services

  • Monitor unanswered questions, improve over time

❌ Pain Points:

  • Frustrated with lack of analytics or control

  • Wants version history of knowledge base sync

  • Seeks compliance clarity (GDPR, data privacy)

🧩 Needs:

  • Easy-to-use API access and clear docs

  • Manage multiple chat bots for different clients

  • Simple way to customize embed code

*This is a placeholder image, not an actual user
Close Button
The Win
Psychology
Key UX
Impact
Why This Is a Winner Solution?
Removes Design Bottleneck 🚀

While most platforms force fixed designs or developer-heavy customization, we enable brand-perfect chat styling in minutes, no CSS involved.

Psychological Ownership 💎

When users customize appearance, they're emotionally invested. "I built this" creates stickiness, they're less likely to churn because the chatbot feels uniquely theirs, not a generic template.

Split-Screen Validation 👁️

Left side = controls, right side = real-time preview. Users see results immediately, eliminating the anxiety of "what will this look like?" The feedback loop is instant: change color → see it → love it or change again.

Progressive Complexity📊

  • Simple: Upload picture, type name (basics)

  • Medium: Customize heading/subheading (messaging)

  • Advanced: Fine-tune button colors, outlines, themes (precision)

How can user psychology drive better outcomes?
🎯 Control Illusion (In a Good Way)

Users feel they have infinite control even within your structured system. The "Type here" placeholders guide them, but they feel creative freedom. It's controlled chaos that always produces good results.

🔄 Instant Gratification

Every edit shows immediately in the preview. Dopamine hit from "I changed something → I see it now" keeps users engaged and exploring features they might otherwise ignore.

🛡️ Fear Reduction

"Reset all information" button with palette icon screams "don't worry, you can't permanently break this." Users experiment more when they know mistakes are reversible.

📱 Mental Model Alignment

The interface mimics what users expect from design tools (Canva, Figma). Upload image icon, color pickers, text fields: all familiar patterns that require zero learning curve.

Key UX Details That Make It Exceptional
Warning Banner⚠️

Warning Banner sets expectations immediately. transparency prevents disappointment.

Emoji Guidance👋

Use emojis as casual teaching, it's friendly instructions, not intimidating forms.

Sync Option🔗

Smart default for users who want consistency but don't want to set both colors manually. Reduces decisions for simple cases, still allows override for advanced users.

Stepped Progress1️⃣2️⃣3️⃣

Top tabs show steps, users know this is step 1 of 3, reducing overwhelm.

Business Impact
Reduces Time-to-Launch⚡

Without customization, users might delay launch waiting for "the right look." With it, they launch in the same session, visual polish happens during setup, not as a blocker.

Increases Perceived Value💰

Customization feels premium. Even if backend AI is identical to competitors, "I made this look exactly like my brand" creates perception of higher value, justifying the pricing.

Enables Upsell Path📈

Free tier could have limited customization (2 colors only), paid tier unlocks full palette. Users who care about branding will upgrade immediately.

Close Button
Interface design
Agent Testing
End of the Journey
Info Collector

Before Updates:

The item flow was linear but confusing, users had to navigate back to previous screens to complete or customize items, disrupting the experience.

After Updates:

The new design streamlines the flow: all items on a screen are completed before moving forward, with clear completion feedback. Inconsistencies, such as the top bar behavior across pages, were corrected for a smoother and more intuitive experience.

Before Updates:

Agent testing was designed as a safe environment where users could test the agent’s responses after adding knowledge.

After Updates:

We discovered that users needed more than a chat simulator. They wanted to compare responses, improve answers, and simulate conversations, each supported by dedicated features, allowing users to test the agent before launch.

Before Updates:

Previously, the journey concluded on the final page (Deploy & Share), where users could either deploy immediately or return to the Home page. The experience lacked a clear sense of closure, leaving users without the satisfaction of completing the journey.

After Updates:

The new design introduces a final stage, serving as the ‘finish line’ in a gamified experience. It informs users of the outcome for the agent they created and offers them options to complete the journey in their preferred way, keeping them engaged throughout.

Before Updates:

When we added the Collect Leads, we placed the Leads after creating the Agent in the modification phase. This confused users when managing place exceptions, and most were unaware the feature even existed.

After Updates:

We renamed it to Info Collector to make its purpose clear and redesigned the layout for a simpler, more user-friendly experience.

About Sayyar

icon to Know more about section

About Sayyar

Close button

Paragraph 3

Previous ButtonNext Button
Design-Driven Sticker Store
Turning ideas into collectible stickers
Project Overview
The Story Behind the Work

In this project, I acted as Founder, Art Director, and Product Design Lead, leading the product from concept to launch. The work involved defining the core problem, shaping the product strategy, and designing the full experience while validating decisions through research and testing.

The journey is structured in four stages:

Problem Definition → Strategy → Execution → Validation

Each stage highlights the insights, decisions, and design outcomes that shaped the final product.

Have fun along the way ✈️

Timeline

2024/25 - 18 Months

Team

PM + 1 Content Creator

Scope

Product Strategy • Brand Direction • UX/UI Design

About Matboaa
Not Just Something You Buy; Something You Live
Defining the issue
Can Stickers Have a Special Meaning?
Heart icon
Most Stickers feels like it’s made for everyone, which makes it feel like it’s made for no one.
Phone icon
Stickers is consumed quickly and forgotten just as fast.
Check mark
Users struggle to find simple, local ways to express their identity.
Understanding & Defining
A Name That Shapes Experience

We defined Matbou based on a dual meaning in Arabic: ‘printed’ and ‘habitual’.This allowed us to position the brand as phrases people repeat, not just stickers they use.

Target Audience
Designing for Expression
16 - 30

Target Age Group

Self-expressive

Behavior

represents Users

Mindset

Users insights
Words That Represent, Not Guide
Behavior Fit
What Makes Stickers Speak to Users?

We chose stickers because they naturally fit into users’ daily environments and allow effortless self-expression.

Market Clarity
What Makes Stickers Speak to Users?

Serious

Playful

Generic

Localized

Relatable Expression

Inspirational Advice

Static Content

Habitual / Repeatable

Decorative Design

Meaningful Design

Concept Origin
From Insight to Design
Concept Origin
From Insight to Design
Familiarity

Using expressions that feel known and natural to the user.

Arabic Language

Using local language and tone to reflect in communication.

Light Motivation

Delivering subtle encouragement without pressure or direct advice.

Playfulness

Keeping the tone light and human through simple, enjoyable elements.

Illustrations
Visual Communication
Icons & Visual Language
The Letter That Speaks the Brand

We created simple, repeatable elements to support recognition.

Brando Arabic

Typography & Logo
The Face of the Brand

We designed bold typography to ensure clarity and strong presence.

Outcome
What we built

I believe that after this long journey, we’ve built a scalable brand system that connects customers, aligns with audience behavior, and creates a cohesive visual identity; all within one consistent experience.

Impact
Why it matters
plus icon
Challenge faced and Lessons
Facing the Final Challenge
Traffic road sign icon

Leading Through People

Two paths sign icon

Reconnecting with Arabic Heritage

Return Sign Road icon

Finishing What You Start

Balanced icon

Experience at the Core

ibtikar logo icon
Innovation Center

Everything begins with an idea.

View Project
Home
Home page
About
UX/UI
Visuals
Contact
Thoughts
Contact Page
Social
Social icon