Language opens doors.
Let the website show it.

The recommendation

Build a cinematic introduction around the idea “Step inside Erican.” Use the supplied Erican logo as the palette reference, with white and pale content sections, deep blue typography and feature panels, small yellow accents and the logo’s existing red detail. As the visitor scrolls, Erican’s own reception, classroom and illuminated feature-wall photographs transition smoothly, accompanied by a different message and floating language-learning elements for each chapter. Follow the opening with a fast, clear path to the right programme and a counsellor.

Updated visual preference: introduce white space throughout the content sections, retaining Erican blue for text and selected panels, with restrained yellow accents. Working audience assumptions: balanced priority and programme discovery followed by enquiry. These can be adjusted after the first review.

What the current website tells us

Erican already has useful foundations: a substantial programme range, placement tests, international admissions, student support and a regional centre network. The redesign should preserve those capabilities and make them easier to understand. The issues below are observations from public pages, followed by proposed remedies.

These observations are not measured conversion losses, a security assessment or a complete accessibility audit. No analytics, Search Console, CMS or payment system access was used.

Design for the decision each visitor is making

A simpler website structure

Keep the first release focused on the pages that help people choose and enquire. Preserve the remaining content through explicit migration decisions and redirects.

Migration approach

Preserve useful, established URLs where possible. Where a URL changes, map each old slug and numeric ?page_id= address to its exact replacement with a permanent redirect. Keep existing payment and placement-test workflows until their replacements pass full acceptance checks.

The visual and motion system

Use oversized, clear typography and generous spacing across spacious white and softly tinted surfaces, with deep Erican blue for typography and immersive feature sections. The surface palette is: the header, programme section, statistics, getting-started guide, FAQs and footer use white or pale backgrounds. Programme tiles are mostly light, with a blue Cambridge English tile providing visual contrast. The hero uses a white canvas with actual Erican premises photography. Keep the experience artwork, Malaysia feature panel and final contact section blue. Use logo yellow sparingly for small icons, highlights and accents; use dark blue or slate text on white for readability. Use large typography, an animated multilingual ribbon, dimensional lettering, animated programme tiles and scroll reveals to carry the visual direction throughout the site. The header and footer now use the supplied original logo, unmodified.

Hero direction updated 13 October 2026: replaced the fragment animation with whole-photo dissolves and floating language-learning elements. Uses the same three photographs supplied by Erican. Other homepage sections remain as previously reviewed.

Make the effect work for everyone

• Use native scrolling. Provide a skip link and chapter controls. Do not lock or hijack scrolling.
• Pause controls stop ambient movement and pointer effects. The reduced-motion preference removes the long pinned sequence. The photographs, content and language elements use native HTML and CSS; WebGL is not required.
• Reduce the surrounding language elements on mobile. Pause decorative animations when the scene is offscreen or the tab is hidden.
• Keep all meaningful text and navigation in HTML; the decorative 3D scene is excluded from screen-reader output.
• Use real, approved teachers and students in the production photography. Generated images may support abstract language concepts, but should not be presented as documentary evidence.

The supplied Dribbble collection informed the visual approach. Zajno’s educational concept demonstrates how a central 3D subject can carry an educational narrative; ThreadLab’s concept connects visual treatment to a staged journey. Erican’s narrative and assets here are original. Dribbble images are not reused.

What the local mockup includes

• A functioning scroll-driven 3D letter sculpture → “hello” → doorway sequence, with chapter jumps, pause, reduced-motion handling and a WebGL fallback.
• Responsive homepage, accessible navigation, seven programme tiles with dimensional lettering, audience filters and course-detail dialogs. Tiles enter in sequence and respond to the mouse with tilt, cursor glow and a light sweep.
• A supporting Higgsfield / Recraft image, English-learning story, Malaysia section, getting-started guide, FAQs and an eight-centre contact selector. Pointer movement gives the artwork and Malaysia typography depth; buttons, links and supporting content also respond on hover.
• Explicit links to existing Erican courses, tests and contact channels. The mockup itself sends no enquiry, takes no payment and stores no personal data.

The prototype is a design review tool. It does not include the full migrated website, an admissions backend, a CMS, new placement-test scoring, live payment processing, translated pages or live intake/fee data. Contact links are real external handoffs. Statistics are retained as attributed existing-site claims pending Erican’s verification.

Big Ben: the design benchmark

Historical benchmark from 2 October. The sculpture proposals below have since been superseded for the hero by Erican’s three-photo premises sequence (7 October); they remain background design research.

The next Erican iteration should strengthen the visual story: one recognisable language sculpture, connected scroll transitions and larger imagery, supported by a direct route to programmes. The current mockup establishes the palette and interactions; this is the proposed next design pass.

Proposed Erican sequence

A word → a conversation → a world of possibility. Begin with a blue glass speech form on white. Scrolling gathers letters into a greeting, then opens the composition into an Erican learning scene. Follow with programme tiles, real learning stories, international student life and a clear enquiry route.

Priorities for the next mockup

1. Refine the hero’s sculpture, lighting and camera transitions; keep programme and contact navigation available throughout.
2. Give the tiles distinct imagery and vary the scale of supporting sections.
3. Add verified human and institutional evidence with approved Erican assets.

Keep body text dark and readable, shorten decorative scroll stretches, and provide a still fallback, motion controls and direct navigation. The competitor’s light grey text and lengthy pinned scenes are tradeoffs to evaluate, rather than automatic targets.

Desktop visual review: 2 October 2026. Reviewed both supplied pages in a browser. The main homepage’s opening media remained blank in this session, so its opening motion was not assessed. The Future clock, text transitions, card sequence and philosophy imagery rendered. This review does not establish conversion performance, mobile quality, accessibility compliance or the validity of accreditation and numerical claims. These proposals have been added to the plan; the homepage prototype has not changed during this review.

A practical path from concept to launch

Indicative planning range: 8–12 weeks with a small dedicated team and timely content decisions. Scope, integrations and translations may change this range. This is a planning estimate, not a delivery commitment or budget quote.

Production acceptance targets

• Visitors can reach a relevant course within two purposeful selections from the homepage.
• Mobile and desktop page layouts work at narrow widths and 200% text enlargement; all interactive elements support keyboard use and visible focus.
• Target WCAG 2.2 AA, including text contrast, meaningful labels and accessible error messages. Verify against the official standard during production testing.
• Core Web Vitals targets for the 75th percentile of real mobile visits: LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1. These are targets, not results measured on the current site or mockup.
• Every enquiry route, placement result and payment outcome is tested with authorised test data in staging.
• Track programme selection, enquiry start/completion, test start/completion and counsellor qualification. Establish a baseline before choosing uplift targets; a WhatsApp click is not itself a confirmed enquiry.

Sources and audit scope

Reviewed the homepage’s rendered layout and public navigation, plus the page content linked below. This is a qualitative sample of key journeys, not an exhaustive crawl of every page or a measurement of speed, rankings, accessibility compliance or conversion performance. Direct automated retrieval was blocked, so review used browser-rendered content and the web reader. No forms, quizzes or payments were submitted.

• Homepage and navigation
• Programme directory
• Young Learners
• Cambridge English
• International English
• IELTS
• Admissions
• Centre directory
• Contact form
• Testimonials
• Student services
• Adult placement-test page

Prepared 2 October 2026. Future performance and compliance figures above are proposed acceptance targets. Artwork: one Higgsfield / Recraft V4.1 generated concept, job e0119087-87c1-478c-81da-4fcb77e53dad. Source details are retained in the project’s audit folder.