GSM CENTRE
Website Design Guide for Professional Implementation
- Project Overview
GSM Centre is an academic support provider for IB and IGCSE students in Hong Kong, with a strong emphasis on long-term student growth beyond grades. The goal of this website is to clearly communicate our value to parents, increase consultation sign-ups, and build brand credibility through strong visual design and expert positioning.
The site should be designed to:
- Attract and convert new clients, especially parents seeking academic support for their children.
- Clearly explain our services, educational approach, and unique offerings.
- Support SEO and future content growth through a scalable blog system.
- Provide an easy and mobile-friendly way to book free consultations.
The tone should remain calm, trustworthy, and structured — suitable for professional parents browsing on mobile.
Reference Websites will be:
- https://www.betterup.com – Colour, Brand Image, Design
- https://tutorful.co.uk – Brand Image, Design
- Website Platform & Structure
Platform:
The website will be developed using Wix Studio. All pages must be responsive across desktop, tablet, and mobile devices, with mobile-first usability prioritised throughout.
Core Pages to Be Developed:
The following pages must be built as part of the main GSM Centre website:
- Home
- About
- Tutoring
- Extra Lessons
- Mentorship
- Consultation & Onboarding
- Pricing
- Blog
- Success Stories
- Contact
- Free Consultation Page
- Privacy Policy & Terms of Service
CMS & Dynamic Content Requirements:
- The Blog must be implemented using the Wix Blog App, with full CMS functionality for future post uploads.
- The Success Stories section must also support ongoing additions, with the ability to expand to 10 subpages if needed.
- Blog and story templates should use category tagging and filters where appropriate.
Routing Expectations:
- All consultation-related CTAs must link directly to a dedicated internal page (Free consultation page) containing the full consultation form.
- This page should not be embedded or opened as a pop-up.
- Form submissions must route to Wix CRM and trigger email alerts.
Multilingual Support:
- The initial website will launch in English only.
- However, the layout should be translation-ready, allowing for a manual toggle-based second-language version in the future (no auto-translation).
🗂 Content Documents Provided (by Page)
Each of the following pages is supported by one or more content documents. These are provided as editable Word files and contain finalised text, structure, and section layout for each page.
| Page | Related Documents |
| Home | 1. Home Page Content.docx |
| About | 2. About Page Content.docx |
| Tutoring | 3. Tutor Service Page Content.docx |
| Extra Lessons | 4. Extra Lesson Page Content.docx |
| Mentorship | 5. Mentorship Page Content.docx |
| Consultation & Onboarding | 6. Consultation and Onboarding Page Content.docx |
| Pricing | 7. Pricing Page Content.docx |
| Success Stories | 8. Success Story Page Content.docx, 8.1 Success Stories Subpage Content.docx |
| Blog | 9. Blog Page Content + Design.docx, 9.1 Blog Post.docx |
| Contact | 10. Contact Page Content.docx |
| Free Consultation Page | 11. Consultation Form Content + Design.docx |
| Header/Footer | 0. Header and Footer – Content.docx |
| Privacy & Terms | 12. Privacy Policy and Terms of Service – Content.docx |
Instructions on how to use these documents are provided in Section 4.
- Brand Visual Guidelines
This section outlines the current visual direction for GSM Centre. It reflects our brand values and provides actionable guidelines to ensure consistent and professional design across all pages. We welcome expert recommendations on layout, animation, or optimising these styles for better user experience — especially on mobile.
3.1 Brand Tone & Colour Strategy
The visual identity of GSM Centre should express four core values, in order of priority:
- Professionalism – Credibility, expertise, structure
- Nurturing Support – Calm, reassuring, growth-oriented
- Premium Feel – Clean, modern, high-end aesthetic
- Innovation – Forward-thinking and differentiated from traditional tutoring
3.2 Colour Palette Breakdown & Usage
| Palette Category | Colour | HEX | Purpose | Use Cases |
| Primary – Trustworthy Deep Blue | Navy Blue | #0C3C78 | Foundation colour that conveys trust and clarity. | Navigation bar, section headers, main CTAs, footer background, hover states |
| Secondary – Nurturing Green | Deep Green | #2D8E73 | Supportive tone symbolising growth and balance. | Icons, badges, mindset/mentorship blocks, background highlights |
| Accent – Optimistic Gold | Gold | #F5B400 | High-contrast highlight for conversion. Use sparingly. | Highlight CTAs, urgent banners, trust visuals |
| Neutrals – Backgrounds & Text | Light Grey | #f0f0f0 | Clean section and card backgrounds. | Visual contrast blocks |
| White | #F8F9FA | Main background colour. | Page backgrounds, content whitespace | |
| Dark Grey (Text) | #333333 | Primary body text colour. | Standard text |
Balance Rule (60/30/10):
- 60% Deep Blue – dominant UI colour
- 30% Green – supportive blocks
- 10% Gold – used only to draw attention to key actions
Contrast & Accessibility:
- Use dark text on white/light backgrounds
- Use white text only on navy blue backgrounds or overlays with strong contrast
Emotion-Driven Use:
- Use green in supportive or emotional growth areas (e.g. mentoring, mindset)
- Use gold only in high-impact CTAs (e.g. “Book a Free Consultation”) — not for bulk elements
3.3 Typography
Font Strategy:
Use modern, clean, and web-safe fonts from Google Fonts, fully supported by Wix Studio.
Recommended Pairings:
Option A – Balanced Modernity
- Headings: Poppins (semi-bold)
- Body Text: Open Sans (regular, 16px base size)
Option B – Premium Academic Flair
- Headings: Roboto Slab (semi-bold or bold)
- Body Text: Roboto or Lato
Font Rules:
- Body text must be minimum 16px for mobile readability
- Use consistent heading sizes and spacing across all sections
- Button and CTA text should use Title Case format
- Avoid decorative or cursive fonts anywhere on the site
3.4 Photography & Illustration Style
Photography Style:
- Use real, bright, authentic photography that feels warm and human — not stocky or artificial.
- Ideal visuals include:
- Candid student–mentor interaction (e.g. tutoring moments, consultations)
- Bright study environments with books, laptops, or learning tools
- Facial expressions that evoke clarity, trust, progress, and relief
Illustrations:
- Certain homepage and webpage sections will include custom illustrations (e.g. transformation visuals in Section 3 of homepage).
- These will be provided by GSM Centre.
- For all other visual placements, use photography only — not illustration substitutes.
3.5 Responsive Design Notes
- Design should be mobile-first in layout and behaviour.
- Maintain clean whitespace, consistent padding, and clear section stacking.
- Ensure CTA buttons remain high contrast, thumb-friendly, and visible across breakpoints.
- Blog cards, testimonial blocks, and success story strips must stack gracefully on small screens.
- How to Use the Provided Content Files
4.1 How to Use the Webpage Documents
Each content file is tailored to a specific page and includes:
- The final approved copywriting for all sections (headings, body, CTAs).
- Layout suggestions (e.g. column formats, toggle layouts, visual card blocks).
- Visual direction (e.g. icon style, section backgrounds, illustration placement).
- Emotional goals and user actions expected for each section.
- Internal linking structure and exact CTA button text.
Most files follow a consistent structure with section-by-section blocks:
- Suggested Layout Format
- Finalised Copy
- Visual Direction
Designers are expected to implement the page using this guidance, while improving layout or animation as needed to match modern best practices. You may simplify, enhance, or adapt spacing and transitions for the best user experience — especially on mobile.
4.2 Pages With Unique Content + Design Structure
The following pages contain combined content and layout instructions in a non-standard format. These should be read thoroughly before starting any visual build:
- 9. Blog Page Content + Design.docx
- 10. Contact Page Content.docx
- 11. Consultation Form Content + Design.docx
- 0. Header and Footer – Content.docx
- 12. Privacy Policy and Terms of Service – Content.docx
These files include custom layout structures, visual logic, or system behaviour that must be followed exactly unless otherwise discussed.
4.3 Notes for Designers
- The documents provided are not rigid templates — they reflect our internal thinking and brand tone.
- We trust your design judgement on layout, animations, responsiveness, and flow.
- Feel free to propose refinements that improve:
- User experience
- Visual clarity
- Mobile readability
- All pages must be designed with a mobile-first mindset, using consistent spacing, padding, and button placement.
- Technical Requirements & Setup Instructions
This section provides the design and development team with all technical features and backend elements that must be implemented. These are non-negotiable execution tasks to ensure the website functions correctly across all intended use cases.
5.1 Blog Setup
- Must be built using the Wix Blog App to allow CMS-based publishing.
- Use a dynamic blog card layout that is scalable and responsive.
- Include support for the following features:
- Category Tags (e.g. “Parent Advice”, “Study Techniques”)
- Search Functionality (basic keyword search across titles and tags)
- Filter by Category (on mobile and desktop)
- Featured Image support for each blog post
- A first placeholder blog post is included (9.1 Blog Post.docx) and should be added to demonstrate layout and tagging.
5.2 Consultation Form Setup
- Consultation page must include a fully functional form, designed using Wix form elements.
- The form content and layout are specified in 11. Consultation Form Content + Design.docx.
- Form requirements:
- Routes form submissions to Wix CRM and to a designated admin email
- Differentiates submission types using tagging (e.g. “Consultation Request”)
- Provides mobile-friendly experience with touch-optimised inputs
- Displays a brief confirmation message on successful submission
- Note: Submission does not auto-confirm a session. Manual confirmation by GSM Centre is required.
5.3 Contact Page Form
- This is a separate form from the consultation form (see 10. Contact Page Content.docx).
- Tagged as a general enquiry, with the following behaviour:
- Submission routed to Wix CRM and admin email
- Auto-reply not required
- Label or internal note must differentiate from consultation form
- WhatsApp contact option is also listed (non-form based, link/button only)
5.4 Internal Linking & CTA Behaviour
- All CTA buttons must link to the appropriate internal anchor or page as specified in the content documents.
- For mobile: buttons should remain visible, high contrast, and comfortably tappable.
- Examples:
- “Book a Free Consultation” → links to internal Free Consultation Page
- “Learn More” → smooth scroll or section jump if on same page
5.5 Mobile Optimisation
- All layouts must prioritise mobile usability and loading speed.
- Design expectations:
- Stacked blocks for content cards (e.g. success stories, blog previews)
- Collapsible toggles where relevant (e.g. FAQ, extra lessons)
- Tap-friendly button size (min. 44x44px)
- Avoid any horizontal scrolling or misaligned containers
- Font sizes must meet accessibility minimums (16px base body text)
5.6 Multilingual Ready (Optional, Not Required Now)
- No language toggle or translated pages are required for this launch.
- However, layout and CMS structure should be flexible enough to add Chinese or other languages in the future without redesign.
- 6. Collaboration & Delivery Expectations
This section outlines our communication flow, design expectations, and working relationship preferences to ensure an efficient and positive collaboration throughout the project.
6.1 Notes for Designers
We’ve provided detailed documents for each page to streamline the design process, but we fully respect that you are the design experts.
You are encouraged to:
- Refine layouts to improve user experience and flow.
- Suggest animation, colour, or spacing improvements based on best practices.
- Optimise the site for mobile-first browsing, especially since our target audience (parents) are often navigating on phones.
We welcome your creative input, especially when it improves:
- Clarity and hierarchy
- Conversion performance
- Visual polish and user engagement
This is a collaborative build, and we are always happy to adjust if your ideas enhance the final outcome.
6.2 Communication & Collaboration Flow
To ensure smooth coordination and clear alignment, we propose the following process:
Kickoff Alignment
- After the first homepage draft, we would like to schedule a short review meeting to:
- Confirm the overall direction of the site.
- Refine layout tone, interaction flow, and homepage structure before expanding to other pages.
Draft Review Flow
- For each webpage, please present a rough layout draft (e.g. section wireframe or structural mockup) before applying full visual design.
- This helps us confirm:
- Key content placement
- Section sequencing
- Visual logic before time is spent on refinement
Preferred Communication Channel
- We prefer to communicate via WhatsApp for faster feedback.
- You can expect a response within 1 business day.
Collaboration Tone
- We aim to maintain a respectful, open, and efficient partnership.
- If anything is unclear or could be done better, please ask — we value your professional input and are always happy to make decisions quickly.
6.3 Design Priorities
- Prioritise mobile layout quality over desktop-only embellishments.
- Ensure fast loading, clean stacking, and tap-friendly elements.
- Keep CTAs visible, bold, and clear across all breakpoints.
- Avoid horizontal scrolls, clipped sections, or overlapping containers.