OYO 酒店 APP 2.0 项目重构整理

释放双眼,带上耳机,听听看~!

以OYO酒店APP2.0为例,我们来讲解下APP改版设计思路,希望能给正在开发APP的同学们一些思路的见解。

一、简介

1. 项目背景

OYO 酒店中国区自成立以来,仅一年多的时间里,在全国就拥有超 1 万家酒店、50 万间客房,成为国内最大的单品牌酒店之一。同时为了打通线上和线下入住体验,OYO 在 2018 年下半年推出了 OYO 酒店 APP,配合线下门店的 PMS 等系统,使用户在入住中能感受到 “花更少 住更好” 的体验;

但是,随着 OYO 酒店 2.0 签约模式的推出,最初产品功能已经不能满足业务的发展需求,在拉新、获客、下单、留存、以及品牌认知等方面,都需要进行一次全面的升级;

1.0 迭代版本的页面 (旧版本)

通过对之前版本的用户体验访谈,线下店铺走访调研,以及线上数据埋点,用户反馈等方式收集来的用户数据来看,1.0 版本主要存在以下几个问题:

二、项目重构体验目标

在数据收集方面:

  1. 外围数据:我们对身边外围用户进行了 APP 的使用体验 (面试者,同事朋友等);
  2. 主观数据:UED 的小伙伴会定期出差体验不同城市的 OYO 酒店及时发现问题,并对入住酒店的顾客进行意见收集;
  3. 物理数据:对 APP 的各页面重点功能,进行数据埋点,掌握用户对各个功能节点的数据反馈。并结合大数据平台,对用户信息进行归类和分析;
  4. 线上反馈:APP 意见及投诉收集,各大分发平台中差评收集整理;

通过对 1.0 及其迭代版本的问题数据收集,最终我们结合产品现阶段的定位和以前存在的问题,给出了 3 个改进的核心点:

根据产品的核心改进点,重新对产品结构和目标进行梳理:

1. 如何“更聚焦”

a. 结构聚焦

不同于其他平台设计的卡片式样式,我们对页面的卡片的样式与内容进行了平衡。在大家设计不断增加页面结构层级的时候,我们对层级进行了归纳和减少,相比较我们对卡片形式本身也进行了弱化,以内容为设计;

b. 优势聚焦

每个产品的存在都有它最核心的产品定位,就像 OYO 的slogan “花更少,住更好” 一样,我们产品的核心价值就是 OYO 酒店所独有的“性价比”;

所以,本次改版,我们突出了产品优势,将页面中的价格和优惠信息,强化展示出来,突出与其他平台的优势;

2. 如何 “更便捷”

在产品的使用中,流程更简单,推荐更准确,场景更全面,都能让用户更快更准的找到符合意愿的酒店;

a. 流程更便捷

我们首先对产品的流程进行了优化,结合“大部分用户在当天当地预订酒店”的行为,通过产品自身的推荐算法,让整个下单流程最快只需 3 步,进入首页后,点击推荐酒店–详情页预定该酒店–付款,即可完成整个下单过程;

b. 场景更便捷

在 OYO 产品的价值体系中,我们对产品各个阶段进行了对应的功能排布,把我们希望用户做的行为簇分为了几个阶段,并指明了不同阶段中我们应当关注哪些数据;

获取用户

提高活跃度

用户留存

自传播

3. 如何“更有温度”

在 OYO 酒店 APP 以往的版本设计中,我们很难发现有和品牌相关的设计在里面,APP所承载的信息也非常有限。在 OYO 现阶段的发展中,品牌传播对于产品业务拓展和产品感知体验的作用尤其重要,于是我们在新的版本中强化了品牌存在,赋予产品了内涵和温度;重新梳理了产品结构,增强了各个模块可扩展性;

a. 品牌基因

将 OYO 的 logo 图形化后,我们可以很容易从品牌最初的设计语言上来读懂OYO 所诠释的简约,logo 图形都是基本的几何构成;

于是,我们基于“极简化”的设计原则,在设计元素上提取了 “O” 作为 OYO 酒店 APP 的基因,对页面的模块和设计元素都进行了“圆”的处理,“O” 也在整个改版设计中贯穿整个 APP;

同样,在产品的动效上,我们也参考了球在滚动时的规律 (匀减速):


b. 品牌识别

基于本次的品牌基因 “O” 这一基本元素,我们在颜色,图形、排版上都做了基本处理,因此,我们把本次改版的设计语言称为:“基本设计”

基本图形

icon 的设计上也用基本图形去设计,不去做多余的变形,视觉上保持风格一致性;

基本色彩

对酒店图片进行调研后发现:我们酒店的布置都是统一的红色枕套和床单,酒店的灯基本都是暖灯,绿色是部分酒店内的绿植摆设。为了保持整体页面感观的一致性,我们主色和辅色设定为酒店图中出现频率最高的两种颜色;

绿色,在图片中出镜率不多,所以绿色我们在 UI 上只用于列表评分,在页面浏览感受上使图片和UI框架的颜色能更加的保持统一;

其实 APP 本身的酒店图片已经带有大量的红色色值,所以我们在设计时候,对整个 APP 进行了大体量的减红,将红色只用到“购买“和优惠的维度上,功能按钮也都使用了纯色,以减少次级信息对用户浏览的干扰;

基本字体

在文字上,我们也采用最基本的字体,iOS 采用 PingFang,android 采用思源黑,只有在显示主要价格,付款等数字才会用到 DIN 系列字体;

c. 情感化

下拉加载

怎么能让产品传递出有温度的感知体验呢?线下的入住体验中,除了硬件体验和入住流程价格优惠等触点,哪些地方还能让我们去挖掘使用舒适的感受呢?于是我们结合产品感性体验列举了:柔软的,舒适的,温馨的,拥抱,微笑,咖啡,阳光等关键词;

最后,我们将贯穿整个设计的 “O” 形 与“微笑”与“太阳”与 “OYO” LOGO 结合起来,形成了 OYO 品牌特有的温度;

下拉动画的演变过程(由下拉,松手,循环,完成四个动作构成):


首屏背景

我们发现,在国内的住宿行业中,每个节日都是一个入住小高峰,大家可能怀着各式各样的心情和目的去旅游,在每个大的出行季节中进入 OYO 酒店APP,都会有不一样的惊喜和心情等着你。

于是,我们头部模块用节日背景和搜索框相结合,达到拓展和增强品牌感知的目的。

空白页

往往用户从下单到入住再到入住结束,中间会出现很多有趣的场景,而这些场景可以与实际的下单入住场景相结合,来表达用户真实感受;

在 “O” 型的基因背景下延续了简约的设计风格;同时对使用场景进行了特定的代表人物设计,并已对这一形象提出设计专利申请;

三、APP 设计方案

首页


酒店列表页

酒店列表页是在首页的基础上提供的更加深入的选择酒店页面,我们数据将从距离,浏览收藏,价格,品质等多维度对不同用户进行推荐,满足各种使用场景;


搜索/城市 POI

城市 POI 和搜索更加智能和多样化,根据场景不同,搜索出的结果也不同;


酒店详情

我们首页搜索并没有留有入住时间的入口,是为了方便用户更快的去找到酒店,但是在详情页我们对入住时间进行了突出显示,以防止用户忘记选择入住时间;

订单

订单在原版的基础上,将酒店名字突出,弱化酒店图片,订单详情也去除了多余色块,将酒店信息突出;

个人中心

个人中心结合设计语言,在原来基础上,对页面进行了精简设计,并将优惠券、月卡、狂撒1亿、签到等提升用户活跃和留存的功能突出;

登录页

手机两步即可快速登录,底部场景图结合入住场景,你离入住更近一步!

营销图

不让画面元素影响活动宣传的主题文字,突出主题;

所有页面

四、延展设计

其实在本次 2.0 改版前,我们依据海外市场的风格,进行了 OYO 日本版的拓展设计,大胆的抛弃了业务属性,只探索设计在可执行范围内的更多可能性,并将部分的设计理念和页面元素用到了 OYO 2.0 的改版中;

「我的订单」页面抛弃了传统订单的模式,它成了一个出行的日记,记录用户住过的 OYO 酒店在哪个城市,并推荐用户去点亮入住更多的城市,分享在当时发生的事情。

「首页」除附近的酒店外不再作任何推荐信息,只将 APP 首页做一个轻便简单的订房工具。首页的「附近酒店」弱化价格,主动计算用户到酒店的出行方案及所用的时间。图标 icon 都做了基本的圆形处理。运营 Banner 全部用平面化去做;

「酒店列表」将更复杂的筛选项收起,只将大部分用户常用的选项露出为快捷筛选,列表的内用以文字展示为主,左文右图,在同一城市下,酒店价格相差不大的情况下,以距离和口碑来选择酒店;

「所有页面」

五、写在最后

其实设计一个项目产品就像孕育一个孩子一样:当产品在最初的战略构想阶段,他便像一只萌芽;当理出了产品的结构框架,就好比有了骨骼;当加入品牌基因和品牌识别,就像有了肌肉和血液;当加入了情感化和品牌内涵,他便会呼吸起来;当项目真正的开发上线,他就学会跑了起来~

人已赞赏
产品设计

如何用产品设计减少“选择瘫痪”

2019-12-19 21:30:32

产品设计

产品设计师需要知道的4个心理学原则

2019-12-20 22:12:21

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