OYO 酒店 APP 2.0 项目重构整理

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

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

一、简介

1. 项目背景

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

OYO 酒店 APP 2.0 项目重构整理

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

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

二、项目重构体验目标

在数据收集方面:

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

1. 如何“更聚焦”

a. 结构聚焦

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

OYO 酒店 APP 2.0 项目重构整理

b. 优势聚焦

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

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

OYO 酒店 APP 2.0 项目重构整理

2. 如何 “更便捷”

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

a. 流程更便捷

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

OYO 酒店 APP 2.0 项目重构整理

b. 场景更便捷

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

OYO 酒店 APP 2.0 项目重构整理

获取用户

OYO 酒店 APP 2.0 项目重构整理

提高活跃度

OYO 酒店 APP 2.0 项目重构整理

用户留存

OYO 酒店 APP 2.0 项目重构整理

自传播

OYO 酒店 APP 2.0 项目重构整理

3. 如何“更有温度”

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

a. 品牌基因

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理
OYO 酒店 APP 2.0 项目重构整理

b. 品牌识别

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

基本图形

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

OYO 酒店 APP 2.0 项目重构整理

基本色彩

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

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

基本字体

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

OYO 酒店 APP 2.0 项目重构整理

c. 情感化

下拉加载

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

OYO 酒店 APP 2.0 项目重构整理

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

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

OYO 酒店 APP 2.0 项目重构整理
OYO 酒店 APP 2.0 项目重构整理

首屏背景

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

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

OYO 酒店 APP 2.0 项目重构整理

空白页

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

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

OYO 酒店 APP 2.0 项目重构整理

三、APP 设计方案

首页

OYO 酒店 APP 2.0 项目重构整理
OYO 酒店 APP 2.0 项目重构整理

酒店列表页

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

OYO 酒店 APP 2.0 项目重构整理
OYO 酒店 APP 2.0 项目重构整理

搜索/城市 POI

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

OYO 酒店 APP 2.0 项目重构整理
OYO 酒店 APP 2.0 项目重构整理

酒店详情

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

OYO 酒店 APP 2.0 项目重构整理

订单

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

OYO 酒店 APP 2.0 项目重构整理

个人中心

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

OYO 酒店 APP 2.0 项目重构整理

登录页

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

OYO 酒店 APP 2.0 项目重构整理

营销图

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

OYO 酒店 APP 2.0 项目重构整理

所有页面

OYO 酒店 APP 2.0 项目重构整理

四、延展设计

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

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

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

OYO 酒店 APP 2.0 项目重构整理

「所有页面」

OYO 酒店 APP 2.0 项目重构整理

五、写在最后

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

人已赞赏
产品设计

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

2019-12-19 21:30:32

产品设计

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

2019-12-20 22:12:21

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