π€ Client Name
LΖ°α»i Δi LαΊ‘c team
Case Study β 2026
Designing, Building & Optimizing a Career Coaching Platform β From Figma to Production
π Description
LΖ°α»i Δi LαΊ‘c is a Vietnamese career coaching platform helping job seekers navigate career transitions through structured guidance and community support. As solo designer and frontend implementer, I own the entire web experience β from the Figma design system to WordPress/Elementor implementation, performance optimization, and marketing automation β for a platform currently serving 200+ students and 2,000+ followers.
π·οΈ Industry
Career Coaching Platform
π οΈ Tools
Figma
WordPress
Elementor
HTML/CSS/JS
Make.com
GA4
Hotjar
π₯ Role
Solo UX/UI Designer & Frontend Implementer β WordPress/Elementor build, performance optimization, marketing automation
diagnosed.log
optimization in progress
- πDiagnosed (July 2026): 12.94% dead-click rate, INP at 340ms β root-caused to Elementor/plugin script overhead
- π―81/100 Performance Score at time of audit β via Microsoft Clarity
- πBuilt full measurement stack from zero β GA4 + Clarity + Hotjar β for a platform with no prior analytics
- πStatus: Optimization fixes in progress
Problem
LΖ°α»i Δi LαΊ‘c's entire presence lived on bio links and social tools β no owned website, no place to sell templates, courses, or coaching, and no foundation to scale.
Opportunity
The team needed one trustworthy site to handle three transaction types β templates, courses, and coaching bookings β and open the door to faster growth. As sole designer and implementer, I owned it end-to-end, from architecture to measurement.
Solution
I built a WordPress platform end-to-end: IA for three offerings, a scalable Figma design system, WooCommerce for real transactions, and a self-instrumented analytics stack (GA4, Clarity, Hotjar) β the platform's first ever.
Design Layouts
What I Learned
- I jumped straight to high-fidelity Figma without wireframing the IA and navigation flow first β which meant structural gaps only surfaced late, forcing me back and forth between high-fi and structure until it got messy enough to stop and redraw the flow from scratch. Now I lock IA, navigation, and flow at wireframe level first β it's where both I and the client can validate structure early, before it's expensive to change.
- Learned to actively manage the timeline itself β deciding when to run design and implementation in parallel versus sequentially, based on which parts of the site actually had room for that trade-off.
- Built the habit of learning and working fast under real constraints β not stalling on unfamiliar tools, but finding a way to make the product work and then improving it.
- With no time to run structured usability tests (Maze, etc.) mid-design, I set up GA4, Microsoft Clarity, and Hotjar to validate decisions after launch instead β learning to read real user behavior as a substitute for pre-launch testing I didn't have time for.