Product + UI/UX
Profile
02
CramAI
03–06
Frame by Frame
07
AI-Powered Audience Insights
08–09
Making
University Road Wayfinding
10
YIPENG ZHANG
2026
PROFILE
Yipeng Zhang
02
Product Engineer
Yipeng Zhang / 张逸鹏
Product Engineer · currently building CramAI
Product definition
UI/UX
Frontend
AI integration
Next.js
React
Multi-agent productization
I started in UI/UX and frontend, and now also own product definition and engineering delivery. I am currently building CramAI, turning multi-agent AI into a loop people can study, test, and track.
PRODUCT ENGINEERING
CramAI
03
Flagship · Dec 2025–present
CramAI
Multi-agent AI learning assistant
Problem
Study materials live in PDFs, videos, and links; practice and tracking live in other products. Demo papers can fake an exam UI, but they cannot operate: items do not reuse across papers, and coaching has no qualified real items as anchors.
Role
Product Lead / Product Engineer. I own product direction, priorities, feedback review, product design, UI/UX, frontend, selected backend work, and commercialization analytics.
AI-agent algorithms, variant generation, multimodal RAG, and AWS infrastructure were owned by other teammates.
How to read the next three pages
04
Value before login
Guest exams prove the product; authentication becomes the next step.
05
Papers arrange; questions are entities
Reject demo JSON. Operable bank first.
06
Original stems never shown
Real papers to test; variants to practice.
1,264
Active users in 90 days
22,514
Product events
GA4 aggregate usage signal, Jun 7–Sep 4 2026. Not a growth, retention, or conversion-lift claim.
PRODUCT ENGINEERING
CramAI
04
A loop, not a toolbox
If materials, conversation, tests, and tracking do not share one context, the product splits back into a reader and a question bank. The four steps have to stay on one path.
01
Bring materials
PDF · video · link
02
Learn with Tutor
Read · ask · create
03
Practice & test
Quiz · mock exam · coach
04
Track & improve
Report · next plan
Considered a full-page login wall
Shipped guest Quick 12 / Full 180 instead. Grading and follow-up plans appear before registration.
Considered a wall of tool buttons
If summaries, flashcards, and quizzes each open a separate door, users lose the current material. Outputs live in the Tutor conversation.
PRODUCT ENGINEERING
CramAI
05
Papers arrange; questions are entities
Quick 12 / Full 180 proved the exam experience. A demo JSON cannot reuse items across papers, replay a later normalizer, or give coaching qualified anchors. Questions became independent entities; papers only own session and order.
01
Considered
Keep stacking the UI on demo JSON. Faster, but it cannot be operated.
02
Chose
Four tables split papers from questions. Import stays read-only. Answer keys are never invented.
03
Cost
Slower than dumping JSON. This is what later coaching reuses.
04
Result
CFA L1 at about 16 papers / 2,600+ items is QA scale. Mock exams sit on published papers.
The full-screen exam runs on papers after audit, preview, apply, and publish — not on demo data.
PRODUCT ENGINEERING
CramAI
06
Coaching is standalone; original stems stay server-side
We considered explaining real bank items in chat. Rejected: the bank would become a copy source. Real items stay server-side anchors; learners see same-knowledge variants. Full explanation → half hint → zero-hint is a frozen contract. A miss retries a variant; it does not drop a stage.
01
Rejected
Do not show original stems in chat, or the bank becomes a copy source.
02
Anchor
Original stems never round-trip. Knowledge-only generation is the fallback.
03
Contract
Explain, half-hint, zero-hint. A miss retries in the same rung; it does not drop back.
04
Boundary
Variant generation and difficulty judging are owned by teammates. I owned the contract and coaching UI.
Worked solution · graded hints on demand
Reduced scaffold · hints stop at method
Independent check · no hints
WEBSITE DESIGN
Frame by Frame
07
UI / Web · Apr 2025
Frame by Frame
A mosaic site that lets people switch art styles on their own photos
Problem
Art styles stay vocabulary until people can try them. This site turns an uploaded photo into Pop Art, Impressionist, or Cubist mosaics, with artwork metadata and live comments on the same interface.
Role
Team project. I owned the UI prototype, frontend integration, and mosaic.js refactor so style switching, carousel, and comments share one interface.
01
Miro
Collapsed interaction goals and style choice into one visitor path.
02
Figma prototype
Turned upload, style switching, artwork info, and comments into a clickable UI.
03
Frontend integration
Refactored mosaic.js so heavy tile loads still allow style switching and comments.
Live UI: upload a photo, switch art styles, read artwork info and comments.
WEBSITE DESIGN
AI-Powered Audience Insights
08
Academic system · Aug 2025
AI-Powered Audience Insights
From YouTube comments to content strategy
This project builds an AI tool that helps content creators by analysing audience feedback, filtering toxic comments, and generating useful ideas from user comments. Sentiment analysis and keyword grouping turn real opinions into strategies you can act on.
The system supports trend analysis across multiple videos and ongoing AI conversations. It uses RAKE, KeyBERT, and a locally deployed Llama 3 model rather than platform vanity metrics alone.
System overview — comment analysis to strategy suggestion.
WEBSITE DESIGN
AI-Powered Audience Insights
09
System and final website
Dashboard — channel performance and key metrics.
Trend Explorer — emerging topics across videos.
Video analysis — sentiment, keywords, and comment breakdown.
WAYFINDING DESIGN
University Road Wayfinding
10
Shipped spatial work · Jan 2024
University Road Wayfinding
Yangpu District, Shanghai
A wayfinding system for University Road around the Knowledge & Innovation Community. High-contrast color, modular structures, and night illumination — short proof of work that left the screen and was installed on the street.
Freestanding directional signs.
Overhead gantry, night view.