Role
Designer & Developer
Brand identity, UI layout, responsive front-end development, SEO setup, and deployment.
Yuting Learning Brand & Website
Brand Identity · Responsive Website · SEO
A complete education brand and website system designed to support multilingual learners, communicate teaching expertise, and improve search visibility through responsive development and SEO.
Project Snapshot
A teacher brand built from visual identity to live website.
The project connects branding, content organization, front-end development, bilingual communication, SEO, and performance optimization into one portfolio case study.
Client
Yuting Learning
An education brand focused on ELD instruction, multilingual learner support, and family communication.
Tools
HTML, CSS, JS
Built with semantic HTML, custom CSS, JavaScript interactions, responsive layouts, and Netlify deployment.
Focus
Brand + SEO
Created a trustworthy brand presence and optimized the site for performance, accessibility, and visibility.
Make a teacher-led education brand clear, warm, and credible.
Yuting Learning needed to communicate with students, parents, and families at the same time. The site had to explain the teacher’s background, service focus, and learning philosophy without feeling crowded.
The challenge was to balance a personal teaching voice with a professional visual system and a simple, scannable website structure.
Create one connected system from identity to live website.
The goal was to design and develop a responsive website that introduces Yuting Learning, explains the teaching approach, presents services clearly, and supports English and Chinese audiences.
The final site needed semantic HTML, responsive layouts, optimized images, metadata, Open Graph tags, sitemap, robots file, and clean deployment on Netlify.
Brand Identity
A visual system based on trust, growth, and communication.
The identity system includes logo development, color palette, typography, and basic usage guidelines for consistent digital and print communication.
01
Logo Development
The mark was refined from initial sketches into a simple, flowing symbol that suggests growth, learning, and movement.
02
Color System
The original brand palette uses navy, purple, green, teal, and cream to express trust, creativity, growth, communication, and warmth.
03
Typography
Helvetica was selected for clarity, simplicity, and readability across website, educational materials, and brand communication.
04
Brand Guidelines
Clear space, minimum size, and color usage were organized to keep the identity consistent across future applications.
Website Structure
Organizing the site around learner and family needs.
The site structure helps visitors understand the teacher’s background, teaching philosophy, service areas, and contact options without unnecessary complexity.
Home
Introduces the brand message, teaching focus, and main call-to-action.
About
Presents teaching background, credentials, and professional experience.
Approach
Explains the teaching philosophy, language growth, and student-centered support.
Services
Organizes ESOL, PreK–12, TEFL, and family communication support.
Development & SEO
Designed, developed, and optimized for search visibility.
The website was built with HTML5, CSS3, and JavaScript, using responsive layouts and semantic structure to support usability, accessibility, and search performance.
SEO implementation included meta titles and descriptions, keywords, Open Graph tags, Twitter card metadata, sitemap.xml, robots.txt, and mobile optimization.
The site was deployed on Netlify with a focus on fast loading, stable layout, and consistent behavior across devices.
Lighthouse Audit
Performance, accessibility, and SEO validation.
The final website was evaluated using Google Lighthouse to measure performance, accessibility, best practices, and SEO quality across desktop devices.
Technical Outcome
Strong desktop audit results.
The website combines responsive front-end development, semantic HTML, optimized assets, and structured metadata to create a fast and accessible experience across devices.
Technical implementation included responsive layouts, image optimization, accessibility considerations, SEO metadata, Open Graph integration, sitemap generation, and deployment through Netlify.
99
94
100
100
Selected Outputs
Key deliverables from the final brand system.
A selection of visual and digital outputs demonstrating the identity system, brand documentation, and search visibility of the final website.