为 ESSCA 国际商学院改造网站

Essca author

ESSCA

ESSCA 的网站不具备移动响应性,这是一个劣势,也无法传达适当的品牌形象。ESSCA 面临的第二个挑战是分散的内容管理系统。这些网站虽然集中在一个后端系统下,但某些功能在不同网站之间存在差异。

Essca desktop
IT Consultis Project ESSCA desktop mockup
Essca desktop
IT Consultis Project ESSCA desktop mockup
arrow-left
right

在本 IT Consultis 案例研究中,我们将向您展示通过集成 CMS API 和 React.js 在 Docker 中改造 ESSCA 网站的过程。 

关于客户:ESSCA

ESSCA 成立于 1909 年,是一所国际知名的法国高等商学院。它提供广泛的商业和管理领域的文凭课程和学位。 

一个多世纪以来,ESSCA 以其学术卓越和国际视野赢得了许多令人印象深刻的数字和 prestigious 认证。这包括成为全球仅 1% 获得 AACSB、AMBA 和 EQUIS 三重认证的管理学院之一。

A picture of ESSCA campus

此外,为了加强其全球扩展,ESSCA 现已开设了 8 个不同的校区,接收来自世界各地的学生。因此,学校每天都会迎来大量的网络流量,包括现有学生、教职员工和合作伙伴,以及全球数百万潜在利益相关者。

因此,ESSCA 必须高度重视其网站,从品牌、文案、设计到内容管理系统。网站必须正确传达 ESSCA 的形象,同时为来自不同地区的用户提供无缝体验。 

这正是 IT Consultis(ITC)介入的地方。 

目标 

根据 Noel-Levitz, Inc. 的研究,“四分之一的报告显示,学生会因为学校网站的糟糕体验而将该校从其候选名单中删除。” 

这一发现表明,一个设计良好的网站对每所大学都至关重要,尤其是像 ESSCA 管理学院这样接收大量来自不同国家学生的学校。 

然而,随着时间的推移,学校的网站已经老化,自然无法跟上最新的设计趋势。 

网站最大的问题之一是移动响应性差。随着越来越多的用户倾向于通过移动设备上网,ITC 需要确保 ESSCA 的网站完全具备移动响应性,以增强用户体验并正确传达品牌形象。 

ESSCA 面临的第二个挑战是分散的内容管理系统。 

学校有许多相关网站,每个网站都涵盖类似的主题。尽管这些网站集中在一个后端系统下,但某些功能却大不相同。这使得 ESSCA 在管理如此大量的内容时花费了大量时间和精力。

The current Homepage of the revamped ESSCA website
改版后的 ESSCA 网站的当前主页

最终,ITC 设定了以下目标,以帮助这所世界知名的法国管理学院优化其网站: 

  • 根据最新设计趋势改造整体设计,并确保其移动响应性 
  • 将所有相关网站统一到具有相同功能的后端系统下 
  • 简化后台管理 
  • 提升前端性能 
  • 简化内容组织 

ESSCA 的解决方案

为了帮助 ESSCA 改造其网站,ITC 提供了一整套服务,包括咨询、UI/UX、前端开发、后端 WordPress 开发、DevOps 以及架构和质量保证。 

以下是更多细节:

网站设计改造 

为了确保最优化的 UI/UX,我们决定对 ESSCA 网站进行 100% 的重新设计。然而,我们保留了最初的配色方案——红色和浅棕色——以维持 ESSCA 的品牌形象。 

总体而言,ITC 根据最新的网页设计原则全面刷新了整体布局。最显著的变化是所有空间都得到了充分利用,用户流程变得更加全面。

Desktop and mobile mockups of the redesigned ESSCA website that kept the initial color scheme - red and light brown

此外,所有元素都遵循最新趋势——扁平化设计,从菜单到 CTA(行动号召)。与旧版本相比,这为网站带来了更现代的感觉。 

在网页顶部,有一个清晰的主菜单,包含 ESSCA 网站最重要的页面。值得注意的是,我们确保将三个主要 CTA——“注册 ESSCA”、“探索”和“我们的课程”——放置在战略位置,以最佳方式引导用户访问关键内容。

此外,精心设计的前端效果也有助于在标签之间实现无缝切换。 

在主菜单下方,ITC 放置了一个顶部横幅,展示微笑学生的图片,作为主页的亮点。这有助于传达学校的形象,并在用户首次访问时吸引和激励他们。 

在主要内容部分,我们决定采用受大学公告板启发的全新布局呈现内容。用户可以在不离开主页的情况下导航到代表不同类别的公告板。每个公告都是一个预览,点击它将引导用户查看完整内容

The main body of content on the website ITC helped develop has a layout inspired by the university pinboard

此外,ITC 还集成了更多美观的前端效果,以增强用户体验。这包括切换效果、图片放大、加载下一页时出现的有趣效果等。 

最后,我们确保网站完全具备移动响应性,以在所有设备上提供一致的用户体验。 

性能改进与技术

此前,ESSCA 有多个网站,包括主网站,都致力于相同主题。毫不奇怪,这使得管理员在管理大量内容时感到困难,同时也让用户在搜索信息时感到困惑。 

因此,为了解决这个问题,ITC 确保所有内容都可以从一个后台进行管理。 

特别是,我们选择 React.js 作为我们最受欢迎的前端开发库,因为: 

  • 其基于组件的架构使开发人员能够以最佳方式修改动态元素 
  • React 组件高度可重用,使长期维护代码变得更加容易 

此外,我们采用了 WordPress Headless 技术的无头架构。通过使用 CMS API,我们可以轻松地将数据从后端发送到 React.js 前端。

ITC helped create the ESSCA website thanks to the seamless integration of WordPress CMS API and React.js inside Docker
开发网站的技术

后端开发人员 Aurelien 分享了他在项目中的经验: 
“CMS API 和 React 之间的集成有时会带来麻烦,需要前端和后端开发人员密切合作以找到最佳解决方案。 
每当需要且 WordPress API 未涵盖时,我们会创建一些自定义端点,以特定格式获取特定数据供 React 使用。 

我们为 ESSCA 网站(以及所有项目)应用的另一种技术是 Docker——一个用于 DevOps 轻松构建、交付和运行分布式应用程序的开放平台。ITC 经常在项目中使用 Docker,以避免不同环境(本地、测试和生产)之间的冲突,通过持续集成(CI)过程确保数字资产的标准化和生产力。” 

得益于 CMSReact.jsDocker 中的无缝集成,ITC 成功将所有相关内容整合到同一个网站中。 

尽管信息量巨大,布局仍然非常简洁且易于理解。此外,这种统一也使 ESSCA 团队的管理变得更加轻松。 

家长门户

我们为 ESSCA 开发的另一个功能是家长门户,供家长访问有关其子女的信息。例如,课程、学校规定、学业记录等。只有家长可以通过用户名和密码访问此门户。 

此门户托管在第三方平台上。然而,它仍然遵循与主 ESSCA 网站相同的视觉形象,并在同一后端下进行管理。 

通过为家长提供定制页面,现有学生的家长可以轻松访问必要信息,而不会被主页上的信息淹没。同时,这也是吸引潜在学生家长为其子女未来课程进行研究的好方法。

成果

3 mobile mockups of the website

得益于现代网络技术的使用,ITC 成功全面改造了 ESSCA 的网站。这带来了以下成果:

  • 时尚且专业的设计 
  • 优化的前端性能 
  • 更集中且易于管理的后端系统 
  • 在桌面和移动设备上提供无缝体验 
  • 家长可通过独立门户轻松访问 

通过官方在线渠道的增强体验,ESSCA 可以提高现有学生的满意度,同时增加未来潜在学生的数量。 

您的网站是否满足当前用户需求和设计趋势? 

IT Consultis 是一家拥有超过 10 年经验的数字转型机构,专注于咨询和提供量身定制的数字赋能工具。

联系我们,讨论您的在线形象改造,并优化您的用户体验和潜在客户生成能力!