MENG ZHANG
WEB Design


Product Design · Conversational AI · Research-Drive


EasyBotFlow


Empowering users to build AI chatbots effortlessly through a no-code, centralized platform.


Roles &
Responsibilities


  • UX Design
  • UI Design
Project Context

Aug 2022

Tools Used

Figma
Web Components

Introduction

The website "EasyBotFlow.com" specializes in AI-powered chatbot creation. It offers a no-code platform that enables users to easily design custom chatbots without coding knowledge. The site emphasizes features such as advanced customization, instant testing, data integration, and effortless embedding.

https://www.easybotflow.com


Project Specifications


EasyBotFlow elevates conversations with AI-powered chatbots. They looked for a cheerful, casual vibe in a tech style that would reflect the personality of their product, making it easier to support customers through AI-powered technology. So we adopted a humanistic technological style, using a colorful palette with blue as the primary color. While designing the pages, we paid more attention to user-friendliness without losing professionalism.

We successfully shipped the feature in September 2022. There's certainly a lot that could be improved. We believe in learning and iterating by shipping often and early.

I'm excited to be a part of this journey and make an impact on the EasyBotFlow community.





Design  Overview 

Main page

There are a total of 6 parts in the layout design of the homepage.

Top Navigation Bar:
  • It's clean and straightforward, offering easy navigation through the site. The contrast between the background and the text ensures readability, and the call-to-action button ("Start Building Now") is prominent.

Hero Section:
  • This area features a large, bold headline "Elevate Conversations with AI-Powered Chatbots" that clearly states the value proposition. It's paired with a subheadline that adds more context. A large, eye-catching image of the product interface gives an immediate visual understanding of the product offered. The use of contrasting colors here draws attention to the "Start Building Now" button, which is a clear call to action for the user.

Product Explanation Section:
  • This section briefly explains the product's purpose and its benefits, using icons and short descriptions for quick scanning. The "Try it out" button invites immediate interaction.

Analytics Section:
  • This part of the page highlights the analytical capabilities of the product. It is accompanied by visuals representing data analysis, which reinforces the message of understanding and enhancing user engagement.

Automation Section:
  • The automation capabilities are showcased here, suggesting a wide range of possible applications beyond just customer support.

Footer:
  • The footer contains standard elements such as contact information, social media links, and quick links to other sections of the site. It's neatly organized, ensuring users can find additional information if they need it.









Pricing & Features Page

There are a total of 4 parts in the layout design of the homepage.

Pricing Cards:
  • Three distinct pricing cards represent different service tiers - Lite, Pro, and Enterprise. The use of contrasting colors, particularly for the 'Best Value' Pro option, draws the user's eye and suggests a recommended choice. Each card details the features and prices for monthly and annual billing, with clear 'Start 14-Day Trial' buttons that encourage immediate action.

Feature Comparison Chart:
  • Below the pricing cards, there's a comparison chart that breaks down the features and support options available for each tier. This chart uses a clean, table-like structure with icons to visually represent the inclusion or exclusion of features, making it easy for users to compare at a glance.

FAQ Section:
  • At the bottom, an FAQ section with collapsible questions provides users with additional information. This is a user-friendly way to address common concerns without overwhelming the user with too much text at once.

Footer:
  • The footer includes essential links to the website's main sections, product information, and company details. Social media icons provide quick access to the brand's social platforms. The footer's color scheme is consistent with the rest of the page, maintaining a cohesive look.





Part of the page show








Reflection
  • Color Psychology in Decision-Making: 
    The use of specific colors, especially in charts and graphs, impacted how users interpreted financial data. Leveraging color psychology in visual design influenced user confidence and investment decisions.

  • Building Trust in Security Features: 
    Enhancing trust in the security of financial transactions was a key takeaway. The redesign emphasized that security measures and their presentation can significantly influence user confidence in handling digital assets.

  • Simplifying complex topics through design
    By streamlining user interfaces and enhancing user experience, this project reaffirmed the importance of user-centric design, making intricate subjects like blockchain and digital assets more approachable for everyday users.



BackNext