III Gallery

Outcome

My personal assistant embedded in my website that navigates various visitors to different contents of my works & experiences.

Move up Delete Move down

Key problem to solve:

I'm having various different works in my portfolio. People are visiting my website looking for totally different things and obviously they won’t spend much time there. it is hard to make all the content well organized.

Move up Delete Move down

Intention:

The bot would be an additional “navigation” on my website. Once there is a visitor, the bot will initiate a conversation and get to know the visitor’s aim & background in a short casual chat, then provide precise information about me based on that. During the chat, it will either link the visitor to a page of my work at some point of the conversation or keep talking with him and sending out fragment information of my skills by text and images. Besides talking about me and my work, my bot would also be willing to hear from the visitors, such as their positions, their interests, their comments on my work, and other random feedback. To make it more efficient, the button to call the bot will be always floating there so that visitors could provide instant comments whenever they want.

Move up Delete Move down

MEET MY PORTFOLIO ASSISTANT

Move up Delete Move down

🤖️ Personality

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Insights from 'Wizard Of Oz'

- Visitors would be more likely to go directly to my projects at the beginning.

- Should be clear instructions on what the bot is expecting the visitors to text back in the conversation, or, at least some hints.

- Visitors do not want to reveal too much about themselves.

Move up Delete Move down

Final Workflow

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Functionality Matrix

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Technical Implementation

Move up Delete Move down

The first version was using "case...when..." structure. The bot could easily mess up the conversation with that for there are similar answers in the process and a lot of follow-up questions. I found it quite essential to make the bot know about the context.

In the final version of the code, there are 4 "topics" of the conversation: projects, skills, resume, and help. The name of the topics is stored in session["block"], and the process in each "topic" is stored in session["next_intent"], so that my assistant would know which question the visitor replies for.

Move up Delete Move down

require 'sinatra'
require "sinatra/reloader" if development?
require 'twilio-ruby'

enable :sessions

configure :development do
  require 'dotenv'
  Dotenv.load
end

def send_message(mess, num)
  client =  Twilio::REST::Client.new ENV["TWILIO_ACCOUNT_SID"], ENV["TWILIO_AUTH_TOKEN"]
  client.api.account.messages.create(
      from: ENV["TWILIO_FROM"],
      to: num,
      body: mess
  )
end


# Project
def project_block(body, sender)
  if body == 0
    messages = ["Sure! I’m excited to talk about those works!"]
    send_message(messages.sample(), sender)
    messages = ["She was learning industrial design👩‍🎓 in the last 5 years, and also has a touch on UX design, service design, IoT design and so on."]
    send_message(messages.sample(), sender)
    messages = ["Do you have any preference?"]
    send_message(messages.sample(), sender)
    session["next_step"] = "project_link"

# Project --> what kind of project? (-->recommended? -->ID? --> UX?)
elsif session["next_step"] == "project_link"
    if body.include? "id" or body.include? "industrial design"
      messages = ["Good choice! She has a great passion for that. "]
      send_message(messages.sample(), sender)
      sleep 1
      messages = ["🔍..."]
      send_message(messages.sample(), sender)
      messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
      send_message(messages.sample(), sender)
      # need further revision (
    elsif body.include? "research"
      messages = ["Good choice! She has a great passion for that. "]
      send_message(messages.sample(), sender)
      sleep 1
      messages = ["🔍..."]
      send_message(messages.sample(), sender)
      messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
      send_message(messages.sample(), sender)
    elsif body.include? "UX" or body.include? "experience"
      messages = ["Good choice! She has a great passion for that. "]
      send_message(messages.sample(), sender)
      sleep 1
      messages = ["🔍..."]
      send_message(messages.sample(), sender)
      messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
      send_message(messages.sample(), sender)
    elsif body.include? "recent"
      messages = ["Good choice! She has a great passion for that. "]
      send_message(messages.sample(), sender)
      sleep 1
      messages = ["🔍..."]
      send_message(messages.sample(), sender)
      messages = ["You would love this: https://wangwanqiao.me/mendes-robot"]
      send_message(messages.sample(), sender)

    else
      messages = ["No problem! Let me find my favorite one for you👀"]
      send_message(messages.sample(), sender)
        sleep(1)
      messages = ["Here it is！ https://wangwanqiao.me/greenexchanger"]
      send_message(messages.sample(), sender)
      messages = ["This one is a IPD project last Winter, which could reflect her comprehensive skills. "]
      send_message(messages.sample(), sender)
    end
    # )
    sleep(3)
    messages = ["Enjoy the time😊! Feel free to come back and leave a comment"]
    send_message(messages.sample(), sender)
    session["next_step"] = "comment"

# Project --> what kind of project? --> leave comments
elsif session["next_step"] == "comment"
    messages = ["Gotcha!", "Love to hear that!","Great!"]
    send_message(messages.sample(), sender)
    messages = ["Anything else are you interested about her?"]
    send_message(messages.sample(), sender)
    session["block"] = "transition"
  end
end


# Skill
def skill_block(body, sender)
  if body == 0
    messages = ["Sure"]
    send_message(messages.sample(), sender)
    messages = ["She mostly focuses on Human-Centered-Design"]
    send_message(messages.sample(), sender)
    messages = ["Any specific skill or software?"]
    send_message(messages.sample(), sender)
    session["next_step"] = "specific"

# Skill --> What kind of skill?
  elsif session["next_step"] == "specific"
    if body.include? "yes"
      messages = ["which one do you want to know first?"]
      send_message(messages.sample(), sender)
      return
    elsif body.include? "no"
      session["skill"] = "ux"
      messages = ["She has skills of wireframing, storyboarding, Usability Test, and so on."]
      send_message(messages.sample(), sender)
      sleep(3)
      messages = ["Want to check the project that would best show this skill?"]
      send_message(messages.sample(), sender)
      session["next_step"] = "check_project"
    else
      if body.include? "id" or body.include? "..."
        session["skill"] = "id"
        messages = ["skill 1"]
        send_message(messages.sample(), sender)
        delay(3)
        messages = ["Want to check the project that would best show this skill?"]
        send_message(messages.sample(), sender)
        session["next_step"] = "check_project"
      elsif body.include? "ux"
        session["skill"] = "ux"
        messages = ["skill 2"]
        send_message(messages.sample(), sender)
        delay(3)
        messages = ["Want to check the project that would best show this skill?"]
        send_message(messages.sample(), sender)
        session["next_step"] = "check_project"
      elsif body.include? "research"
        session["skill"] = "research"
        messages = ["Good one! That is quite essential in her design work. "]
        send_message(messages.sample(), sender)
        messages = ["She conducted in-depth interviews, shadowing, co-design sessions to learn more about the users in her projects. "]
        send_message(messages.sample(), sender)
        messages = ["Also, she was exposed to some new method such as data-enable design in her intern experience."]
        send_message(messages.sample(), sender)
        delay(3)
        messages = ["Want to check the project that would best show this skill?"]
        send_message(messages.sample(), sender)
        session["next_step"] = "check_project"
      else
        messages = ["still learning that..."]
        send_message(messages.sample(), sender)
        messages = ["Maybe...try another one?"]
        send_message(messages.sample(), sender)
      end

    end

# Skill --> What kind of skill? --> check project?
  elsif session["next_step"] == "check_project"
    if body.include? "yes"
      send_project(session["skill"], sender)
      sleep(3)
      messages = ["enjoy the time, feel free to come back and leave a comment"]
      send_message(messages.sample(), sender)
      session["block"] = "project"
      session["next_step"] = "comment"
    elsif body.include? "no"
      messages = ["what else are you interested about her?"]
      send_message(messages.sample(), sender)
      session["block"] = "transition"
    else
      help_block(sender)
    end
  end
end


def resume_block(body, sender)
  if body == 0
    messages = ["Emmmm🤔"]
    send_message(messages.sample(), sender)
    sleep (1)
    messages = ["Not sure if I could help you see that in her portfolio."]
    send_message(messages.sample(), sender)
    messages = ["Maybe have a quick scan on her resume?"]
    send_message(messages.sample(), sender)
    link = "https://wangwanqiao.me/resume"
    send_message(link, sender)
    sleep(3)
    messages = ["does it help?"]
    send_message(messages.sample(), sender)
    session["next_step"] = "helpful"

  elsif session["next_step"] == "helpful"
    if body.include? "yes" or body.include? "y"
      messages = ["do you want to know sth. else about the project or skills?"]
      send_message(messages.sample(), sender)
      session["block"] = "greeting"
    elsif body.include? "no"
      messages = ["Please leave a message here! She will check it out and get better with your comment!"]
      send_message(messages.sample(), sender)
      messages = ["Or you could directly email her to wanqiaow@andrew.cmu.edu"]
      send_message(messages.sample(), sender)
      session["next_step"] = "email"
    else
      help_block(sender)
    end
  elsif session["next_step"] == "email"
    messages = ["Do you want to leave your address here. That would be a great connection!"]
    send_message(messages.sample(), sender)
    session["next_step"] = "check_email"
  elsif session["next_step"] == "check_email"
    if body.include? "@"
      messages = ["got that! She will soon reply! Enjoy your time here☕"]
      send_message(messages.sample(), sender)
    end

    messages = ["Glad talk to you! Enjoy your time here☕"]
    send_message(messages.sample(), sender)
    session["block"] = "terminated"
  end
end

def help_block(sender)
  messages = ["sorry i don't know what you're talking about"]
  send_message(messages.sample(), sender)
end

get "/" do
  "hi, there!"
end

get "/signup/:first_name/:number" do
  session["first_name"] = params["first_name"]
  session["number"] = params["number"]
  session["block"] = "greeting"

  client = Twilio::REST::Client.new ENV["TWILIO_ACCOUNT_SID"], ENV["TWILIO_AUTH_TOKEN"]
  # TODO: message
  # message = "Hi " + params[:first_name] + greetings.sample() + ", welcome to Wanqiao's portfolio! Thanks to your visit! What do you want to take a look first? project or skill?"
  message = "Hi👋, welcome to Wanqiao’s portfolio! "
  client.api.account.messages.create(
    from: ENV["TWILIO_FROM"],
    to: params[:number],
    body: message
  )

  message = "I’m your assistant here. I could help you getting to know more about her projects📂, work experience📋 and professional skills⚒."
  send_message(message, session["number"])
  message = "What do you want to know more about first?"
  send_message(message, session["number"])
end

get "/sms/incoming" do
  body = params[:Body] || ""
  sender = params[:From] || ""
  body = body.downcase.strip

  session["block"] ||= "greeting"

  if session["block"] == "terminated"
    session["block"] = "greeting"
  end


  case session["block"]
  when "greeting"

    if body.include? "project" or body.include? "..."
      session["block"] = "project"
      project_block(0, sender)

    elsif body.include? "skill"
      session["block"] = "skill"
      skill_block(0, sender)

    elsif body.include? "yes"
      messages = ["project or skill?"]
      send_message(messages.sample(), sender)

    elsif body.include? "no"
      messages = ["Hope it is helpful!🙌"]
      send_message(messages.sample(), sender)
      session["block"] = "resume"
      session["next_step"] = "email"
    else
      send_message("body error", sender)
      help_block(sender)
    end

  when "project"
    project_block(body, sender)

  when "skill"
    skill_block(body, sender)

# What else?
  when "transition"
    if body.include? "project" or body.include? "..."
      session["block"] = "project"
      project_block(0, sender)
    elsif body.include? "skill"
      session["block"] = "skill"
      skill_block(0, sender)
    elsif body.include? "no"
      messages = ["glad to talk to you"]
      send_message(messages.sample(), sender)
      session["block"] = "terminated"
    else
      session["block"] = "resume"
      resume_block(0, sender)
    end

  when "resume"
    resume_block(body, sender)

  when "terminated"
    messages = ["please sign in again to restart"]
    send_message(messages.sample(), sender)

  else
    help_block(sender)
  end
end

Show Advanced Options

Move up Delete Move down

Final Demonstration

Move up Delete Move down

Show Advanced Options

Move up Delete Move down

Next Steps

1. Tag all my projects properly

The main features of my portfolio bot are showing my projects and skills. To match each project/skill to what the visitor texts to the bot, and reply with the most related link to them is the key to successfully sell me to the potential recruiters.

2. Fail-safe response for each step

To make the conversation more natural, I'm using more human-like sentences instead of giving them multiple choices directly. It could happen when the user responds something unexpected, so there should be a fail-safe in each step to provide a clearer instruction on what the bot could help with.

3. Integrate the bot to my website

Obviously this is a bot that is supposed to be seen on my website instead of your message inbox. I'm planning to integrate it with my portfolio in the way of front-end coding or using Google's DialogueFlow

You can upload files of up to 20MB using this form.

Add Rich Text Add Code Block Add Embeddable Content

Outcome

Key problem to solve:

Intention:

MEET MY PORTFOLIO ASSISTANT

🤖️ Personality

Attribution

Insights from 'Wizard Of Oz'

Final Workflow

Attribution

Functionality Matrix

Attribution

Technical Implementation

Attribution

Final Demonstration

Attribution

Next Steps