案例研究

Materiell 如何构建一个人们愿意使用的学校网站

ZURB Foundation 团队撰写的文章 2 月 23 日

雪人观点 太长,不读

40

独特的微网站
1 个共享信息架构

27%

移动流量

508

开箱即用的(无障碍访问)兼容性

挑战

众所周知,学校网站难以使用、不一致,并且在视觉效果方面相当简洁。很多情况下,它们由设计用来完全服务于不同目的的部分构建而成,然后拼凑在一起以尝试满足快速变化的需求。如果 überhaupt 是个想法的话,移动设备很幸运地被当作事后才想到的事情。不过,使用 Foundation 框架的 Materiell 屡获殊荣团队完全打破了这些刻板印象,设计了一个直观、完全无障碍甚至可以说使用起来很有趣的新网站。

2015 年春季,弗吉尼亚州阿灵顿的阿灵顿公立学校 (APS) 学区发现自己与其他许多学区处于同样的境地。学区内近 40 所学校的网站极不一致,难以在移动设备上使用,总是不同步,而且其后端内容管理系统几乎不可能维护。但是,他们意识到,仅仅因为事情就这样并不意味着它们不能改变。总体而言,网站必须提高用户友好性、一致性和易于导航。由于是一个政府网站,因此该网站还有一项重要的且有时具有挑战性的要求:整个网站必须符合 508 标准(无障碍访问残障人士)。

解决问题

将一个大型、复杂、政府网站转变为一个用户友好、响应迅速且可访问的网站是一项艰巨的挑战,但 APS 在 Materiell 找到了完美的合作伙伴。Materiell 是位于华盛顿特区地区的屡获殊荣的设计和开发机构,在教育和政府网站方面拥有悠久的历史。这一经验,加上他们对 Foundation 和 WordPress 的专业知识让 APS 团队毫不费脑地做出了与哪家机构合作的选择,他们很快就投入工作。

我们发现客户端工作人员团队在负责管理网络内容的技术和软件方面经验范围极广。从 Google Education 认证到“我如何添加链接?”不等。我们还了解到,他们已经遵循了一套系统并使其按照他们需要的方式正常运行,以至于他们非常依赖该工作流程。 Deven Cao

Deven Cao 是 Materiell 的创意总监,他从设计角度负责该项目。与高度非技术受众合作提出了一些独特的挑战,因此他们花了很多时间进行线框图、模型制作、制作原型和收集反馈。这显示出需要高度关注工作流程。

随着项目实现从原型变成了代码,Foundation 的使用对于按计划进行项目和解决界面问题至关重要。Materiell 的 Foundation 专家兼杰出的项目经理 Jeremy Englert 指出,从设计到开发到发布,项目中的每个人都熟悉 Foundation。在项目的各个阶段共识,缓解了大量紧张情绪,从设计直至发布都实现了平稳过渡。

深入研究界面层

大多数政府网站遵循“功能胜于形式”的原则。人们访问网站并非为了获得娱乐或在说服下进行购买,而是为了找到他们想要的信息。实用性至上,虽然旧版 APS 网站确实如此,但它们忽视了移动设备用户这一不断增长的群体,他们无法轻松地使用该网站。通过使用 Foundation,Materiell 在此处进行了不可思议的平衡,在保持网站极高实用性的同时,还使该网站在视觉上更具吸引力。

其中一个最佳范例是在工作人员名录中。拥有超过 2000 名工作人员,分布在近 40 所学校中,此看似简单的组件将一个极其复杂的数据集封装到了一个简洁、可搜索的直观界面中。

如今,任何 APS 微型网站的访问者都能快速轻松地找到所需内容。更重要的是,随着学生从小学到初中再到高中,网站会维持一个常见的网站信息架构,甚至允许该品牌调整到每所学校的品牌和颜色。

Foundation 的导航选项确实有帮助,尤其是在移动设备上,您仍然尝试将 20 到 30 个不同的项目放入一个可管理的工作流中。我认为该导航组件为我们节省了大量时间。Jeremy Englert

结果

2016 年夏季,新的阿灵顿公立学校系统正式上线,响应立即生效。在 Materiell 对工作人员对网站的新后端进行培训后,他们从主要的利益相关方那里收到了反馈,例如“即使是那些对于新设计的有效性持怀疑态度的员工,在发布时也感到非常兴奋”。新推出的响应式网站在家长中大获成功,27% 的流量现在来自移动设备。当然,由于基于 Foundation 构建,该网站 100% 符合 508 标准。APS 网站系列的巨大成功证明了 Materielle 团队的才华和创造力以及 Foundation 框架的灵活性!

Yeti 收获

40

独特的微网站
1 个共享信息架构

27%

移动流量

508

开箱即用的(无障碍访问)兼容性

更多案例研究

华盛顿邮报

查看案例研究

国家地理教育

查看案例研究