> App AI Chatbot Prototypes

Lucky

Abstract:
Lucky AI Chatbot is an interactive, real-time, digital chatbot. The core concept of this platform is to help people eliminate loneliness.
Goal:
To design a new chatbot application.

Duration: 6 Weeks

Role

Product Designer, Developer,
UX Researcher

Methods

Web Development,
Secondary Research, Usability Test

Tools

Sketches, Figma, JavaScript

Overview

Lucky is a digital chatbot designed to combat the pervasive feeling of loneliness by fostering interpersonal connections and a sense of belonging.

The chatbot’s core features aim to provide users with:

  • An interactive, real-time platform inspired by “Maslow’s Hierarchy of Needs,” emphasizing the importance of love, belongingness, and interpersonal relationships.
  • A user experience that draws from the developer’s personal experiences, ensuring genuine empathy and understanding.
  • A unique design based on two pillars: “humor” and “interactivity,” and offering a refreshing and engaging interface.

My Role

As the Lead Developer and Researcher for the project

I handled every stage of the process, which included:

    • Conceptualization based on personal experiences.
    • Mascot design and UI inspiration.
    • Simplified user interface creation.
    • Coding using Javascript.
    • Continuous design refinement.

> Research

Primary research

In order to better understand the social challenges and communication preferences of international students and single young professionals in Boston, we carried out 45 electronic questionnaires and 10 online interviews, encompassing 28 graduate students and 27 young workers. Our survey collected data on their experiences of loneliness, usage of digital communication platforms, and adaptation to living abroad. The interviews provided a deeper dive into their personal experiences, the obstacles they encounter, and how a chatbot named ‘Lucky’ could potentially make a positive impact on their lives.”

Graduate Students

%

Felt loneliness at least once a week

Young Professionals

%

Sought digital means for communication

Secondary Research

1. Clumsy Ninja’s Interface Design:

    • Key Takeaway: The playful and interactive design of Clumsy Ninja emphasizes user engagement. The character animations are responsive to user actions, creating a sense of connection.
    • Application to Lucky: Integrate responsive mascot animations that react to user inputs, enhancing the interactive experience.

2. Repika’s Chat Interface:

    • Key Takeaway: Repika offers a clean and straightforward chat interface, allowing users to focus on the conversation. The use of avatars adds a personal touch.
    • Application to Lucky: Design a clutter-free chat interface with a prominent display of the “Lucky” mascot to foster a sense of companionship.

3. Talking Tom Cat’s Interactive Character Design:

    • Key Takeaway: Talking Tom Cat is renowned for its highly interactive character that mimics user speech and responds to touch. This level of interactivity creates a playful and engaging user experience.
    • Application to Lucky: Integrate a higher degree of interactivity where “Lucky” can mimic or respond to user inputs in a playful manner. This can include animations or sound effects that react to user interactions, making the chatbot experience more lively and engaging.

 

Lucky Chatbot Information Architecture Flowchart:

  1. Development Flow Chart
  2. User Input: Capturing user messages and interactions.
  3. Data Collection: Gathering user data for personalized responses.
  4. Importing: Integrating external data or resources.
  5. Data Deployment: Processing and determining the appropriate response.
  6. Giving Output: Displaying the chatbot’s response to the user.
  7. User Feedback: Collecting feedback for continuous improvement.

Mascot: Lucky

The creation of the mascot “Lucky” began with a clear conceptualization, drawing inspiration from personal experiences and the chatbot’s objective to combat loneliness.

Initial hand-drawn sketches were refined based on feedback, leading to digital designs crafted using tools like Cinema 4D. These designs underwent animation and interactivity enhancements, with “Lucky” being made responsive to user interactions. The mascot was then strategically positioned within the chat interface, with its animation enlarged for prominence. User testing sessions were conducted to gather feedback on “Lucky’s” appeal and functionality, leading to further refinements.

The finalized mascot was then optimized for various devices and integrated seamlessly into the chatbot platform, ensuring it resonated with users and enhanced their experience.

Features & Goals

1. A dynamic mascot that reacts to user  interactions with playful animations and mimicry.
2. An intuitive chat interface with quick reply options and prompts.
3. A collection of articles and tips related to loneliness, well-being, and tips for international students.
4. Tailored chat sessions based on past interactions and user preferences.
5. Analyze user emotions in real time to tailor chatbot responses.

Prototype

In the design process, I prioritized simplifying the platform interface. Using Figma to craft the user interface, I strategically positioned a simple icon at the bottom, amplifying the visibility and impact of the “Lucky” animation.

User Testing

Participants found the “Lucky” chatbot interface engaging and user-friendly.

  • The chat initiation and interaction process was smooth, with positive feedback on quick reply options and intuitive prompts.
  • The “Lucky” mascot animation, especially its playful mimicry, was a standout feature, receiving widespread appreciation for its uniqueness.
  • Detailed resources on loneliness and well-being, accessible through chatbot, were deemed valuable.
  • The chatbot’s responsiveness and ability to understand user emotions contributed to a comforting experience.
  • Suggestions for improvement included real-time sentiment analysis to tailor responses better and personalized chat experiences based on past interactions.

Overall, the “Lucky” chatbot garnered positive feedback for its innovative approach and features, with user insights shaping potential refinements and additions.

Key Takeaways

The final version of the “Lucky” chatbot was well-received by the Dynamic Media Institute stakeholders, and they intend to utilize the design and research outcomes to shape future digital companionship solutions.

Takeaways:

    1. User-Centric Design: The “Lucky” chatbot, with its emphasis on combating loneliness, resonated with users, indicating a successful alignment with the project’s objectives.
    2. Innovative Mascot Integration: The inclusion of the “Lucky” mascot, with its playful animations and interactivity, was a standout feature, showcasing the project’s innovative approach.

Next Steps:

    1. Iterative Refinement: Continuously enhance the chatbot based on user interactions and feedback.
    2. Engage with the Community: Gather insights and feedback from potential users, especially international students and young professionals.
    3. Utilize ChatGPT for Refinement: Feature: Implement the advanced capabilities of “ChatGPT” for chatbot optimization. Goal: Using ChatGpt API to refine chatbot responses, enhance natural language processing capabilities, and ensure a more human-like user interaction experience.

GitHub Pages Demo

Xian-Hao (Harry) Liao
UX Designer

As a UX designer with experience in visual design and strategy, I thrive in collaborative environments where I can contribute my skills and resilience.

➣ Design Generalist / Xian-Hao Liao Design
➣ Master of Fine Arts / MassArt
➣ Social Research Investigator / MIT

> Contact Info

(857) 693-8315

xliao1737@massart.edu

621 Huntington Ave, Boston, MA 02115

> Send a Message