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
Smarter Financial Growth
Simpler investing experience
Project Overview
The Story Behind the Work

In this project, I primarily contributed as a UI Designer and Illustrator, while also supporting key UX activities.

My UX involvement focused on shaping product flows and evaluating the experience across multiple stages; from wireframes to final designs. I conducted user interviews and gathered insights that continuously informed design iterations, allowing the product to evolve based on real user needs.

The journey is structured in four stages:

Insights Gathering → Interface Planning → Design Execution → Testing & Iteration

Each stage reflects the insights gathered, the decisions made, and the design outcomes that ultimately shaped the final product.

Hope you enjoy this ✈️

Timeline

2023 - 4 Months

Team

PM + 2 Designers + 1 Developer

Scope

User Journey Design • Interface Design • Illustration Design

Basic info
Smart Investing, Simplified

Wafra makes investing easy by guiding users step by step and creating a personalized Wallet based on their goals and finances.

Strategic Goals
The "Why" Behind the Design.
Heart icon
Help users confidently understand and adopt risk-based investing
Phone icon
Drive consistent, long-term investment behavior
Check mark
Build trust through clear and transparent portfolio visibility
Primary Focus
Design Clarity. Build Trust.

Crafting intuitive investment experiences that simplify complexity and guide confident decisions.

Target Audience
The Future of Investing

Modern retail investors in the MENA region who value simplicity, transparency, and Sharia-compliant (implied) or structured growth.

UX to UI Translation
Structure Before Style

I transformed user journeys into clear, focused interfaces, removing friction and making every step feel effortless.

Product Experience
From First Tap to Insight

Designing a seamless journey from onboarding to personalized investment insights.

Illustrations
Visual Communication

IBM Plex Sans Arabic

Evergreen Dew

#55D28C

Deep Onyx

#1A1A1A

Nautical Night

#142C3F

Digital Iris

#796CFF

Vivid Horizon

#00AAFF

Dusty Rose Glow

#EB6C6D

Results & Impact
Wrapping Up the Design Journey
Simplified Investment Onboarding Flow
I redesigned the onboarding and user journey so that first‑time investors could understand and start investing without confusion. My approach clarified each step, reduced cognitive barriers, and gave users confidence to proceed from signup to portfolio creation.
Impact Metrics:
⬆️ 50% more users finished the onboarding flow
⬇️  30% User Confusion Signals (based on usability test errors)
⬇️ 35% On average for first investment
Improved Engagement With Personalized Dashboards
I designed a personalized investment dashboard that dynamically reflected user goals, performance, and insights. Through data‑driven visualizations, users spent more time understanding their investments and exploring deeper insights.
Impact Metrics:
⬆️ 18% returning users
⬆️ 32% users clicked on deeper analytics panels
⬆️ 25% Average Session Duration
Increased Trust Through Transparency
I introduced clear visuals, progress indicators, and transparent messaging throughout the app to build user trust; especially for users unfamiliar with investing. By simplifying complex financial concepts into intuitive UI components, users felt more confident.
Impact Metrics:
⬆️ 22% in post‑survey user confidence
⬆️ 40% of users correctly explained their portfolio value
⬇️ 30% related to investment clarity
Strengthened Perceived Value & Product Adoption
I refined visual language and interaction patterns to reflect clarity, professionalism, and credibility; key drivers in financial UX. This improved overall product perception and encouraged users to trust the platform as a serious investing tool.
Impact Metrics:
👍 4.6/5 User Satisfaction (CSAT)
⬆️ 21%First‑Month Retention
Challenge faced and Lessons
Facing the Final Challenge
Traffic road sign icon

UI is Built on UX Clarity

Two paths sign icon

Good UI Takes Iteration

Return Sign Road icon

Start with an Entry Point

Balanced icon

Growth Comes from Self-Challenges

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