实战案例!「广发元始股」个股详情页从0到1的设计复盘

一、前言

1. 项目背景

广发元始股」是一款专门为年轻人量身定制的炒股 app。

据统计,我国 Z 世代(1995-2010)年轻人群体数量庞大,人口规模约 2.64 亿,占总人口的比重接近 20%。根据国外某知名咨询公司的预测,未来 10 到 15 年,Z 世代将成为我国社会财富的中坚力量,是最有潜力和价值的客户群体。同时,Z 世代也面临着一系列的投资痛点挑战。为了解决 Z 世代的投资痛点,帮助年轻人迈出投资的第一步,广发元始股 app 应运而生。

在从 0 到 1 的产品设计过程中,我们不断思考年轻人投资的特点和需求,寻找最优的设计解决方案,化繁为简,为用户提供更简单、酷炫的投资选择,希望帮助 Z 世代买入人生的第一只股。整体项目历时一年,于 2023 年 6 月份全面上线。

本次设计复盘主要梳理了「个股详情页」的思考以及设计过程。

更多设计实战

2. 什么是个股详情页?

个股详情页是炒股 app 中最重要的页面之一,是股民最经常浏览,也最为关注的页面。页面展示了一只股票的全量信息,包含:盘口指标、价格走势、相关资讯、公司财务、公司概况等等,信息量非常庞大,股民通过浏览信息来辅助其进行投资决策,因此页面的信息内容和浏览效率对股民最为重要。

二、设计分析

1. 用户调研

元始股的目标用户群体为 Z 世代 95 后的投资小白。前期用研同事对 42 名 95 后组织了多场定性座谈会,收集了用户对个股详情页的看法和意见。访谈结果表明,大部分小白用户都表示个股详情页比较复杂,数据很多、看不懂。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

2. 竞品调研

在初步理解用户的需求、痛点后,对国内、外主流的相关竞品进行调研,提炼竞品的页面框架和设计策略,为后续的设计提供更多有力的参考。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

通过调研发现:

  1. 在信息密度上,国内的竞品首屏的信息密度都非常大,除了股票的指标信息外,还有一些运营、工具等营销内容,充分利用了首屏的每一个空间;而国外的竞品信息量则少很多,页面大量留白,看起来更加清爽、简洁;
  2. 在结构上,因为需要承载海量信息,国内几乎所有竞品的个股详情页,都采用了 Tab 分类的设计。而国外竞品的信息层级则相对简单,都采用平铺信息流的扁平结构。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

基于对产品定位的理解、对用户需求和痛点的挖掘、以及对竞品的分析,我们制定了本次设计的目标以及设计策略。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

三、设计策略及方案

1. 降低信息负荷

结合自身产品定位及功能规划,与业务同事共同对繁杂的个股信息进行梳理和筛选,删除了很多复杂的指标分析,仅保留了部分必要的股票信息。除了对股票信息进行删减外,一些运营、营销类的信息也予以去除,比如投资工具、广告等等,从数量上降低信息负荷。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

化繁为简,对页面信息进行删减再组织。以首屏为例:

实战案例!「广发元始股」个股详情页从0到1的设计复盘

2. 简化页面结构

在页面结构的设计过程中,通过一次“发散——收敛“的过程来确定最合适的解决方案。基于前期对竞品页面结构的调研,并结合要展示的页面信息,我们针对页面结构方案进行发散,并梳理出3个思路,分析各自的优缺点。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

综合考虑设计目标、信息种类、页面屏效以及业务灵活配置的需求,我们最终选择了思路 3。采用更为扁平的结构,各内容模块按顺序平铺,并对模块的形式进行了统一,形成相对稳定且高效的纵向浏览顺序。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

3. 减少页面跳转

对于查看术语解释或设置操作等任务,通过弹窗来承载,以减少页面跳转。如果涉及到多个弹窗间的跳转,则在同一容器中进行延展,不作弹窗堆叠,保持用户感知页面结构简单。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

4. 简化走势图表

小白用户虽然没有炒股经历,但大多数有购买过基金、理财,目前市场上基金详情页中的走势图大多为区间曲线走势图。为了更贴合小白用户的认知和理解,在图表设计上采用区间曲线图的样式,并且删除纵横穿插的均线,五档、明细等复杂数据图表,方便用户更加直观、清晰地观察股票的价格走势和区间波动。

同时,考虑到随着小白用户的成长,对专业图表也有一定的需求,因此我们也保留了专业的 K 线图模式,在设计上删减一些辅助类的非必要信息,使图表整体更简洁。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

5. 增加术语解释

投资小白的另一大痛点是,投资相关的专业指标晦涩难懂,不理解专业指标的含义及作用。因此设计上对特殊的专业指标都增加了对应的解释说明,帮助用户理解和学习。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

6. 提供投顾解答

专家投顾是我们特有的服务优势,用户发起咨询后,专业投顾会迅速响应,解答各种投资相关的问题。结合这一特有的产品优势,更灵活地响应用户的咨询需求,在页面底部的操作栏中增加专家投顾咨询入口,方便用户快速发起咨询,为用户答疑解惑。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

四、上线反馈

产品上线后,用研同事继续邀请了 10 位 95 后用户体验 app。从用户的体验日志以及访谈结果来看,得到了不少正向的反馈。投资小白认为该页面简洁,图表直观,能降低其学习成本,对页面的感知符合我们此前预设的设计目标。

实战案例!「广发元始股」个股详情页从0到1的设计复盘

不过依然有一些有待后续优化和持续验证的需求点,比如增加新人指引,信息需求与体验之间的平衡等等。

与其它产品相比,证券投资类 app 是一个比较复杂且具有一定业务门槛的产品。严格的金融监管要求和复杂的业务,要求设计师能够在夹缝中做好用户体验。如何利用设计思维和合理的设计方法来降低产品的认知难度,提升转化率,是我们一直追求的目标。

希望本文对大家有所启发,我们也在不断探索更创新、更有趣的设计方式。

欢迎大家下载体验,对比设计,有其他问题也可私信后台,与我们多多交流,一起进步噢!

实战案例!「广发元始股」个股详情页从0到1的设计复盘

免责声明

本文章仅为阐述设计理念,所用配图为设计图和线上截图仅辅助设计说明,设计图中的数据信息均为虚构。以上信息仅供参考,不构成投资建议或收益保证。未经同意,任何机构或个人不得对提供的上述信息进行任何形式的转载、发布、复制或进行有悖原意的删节和修改。投资有风险,应谨慎至上。

欢迎关注作者微信公众号:「GXC设计随笔」

实战案例!「广发元始股」个股详情页从0到1的设计复盘

收藏 44
点赞 57

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。