星巴克:Starbucks

2019-10-11 H5案例分享 H5案例分享
星巴克:Starbucks


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

Starbucks-查阅二维码

完整欣赏此案例大约需要2分钟


案例:Starbucks

品牌:星巴克

技术实现: html5

亮点:

  1. 创意定位

星巴克出品,根据情景测试中用户的选择,推荐不同罐装咖啡的H5作品,以此让用户了解不同单品的主要卖点,提高品牌知名度和咖啡销量。

 

  1. 策划逻辑

点击后会有文字提醒用户横屏观看,作品大致分为三个阶段

①loading

一个绿色电池出现,电格逐渐变亮后出现导语:职场中你拿什么拼C位。

 

②情景测试

一个绿色的会议厅,四个人先出现,然后四瓶不同的罐装咖啡出现并落在四人电脑旁,字幕提示时间过去了两小时,一位长发女生上方出现对话框说客户要求改方案,经理模样的人表示不再改了,四个人头上出现省略号,用户根据后墙上的提示点击某个人的省略号查看人物的内心OS。

 

③落地海报

点击查看人物OS后会出现此人可以做的两个选择,用户点击任意一个后进入咖啡推荐页面,包括用户的名称和头像,罐装咖啡的名字和照片,单品卖点解析和人物性格表述,用户可在此界面点击链接购买咖啡,返回重新测试,或确认生成海报,确认生成后海报除了刚才的内容,还会有作品二维码显示。

 

  1. 设计上

手绘的简约卡通画,情景的推进用对话框展现,人物会有很简单的一个动作变化,但基本是不动的,所有咖啡单品都以实物形象显示,强化用户印象,界面颜色以星巴克标志的绿色为主,简约,整齐,重点突出,主题明确,与人物较为明亮的衣着互相衬托,视觉上也感觉很好看。

 

  1. 体验上

无休无止的开会是许多上班族都会遇到的场景,画面展示的情景比较能引发用户的熟悉感,给每个不同形象的人物设计的内心OS也各不相同,有吐槽队友的,有心力憔悴渴望下班的,有夹在中间左右为难的,也有态度明确的,很符合现实中的情况。





以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

星巴克:真味探索 玩味一夏

ILLY咖啡:感谢咖啡让我们聚在一起

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~