VIZ Chatbot Design Project

Understanding the users

How many people are using the website on daily/monthly basis and for what?

VIZ.com receives a very high volume of inquiries from visitors who are interested in various aspects of manga, anime, and Japanese pop culture. The inquiries could range from basic questions about specific titles to requests for recommendations or troubleshooting website features.
‍

To find this out I used data from various websites providing general information about the traffic on websites.

Data seems similar on different traffic tracking websites, so I can use it as my source.

Website doesn’t have a cohesive place with answers by themes. FAQ page is one huge block of text where you have to make sure that your question aligns with the verbiage they used. Based on that, I decided that Rule-Based Chatbot sprinkled with basic AI should perform best at solving the need.

Understanding the style

To have a better understanding of company's style I created a mood board with the main colors and typography VIZ uses on their website.

Website has a dynamic main page that starts with a random popular new release. However, it always has the logo of the company floating on the top right which is helpful in determining the placement for the chatbot.

Brainstorming and testing

Next step after determining the placement for the chatbot I had to make a plan that would allow me to stick to constraints and not stretch the time. Creating a flowchart served as a reminder for the following wireframing and prototyping.

After defining the chatbot's placement, I needed a plan to stay within constraints and timelines. Creating a flowchart was crucial for this. It mapped out key user interaction paths, guiding my design focus.

The flowchart clarified essential stages: greetings, suggested paths, and response pages. This structure ensured a seamless user experience. It highlighted the need for a welcoming greeting page, intuitive manual inquiry options, and clear response formats.
‍
With the flowchart in place, the next step was low-fidelity wireframing. This phase involved sketching basic layouts for each interaction point identified in the flowchart. The simplicity of lofi wireframes allowed me to focus on the overall structure and user flow without getting bogged down in details.

I tested these versions wireframes with 5 people (and two cats ฅ^•ﻌ•^ฅ that have been looking at these wireframes during me making them) and made some changes on the early stage while it was easy to incorporate.

Even though VIZ has an established brand, it doesn't have its own mascot that I could use as an assistant. I wanted to make the experience of using the chatbot as friendly as possible considering the amount people visiting the website daily.

Through a simple iteration on color and different faces I stopped on the one that uses the same color as the logo with a cute anime face.

With the feedback received (and with creating a logo for the Assistant) I began iterating on the high fidelity mockups.

Finalizing on design and Testing

(again)

Taking Feedback to Heart

Method: I created two versions of the high-fidelity mockups, each with slight variations in design and almost the same functionality. These versions were presented to a diverse group of users who interacted with both versions.
‍Interviews: In addition to A/B testing, I conducted small interviews with users to gain deeper insights into their experiences and preferences. These interviews were semi-structured, allowing users to express their thoughts freely while also addressing specific questions about the mockups.

Final Design

Learnings and Takeaways

This was my first time designing a chatbot, and while I had an initial vision of how it should look, the research and collected feedback significantly shaped the final design. The project underscored the importance of iteration and testing in the design process.
‍
Key Takeaways:
- Iteration and Feedback: Continuous iteration based on user feedback proved crucial in refining the chatbot’s functionality and interface. This process highlighted the importance of staying flexible and open to changes to meet user needs effectively.

- Cross-Platform Design Principles: Designing the chatbot with an app-like interface made it intuitive and user-friendly, emphasizing the importance of leveraging mobile app design principles even in web-based projects.

- Visual Elements: Designing a chatbot involved more than just basic interface elements. It required creating new icons, adjusting typography, and even developing new mascots to enhance user engagement and clarity.

- Business and Conversion Focus, Impact: The project reinforced that design is always about refining and maximizing both user satisfaction and business conversion. A well-designed chatbot can significantly improve user experience, making information more accessible and driving higher engagement.

Through this project, I learned that even seemingly straightforward tasks like designing a chatbot can be complex and multifaceted. It requires a thoughtful approach to every detail, ensuring the final product is not only functional but also engaging and effective in meeting business goals.

All the way up

I promise I check my email!