Let's TalkContact me!
Work About Lab Resume Let's Talk
Web3 Vibe Coding Product Design/Management

Reconstructing the MemeCore Website
for Better Web3 Usability

Introduced an AI-driven workflow to rebuild the site, cutting page size by 94% and bounce by 2.6×, and scaling the workflow company-wide.

MY ROLE

Product Management
End-to-end Product Design
Front-end Implementation (AI-assisted)
Interaction Design

TIMELINE

Nov 2025 - Jun 2026

TEAM

1 Frontend Engineer
1 Backend Engineer
3 Illustrators
1 Growth Lead
2 Marketers

TOOLS

Figma
Claude Code
LightRoom
After Effects

OVERVIEW

Users found key info first and bounced 2.6× less.
The company adopted my AI workflow.

The result: 17× lighter, 2.6× lower bounce rate, and 21% more engagement with key information.
MemeCore is a Web3 startup building a sustainable meme coin ecosystem around M. Its visually bold website helped the company stand out, but as MemeCore grew, investors and partners struggled to understand its value and credibility. Heavy assets also caused long load times, preventing some users from entering the site.

As the sole product designer and product manager, I redesigned the website to balance brand identity, information clarity, and performance. I also took the initiative to introduce vibe coding, which later evolved into a company-wide designer–developer workflow.

Redesigned MemeCore website on mobile: Brand Kit, Listed Exchanges, and Explore Ecosystem pages
ABOUT  MEMECORE

A Web3 company building
an ecosystem around M coin

MemeCore is a Web3 startup behind M, a community-driven coin built to fix the trust problem in meme coins. Its platforms and events keep the community engaged long after the hype.

MemeCore community pixel-art scene
THE IMPORTANCE OF SITE

As MemeCore grew, the site needed clarity more than visual impact

Early on, flashy GIF illustrations helped MemeCore stand out in a crowded crypto market, growing its community to 600K+ and event participation to 3.2M+. After major exchange listings and a top-20 market cap, the site needed to shift from grabbing attention to building credibility.

Growth graph: early-stage marketing with eye-catching illustrations, rapid growth, then a website renewal showing why M coin is trustworthy
PROBLEM

The site left investors and partners unsure what MemeCore stood for

Despite MemeCore’s growth, skepticism around meme coins remained. Investors and partners kept saying its direction was unclear. The cause was the site: it had limited key information and no clear hierarchy, so the Growth & Marketing team had to explain the project in every meeting.

DATA ANALYSIS & CHALLENGES

Unclear content structure and heavy page weight
drove a 56.1% initial bounce rate

Six months of Google Analytics and Clarity data showed where users left. A usability test with 5 people showed why.
As both PM and product designer, I took on both problems, from design to code.

PROBLEM 1

Hidden navigation and no clear starting point

Original homepage: an illustrated map where Roadmap, Ecosystem, Ecofund, and About us appeared only on hover

The first screen showed only graphics, and pages were hidden behind a hover interaction. In testing, 3 of 5 couldn’t find the roadmap.

PROBLEM 2

Oversized images and videos slowing the site

Original loading screen shown before the site became usable

At 48.6MB, the site was 16× heavier than an average page. Clarity showed 24% of visitors left before it finished loading.

INSIGHT

Users stayed 5× longer once they reached detail pages

The content itself was worth reading, but many users left before ever reaching it. As the business strategy became clearer after launch, I saw an opportunity to surface key information earlier and make it easier to navigate.

Detail page scrolling on mobile, beside a chart: site average 29s vs. detail-page users 2m 25s, 5× longer average time spent
GOAL

Help investors reach key information more easily, increasing detail-page visits by 15% and reducing loading drop-off by 10%.

HYPOTHESIS
FOR PROBLEM 1

If we add a clear landing page and business-focused navigation, users will reach key information more easily.

FOR PROBLEM 2

If we replace heavy GIFs with CSS animations and WebP images, the site will load faster and reduce drop-off.

TIMELINE

Coordinated cross-team schedules to ship in three phases

With the team balancing multiple projects, I prioritized changes by impact and effort and split the scope into three phases. I shaped the IA with Growth & Marketing, then aligned each phase with illustrators and developers.

  1. JUL - AUG  2025

    FIRST RELEASE

    Fix the structure first

    • Aligned goals with Marketing & Growth
    • Rebuilt the IA and global navigation

  2. OCT - DEC 2025

    SECOND RELEASE

    Adapt to new business goals

    • Reshaped navigation around the new priorities
    • Designed new landing pages and interactions
    • Reworked illustrations and refreshed content

  3. MAY - JUN 2026

    THIRD RELEASE

    Scale and speed up

    • Finalized navigation and added new pages
    • Built select pages myself with vibe coding
    • Optimized site performance
DESIGN SOLUTION 1

A navigation that helps users explore and reflects the business direction

To build a clear hierarchy, I analyzed three sources. Users' frequent questions showed what to surface first, the business model set the priorities, and Web3 services like Sui and Monad showed familiar navigation patterns.

Navigation across three releases. First release: brought key information into one place, but outdated Web3 pages and scattered content remained. Second release: removed outdated items, merged related content, and added a Buy $M button linking to exchanges. Final release: as the company shifted to a community strategy built on online and offline events, added new pages such as Announcements and redesigned screens. Sitemap before: 7 menus hidden away, so users didn't know where to start. After: 5 menus, built around users' top questions and the business, with a new Announcement menu, a renewed Ecosystem and a new Build menu.
DESIGN SOLUTION 2

Turning a visual-first homepage into an information-first landing page

To decide what the homepage should show first, I worked with the Growth and Marketing teams to rank users' most common questions and the company's key messages, then built the new landing page around that order.

BEFORE

Pages were hidden inside an illustrated map and appeared only on hover, making key content hard to find.

AFTER

Key projects and business messages appear in order of importance, each linked to its detail page.

TRADE-OFF

Turning the illustration team's pushback into a shared design rule

I reframed the debate from aesthetics to business impact, and the team agreed on one rule: interaction for attention, simple illustrations for understanding.

Me

"Simpler visuals will make the information much clearer."

Illustrators

"But it could weaken MemeCore's core identity."

Me

"A beautiful site means nothing if users can't get in.
Let's keep the illustrations, but give each one a clear job."

01 Scroll interactions that guide attention

I used scroll interactions only at moments where we needed to hold their attention.

Opening: Scroll motion draws users into the story so they keep scrolling past the first screen.

$M exchange: Brings attention back to the $M exchange section, a business-critical part of the site.

02 Illustrations that support understanding

In information-heavy sections, I kept one consistent layout so illustrations only support the content.
Users could scan faster while the brand stayed recognizable.

Two information sections — Build on MemeCoreDev and Powered by Community — each with one key message, a short description, a clear CTA and one illustration
DESIGN RESULT

I compared three months before and after the redesign, with similar traffic in both periods. After the landing page became information-first, fewer users left immediately, and more continued to detail pages.

Bounce rate

- 9.2%

Detail-page visits

+ 21%

SHIPPING PROCESS
NEW CHALLENGE

After launch, the site was still too slow: 17% of visitors kept clicking with no response

We had already shrunk the GIF assets, but the site still loaded slowly. Microsoft Clarity showed that pages were too slow to respond: about 17% of visitors rage-clicked, and session replays showed users on slower networks struggling to load them. A Lighthouse score of 55, well below the 90 benchmark, confirmed we needed to go further.

Lighthouse performance score of 55 beside a session replay: a blank page for 9s while the user clicked 7 times
EXECUTION STRATEGY

When our frontend developer was reassigned, I built the site myself with vibe coding

Midway through the project, our frontend developer moved to another urgent initiative. Instead of pausing or cutting scope, I took over implementation: I connected Claude Code to the Figma API and GitLab, built the frontend, and later handled some backend work. Testing designs directly in the browser cut handoffs and rework.

Three mobile pages built through vibe coding: the menu, Announcements and Brand Kit
IMPLEMENTATION DECISION

Replacing full-scene GIFs with static WebP and CSS motion to cut page weight

Because I owned the code, I could fix this directly instead of waiting for a handoff. Each scene was a single heavy GIF that couldn’t be optimized further, so I rethought where motion was actually needed. The site became much lighter, kept its intended look, and no longer needed a loading screen.

01  Keeping the motion by animating only key assets

BEFORE

The whole scene was a single GIF, so it couldn't be optimized further.

Before: the whole scene was one heavy GIF
AFTER

A static, compressed
WebP background.

Each key asset cut out and animated in CSS.

After: a static, compressed WebP background with each key asset cut out and animated in CSS

02  Making information sections static, where clarity mattered more

Before: information sections also used GIFs
After: static visuals worked just as well, so they were converted to WebP
SHIPPING RESULT

Vibe coding cut updates from a month to 5 days, and performance rose 55→92

The optimization raised the Lighthouse score from 55 to 92, cut page weight by 94%, and lowered loading drop-off from 24% to 6%. The vibe-coding workflow also reduced development and QA time for updates from about a month to five days. I documented the process from a designer's perspective and shared it company-wide, where it became an internal best practice.

Internal vibe-coding guide documenting the designer–developer workflow

Performance score +37

55→92

Smaller page size

17x

Loading drop-off -18pp

24%→6%

LEARNING

Ownership drove results; next time, I'll plan around the team's capacity

As both product manager and product designer for the first time, I led the project from planning to launch, ahead of schedule. It earned me the company's highest performance rating, but I was proudest of getting the team to launch despite losing frontend support.

Looking back, I found two gaps in how I planned. First, I treated agreement as capacity. Teammates said yes to a fast timeline, but they were also managing several other projects. Second, I planned for the expected, not the variable. Urgent requests often came up at our company, and without a buffer, the team felt rushed midway. Going forward, I'll check each person's workload before setting timelines and build in buffer for unexpected requests, so speed stays sustainable.

Performance review sheet showing the highest rating