新东方文旅小程序用户体验界面设计优化

项目背景

新东方作为国内教育行业头部企业,近几年以新东方文旅作为突破口进军旅游行业,为了给用户提供更加方便、个性化的旅游服务,新东方小程序应运而生。新东方文旅小程序经过前期的研发上线,在UI设计方面并没有达到预期效果,随着业务的开展需要总体的升级优化,进而找到我们兰亭妙微设计公司希望提供咨询建议。

新东方文旅的目标用户从热爱文化和旅游的老年人,逐步转变为以青少年为主,老年人群体为辅。兰亭妙微以打造有文化、有深度、体验更好的旅游产品为目标,通过前期的竞品分析、用户画像、情绪版等设计方式,结合目前开展的业务方向,使文旅APP的设计更加美观、有趣、友好,提高品牌影响力和业务转化率。

02

项目概述

产品定位

新东方文旅的产品定位是为用户提供高品质、有文化内涵的旅游产品和服务,结合新东方教育资源的优势,打造独特的文旅体验,让旅游不仅仅是观光,更是一次心灵的成长和文化的探索。

目标用户

新东方文旅的目标用户由于企业战略的变化,由原来的热爱旅游和文化的老年人,转变为以青少年游学为主要卖点的青少年群体,同时也涵盖老年群体,目标用户覆盖范围更广。

设计风格

前期设计第一轮的两个方案,方案一是以红色为主的更具特点的电商风格,方案二是采用文化属性与电商风格的结合,第二轮的方案三是卡通风格,对功能架构进行了调整,更加独特、更具创意与年轻化。

03

第一次设计的方案

设计前

设计后

在调研中发现存在的问题有:

运营氛围弱、品牌基因弱、风格不统一,无创意特色、图标、文字、层级等视觉设计较弱,体验较弱、悬浮窗过多,干扰用户,交互效率低、页面元素、交互模式不一致,用户学习成本较高。

方案设计

但根据客户第一轮沟通时的要求,设计方案在功能布局和布局上不需要调整,所以重点放在提升美观度上,在结构间距,字体、图标大小,图片、图标等元素尺寸等方面进行优化。

顶部背景+搜索区:品牌信任感和专业度传达,暖色轻背景营造氛围,明确的交互提示。

胶囊广告:符合电商、直播行业特点,营造营销氛围,调整尺寸,提升屏效比

金刚区:差异化、个性化、暖色电商感

热卖项目区:放大图片,清洗展示图片信息内容,每屏一个视觉焦点,每屏一个主推提示点。卡片视觉上符合视觉舒适比例,

产品区:利益点提取,信息层级逻辑调整,层次清晰,主次明了,吸引用户点击。参考电商产品瀑布流形式,增加视觉休息区,减少长瀑布流带来的视觉负担。

主风格:新设计采用logo中的红色作为主色,符合电商产品的视觉特点,图标采用线面结合的设计手法,更具独特性,整体界面电商氛围浓厚,更利于业务目标的达成。

总结

04

第二次设计的方案

方案1

此方案在第一屏加在:为什么选择新东方文旅?品牌介绍和宣传以及六个重点栏目。下方栏目形式为大图片通栏+文字,以美景吸引用户兴趣。

方案2

此方案第一屏增加了当季旅行的特色索引栏目和课本里的中国特点栏目,与抖音中的视频资源高效结合,契合初高中学生的需求。

新方案调整目标

第二次提案,客户方总监提出要大胆发挥,不必拘泥于现有产品功能布局。所以这次提案更加的年轻、个性有创意,采用手绘、撕纸纹理、拼贴、卡通等设计及插画手法

结构原型调整

方案一布局采用长banner图,打破常规banner尺寸,更具冲击力及创新观感,镶嵌圆形搜索形状,整体更加自由、个性。增加了「为什么选择新东方文旅」,增强品牌感以及用户信任感。推广模块分为:按目的地、按旅游属性,两个方向进行模块划分,避免用户认知混乱

方案二通过时间维度分类主推产品,高效利用首屏;课本里的中国,与抖音热卖产品联动,快速吸引为孩子寻找合适产品的用户,也方便引流来的用户快速找到想要参与的活动。增加了「广播」,放置热门内容、主推活动等。「趣玩儿人气榜」:产品展示区,按用户感兴趣的、或最近最热的旅游热点进行分类推广。「热门话题」:功能与"新东方文旅,让孩子见识不凡"类似,更加自由开放,用户互动性更强。最后是为其他平台引流模块。

视觉符号提取

根据logo以及文化、旅行的含义,我们从logo中提取了以毛笔笔触为基础的以下两个视觉符号

过程尝试及应用
相关推荐
上海云盾-小余18 小时前
CC 高频请求 + DDoS 流量攻击实战防御:全链路 WAF 流量清洗部署完整流程
网络·爬虫·安全·小程序·ddos
2501_9160088919 小时前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
2301_8103131819 小时前
海外教育APP定制发展现状与开发选型核心要点解析
小程序·团队开发·软件需求
2501_915921431 天前
iOS手游安全反外挂解决方案:基于Xcode的加固混淆特色详解
android·安全·ios·小程序·uni-app·iphone·xcode
禾高网络1 天前
回收小程序在环保和商业领域发挥更大的作用
java·大数据·人工智能·小程序
2501_916007471 天前
iOS App分发教程 App Store、TestFlight 与 Ad Hoc 的配置与上传方法
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者82 天前
iOS应用加固方案全解析:源码加固与IPA在线加固对比
android·macos·ios·小程序·uni-app·cocoa·iphone
2301_810313183 天前
宠物服务APP开发宠物社交上门喂养洗护商城系统源码搭建
小程序·团队开发·软件需求·宠物
momodira83 天前
防溺水作品投票小程序选哪个?
小程序·投票工具·线上制作教程
鲁Q同志3 天前
微信小程序【uni-file-picker文件预览】
微信小程序·小程序