Hahow Rebranding and Experience Upgrade
As the design manager at the time, I was responsible for integrating various internal and external teams to lead the brand transformation, driving decisions through data and user research, and spearheading a comprehensive overhaul of product design and brand visuals.
Context
⛳️ Business Goal
As Taiwan’s leading online learning platform faced intensifying competition, Hahow set out to evolve from “the most engaging course platform” into “a one-stop hub for cross-disciplinary learning and talent development.”
👩💻 My Role
At the time, I served as the Design Manager, responsible for aligning external brand agencies, the UX research team, and our internal product and visual designers to deliver this year-long rebranding and product transformation.
🏗 Project Scope
Brand identity, UX research, product UI, mascot refinement, and design system overhaul.
Challenge
Strategic Pivot over Visual Refresh
Beyond a UI update, this was a total repositioning of the business, redefining the core product experience and our relationship with users.
Impact-Driven Prioritization
Navigated a massive scope across B2C, B2B, Web, and Mobile, strategically prioritizing key touchpoints to maximize impact within limited resources.
Aligning Multiple Teams
Brand identity, UX research, product UI, mascot refinement, and design system overhaul.
Outcome
Brand Favorability
73%
Positive User Feedback
Average Pages Viewed
+23%
Indicates Users Are Willing to Explore More Content
Content Models Enabled
5x
Expanded from 1 to 5+ learning formats, unlocking new product and revenue streams
Before
After
Process
Discovery Phase
Research-Driven Decisions
To ensure design decisions aligned with both business goals and real user needs, we made research the foundation of every move.
In the early phase, I led a collaboration with external UX research partner Irori Design to study how users behaved across video courses, live classes, and workshops. Together, we created a User Journey Map covering everything from purchase decisions to post-learning evaluation.
This map became a shared language across teams, allowing us to clearly define Hahow’s most critical touchpoints as a learning gateway.
Co-creative Workshop
I co-ran cross-functional workshops with the UX research team to align stakeholders and establish shared insights as the foundation for all subsequent decisions.
7 Key Insights
These insights became our north star, guiding all product and design decisions that followed.
#1 Help me fulfill my aspirations around my personal lifestyle needs
People don’t learn only for work — they learn to build the kind of life and identity they want.
#2 Show me trust & credibility
Credibility and professionalism strongly influence whether users are willing to invest their time and money.
#3 help me easily lay out possible options around my area of interests
Users want a clear overview of what’s available in their areas of interest, so exploring feels easy, not overwhelming.
#4 help me stay in-the-know!
Showing new courses, trends, and relevant content helps users stay engaged and curious.
#5 help me cherry-pick the most suitable option
With so many choices, users need good filters and comparisons to choose what’s right for them.
#6 make sure I get the best value for money
Users care about value for money and want to avoid the feeling of making a bad purchase.
#7 help me stay in control of my learning schedule and plans
Users want flexibility and control over their schedule, progress, and learning plans.
Insight to Action
Insight Mapping Matrix: Turning Strategy into Execution
I turned UX insights into design hypotheses, aligned the team on priority pages, and set clear design goals for execution.
Design Execution
Homepage Redesign
In addition to leading the overall rebrand, I directly drove the homepage redesign and the design system overhaul. Below is the homepage redesign process.
Brand vs. Conversion Imbalance
The search-centric hero section failed to showcase content diversity to exploratory users. Forced marketing "patches" on brand visuals undermined both storytelling and conversion.
Marketing Exposure Bottleneck
High-revenue carousels were tucked below the fold, wasting prime real estate and missing the critical first touchpoint for conversion.
Misaligned Free Trial Experience
Despite high interest in free content, this section featured random, contextless snippets from paid courses. Inconsistent difficulty levels and a lack of relevance led to a fragmented experience.
Testimonials That Failed to Build Trust
Long, text-heavy reviews lacked visual hierarchy, making them hard to scan and reducing their credibility impact.
Content Architecture Blocking Business Growth
While interest in free content was high, providing random snippets from paid courses lacked context and relevance. This inconsistency led to a fragmented experience and failed to drive meaningful conversion.
Quantitative Data Analysis
We analyze quantitative data to understand the performance of the homepage sections, serving as a reference for deciding the configuration of new homepage sections.
Scroll Map
The homepage was extremely long, raising the question of how far users would actually scroll.
Scroll Map data showed that 50% of users reached about two-thirds of the page, and 33% nearly reached the bottom.
This could indicate strong exploration intent, but it could also suggest a low hit rate, where users keep scrolling because they haven’t yet found content that interests them.
Performance-Based Prioritization
By cross-referencing Mixpanel and GA data, I identified "Latest Fundraising" as the top conversion block, while "Top Rated" and "Classic" significantly underperformed. I strategically pruned these inefficient sections to prioritize high-value real estate for content with better discovery potential.
Hypothesis Testing & A/B Experiments
To evaluate whether the first screen should prioritize marketing banners or brand-driven messaging, we conducted a user-testing A/B comparison on the main hero area.
Hypothesis: Emotion-driven copy about self-growth and brand warmth would outperform feature-focused messaging.
Result: Users favored Version A, where a large marketing banner aligned better with their browsing habits.
Ver A: Win
Ver B
Final Design
Move Conversion to the First Screen
Placed the marketing carousel above the fold to maximize visibility of key campaigns and capture user attention at the first moment of entry.
Data-Driven Hybrid Content Grid
Kept the top-converting course section while expanding it to support live classes and new learning formats.
Surface Content Diversity Through Category Navigation
Introduced domain-based categories to make the breadth of topics instantly visible and support exploratory browsing.
Design Direction
Key Page Updates
The following key pages were executed by the product design team, for which I am responsible for defining the redesign goals, design principles, and cross-page consistency (through design reviews and design system specifications), ensuring that each touchpoint aligns with the new brand positioning.
Navigation
🎯 Goal
Align with dual mental models: topic-based discovery and format-based learning.
👍 Metrics
nav engagement, category entry rate, pages/session
🖋️ Credit
Patty Chien
Before
Search / Category / Sub-category
🎯 Goal
Provide explorers with rich, multi-format content within unified category domains.
👍 Metrics
filter usage rate, result-to-product click-through, search refinement rate
🖋️ Credit
Patty Chien
Before
Product Page
🎯 Goal
Boost purchase momentum and decision efficiency through enhanced persuasiveness and incentives.
👍 Metrics
add-to-cart / purchase funnel, scroll depth, CTA CTR
🖋️ Credit
Chihhan Wang
Before
System Enablers
New Design System
The old design system has long lacked maintenance, resulting in a significant accumulation of design debt over the past 7 years, causing the collaboration between design and engineering to fall out of sync. If the rebrand only changes the visuals, the underlying system will not be able to support diverse content and future expansion. Therefore, the redesign of the design system will be initiated simultaneously with the rebrand (a complete DS overhaul will have a separate case).
Key Component Redesign: Product Card
The Product Card is the most critical and complex component across the platform.
Before: 7 product types and over 50 states created inconsistent UI and high maintenance costs.
After: By applying Atomic Design, I modularized all states into configurable parts, unifying visual patterns while enabling flexible use across different content formats.
Establishing a brand illustration system and redefining the mascot
While mascots are often used to drive engagement, overly cute visuals can undermine a brand’s professionalism. In this rebrand, the mascot was repositioned as a “smart and wise companion.”
I led cross-team discussions and worked closely with the brand team to align on the new direction and usage principles, ensuring the illustration style supported a more credible and mature brand image.
illustration Credit: Becky Tsai
Before
Outcome
Brand Favorability
73%
Positive User Feedback
Average Pages Viewed
+23%
Indicates Users Are Willing to Explore More Content
Business Transformation Ready
Through modular interface logic, the redesign enabled the platform to support multiple learning formats, laying the foundation for Hahow’s evolution from a single-course platform into a comprehensive learning ecosystem.
A New Design System in Place
While still expanding, the new system established core UI components, illustration guidelines, and color and typography foundations, ensuring consistency for the first rollout and providing a solid base for future teams to build on.
Learning
Building Order in Uncertainty
Many phases of the rebrand were highly uncertain, we had to start product design before the new CI was finalized. This taught me how to stay adaptive and keep projects moving even without perfect conditions.
How to translate fuzzy strategy into shippable UI
Strategy meetings are often filled with abstract goals like “increase brand professionalism” or “become a multi-format learning hub.” Through design, I learned to turn these ideas into concrete interface logic, allowing business strategy to land in real, buildable UI.
Sustaining Alignment Across Teams
Over a year-long collaboration with multiple internal and external teams, I learned that silence does not equal alignment.
By maintaining frequent communication and transparent progress, I kept stakeholders on the same page and reduced costly late-stage changes.
