百货类微信服务号改版:一个“失败”的设计案例?

整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。


整理了一个售前项目的案例,重新绘制了36个原型页面,1张思维导图,3张流程图,2张对比图,1张结构图,介绍一家百货购物中心微信服务号改版的设计。

百货类微信服务号改版:一个“失败”的设计案例?

下文中,图片不清晰可查看我的LOFTER使用图片放大查看。

一、 用户体验五要素

1. 战略层

这其实是甲方公司的考虑,可以理解为大多数百货行业都在通过移动端提供用户更好服务,所以我们的甲方也在其中。

2. 范围层

移动端是设计包括App和移动网页端,包括各类新媒体,目前要解决的问题是,打通微信公众服务号、App以及商城线下,为用户提供全角度的服务。

3. 结构层

微信公众服务号的功能点,既要配合了其他服务渠道,也需要实现其自身的价值。在结构设置上可以分为(1)配合线下的活动页面(2)微信独有的功能页面(3)背靠完整的会员服务体系。核心是服务,对象是用户,也就是会员。重点就是会员服务。

4. 框架层

目前的交互设计主要围绕这个层次,要保证每个链接到页面的跳转逻辑时顺畅的,且对应结构层来说是完整的,每个页面的设计符合用户的心理模型,且保留一定的再开发性,为日后的拓展铺垫更多。

5. 表现层

微信公众号的设计不同于App,所以就本项目的表现层基本在框架层上进一步优化,本文就省略了。

二、 竞品分析

1. 选择竞品

找对竞品很重要,同行业或者同用户群,功能类似或者定位类似,都是需要考虑的,找了以下五个(横向思考):

  1. 大悦城:年轻时尚,相同的用户群。
  2. 大丸百货:外资百货,高大上,相同的服务品质。
  3. K11:含艺术气息的商业百货。
  4. 万达:全国覆盖面较广的集团公司。
  5. 银泰:浙江省较早开发互联网的零售业百货公司。

2. 对比分析类型百货类公众号的概括

百货类微信服务号改版:一个“失败”的设计案例?

可以得出每个竞品的侧重点不一,而结合起来反而是甲方所需要的部分。

总体看一共可参考的也只有三大功能点:会员、APP引流、商城,以及各自的特色服务,会根据商场的营销活动而变动。考虑到线上商城并不是甲方本次改版微信公众号的的服务目的,就是省略了该部分的设计。

横向的竞品只需要概括到结构层就可以了,框架层可以参考的竞品是纵向的,各类可以实现该功能的App页面的设计版式都是可以对比参考的,不需要只在同行业的限制内。

需求分析思维导图:

百货类微信服务号改版:一个“失败”的设计案例?

本案例的结构设置如图:

百货类微信服务号改版:一个“失败”的设计案例?

三、 解决方案及设计图

1. 流程设计

既然结构已设定,那流程必须走通才能绘制页面。分别从菜单的每一栏绘制流程,并考虑栏目之间的联系。

A.菜单1

百货类微信服务号改版:一个“失败”的设计案例?百货类微信服务号改版:一个“失败”的设计案例?

B.菜单2

百货类微信服务号改版:一个“失败”的设计案例?百货类微信服务号改版:一个“失败”的设计案例?

C.菜单3

百货类微信服务号改版:一个“失败”的设计案例?

百货类微信服务号改版:一个“失败”的设计案例?

百货类微信服务号改版:一个“失败”的设计案例?

(因为大小的关系,此处图片被切片,原图查看LOFTER

2. 用户体验设计

亮点一:

百货类微信服务号改版:一个“失败”的设计案例?

“会员中心”和“我的实体卡”之间,是可以通过手指向下滑和向上推来实现的。(如果没有绑定实体卡,会有绑定弹窗的,绑定后是顺滑的手势操作)是轻度滑动,不是长按哦!

【解说】会员中心页是会员体系的核心,实体卡是商城服务的基础,所以这个手势设计把实体卡“埋”在信息结构的下一层,像是揭开了遮罩,通过手势的下滑和上滑来查阅信息。既方便又眼前一亮。(灵感来源:material design的层级设计)。

亮点二:

百货类微信服务号改版:一个“失败”的设计案例?

弹窗比较多。

【解说】其实算不上亮点,弹出的好处在于不需要单独做状态页面,而且不需要返回,直接右上角的叉叉就可以关闭,进行其他操作,这样做可以稍微减少页面的跳转,这样减少加载页面的时间,而且把是不是进行下一步操作的权力还给用户,部分的弹窗上还有交互功能。(发现自己大概是弹窗爱好者)

四、 设计说明

  1. 微信最多3个一级菜单、5个子菜单条目。
  2. 最左的第一个栏目,也就是菜单1,一般是刚关注公众号后的点击率最高的菜单栏目,适合根据具体商城线下营销活动,通过更灵活的变动,来呼应和烘托线下活动的氛围。同时配上微信图文宣传,是可以达到良好的用户交流的效果的。
  3. 最右第三个的栏目,是最靠近右手触控的范围的,最容易响应的会员体系,通过这个位置实现其服务是恰到好处的。
  4. 负责引导App下载的栏目位于第二栏居中,相对来说,中间点开的随机可能性是三栏最小的,站在用户的角度,我们需要考虑到这样一种心理状态:“我都已经关注你公众号了,还要特地去下一个App看在你的商城里买东西,我又不是没有淘宝或者其他购物软件,除非我是脑残粉,或者积分利益驱动,不然我懒得下载。”所以我的解决方案就是“万达式”的,任务模式+利益驱动,栏目设置成“微信福利”,同时在App内同步打卡数据,一方面促进用户使用App,一方面让用户看到栏目能实现的价值。当然甲方还可以配上线上活动优惠券等营销手法,比如设置H5抽奖、游戏等活动,来突出“下载App”可以的到百盛更好的服务等,空出这个位置待后期。
  5. 可以通过原型图边上的备注看出,菜单1、2都是可以引导到菜单3的,同时菜单3也等于是个流程的总和,达到了设计的核心。

五、 项目后续

你真的想知道吗?

哈哈!未被采用!因为当年我在公司的时候,负责这个项目的人不是我,而且我们是乙方公司,甲方想换乙方是分分钟的事情。

当时看到这个项目的时候,是售前项目,也就是说,就算我们给甲方公司做好了竞品和原型,甲方也可以不用,找别的公司开发,其中的原因有四个:

  1. 我们做得不得甲方所愿
  2. 价格问题
  3. 甲方负责人有多个,并且是竞争关系
  4. 甲方领导已承诺了其他合作公司,借我们的成品拿去给其他公司实现

事实上具体什么情况我也不知道,因为后来我辞职自学UX设计了,我纯粹是对这个项目感兴趣而做的设计方案。分享给各位。

以上,仅供参考,我非常想从事UX/UE/交互工作,学了各种书和软件。本文只是个人小见,如果不符合的地方请指出!与君共勉!

 

作者:Eliza(森森),UX、交互设计新人、1年产品运营&用研、2年新媒体运营。诚意想找个UX/UE/交互工作,欢迎勾搭~sensen930@foxmail.com

本文由 @Eliza 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24201/

(0)
CatherineCatherine
上一篇 2017-05-07 18:59
下一篇 2017-05-07 21:08

相关推荐

  • 原型设计里的线框图与原型是什么鬼?发展历程是怎么样的?

    备注:IxD是交互设计缩写。 UX是用户体验缩写 导读:本文作者Jerry Cao是UXPin的内容决策者,也是UXPin 这款在线线框图/原型工具的在线内容开发者。如果你想学习设计原型的思路,熟悉相关工具,以及完整的设计流程…

    2015-06-11
  • Sketchelp·2018暑期工业设计考研课程

    还是你们熟悉的Eric,还是你们熟悉的二师兄。2014年的夏天,天气热的没羞没臊,我们第一次开辅导考研手绘,那时只有三个人,一套笔。那时很开心,每天举着煎饼果子画手绘。两周年,四学期,已完善的课程,将在这个暑假全新开始:是不是临摹还行,轮到自己设计就歇菜?想知道有没有考研的“套路”?一个产品换个角度画,却死活画不出?产品+交互界面真的有很难?故事版的卡通形象一点也不卡通怎么办?“那天”万一考卷画坏了怎么办?答案都在这里。。。真实一线从业...

    2018-05-04
  • 设计规范如何写?这20个精选案例让你大开眼界

    如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。1.Brand Style Guide Examples

    2017-06-02
  • 4种用户体验研究方法,提升最优化测试

    本文讲述的是户研究与A/B测试相结合,发现问题的真实原因,并进行有效的判断处理。“实验可以证实一个理论,但实验永远无法创造出一个理论。   ” —— 爱因斯坦

    2017-05-09
  • 交互设计师怎样理解信息架构

    设计文章 / 交互设计 | 发布者: GUImobile 这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了。今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。在文中讨论…

    2014-10-15
  • 细谈产品"返回原地"设计

    来源:互联网的一些事 作者:读者投稿   在一个列表页上点击某个项,进入详情页,再从详情页返回列表页,应该是回到顶端还是回到原地? 返回到列表时,列表不应刷新、页面不应回到顶端,应该是返回原地,回到刚才…

    2014-09-27
  • 用户体验才是王道

    出生在委内瑞拉的亚历山德拉(ALEXANDRA VASQUEZ),在美国的波士顿大学毕业后不久就结婚了,婚后的她与德国籍的先生定居在柏林。和许多年轻女孩一样,对于新成立的家,亚历山德拉有许多憧憬,急着想布置有个人风格的家居特色。〝我去了大卖场,买了所有成家的基本家具,从床、沙发到餐桌。当这些东西送到我家时,我意识到我的家一点也不温暖,看起来像是一个商场的陈列间。它缺乏属于我和先生的个性以及属于自己生活的种种细节。〞〝意识到了这点后,对于...

    2018-02-03
  • 为产品赋予人格 - 情感化设计的组成要素及实践案例

    Flickr为用户准备了很多有意思的登录欢迎语,这其实是一个容易被忽略的细节,但Flickr的整体设计风格与产品气质也正是由许许多多这样的细节构成的。也许,只有当这些细节从产品中消失的时候,我们才会发现并开始怀…

    2015-11-01
  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 不为动而动!动态效果在体验设计中的应用

    现在在网页和H5中使用动效已经成为一个大的趋势,随便打开一个H5都会看到一大堆跳动的元素在那里向你招手:看这里!看这里!但在这样的滚滚大潮当中我们是否应该思考一下:真的需要这么多的动效么?为什么需要?需…

    2016-07-06