Thierry

Zheng

Design portfolio

Hahow is transitioning from independent course creation to a platform model. The team is leveraging generative AI to improve the learning journey by addressing issues such as consumers’ pre-purchasing uncertainty and interruptions in learning progress.

Product Strategy

UI Design

UX Design

2023/06 - 2024/12

CLIENT OVERVIEW

CLIENT

DATE

ROLE

generative AI

learning assistant,

improve online

learning experience

The Story

Hahow is transitioning from creating its own content to a platform model, hosting a diverse range of content providers. This strategy aims to enhance course variety, increase customer value, and strengthen the connection between consumers and the brand. However, this approach also complicates the course selection process for consumers. According to Hick’s Law, “the more choices there are, the longer it takes for users to make a decision.”

2023 is known as the year of Generative AI. This technology not only impacts various professions but also affects the online education industry . Instead of resisting this change, we decided to leverage Generative AI to solve existing problems users face with their learning experience. Therefore, we proposed integrating AI into the Hahow platform to address user concerns at different stages, from pre-purchase to learning.

the Challenge

1

What Problems Does Integrating Generative AI Aim to Solve?

Many features already have existing solutions. For instance, we can recommend suitable courses based on users’ browsing history, items in their shopping cart, or favorite courses using other algorithms. Additionally, our existing customer service can resolve some of the users’ pre-purchase concerns. So, what do we aim to achieve by integrating Generative AI?

Therefore, we revisited the user learning decision process:

Information Browsing

Information Search

Building Knowledge

Frameworks

Choosing

Entry Points

Building Knowledge Networks

Achieving Incremental Results

Awareness

Seeing more practical changes brought by Hahow encourages users to take further action.

Forming

Goals

Cannot be observed from external behavior

Education+Engagement

Providing suitable entry points and directions for users to learn.

Conversion + Revenue + Recurrence

Creating opportunities for quick and effective learning paths and learning outcomes.
Providing users with the closest learning entry points to their existing knowledge systems.

A

Information Exploration Stage: Reducing Uncertainty About Course Content Before Purchase

Although online courses provide outlines and preview videos, the no-refund policy after purchase leads 70%-80% of consumers to check “pre-purchase Q&A” and “course reviews” to see if people with similar contexts and levels have bought the course. They also browse social media platforms or search for related course reviews online to avoid purchasing content that is freely available online or the knowledge they already know.


Difficulty in Choosing Among Too Many Courses

Moreover, the Hahow platform might offer numerous courses in the same field, making it hard for users to choose the right one and extending their decision-making time. At this point, having a “learning consultant” to analyze the user’s background and learning goals might boost their confidence in purchasing.

Learning and Conversion Stage: Reducing the Possibility of Student Dropout
When users purchase courses and watch course videos, we categorize them as “active learners.” These learners should be watching videos on the platform and interacting with the instructors
(e.g., asking questions, submitting assignments). Good instructor feedback and interaction help maintain active learning. If learners encounter unresponsive instructors, ungraded assignments, or unsatisfactory answers, they may turn to the platform for resolution. If the platform’s handling is unsatisfactory, learners may request refunds or stop using the platform, becoming “lost learners.”

The learning experience heavily relies on the participation of instructors or platform staff, which has always been a concern for Hahow’s overall experience.

Thus, we are thinking:
How can AI “avoid the feeling of loneliness during learning”?
How can it provide “extended” knowledge?

B

2

How to Integrate Generative AI into Existing Products?

After designing the first MVP, we discovered that user engagement was not as expected. Besides needing to tweak the model, internal feedback also included questions like, “We already have ChatGPT, why do we need another one for Hahow?”

Our initial idea was to integrate Generative AI with Intercom to make the AI assistant as the only assistant users need on Hahow. Users could inquire about course-related information or transfer existing customer service issues to the AI. However, during the pre-launch phase, we identified several issues regarding implementation and effectiveness. Ultimately, we decided to abandon this idea due to the following reasons:

User Engagement: Users are still unfamiliar with the AI assistant. Making significant changes to the existing customer service process could create more issues than benefits.

MVP Usage Data: According to collected data, Hahowise currently only accounts for 0.12% of the total site traffic. Based on user feedback, most interactions were trial-based or exploratory without clear objectives, making it difficult to improve user experience or address pre-purchase issues.

Although we anticipated that Generative AI could solve many problems, the team, and even the company, were not very clear about why we needed to implement AI.
According to data from the Taiwan Network Information Center, “As of July 2023, only 25.7% of Taiwanese had used ChatGPT in the past three months, but only 4.6% of that 25% reported using it ‘frequently’ or ‘always.” In this context, the team became more conservative about investing resources in AI. After numerous discussions, we decided to start with the following goal:

Focus on “Pre-Purchase Exploration” :
Use Hahowise to recommend courses, reducing users’ uncertainty before purchasing.

Naming and Visual Role

Initially, the team explored many names, hoping to use something that sounded like “Hahow” (derived from the Taiwanese word for “school” ha'k-hāu). We also considered other names that felt wiser and more technologically advanced. However, we ultimately decided on “Hahowise,” as it better connects with the brand and is easier to remember and pronounce.
During the 2023 rebrand, Hahow already defined visual elements related to existing characters and icons, with the theme of “exploring unknown star realms to convey knowledge in various unknown domains.” In this context, I established several visual definitions:

No Concrete Imagery

Neutral Tone

Dynamic Effects

Replacing Intercom chatbot in the Future

We referred to the visual models of existing voice assistants and identified some that might help us to shape the visual identity of Hahowise. The visual designer ultimately proposed five design options, and the final design we selected primarily considering its usability on the Hahow platform and its ability to extend the brand story (exploration of the stars).

Siri

Apple

Copilot

Microsoft

Alexa

Amazon

Assistant

Google

Icon Reference

We analyzed various AI assistant products about how they design the avatar, and then identified potential elements for Hahowise’s persona from existing Hahow illustrations system.

Hahow’s existing brand illustration system combines elements like Froggy, characters, and planets to create a diverse, rich, and exploratory learning world.

Hahowise

Light Mode

Hahowise

Dark Mode

The final style chosen for Hahowise extends the brand’s planetary story while seamlessly integrating with existing Hahow products.

Minimum Viable Product

We first launched the course recommendation feature in MVP stage. We want to make quick iterations and collect as much data as possible to adjust the model. Initially, we hoped to use Sendbird or Intercom, integrate Miso AI + ChatGPT to recommend courses, but we found limitations in the customization cards of Sendbird/Intercom. Thus, we decided to use internally developed models and conduct tests in a standalone, full-page format separate from the Hahow website.

Considering that many users were still unfamiliar with ChatGPT, the initial design leaned towards more common chatbots like Facebook Messenger and Line@ to reduce users’ learning curve.

chatroom design 1.

Provide Suggested Questions

When opening a generative AI conversation, users might feel overwhelmed by the limitless options—they can ask AI anything, but this lack of guidance can make the conversation start difficult.

Through competitive analysis, we found that many generative AI products, such as ChatGPT and Microsoft Copilot, include “Suggested Questions” to help users start the conversation. These suggested questions not only reduce users’ learning barriers but also guide them to utilize AI more effectively.

chatroom design 2.

Course Recommendations

optimized response

Include the sections “Who is this course for?” and “What will you learn?” from the course introduction page into the model optimization to provide users with more informative course recommendations.​

display Product cards

Display course product cards in messages to guide users quickly to the course introduction pages.

Collecting User Feedback

Due to our initial training models occasionally experience hallucinations, the most important stage is to adjust the model through user participation, allowing engineers to have more data.

Referencing related generative chat products, we directly provide the Like/Unlike buttons next to the message. After the user clicks, they can further input feedback. This approach can reduce the cost of user feedback and collect more evaluations from users on the content of the AI's response.

After the user triggers it, the following information will automatically be returned to the Slack Channel.

AI Response

Show AI response to help the team review the content.

user info

Retain user information for potential follow-up by customer support if needed.

user feedback

Use emojis to help the team quickly identify which user feedback requires attention.

Data Observation

In September 2023, by leveraging AI learning-related courses and marketing campaign, the initial launch successfully increased user registrations to over 2,000. This short-term promotion was effective, helping to gather some model feedback. However, within 3 months of launch, user numbers began to decline, particularly with the retention rate showing a sharp drop. The data indicates that most users did not return after their first day of use. This could be due to several reasons:

Entrance: The entrance to Hahowise is hidden within Intercom. Initially, we hoped to maintain users’ habits of starting from Intercom, but this made it difficult for users to find the entrance.

Experience: Whether it's a model or design experience, it's still in the MVP stage. If the initial use experience does not meet user expectations, it will be more difficult to get users to revisit later.

In addition to continuously adjusting the model based on user feedback, we also considered:

How can the entrance be better integrated with the existing Hahow platform?

Which scenarios can better demonstrate the value of AI in course exploration?

After the launch in September 2023, the number of users increased to over 2,000, then gradually declined month by month.

Retention rate significantly drops after Day 1.

Optimization

Our initial concept was to display Hahowise on the Hahow website using a Slide-out Panel, which became the primary focus of this version’s optimization. Additionally, based on observations from the MVP stage, we found that a chat bubble UI is not suitable for generative AI responses due to the large volume of information it may produce, including indented text and tables.


We are now considering whether placing Hahowise within the Hahow product is sufficient for broad user adoption, or if other scenarios can increase user engagement. This stage aims to make relevant adjustments based on these insights.

optimization 1

Displaying Hahowise Based on Scenario

In addition to considering the permanent location of Hahowise, we also thought about the scenarios where users frequently explore courses. During this process, we referred to how AI is used in Microsoft 365 and Notion, finding that AI is more suitable for appearing in situations where users have a clear purpose, rather than being a constantly present chatbot.

The ways that users explore courses on the Hahow website may include the following:

Top Banner, latest crowdfunding, and featured courses on the homepage

Course recommendations based on Miso AI mechanism

Browsing all courses under a specific Course Domain page

Finding specific topics or subject names through the Search Bar

Different types of users have different paths to find courses. In the current scenario, we believe that users have clearer motivations for course exploration when searching for courses. Therefore, we assume:

Including Hahowise as one of the search options can increase the usage rate of Hahowise and improve the conversion rate of course sales.

use hahowise for search

When users enter search keywords, the first displayed item will be “Use Hahowise for Search”, encouraging users to find courses through it.

hahowise entrance

When clicked, if no search query is present, the last conversation will open. If a search query is present, a new conversation will start with the search query.

reference

Copilot is primarily a conversational AI in most scenarios. However, within the Microsoft 365 product line, especially in Word, they have integrated Copilot into the writing process.

This integration allows generative AI to break free from conventional frameworks, offering more flexible and diverse usage scenarios.

optimization 2

Enhance Chatting Experience

Another key objective of this optimization is to integrate Hahowise’s chat window into the existing product. Our initial idea was to use a Slide-out Panel, allowing users to converse with Hahowise while browsing the Hahow website. I started by exploring the use of Side Panels in existing products:

Slide-out Panel : Can operate simultaneously with the main screen

As an additional screen for main screen operation.
(For Example: Squarespace)

Slide-out Panel : Cannot Operate with the Main Screen at the Same Time

As a type of Popup Modal, operation requires the user to focus on the Panel content. (For Example: The Panel for Circle to edit user data)

Split the page

Additionally, there are designs that split the page into two columns, with the original content shrinking when the Side Panel appears.
(For example: Asana, Microsoft Teams)

Considering our current goal is to assist users in exploring more information before purchasing courses, users might interact with Hahowise at any time to confirm course details. Therefore, we ultimately chose a version that can operate simultaneously with the main screen, without splitting the page, letting the chat room float on the screen, which does not disturb the operation of the main screen and can provide immediate assistance.

Through the design of the Slide-out Panel, users can browse courses while asking the AI about relevant course information.

Chatroom Style

We made significant adjustments to the chat mode, considering that the Panel is more like an additional screen to the main screen, and its content should not distract from the main screen. Therefore, I modified the original chat bubble design to a plain text format, using different degrees of grayscale to express the relationship between the user and the assistant.

former design

When using the original design, it was found that the visual hierarchy of the Panel content competed with the lower page,

making it unclear where users should focus their attention while browsing.

after simplified the chatroom UI

After reducing the size of screen elements, font size, adjusting color levels, and simplifying chatroom buttons,

the main tasks can still be distinguished when the Panel coexists with the main content below.

Additionally, during the MVP phase, we referred to the early version of ChatGPT and placed the “Regenerate” and “Stop Generating” buttons above the input box. However, we found that this position disrupted users’ reading of the message content.

Therefore, in the revised version, we integrated the stop generating button into the message input box, making the overall interface cleaner and more user-friendly.

former design

The regenerate card is in the middle of the reply message, which disrupts the reading flow during browsing.

after simplified the chatroom UI

The regenerate function is integrated into the message, and the stop generation button is placed into the text field.

Data Observation

Since its launch on February 26, 2024, up to April 29, within two months, 32.31% of users clicked on course cards in Hahowise, and the course conversion rate achieved through Hahowise was 32.23%.

Surprisingly, these two months have contributed to more than half of the course conversions since it opened in September 2023.

Retention Rate

However, there is only a slight increase in the return rate, which may be because Hahowise itself is a tool to solve specific problems, and at this stage users usually use it to explore courses, so the return rate will be affected by changes in user motivation.

Since its launch on February 26, 2024, to April 29, 32.23% of users who viewed course product cards recommended by Hahowise eventually made a purchase.

However, user revisit rates showed only slight growth compared to the MVP phase.

Future

In the trend of AIGC, the goal of integrating generative AI into educational platforms is not limited to creating a course exploration chatbot. The ultimate objective is to reduce student attrition during the learning process. Future development directions include:

Real-time Course Assistance

Within the course chatroom, provide another layer of AI assistant training to answer real-time questions related to course progress. The AI assistant can also provide extended learning information, helping students explore their curiosity in other areas, not just the course syllabus.

In-class real-time learning assistant

While watching a course, users can use the classroom sidebar to bring up the Hahowise model embedded with course knowledge,

allowing for real-time discussion of topics they want to explore further.

Retake Quiz Based on Mistakes

Hahow plans to launch a course quiz feature in July 2024. Instructors will be able to quickly generate quizzes with various question types through prompts. Students will see their quiz results on their end. Hahowise can analyze students’ incorrect answers and automatically generate related questions for additional practice.

Retake Based on Mistakes

Users can choose “Retake Based on Mistakes,” allowing Hahowise to redesign a set of questions based on the user’s incorrect answers
from the current test. This approach helps students strengthen their understanding by focusing on concepts rather than merely repeating the

same questions multiple times, leading to more effective learning outcomes.

Other directions previously discussed by the team include:

Course Progress Summary: Providing a summary of past progress through Hahowise when users return to class helps them quickly resume their learning.

Learning Schedule: Breaking down course content into smaller segments via Hahowise helps users learn quickly during fragmented time like commutes or lunch breaks.

Projects

english

中文

Story

challenge

Naming & Visual

MVP

optimization

future