从零开始见证蘑菇街 APP 新版的设计流程

从2010年成立至今,蘑菇街已经成立6年。在未来的10年,我们的目标是:让中国的年轻女性变得更美更时尚(也因此更自信更幸福)。这是一个长远的目标,而我们当前的目标是:用最适合的方式,将物美价廉的时尚消费品交付到她们手中。

为了实现这一目标,蘑菇街正在进行着一系列的变革,我们将从“社区电商”转型为“导购电商”,为更多的女性提供更优质的时尚内容和商品。变化从我们的APP开始,转型从我们的思维出发。新版app在几个星期内从无到有,完成了从业务,到产品,到交互,到视觉的全过程。

谨作此文,一是团队和个人的工作总结,二是抛砖引玉,跟大家分享下期间的思考。

产品分析

1. 以用户为中心,定位目标用户群

唐.诺曼说过,如果在用户界面设计和人机交互领域中有任何神圣的原则,那必然是“了解你的用户”。不同的用户群体,他们的需求往往不同,甚至互相冲突。

首先我们开始了解蘑菇街的用户。通过查阅数据,焦点小组,问卷调研等方式,我们对现有的用户提取了多维要素,形成了一系列数据标签,再对用户特征进行组合,归纳产生重要用户画像,并据此更好地根据核心大众用户的特征和需求找到适合他们的设计语言。

蘑菇街一直将目标用户定位于年轻,追求时尚的女性群体,经过分析,以下是两种最主要的用户模型:

2. 从社区到导购:一切从“痛”开始

在女性用户领域长期深耕,使我们对自己的用户群体有着更深入的了解。年轻女性都是时尚的追求者,然而她们在购物时最大的痛点是:

(1)不会搭配。

(2)不会挑单品。

而蘑菇街在时尚搭配,潮流,美妆等方面长期积累,功力深厚,完全有能力利用自身优势,将优质的商品提炼,组织,发掘出对用户真正有价值的内容。

因此,我们这次改版设计思路,将围绕着“解决女性用户的痛点,传达时尚的感知体验”展开。表达和呈现内容

1. 信息结构:根据使用场景的导航

为了支撑新拓的导购业务,延续原来的社交内容,从用户的使用场景出发,重新梳理了信息构架,让“导购”、“社交”和“电商”能齐头并进,高效协同,让用户能够迅速找到入口、融入其中。

基于用户的使用场景,5个tab分别定位为:

•   Tab1-导购:让用户“逛逛逛”。以PGC的内容为核心,提供精编时尚内容,激发用户兴趣。

•   Tab2-市场:让用户“买买买”。以市场频道、类目入口为主,以货架的形式组织商品,让用户最快效率地找到商品。

•   Tab3-动态:延续之前的社交形态,是用户和关注的达人(或商家)之间的互动社区。

•   Tab4-购物车:一站式的清单管理,让用户更方便地选择商品购买下单。

•   Tab5-我的:更多内容的入口。

本次改版将原来与社交强关联的“聊天”入口进行了弱化,分散到各个页面的右上角,方便用户在任何地方都可以和卖家进行无缝聊天。转而使更方便购物结算的“购物车”占据了导航的一席之地,更突出了产品的电商属性。

通过信息结构的重新排布,不同需求的用户可以快速地切入主题,“导购”、“电商” 和“社交”的内容都得到了恰当清晰的展现。

2. 首页设计:传递时尚感知

首页是一个App的门面,尤其是新改版后的App。新老用户打开app进入首页,就好比走进一个装修一新的房子。第一眼的感觉,很大程度上决定了他能继续逛下去还是头也不回地离开。

蘑菇街导购主要从“穿搭潮流、美妆资讯“等内容出发,以“时尚主编,潮流达人,普通用户”的精选内容为核心。

新版App希望传递给用户的是这是一本时尚的生活消费杂志。当用户在浏览时,体验到沉浸式的感受,如同在阅读生活消费杂志一样轻松愉悦。在这里,能获取到各种最新最时尚的资讯,快速方便地买到最新最时尚的商品,轻而易举买到想要的,不知不觉让搭配游刃有余。

3. 内容组织:合理布局,精细设计

手机屏幕空间寸土寸金,一块小小的角落都是兵家必争之地。

在内容的设计上,每个一级页面作为所有内容分发流转的“出口”都需要精心设计,做到“处处珠玑”。我们考虑根据针对不同的运营内容和用户任务,去分发和提炼尽可能丰富的内容信息,保证页面上每一个存在的元素都是必不可缺的。

另一方面,在保证界面美观的前提下,考虑所有模块的阅读效率,尽量多曝光信息内容,使主页面看起来紧凑,信息量丰富。用“压力下的优雅”来形容一级页的设计,恰当不过。

在交互形式上,我们采用了横向拓展的设计形式——在屏幕中故意截断部分内容,支持横划浏览更多信息。可以充分利用有限的屏幕空间,使同一层级的内容尽可能多的外显,减少页面间的跳转,提高用户获取信息的效率。

在UI设计上,针对每个具体模块,去剖析每个业务的运营策略,深度理解需要传达的信息和传递的氛围等,根据不同的内容设计不同的承载样式,最终形成完整统一的内容流。

同一个页面不同的内容模块之间,主要考虑:

(1)不同的业务模块通过不同样式的组合设计,准确地传达信息内容,同时使页面丰富动感,摆脱单调;

(2)突出重点运营的优质内容:如目前的“红人穿搭”,“精选专题”等模块,在设计手法上,通过图片内容、布局、面积、位置等各种因素的综合设计,最终呈现出的结果使用户能快速有效地捕捉到最重要的信息点。

4. 根据用户特征,打造差异化设计

这是一个产品激烈竞争的年代,没有特色的产品设计终将会被遗忘。

以 “专题页”的设计为例,这是我们导购业务下,利用率,使用效率都较高的一个页面模块,我们希望用户在利用碎片化时间浏览各类导购专题时,可以快速获取到重点,不会感觉像是被灌输了一堆文字信息,而是实在地感到轻松愉快,并从中体验到某种情绪共鸣。

回到我们的主流用户群体——年轻女孩子上来思考,对她们的日常用品进行视觉元素的分解和抽象,提炼出适合我们产品气质的元素。

最后的我们的专题页采用这样的设计形式:荧光色马克笔,手写风格的划线标注,杂志风的图墙版式。在这样的页面设计下,让女孩子在浏览时能快速地获取重点信息,感觉轻松,不单调。同时也传递出我们对所呈现出的内容满满的诚意和用心,从设计到内容,从色调到版式。

结语

新版app在短短的一个多月内,完成了从方向调整到开发上线的全过程,而设计在其中仅仅只占一周多,这也是互联网公司面临的共性难题。为了配合产品
小步快跑的策略,我们采用敏捷设计的方法:快速地进行竞品分析,根据低保真原型一边进行业务细化和方案讨论,一边进行视觉风格的设计。

到第一版上线时,仍有若干页面尚未调整完毕,也有诸多细节尚存缺陷,但身处这个快速发展的时代,设计必须快节奏高效率,让我们产品的新切入点、新的创意、新的想法能尽快地去和用户接触,获得更多更真实的反馈。

所有的改变都伴随着风险,但作为一个还在路上的创业公司,不改变就不会比昨天更好。

所幸,新版App上线后,收获了很多女孩子的好评和关注,随之活跃度和转化率数据也走出了一个漂亮的上扬曲线。

我们,一直在路上,为设计更好的产品……

via:北京网站建设公司

时间: 2024-08-27 00:46:21

从零开始见证蘑菇街 APP 新版的设计流程的相关文章

《Android App开发入门:使用Android Studio 2.X开发环境》—— 2-2 Android 程序的设计流程

2-2 Android 程序的设计流程 Android程序设计是把程序代码和资源(Resource)分开设计的."资源"包含界面的安排.字符串对象.图形对象.音乐对象等,这些对象都以文件的方式存放在项目的 res 文件夹下,再构建(Build)起来成为 .apk 文件,最后由用户下载安装到手机上使用. Android 的资源以视觉部分最多,其他也包含音乐.字符串等资源,为解说方便,除非在特别谈到音乐.字符串等资源时,否则我们多以视觉资源为代表. 视觉设计和程序逻辑 原本 Android

IOS APP设计流程

移动平台是下一个战场,IOS又是其中占比非常大的平台,关于IOS的设计流程看到一篇不错的译文,根据原文整理了这11步,与大家分享一下,另有图片版可以下载保存. 1. 确定你的创意 您的创意是否有人做过,如果有类似的app,那就要多多考虑,争取超越并且有一些独特的优化设计在其中 2. 定位应用 通过苹果的人机界面指南(Human Interface Guidelines)图来定位 3. 核心功能确认 将提出的各种需求进行汇总讨论,设计ADS(Application Definition State

移动互联网产品用户体验设计流程

文章描述:移动互联网产品用户体验设计流程. 从产品设计角度来说,移动互联网产品和互联网产品的本质是一样的,不管终端形式如何变化,产品功能还是一样,因为手机/PC呈现的方式,而有所差别. 从用户体验流程来说,移动互联网的终端特性,决定了手机上的业务流程要有简单.方便.直接,特别是PC上的注册流程,手机输入方式决定了要慎重对于登录.注册. (1)   产品定位 产品定位:是辅助线产品拓展手机渠道,还是作为新的重点业务.目前因为移动互联网环境的不成熟,很多产品(原互联网产品)都是作为战略布局存在的.而

一个完整的UI设计流程是怎样的?

  收到一封 Mail,其中提到几个关于设计流程和 Prototype 的问题.UI设计流程:Wireframe->低保真Prototyple->Mockup->高保真Prototyple,这样的流程是对的吗?今天来聊聊一个完整的 UI 设计流程应该是怎样的,收干货! 根据上过课的学员响应.以及自身经验,目前业界的情况大多是 UI 设计师收到「开工啦」的通知,然后就从 Wireframe 开始下手.用户怎么操作.有哪些功能.用户和客户的需求是什么往往靠 PM 简单口述. Wirefram

APP动效设计分为哪几种?

  编者按:什么样的动效让人舒服,什么样的动效让人一下就想到某个产品,什么样的动效让人沉浸其中?今天百度的同学从这三个维度,分别聊聊对应的APP动效设计,想给用户一个惊喜的同学,来涨姿势吧. 如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言.在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感? 此时,有限的屏幕空间紧靠文字的提示是不够的,App需

从产品设计流程中寻找好的设计

什么是好的产品设计 既然要寻找好的产品设计,那一开始我们就先来定义一下什么是好的产品设计. 如果用一句话来概括,我会说好的产品设计就是:为设计制定合理的目标,达到或超过此目标的设计就是好的产品设计. 那么,合理的目标又是指什么呢?这取决于产品本身的目标和设计要解决的问题.举个例子: 在有道云笔记的Android版本中,假设我们想要引导用户登录并且使用该产品,以享受到云端的便利,我们可以提出这样的产品设计需求:在首页增加引导用户登录的按钮,以达到上述目标. 图1 有道云笔记登录界面 此时,设计的目

APP 自动化框架设计思路分享

APP自动化框架设计分享 框架需要解决的问题: • 渠道包->多渠道包核心用例自动化 • 多设备覆盖安装,安装卸载更新等测试 • 多设备核心用例适配测试 • 验证主要页面(包括webview)检查是否加载成功 • 离线主流程覆盖 • 一些重复性操作可以通过框架简单实现 框架目标定位: • 让Tester无需编写代码 通过简单数据驱动方式实现通用简单的自动化 • 跟开发约定一些UI上的元素标准和规范建立自动化规范流程化 • 结合实时抓包组件和性能监控插件方便分节点定位问题 • 自动异常捕获,Cra

产品设计流程(已标注)

产品设计流程 每个产品团队都会有自己的工作流程,无论这个工作流程是否最高效.是否体现最大价值,但是我认为只要这个流程能够为实现工作目标提供过程的保障就可以算是好的流程. 对于流程本身而言,可以因团队不同或工作任务不同而有差异. 一个成熟度的产品团队可以在保证工作质量的前提下轻松适应任务的变化,也就是说能够依据不同的工作要求调整对应工作的流程. 也只有这种团队才能正真体现最大的价值,称得上是一个敏捷的.能快速响应变化的团队. 那么,我们先来看看以前做产品设计时的团队工作流程.我总结为是一个相对正常

app开发外包的流程、需求、报价,需要知道的细节!

app开发外包的流程.需求.报价,需要知道的细节! 随着时代的需要,很多企业都迫切需要一款自己的企业App或者是其他对自己有用的App.当公司和企业中没有自己的开发团队,或者说自己的开发团队并不能完成这个任务的时候,我们的另一个解决办法就是把这个App开发外包出去,给予适当的薪金和报酬,让其他开发团队根据自己的需求开发出我们需要的App.这个就叫做App开发外包.以下是关于App开发外包应该知道的流程和细节: App开发外包主要由几个小部分流程组成 流程:找外包方-阐述需求-报价-签合同-交钱-