目前,C端产品市场已逐渐饱和,然而B端行业仍处于未饱和状态,因此互联网大厂开始把目标转移到了B端产品上。


那么如何做好一款B端设计呢?

B端产品重业务重逻辑和复杂流程的属性,因此需要深入业务核心场景进行突出卖点的设计,在抓住核心产品特色后,还需要有组件的系统设计思维,基于原子理论的设计系统概念来构建B端产品的系统结构。


本篇文章我们探讨以下问题:

  • B端产品是什么?

  • B端产品特点有哪些?

  • 特色核心卖点的业务场景化设计

  • 理解和使用设计系统




01.


B端产品是什么?

Business-to-business



B端产品(=B2B=Business-to-business) 是指:使用对象是企业或组织的产品类型,用来解决某类经营管理问题,承担着为企业或组织提高收入(规模)、提升效率、降低成本、控制风险、保证品质,而不是面向个人消费者的产品类型(C端产品 = B2C = business-to-consumer)[1][4]。


《决胜B端》(第2版)一书的1.2.1节提到,C端产品是企业与客户在互联网渠道接触的桥头堡,但在C端产品极简体验的背后,可能有一个非常复杂庞大的业务支撑体系,需要多个业务团队、业务单元协同配合。

图片来源[12]:https://cxdojo.com/b2b-and-b2c


例如,我们熟悉的电商,对于消费者来说,只需要使用App挑选商品、下单、收取快递,退款退货也都能在App中轻松完成。但是,其背后是财务、采购、仓储、配送、客服等一系列业务团队的协同配合,而这些团队都需要各自的业务系统来支撑其开展业务,而且所有业务流程需要被灵活地联系起来[4]。


其核心在于以合适的具体定价通过数字化产品来解决企业在经营场景中遇到的问题[2],比如小鹅通是一款基于微信生态为企业/组织打造专属的知识服务平台的知识产品与用户服务的数字化工具[3]。




02.


B端产品特点有哪些?

Business-to-business


1.目标用户是一个群体

B端产品用户群体是某个业务团队或组织,这一组人需要共同协作来完成工作,所以需要B端产品来帮助他们实现分工协作[4]。


2.用户和客户是不同的个人

如果是商业化售卖的B端软件产品(例如CRM产品销售易、纷享销客),在多数情况下,购买软件的客户(严格来讲应该是购买关键决策人)和软件的最终用户(即用户)不是同一个人。


比如购买销售易这款软件的客户是企业,购买决策人主要来自销售业务的负责人,但软件的最终用户是一线销售人员和主管。而对于C端产品,付费的客户和用户多数情况下是同一个人[4]。


3.效能第一,体验第二

B端产品的目标是解决组织的某类业务问题,因此聚焦于流程,提升业务效能是最重要的,打磨交互体验则处于次要地位。


例如,设计产品时并不会过多地考虑UI设计,也不会为了几个按钮的摆放位置花费太多时间,即便某个功能的交互设计不太符合常理,业务人员为了完成工作也还是会使用软件(但这并不意味着B端产品经理可以无视交互体验)[4]。


4.强调抽象和逻辑

B端产品背后的业务复杂度高,人员、分工、协作、流程、规则随时可能调整,这就需要产品经理有非常强的抽象能力和逻辑思维,将看似散乱无章的业务抽象出共性,进行合理建模和设计[4]。


5.收益难以量化

B端产品要支持、解决业务问题,但业务成效的影响因素非常多,很多时候并非取决于B端产品设计的好坏。

图片来源[12]:https://cxdojo.com/b2b-and-b2c


例如,采购部门的核心绩效是找到更多优质的低价供应商,但这并不取决于采购软件设计得好坏,而更多地依赖于采购员的人脉和专业技能,以及管理考核体系(不过,供应商在合作过程中的服务如何,则可以通过B端产品进行监督和评价)。


我们很难直接衡量B端产品上线的新功能对业务价值的贡献。这也是B端产品经理经常面临的烦恼——难以外化项目效果[4]。




03.


特色核心卖点的业务场景化设计

Business-to-business


B端产品因其目标是为了解决组织的某类业务问题,因此它更依赖设计师对业务的深入了解。行业属性型的产品,它针对的是不同的行业之间定制的一系列产品功能,以达到企业经营过程中遇到的问题:


比如小鹅通它会涉及到课程的内容管理和学员知识付费的交易管理,对于课程营销下marketing和与成功付费学员的客户关系管理,其产品特点有别于垂直业务型产品聚焦于某个内容的深度专业性,比如hubspot这样一个CRM系统专注于marketing营销部分,那么其功能的复杂程度和界面中的设计元素,甚至界面中使用的设计交互如筛选、视图、表格操作等交互都会不同[5]。


图片来源[13]:https://unsplash.com/@uxindo?utm_source=medium&utm_medium=referral


如何在多而杂的B端产品中脱颖而出?需要在深入了解业务场景后,挖掘出核心亮点和不停地迭代来有效解决组织的问题从而吸引客户进行采购。



用小鹅通的产品案例来分析:

小鹅通产品设计通过满足5个全经营闭环场景中特色卖点的数字化工具设计,降低国内千万知识创作者的创业门槛,让他们可以快速高效地创建自己的知识店铺,实现高质量的内容创造和知识变现的目的。


场景1:公域引流

图片来源[3]:https://www.xiaoe-tech.com/


该产品提供了多渠道引流获客的方式,比如帮助商家大同视频号、抖音、快手等公域平台,实现一站式直播,全平台覆盖,从而提升直播效率,实现精准的引流获客[6]。


场景2:营销转化

图片来源[3]:https://www.xiaoe-tech.com/


公域引流后,沉淀到小鹅通产品,平台不仅支持各种形式的知识产品和运营工具,还为商家提供裂变、促销、销售CRM等丰富的营销转化工具。


其中企微CRM在用户的激活、留存和变现阶段发挥关键作用,比如知识店铺和企微数据的连通。营销工具还根据机构和个人两种场景进行多模式设计[6]。


场景3:知识付费

图片来源[3]:https://www.xiaoe-tech.com/


1. 通过高效简单的一分钟搭建知识店铺来降低创作者的操作门槛,只需要完成基础的信息设置,绑定商家的公众号、支付账号信息等就可以上线公众号H5版本。


2. 支持视频、音频、图文、等知识付费的场景形式和各种相关工具(如打卡、考试、作业本等)来满足用户创造和参与的多样性设计。


3. 抓住知识付费的核心契合直播场景,打造微信生态内私域直播利器,使其成为客户在销售端引流、激活、变现的重要工具[6]。


场景4:社区运营

图片来源[3]:https://www.xiaoe-tech.com/


鹅圈子 - 打造微信生态度私域社群运营的社群工具,方便客户通过微信小程序进行操作,对标[知识星球]需要下载APP的不便体验。


提供丰富玩法如社群打卡、排行榜、勋章、成长任务等常见功能,还能加入商家的课程、产品,实现高频曝光和触达,帮助商家提升付费转化,让交易随时随地发生[6]。


场景5:品牌运营

图片来源[3]:https://www.xiaoe-tech.com/


平台支持多终端落地,可为用户提供全渠道、全场景的私域品牌建立,意思是,不仅是微信生态的公众号、H5官网、小程序,还有PC端的品牌官网(支持绑定独立域名访问),对商家来说,采购一个小鹅通就能解决全终端品牌运营难题。极致、高效,还便宜。




04.


理解和使用设计系统

Business-to-business


上面讲的通过深入业务场景来实现用户“需要”的设计来做好B端产品,还有另外一个内容在B端设计中占据重要地位——系统结构,它直接决定了产品重构的生命周期,直接决定这个系统设计的好与坏[7]。


而一个好的设计系统就是决定其系统结构体验的直接结果,那么什么是设计系统呢?设计师 Nathan Curtis 给的定义是:设计系统提供了一个由个人、团队或社区记录和发布的视觉风格、组件和其他关注点作为代码和设计工具的库,以便更高效、更有凝聚力地采用产品[8]。如果没有设计系统,用户可能会发现陷入一种不一致的危机中——在迷宫中航行,每一个操作都可能导致用户沮丧[9]。


设计系统的核心是一组构建块和标准,有助于保持产品和体验的外观和感觉一致。将其视为一个蓝图,提供统一的语言和结构化框架,指导团队完成创建数字产品的复杂过程。设计系统可以帮助减少在大规模设计和构建产品和界面时重新创建元素和模式所花费的时间[9]。


图片来源[8]:https://www.cleardigital.com/insights/b2b-website-design-system/


原子理论(Atomic Design Methodology)是设计系统的核心原理,主要包含 5 个层面:原子(Atoms)、分子(Molecules)、组织(Organisms)、模板(Templates)、页面(Pages)。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/


原子(Atoms)指的是构成界面的基础构建块。这些原子包括基本的 HTML 元素,例如表单标签、输入、按钮以及其他无法进一步分解的元素[10]。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/


分子(Molecules)就像是一个由UI元素组成的相对简单的组织。如:弹窗、搜索框等。如图所示的搜索框由标签、输入框和按钮组成[10]。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/


分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(Organisms),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。如图所示的由搜索框、标签和按钮组成顶部导航窗口[10]。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/


由原子+分子+组织构成的更复杂更具拓展性的模板(Templates),如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。模板是页面级对象,它将组件放置到布局中并阐明设计的底层内容结构。如图所示是由顶部导航窗口和界面的主体图片和内容元素构成的主页模板[10]。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/


最后,植入业务逻辑场景的模板(Templates)就是用户会直接看到的带有准确信息的页面(Pages),如:标注详情场景、抽取详情场景、权限管理场景。


其填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案[11]。


图片来源[10]:

https://atomicdesign.bradfrost.com/chapter-2/



 B端 


B端相较于C端更加重视业务逻辑和流程的灵活高效,甚至里面的哪怕一个小功能都会牵动到很多全局的模块,为了高效完成管理员的业务工作,需求也是一直处于不断涌现的状态,甚至在竞标客户的过程中还会面临新功能越早上线越能得到客户的订单压力,同时B端产品因为不像C端那么简单接触,竞品分析也更加困难。


做好B端产品需要我们不断地深入理解业务,提升抽象逻辑的思维能力去挖掘客户直接反馈背后的真正痛点来进行设计。




文章内容来源:Bblythe老师

未经允许,禁止转载


关注我!持续放送更多有关产品设计知识。

有意向申请交互/工业产品/游戏/用户体验设计相关方向的同学欢迎关注我们~

想咨询留学申请/作品集辅导的同学欢迎后台私信留言~


参考资料:

[1]https://www.shopify.com/blog/what-is-b2b

[2]https://www.bilibili.com/video/BV18j411k7Gq/?spm_id_from=333.788.recommend_more_video.0&vd_source=f8603f2287b09025c37b6fbdb49800ca

[3]https://www.xiaoe-tech.com/

[4]https://cloud.tencent.com/developer/article/2310453

[5]https://www.bilibili.com/video/BV1KP411b7hW/?spm_id_from=333.337.search-card.all.click&vd_source=f8603f2287b09025c37b6fbdb49800ca

[6]https://www.bilibili.com/video/BV1bL411m7sd/?spm_id_from=333.880.my_history.page.click&vd_source=f8603f2287b09025c37b6fbdb49800ca

[7]https://www.woshipm.com/pd/5578146.html

[8]https://www.cleardigital.com/insights/b2b-website-design-system/
[9]https://www.figma.com/blog/design-systems-101-what-is-a-design-system/

[10]https://atomicdesign.bradfrost.com/chapter-2/

[11]https://goodux.cn/archives/1036

[12]https://cxdojo.com/b2b-and-b2c

[13]https://unsplash.com/@uxindo?utm_source=medium&utm_medium=referral