京东超级体验店小程序升级——到家与到店的用户体验聚焦


















项目背景
京东电器超级体验店(以下简称:超体店),是京东自营的大型电子消费主题购物中心。通过品牌赋能、科技赋能、供应链赋能、体验赋能,打通多业态融合和线上线下融合。
随着超体店在重庆与合肥的开业,业务形态也正在进行逐步升级。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(超体店门店全面升级)

根据目前超体项目整体升级计划,超体小程序的迭代也是升级过程的重要一环。
超体小程序从2019年起进行过1次大的改进,期间也承接了页面功能的小迭代,但根据业务诉求,当前小程序难以承载升级后超体店的用户需求,使用体验有待提升。

Part1:明确目标与制定设计策略
改版迭代类项目,核心思路应该是先定义要解决什么问题,然后才是如何解决。因此,在产出具体方案之前,尽量弄清这些事情:

  • 改版的背景和动机;

  • 产品现状;

  • 用户情况;

核心在于掌握当前产品方向,以及能为迭代提供决策的核心信息

改版动机:
超体小程序的核心意义在于提高用户线下逛购的体验,以及超体商品及服务的上门。随着超体店的整体升级,小程序的用户体验也有待改善。

产品定位:
首先,我们对超体小程序2.0当前的整体框架及页面进行了分析

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(超体小程序2.0框架与页面)

随后,我们梳理了用户到家与到店购物场景的各个流程,并思考当前小程序2.0是否能为用户的线下逛购及线上购物提供更好的体验。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(到店场景购物流程)

最终总结出目前2.0小程序存在的问题:

  • 小程序整体:购物场景区分不明显,功能无法满足多场景用户需求,不符合购物动线

  • 线上场景:无自身特色,可替代性强

  • 线下场景:线下使用场景无法贴合用户线下逛购动线,实用性较差

因此本次3.0改版的核心任务在于

  • 到家与到店场景的区分

  • 到家与到店的核心场景的需求解决

  • 视觉元素的改善

我们也对超体小程序进行了重新的定位:
创新的门店零售工具,满足到店到家多场景购物

Part 2:明确设计内容及页面布局:
用户画像:
超体业务的用研侧为我们提供了超体消费者的用户画像;用户构成主要是以中年家庭群体为主,该类用户非网络原住民,也更笃信“眼见为实”;年轻群体则是我们的潜在用户,他们精通熟悉各网络产品,追求新鲜新潮的体验。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(超体用户画像)

因此在页面的设计及布局上,我们需要保持整体内容的轻量化,保证界面的简洁,重点信息的突出,用户不需要过多的学习成本即可操作。我们还与超体的业务方沟通,希望能在开业后,通过一些创新的营销手段和有趣的线下活动,去吸引潜在的年轻群体来超体店进行逛购。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(页面设计方向)

用户核心场景分析:
小程序2.0对于用户使用场景的定义较为模糊,即无法解决用户为什么需要使用超体小程序?这个问题的答案就在于:

  • 弄清用户的核心场景

  • 如何帮助用户解决核心场景需求


首先,我们是从大数层面,对于用户整体的数据进行了搜集与分析。根据数据结果,到店用户会更在意线上的逛购体验;而对于到家用户而言,除了关注优惠外,线下到店体验、在家线上下单已经成为多数用户趋势。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(用户数据搜集)

随后我们也和业务方沟通,整理了到家与到店用户在逛购的行为流程,总结出用户的核心场景。
对于到店用户其核心场景在于:

  • 扫码购:即线下逛购挑选心仪商品,随后对商品进行扫码,线上下单购买。

对于到家用户,其核心场景在于:

  • 线下到店体验、在家线上下单

竞品分析:
在具体方案设计前,我们也带着设计目标去对市面上的竞品进行分析,梳理已被市场验证的页面结构、场景情况及异同点,思考是否有可借鉴意义。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(线下逛店竞品分析)

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(到家页面竞品参考)

综合总结下来,到店页面的核心在于保证页面布局清晰的前提下,首先满足用户的逛店的核心需求。而到家页面的核心在于突出超体特色服务及2小时极速达权益,保证产品的差异性和独特性。

Demo确定:
在总结完前期的分析与调研后,我们根据业务侧给到的demo进行调整,定义用户核心诉求及,对信息的优先级也重新进行排列。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

(小程序3.0首页demo)

Part 3:设计呈现及内容表达
交互方案:

1.用户核心需求的解决

用户的精力是有限的,用户使用某个产品,或进入某个页面,必然带着其核心的诉求。而我们在页面的信息层级、功能罗列上,也必然首先保证其核心需求解决的良好体验。
比如,在到店的情况下,用户更多的时间精力是放在线下逛购。在这种情况下,他们使用小程序的核心场景,便是在体验完心仪的产品后,进行扫码,针对该商品更多详情或直接进行加购。因此我们就将“扫码购”这一核心功能置前,并针对其不同状态进行了不同的样式设计。
在家的场景下,用户有更多的时间进行线上浏览,因此我们将更多的优惠内容放置首屏。同时,“线下体验后,在家进行线上下单”已成为当前用户的多数选择,我们也将用户的线下体验足迹与到家内容相结合,并将该模块前置。

京东超级体验店小程序升级——到家与到店的用户体验聚焦


2.特色内容的突出与区分

根据超体业务形态,当前有许多吸引消费者的特色内容,需要进行突出与前置。
比如,在到家首页当中,我们对超体特色免费服务突出,并将优惠内容的前置。
在到店页面中,根据业务反馈,超体店线下的活动体验非常受到消费者的欢迎。因此我们也梳理了活动预约的逻辑,将该模块放置在首屏,并根据用户预约状态进行不同展示,保证用户线上预约,线下活动参与的良好体验。

京东超级体验店小程序升级——到家与到店的用户体验聚焦


3.最合适的设计样式选择

超级体验店的业务是线上与线下的结合,即包括了为用户配送到家的内容,也涉及线下到店的体验,因此其涉及的信息及场景较多。在设计的过程中,我们也在不断思考和对比,哪些样式才是适合,最能帮助用户快速掌握到所需的核心信息。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

视觉方案:

1. 解析项目需求:

首先我们对项目进行氛围诉求拆解,作为京东电器小程序,首先需要突出品牌印记,加强用户京东品牌属性认知,使用京东背书加强用户的认同感。
之后再对项目目标进行整理,本次业务需求是超体品牌升级后的视觉升级迭代,希望可以用简洁的视觉语言突出功能信息符合用户诉求,引导用户线上线下全流程操作。

整体项目 的目标定位是:加强品牌印记、提升品牌形象

2. 视觉方向推导:

首屏表现:清晰简洁的视觉风格,突出功能信息符合用户使用诉求,强调品牌专业度,保证页面风格清爽简洁,引导用户线上线下全流程操作。

京东超级体验店小程序升级——到家与到店的用户体验聚焦


视觉符号:运用品牌凸显作为主视觉符号,强调页面品牌调性,并结合主图形的延展图形,满足不同场景诉求。

京东超级体验店小程序升级——到家与到店的用户体验聚焦

楼层表现:采用卡片与商品的结合,突出主推活动模块,大色块与弥撒投影的结合,点缀年轻科技感

京东超级体验店小程序升级——到家与到店的用户体验聚焦

配色方向:采用京东mall品牌色为主色,添加临近辅助色,强化品牌感

京东超级体验店小程序升级——到家与到店的用户体验聚焦


Part 4:页面展示:

京东超级体验店小程序升级——到家与到店的用户体验聚焦


目前随着超体业务的升级,超体的小程序也仍旧在不断地优化迭代中,不断地改善用户体验,为消费者创造良好的购物体验。

以上,感谢阅读。

感谢项目成员施羽、丽梅、云林、成硕、西贝、丹妹、华康、紫薇、馨妍、的认真负责与辛苦付出,也感谢各位超体业务组的成员支持!

本篇文章来源于微信公众号:京东设计中心JDC

UI/UX

UI、交互和产品经理三个岗位的围城

2021-9-26 8:20:00

UI/UX

我的4条产品设计工作观

2021-9-26 13:59:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索