OYO-UED中心C端设计小组——《OYO酒店APP2.0改版设计》
设计成员:夏天、万成、安琪
指导:王磊
一、项目背景
但是,随着OYO酒店2.0签约模式的推出,最初产品功能已经不能满足业务的发展需求,在拉新,获客,下单,留存,以及品牌认知等方面,都需要进行一次全面的升级。
1.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.场景更便捷
获取用户
提高活跃度
用户留存
自传播
3.如何“更有温度”
a.品牌基因
将OYO的logo图形化后,我们可以很容易从品牌最初的设计语言上来读懂OYO所诠释的简约,logo图形都是基本的几何构成。
于是,我们基于“极简化”的设计原则,在设计元素上提取了“O”作为OYO酒店APP的基因,对页面的模块和设计元素都进行了“圆”的处理,“O”也在整个改版设计中贯穿整个APP。
同样,在产品的动效上,我们也参考了球在滚动时的规律(匀减速):
b.品牌识别
基于本次的品牌基因“O”这一基本元素,我们在颜色,图形、排版上都做了基本处理,因此,我们把本次改版的设计语言称为:
“基本设计”
基本图形
icon的设计上也用基本图形去设计,不去做多余的变形,视觉上保持风格一致性。
基本色彩
为了保持整体页面感官的一致性,我们辅助色和补色设定,对酒店房间图颜色进行了提取,在页面浏览感受上使图片和UI框架能更加的保持统一。
其实APP本身的酒店图片已经带有大量的红色色值,所以我们在设计时候,对整个APP进行了大体量的减红,将红色只用到“购买“和优惠的维度上,功能按钮也都使用了纯色,以减少次级信息对用户浏览的干扰。
基本字体
在文字上,我们也采用最基本的字体,ios采用PingFang,android采用思源黑。只有在显示主要价格,付款等数字才会用到DIN系列字体
c.情感化
下拉加载
怎么能让产品传递出有温度的感知体验呢?线下的入住体验中,除了硬件体验和入住流程价格优惠等触点,哪些地方还能让我们去挖掘使用舒适的感受呢?于是我们结合产品感性体验列举了:柔软的,舒适的,温馨的,拥抱,微笑,咖啡,阳光等关键词。
最后我们将贯穿整个设计的“O”形与“微笑”与“太阳”与“OYO”LOGO结合起来,形成了OYO品牌特有的温度。
下拉动画的演变过程(由下拉,松手,循环,完成四个动作构成)
首屏背景
我们发现,在国内的住宿行业中,每个节日都是一个入住小高峰,大家可能怀着格式个样的心情和目的去旅游,在每个大的出行季节中进入OYO酒店APP,都会有不一样的惊喜和心情等着你。
于是,我们头部模块用节日背景和搜索框相结合,达到拓展和增强品牌感知的目的。
空白页
往往用户从下单到入住再到入住结束,中间会出现很多有趣的场景,而这些场景可以与实际的下单入住场景相结合,来表达用户真实感受。
在“O”型的基因背景下延续了简约的设计风格;同时对使用场景进行了特定的代表人物设计,并已对这一形象提出设计专利申请。
三、APP设计方案
首页
酒店列表页
酒店列表页是在首页的基础上提供的更加深入的选择酒店页面,我们数据将从距离,浏览收藏,价格,品质等多维度对不同用户进行推荐,满足各种使用场景。
搜索/城市POI
城市POI和搜索更加智能和多样化,根据场景不同,搜索出的结果也不同
酒店详情
订单
订单在原版的基础上,将酒店名字突出,弱化酒店图片,订单详情也去除了多余色块,将酒店信息突出。
个人中心
营销图
不让画面元素影响活动宣传的主题文字,突出主题,
所有页面
四、延展设计
其实在本次2.0改版前,我们依据海外市场的风格,进行了OYO日本版的拓展设计,大胆的抛弃了业务属性,只探索设计在可执行范围内的更多可能性,并将部分的设计理念和页面元素用到了OYO2.0的改版中。
「酒店列表」将更复杂的筛选项收起,只将大部分用户常用的选项露出为快捷筛选,列表的内用以文字展示为主,左文右图,在同一城市下,酒店价格相差不大的情况下,以距离和口碑来选择酒店。
「所有页面」
五、写在最后
其实设计一个项目产品就像孕育一个孩子一样:
当产品在最初的战略构想阶段,他便像一只萌芽;当理出了产品的结构框架,就好比有了骨骼;当加入品牌基因和品牌识别,就像有了肌肉和血液;当加入了情感化和品牌内涵,他便会呼吸起来;当项目真正的开发上线,他就学会跑了起来~~