2020-10-16

八年时间三次改版,聊聊满天星公益官网的改版迭代故事

10月1日,满天星公益的新官网完成升级改版,正式上线了。

▲ 2020年,满天星公益第三版官网

这是满天星公益成立以来官网的第三个版本。八年的时间,三个版本,满天星公益的官网就是机构发展历程的见证。

作为满天星公益三版官网的全程参与者,我想聊聊满天星公益官网的改版迭代故事。

01 机构刚成立,网站不可少

2012年,满天星公益正式成立,机构创始人海光已经开始考虑如何打造机构的品牌形象了。他先是找了联合思动的创始人痞子设计了满天星公益的LOGO,这个LOGO就是当前正在使用的书本、星星和人脸的形象,具有非常高的辨识度。

LOGO确定之后,网站建设的事情提上了日程。作为满天星公益的志愿者,我根据机构的内容架构做了网站规划,经另一位志愿者设计了首页,然后开发了第一版网站。

▲ 2012年,满天星公益初版官网

这一版网站比较简单,以展示信息为主。由于机构刚成立,需要让外界尽快知道这是一家做什么的机构,于是把“我们是谁”、“我们做什么”这样的大按钮放在了头部显眼的位置,点击就可以对满天星公益有个直观的了解。

右上角是满天星公益LOGO的一个简化形象。大家看满天星的LOGO,可能更多是看到书本、人脸和星星,其实里面还隐含着“一棵树”,正所谓“十年树木,百年树人”,寓意着满天星公益专注教育领域。

2012年,移动互联网还不是很流行,所以这版网站只有电脑端,没有手机端。

机构刚成立时,建立好自身的品牌形象和对外宣传渠道非常重要,即使只是依靠志愿者或自助建站工具建立起来的简单官网。因为在公益圈,做类似项目的机构太多了,必须有独特的品牌辨识度才能被人们关注。有了网站,在对外介绍机构时就有了可以随时展示和访问的内容,才可以将机构发展的历史沉淀下来,变成机构的宝贵财富。

除了官网之外,一些重要的项目也逐步建立了专题网站,如阅读夏令营、星囊计划。满天星公益在网站建设方面总是不遗余力。

▲ 阅读夏令营专题网站

▲ 星囊计划专题网站

02 机构走上正轨,对官网有了更多需求

第一版网站顺利运行了2年,满天星公益走上正轨,阅读夏令营活动的参与志愿者越来越多,项目展示的内容增多,捐赠需要更方便的渠道,对信息公开有了更高的要求。于是网站改版的事情就提上了日程。

此时,全思科技正式创立,我们定下了为非营利行业提供互联网技术服务的基调,为满天星公益改版官网是我们初期的重要项目。

海光刚从国外参加某个培训回来,他了解到国外一个非常有意思的组织,叫做FeelGood。他们有一个很不错的平台,可以让青年人在平台注册,然后参加一些对社会有帮助的青年活动,赚取积分,兑换礼品或参与特定活动的机会。


海光认为,对于志愿者来说,能够在线报名参加活动,对参加过的活动形成记录,同时可以给予志愿者积分或志愿时,用于兑换礼品,是一个非常完美的“闭环”,可以给志愿者最好的体验和激励。

另外,随着满天星公益的发展壮大,他们需要更完善的捐赠支持方式,能让捐赠人对指定的项目进行在线捐赠、查询自己的捐赠记录。海光还非常重视捐赠人的长期支持,希望能够在网站上实现捐赠人月捐的功能。

那是2014年,非营利行业在中国还处于探索阶段。通过学习国外的经验,满天星公益在网站方面的想法非常超前。

全思科技与满天星公益从需求调研开始,探讨每一个环节的实现方式和技术可行性,经过大半年的规划、设计和开发,满天星第二版官网在2015年正式上线。

▲ 2015年,满天星公益第二版官网

随着移动互联网的兴起,这个网站设计为适配电脑端和手机端,在手机端不用进行缩放就能浏览全部内容。网站的固定头部、通栏轮播图、可视化的影响力数据展示,都是亮点。

网站实现了志愿者的在线注册、认证、报名参加活动、志愿时记录、积分兑换等功能,志愿者通过个人中心可以查询自己的信息及参与记录。

网站还实现了在线捐赠功能,打开满天星公益的特定项目,可以进行在线捐赠。当时还没有微信支付,我们是连接支付宝完成捐赠付款的功能。每一笔捐赠都可以在官网进行查询。

满天星公益一开始就很重视长期捐赠对机构发展的作用,一直在寻找合适的月捐模式,关键点在于是否有合适的渠道进行授权代扣。满天星公益在2015年就尝试了两种方式。

一开始是通过工行的代扣业务,我们开发了对接工行代扣授权的功能,使用工行卡的捐赠人可以在线完成授权,每月定期代扣捐赠款,但这种方式的弊端在于只支持工行卡,局限性很大。

后来,满天星公益接触到一家第三方支付服务平台,叫“通联支付”,可以实现多家银行的代扣服务。于是我们又开发了通联支付的对接功能,捐赠人可以在线开通几乎所有银行的代扣服务,并且可以在官网查询每个月的捐赠记录。

满天星公益在月捐方面的尝试,可以在本文底部看到相关文章👇👇👇。

这一版网站上线之后,受到不少公益机构的喜爱和肯定。很多机构来找全思科技讨论官网建设需求,第一选择都是借鉴满天星公益的官网。

一方面是由于满天星的这一版官网设计配色紧紧贴合了满天星的LOGO和VI,而且内容版块划分清晰,符合大部分公益机构的想法。

而另一方面,则是满天星公益在内容建设和更新方面的不懈努力。

03 内容为王,不仅仅是一句空话

内容为王,不知是哪个人在哪本书说的一句话。但它在微博刚刚兴起时,是个很流行的语句。但凡做互联网的人,谈及自己的运营经验,都得带上这一句。

当设计不够出彩时,总会情不自禁地抛出一句“内容为王“,企图把责任推到”没有好内容“上面。

当没有足够的经费和渠道进行推广时,也总会情不自禁地抛出一句“内容为王“,仿佛只要做好了内容,推广效果自然就好起来了。

以上只是玩笑话,只有内容当然不够。但对于公益机构来说,只有先做好了内容,其他的一切才有了根基。

“内容为王“说得简单,却成为很多机构建设网站或运营平台的最大障碍。

每当有机构跟我们沟通网站建设需求时,我们会先去检索一下机构的介绍,了解机构的主要服务领域和项目模式。随后我们都会抛出一个问题:您希望给用户展示什么样的内容。

对于网站内容已经有充足准备的机构来说,我们可以很快地确定网站规划方案,按计划完成一个符合双方期望的网站。

但对于网站内容还无法明确的机构来说,网站的规划实施变得遥遥无期,甚至在网站开发完成上线之后,也存在大量未补充完善的内容。网站成了一个空壳。

别的不说,能够及时在官网更新机构动态、年报财报、捐赠信息,就已经是很多机构都无法做到的事情。

客观来说,满天星公益的第二版官网并没有非常出彩的地方,它中规中矩,没有夸张的设计,没有炫目的特效。

但很多机构都非常欣赏这个网站,我觉得主要是满天星公益对网站内容建设的重视,一直都会至少安排一名人员进行网站内容的及时更新,让这个网站的内容非常充实,可读性强,访问者可以迅速找到自己希望了解的内容。

▲ 满天星公益的新闻动态更新频率高,且配图质量好

网站上线之后,据海光所述,有一定比例的企业是通过搜索引擎找到了满天星公益的官网,了解到满天星公益正在做的事情,看到网站上充实的内容而觉得是一家靠谱的机构,才决定跟满天星公益合作的。

这也是另外非常重要的一点,持续保持更新的网站可以让搜索引擎的收录数量更多、权重加大,更有利于相关用户找到机构。

内容为王,这是一件需要长期坚持去做的事情,不仅仅是一句空话。重视内容建设的网站,即使其设计不够出彩,仍是一个对用户有价值的网站。

04 机构的发展和政策的变化推动官网调整

第二版网站并非一成不变地运行了5年,随着机构的发展和政策的变化,网站的功能和界面一直在进行调整。

最初,满天星公益最重要的项目是阅读推广活动,每年都需要招募志愿者到乡村学校举行阅读夏令营或推广日。因此,网站的活动招募模块发挥着重要作用。

▲ 早期满天星官网的招募信息

但随着满天星公益的项目重心转移到公益图书馆建设和乡村教师赋能发展,招募模块的使用频率就大大降低了。这也导致机构不想在这个模块功能迭代方面投入太多。当有活动需要招募时,通过第三方表单在线填写更加方便。

2016年,公益圈发生了一件重要的事情,就是《慈善法》的正式颁布,其中对互联网公开募捐的合规性做了界定,非公募机构不能在自建网站或平台上进行公开募捐,必须联合具备公募资质的机构,在民政部认定的平台上开展。这就意味着,满天星公益官网的在线捐赠及月捐功能必须取消了。

于是,我们对网站进行了调整,取消了活动招募功能,招募只保留介绍内容部分,具体招募流程连接到第三方表单进行。另外取消了在线捐赠和月捐功能,捐赠跳转到第三方的腾讯公益等认证的互联网募捐平台进行。

同时,由于机构对LOGO和VI进行了微调,色系发生了变化,我们对网站的LOGO和整体配色进行了调整。

由于机构有海外的关注和支持用户,我们开发了网站的英文版,这是官网中文内容的简化版,只展示机构的介绍和项目内容。

为了让信息公开更加透明,我们在首页放置了捐赠的相关数据展示和滚动的捐赠明细,用户可以查询自己的捐赠记录。

▲ 满天星公益第二版官网进行了微调

虽然官网取消了活动招募和在线捐赠功能,但满天星并未停止互联网平台建设的脚步。

从2016年开始,围绕公益图书馆建设和乡村教师赋能发展,满天星公益联合全思科技规划开发了一系列的产品,包括借阅信息平台、流动书箱、童书乐捐、教师阅读社区,同时在这些平台里通过接口的形式打通募捐渠道,让用户更便捷地参与活动和捐赠支持。

▲ 满天星公益的项目信息化平台体系

这些产品独立于官网之外,自成体系,能够更专注地为相关用户服务。

 

05 机构战略调整促使官网进行大改版

满天星公益的机构战略进行了调整:探索和建立能在乡村生根发芽的儿童阅读项目模式,借助智能化和信息化的技术手段,连接和赋能利益相关方,共同推进乡村儿童阅读服务的专业化和标准化。

满天星公益形成了更科学的乡村儿童阅读推广体系,第二版官网的内容版块布局已经满足不了内容展示的需要,因此2020年6月,满天星公益官网开始进行第三版的规划实施。经过几个月的需求沟通、规划设计、开发实施,终于在国庆上线。

第三版官网全新设计,主要有以下变动:

1.  首页采用通栏设计,每一版块突出展示一个主题内容,结构清晰。轮播图取消文字内容,突出宣传图片。影响力数据版块增加地图,更形象地展示满天星公益开展项目的区域。底部增加月捐宣传区域,方便公众参与支持。

▲ 顶部和轮播图

▲ 影响力数据

▲ 月捐宣传区域

2.  一级版块的排版做了优化,不再采用左右分栏,改为上下结构。二级导航放在头部下面,访问者比较容易看到,也可以留出更多空间给主要内容。

▲ 一级版块排版优化

3.  项目页面做了比较大的改动,通过聚合页展示满天星公益的项目体系。为了让访问者更好地理解满天星公益的乡村儿童阅读推广体系,我们设计了一个2.5D图。

▲ 体现项目体系的2.5D图

4.  信息公开的内容更加突出,内容更详尽。为了体现满天星公益的公开透明,我们在首页放置了一个报告展示版块,点击可以直接查看最新报告。信息公开版块分为捐款明细、捐物明细、财务报告、审计报告、年度报告,更直观,更全面。

▲ 首页展示详尽的信息公开内容

改版完成上线之后,满天星公益迅速依据新版的内容架构上传补充了新的内容,优秀的行动力让新版网站呈现的效果更好了。

希望这版网站能再用五年,满天星公益也能不断向上发展,为乡村儿童阅读推广带来更大成效。

 

后记

全思科技在非营利领域做互联网信息服务已经5年了,承接过很多机构官网。满天星公益官网是这里面做得最成功的,原因在于他们对官网需要展示的核心内容有清晰的把握,并能随着机构的发展和政策变化进行迭代,更重要的是他们坚持高质量地更新网站的内容。

每个机构都有自己独特的品牌形象和项目特点,因此好的官网是机构方和服务方互相配合和努力的产出成果。

相关文章