top of page

Design for a possible future: Facebook page chatbot

2021 Fall CCT461 Speculative Design III Course Group Project

Design a Facebook page chatbot based on a hypothetical future (5-20 years) that may ensue based on today’s emerging technologies and ongoing trends. The chatbot is the prototype of a hypothetical AI system and exists to provide information.

Chatbot link: https://www.facebook.com/Green-101198962340372/

process analysis

Technical communication

Teamwork & Collaboration

Final Reflection

Process Analysis

          For the chatbot project, my team were attached importance to the environment. In our future scenario, maintaining the environment has become a key part of society since the impacts of climate change and global warming on the environment has significantly worsened, and the Canadian government mandates new regulations to help the environment. And we decided to create a simple and user-friendly chatbot that can effectively interact with the users while providing valuable sustainability information. Overall, our chatbot “Green” aimed to help Canadian citizens to live more sustainably in the future.

Anchor 1
Screen Shot 2021-10-08 at 12.03.05 AM.png

Wang, J. (October 8, 2021). Logo for Chatbot Green Application. [Photograph].

          After brainstorming the chatbot flows with my team during the labs, we decided that our chatbot will have six main branches: “learn” (provide sustainability info), “laws” (provide laws info), “notification” (allow users to sign up for weekly waste reminders by email), “sign up” (sign up for the newsletter), “support” (provide donation link) and “feedback” (allow users to provide suggestions). And I finalized the flows with a flow sitemap and was responsible for programming the chatbot with the FlowXO.

flowchart.png

Wang, J. (October 8, 2021). Chatbot Green flow sitemap. [Photograph].

          While I was programming the Chatbot, I found it challenging to connect each branch and create an easy understanding chat path. However, after I discovered the logic behind FlowXO, I was able to design a straightforward and user-friendly chatbot by using the main trigger menu to activate the Chatbot and present a choices menu for the other six branches. With this main trigger flow, the process of chatting will be more fluent. After each branch is completed, and if the user chooses "Yes" as a response to "Ask if have more questions," it will trigger the choices menu to the users, and the Chatbot will trigger the particular flows based on the users' choices. And it will be the same for all the branches as indicated with the solid blue arrow in the flow chart image. Otherwise, the Chatbot will end the conversation. 

15.png

Wang, J. (October 9, 2021). Screenshot of Chatbot Green prototype with "yes" features. [Photograph].

16.png

Wang, J. (October 9, 2021). Screenshot of Chatbot Green prototype with "no" features. [Photograph].

5.png

Wang, J. (October 9, 2021). Screenshot of main trigger flow user interface. [Photograph].

8.png

Wang, J. (October 9, 2021). Screenshot of Chatbot Green prototype with external article link. [Photograph].

          Moreover, I was also able to consider from users' aspects. For example, when I designed the message sent in the main trigger flow, I added emojis before every choice to make the message easy to read. And I also designed to use options for users to choose from instead of typing in specific keywords. Moreover, I added a feature that the chatbot will automatically get the users' first names, which will let the users feel they are being respected. I developed the chatbot to send article links and YouTube videos in the "learn" branch as an informative chatbot. However, although the YouTube video could be sent in the test console, the problem is using Facebook messenger as our chatbot server cannot send the YouTube video directly. Therefore, I decided to send a link instead of a video. And I chose to use a screenshot of the YouTube cover with the play button as the image for the video link to notify users that this link is a video. Also, despite being an informative chatbot, I made the chatbot prototype more interactive and elaborate by adding features like a weekly reminder and sign-up newsletters. I developed a step to check whether users' input of email addresses is valid or not.

10.png

Wang, J. (October 9, 2021). Screenshot of Chatbot Green prototype with external video link. [Photograph].

9.png

Wang, J. (October 9, 2021). Screenshot of FlowXO test consolewith external video link. [Photograph].

13.png

Wang, J. (October 9, 2021). Screenshot of Chatbot Green prototype detecting email error. [Photograph].

14.png

Wang, J. (October 9, 2021). Screenshot of email sends to users. [Photograph].

          Furthermore, I was also in charge of promoting Chatbot Green’s brand identity that I designed a logo and produced the demo video. The color scheme I chose is different shades of green to represent the environment. And the video demonstrates how the Green works and highlights the main features and interactions for the Chatbot. With the screen recording of the entire Chatbot’s conversation, subtitles explain the functions along with the video and suitable background music, the video is professional and easy to understand. And I believe our group’s chatbot Green was able to act as a successful prototype for future AI in certain circumstances.

Wang, J. (October 12, 2021). Chatbot Green demo video. [Video].

Technical Communication

          You definitely do not want your audiences to be confused about what is supposed to be done next and have a poor user experience when they visit your applications. Hence, having a clear site map is very important. It helps to provide clear guidance when you design your projects. A sitemap is a hierarchical diagram that shows the application's information architecture. It provides a clear visual diagram about the relationship between pages and helps identify how different parts are linked. The three assignments I did through CCT461, a chatbot, an application and a VR website, all need a clear sitemap to help me logically organize my content and navigation. Before our team actually developed the programs, the first thing we created after brainstorming was a sitemap, and the sitemap needed to be updated regularly.

Anchor 2
export_canvas_new-board-211212_2037_edited.jpg

Wang, J. (December 12, 2021). Chatbot Green flows sitemap iteration. [Photograph].

          For example, the image “Chatbot Green flows sitemap iteration” showed the process of how I finalized the final sitemap for the Chatbot project. After each group meeting, I updated the sitemap based on our new ideas, and I finally developed the chatbot based on the version 3 sitemap, which provides a clear connection and guidance between each branch flow, which helped me understand the logic behind the chatbot. The VR project required my group to code a VR website with A-frame, and after exploring the A-frame and discussing it with my team, I finalized the website structure shown in the image “VR application study space sitemap iteration.” The sitemap provides a clear hierarchy of each site and what features it should very site have. Moreover, the “Affective app Studybuddy sitemap” demonstrates the structure for our affective app, which can help us have a clear goal that we need to build three pages with different features for the app.

export_canvas_vr-sitemap-211212_2043_edited.jpg
图片 3_edited.jpg

Wang, J. (November 9, 2021). Affective app Studybuddy sitemap. [Photograph].

Wang, J. (December 12, 2021). VR application study space sitemap iteration. [Photograph].

          To conclude, a sitemap is a powerful tool to help you organize all your contents and provide clear navigation for your applications in the early stage and needs to be updated regularly through the developing process.

Teamwork & Collaboration

          Due to online learning, our team communicated through Facebook messenger, had meetings via zoom and wrote our group design reflection reports on Google Docs. Also, we used some collaborative tools like Milanote and Whimiscal, which allowed us to record our ideas from brainstorming. Moreover, FlowXO, Thunkable and A-frame also allow us to share the updated code.

Anchor 3
Screen Shot 2021-12-07 at 3.44.55 PM.png

Wang, J. (December 7, 2021). Screenshot of our group zoom meetings. [Photograph].

Screen Shot 2021-12-11 at 2.50.06 AM.png

Wang, J. (December 11, 2021). Screenshot of some Google Docs. [Photograph].

          When we split our work, we all took responsibility for our strengths. Since I am strong with technical skills and a fast learner of new technology software, I was responsible for developing and designing the program and producing the demo video. For example, for the affective app project, my group developed an app named “Studdybuddy,” which can evaluate users’ facial expressions, offer break time advice and a timer feature to prevent them from experiencing burnout. Our goal was to promote well-being by helping students effectively manage their stress while studying. Since I am responsible for coding the app, I have the challenge of adjusting the logo on the home page. Therefore, I updated my situation in our group chat. Other members provided some suggestions quickly and helped to fix the code. Moreover, when I designed the chatbot donation branches, I met difficulty registering an account for donation since I was not in Canada. I also told my groupmates my problems in the chat, and they could help me register. Although I met some difficulties, with the help of my team members, we could develop the project successfully. Communicating with my group regularly and updating the information in the group chat helped make our group work effectively and deliver the most of what we can for all projects.

IMG_7149.PNG

Wang, J. (December 11, 2021). Screenshot of group chat 1 (adjust the logo). [Photograph].

IMG_7150.PNG

Wang, J. (December 11, 2021). Screenshot of group chat 2 (adjust the logo). [Photograph].

IMG_7147.PNG

Wang, J. (December 11, 2021). Screenshot of group chat 3 (register the account). [Photograph].

IMG_7148.PNG

Wang, J. (December 11, 2021). Screenshot of group chat 4 (register the account). [Photograph].

Final Reflection

          Throughout this term's learning, the thing I learned from design processes that impact my decisions is that we need to have a clear goal and an achievable plan (sitemap) for what should be done in our project at the very first stage. This semester, many lab assignments required us to provide a sitemap or brainstorm ideas for the projects. And I found out that my group will come up with some new ideas for every group meeting. Therefore it is important for us to be updated and ensure all the ideas are achievable and related to our final project's goal. Developing the application with a clear plan will help us stay on the right track. Moreover, I learned that we need to think more from the target audience's aspect. Designers are not users. Steve Jobs once said that "Design is not just what it looks like and feels like. Design is how it works." (Jobs, 2003). Therefore, a usability test is essential, we need to improve our applications from how it works with other people. After conducting the test, we can always receive several valuable suggestions that could make our final products more successful.

Anchor 4

          Different media and platforms may restrict our ideas and features for our products. Every time our group will have many ideas about different features in the projects, but after we actually explored and learned the software, we realized that not all the ideas are workable with this medium. For example, we designed to let our Facebook Messenger Chatbot Green send out YouTube videos to users, but with the limitation (Facebook Messenger does not support sending out YouTube video, only video uploaded can be sent directly), we can only change our plan to send out a video link. Moreover, both chatbot and affective app are projects based on mobile phones, which constraint my way of producing the demo video. Therefore, these two demo videos are very similar. The VR project is based on a computer website, and I have more freedom to produce the video creatively.

          The consideration of speculative design impacting my conventional design processes is that it helps me consider more about what we need in future life. To think speculatively allows me to think big and consider more implications of possible futures. However, conventional design always focuses on solving a small issue. By designing applications for future scenarios, I can think outside the box, and I do not need to consider the limitations we have today, such as regulations, cultures, etc. Overall, experiencing speculative design through this semester provided me with an opportunity to use my imagination and develop possible prototypes for future life.

Wang, J. (November 9, 2021). Affective app StudyBuddy demo video. [Video].

Wang, J. (December 9, 2021). VR project demo video. [Video].

Jobs, S. (2003, January). Steve Jobs: "Design is how it works". Stewart Mader. Retrieved October 2, 2021, from https://www.stewartmader.com/steve-jobs-design-is-how-it-works/

bottom of page