/轻设计师的自我挑战 —— 重新设计硅谷最流行的应用程序Clubhouse
最新文章2023-08-08

轻设计师的自我挑战 —— 重新设计硅谷最流行的应用程序Clubhouse

▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 5778 字，预计阅读 15 分钟

TCC 情报局的 第 100 篇 干货分享
2021 年的 第 88 篇

TCC 推荐：大家好，这里是 TCC 翻译情报局，我是张聿彤。对于设计而言，明确用户路径和页面想要传达的信息是非常重要的，平衡新老用户之间的不同需求则是另外一个严峻挑战，本文从这两点着手讲述了作者是如何通过用户对话明确不同用户需求，通过信息层级梳理来优化设计 Clubhouse 这个还没有正式发布就估值十亿的硅谷新贵。希望这个过程可以给你带来启发。

       最终的样机界面


1. 内容提要

1. TL;DR

Clubhouse 是目前最火的社交软件之一，我想通过改善其用户体验，来测试我作为一名新手设计师的极限。在和新老用户交谈过后，我发现了该APP的一些具体痛点。这些痛点成为了这项工作中的主要设计挑战，并引导我进行设计。



用原型来模拟用户在app上的主要交互，并深入了解此结果形成的全部过程。
        新手引导模型
要简单地描述 Clubhouse 有多么的优秀是一件非常难的事情。它是一个音频聊天APP，用户可以随意进出于不同的聊天室，参与从文学到政治等各种话题的讨论。在 Clubhouse 测试版发布一个月时，它仅拥有 1500 个用户，却估值 1 个亿。而当我写这篇文章时，这款硅谷炙手可热的应用程序只用了 9 个月就估值十亿了。



除了在融资方面的巨大成功，Clubhouse 还积累了非常忠诚的用户群，他们的创意涵盖了从24小时不间断的新用户培训室，到《狮子王》的现场制作。
作为一个邀请制平台的早期测试用户，我拥有独特的视角：实时关注产品迭代。因此对我来说，挑战重新设计这个硅谷最令人兴奋的应用程序是没有压力的。


该项目的 高级目标 是：

  • 提升 Clubhouse 的用户体验，允许用户更容易地找到新聊天室、新朋友以及新俱乐部，从而提升参与度

  • 创造无缝体验，使用户能快速定位和他们关系更紧密的聊天室

2. 用户体验挑战：简化信息层级
2. UX Challenges: Simplifying a complex information hierarchy


厘清用户在应用程序中操作频率高的组件层次结构 是我的主要考虑因素之一：

  • 用户：应用程序里其他的用户

  • 聊天室：用于沟通的虚拟场合

  • 俱乐部：由管理者主持的基于兴趣的团体

除此之外，我需要考虑这些元素如何结合到一起，包括人际交往和时间的跨度：目前，俱乐部用户的主页会把和用户相关的以及他们关注的在线聊天室显示在这里（在这次案例学习中我将这种模型称为"内部网络"）。这让用户难以简单地接触到新创建的聊天室，他们会一直被困在内部网络里。

这成为了贯穿我本次案例学习的两条独立的用户路径：我需要在两者之间取得平衡。这相互独立的两条路径应该被保留，其联系应该被简化，以便于更好地连接在一起。
                               思维导图：任务流程和俱乐部之间的关系

3. 研究和计划：一个UX研究者的梦想

3. Research + Planning: A UX Researcher’s Dream

本项目还有一个独特的地方就是，Clubhouse 的创建者会直接跟他的测试用户接触。创建者 Paul Davison 和 Rohan Seth 每周日都会举办一个 Clubhouse 沟通会，他们通过一个公开的表格，向用户分享本周的产品更新内容，包括他们接下来的发展路线图、商业目标和首要任务，并期望用户能给到他们反馈。


感谢 Clubhouse 热情的用户群体，这个官方沟通会有专门的沟通会总结室来跟进。忠诚用户会非常认真地研究每周的更新和那些令他们激动的功能。
Clubhouse 沟通会、沟通会总结室，包括官方和社交账户，都在吸引新的用户进入这个聊天室里（包括常见问题、问答和讨论）。这六周以来，我平均每周花费 5 个小时在上面，尽可能多地理解 Clubhouse 的商业见解和目的。

       一些房间的收集，这是我们用户体验研究的常规部分
从这些讨论中可以看出，Clubhouse团队的 首要目的 是：

  • 让任何人都能接触 Clubhouse：Paul 一直以来都认为，团队的首要任务是在保证质量的前提下，让 Clubhouse  更快地迭代。

  • 将创作者放在第一位：Paul 坚持的另一个点是团队需要优先为平台创作者服务，为他们创建工具，使得他们可以在平台上将创造力变现。

  • 提升推荐内容的质量并使它们更容易被发现：在这段时间，Clubhouse 正积极地构建话题目录和算法，使用户可以更轻松地发现相关的聊天室。

       早期草图：不同界面可以如何表现

4. 用户访谈：从高级用户到新手

4. User Interviews, from power users to newbies

我和 Clubhouse 的高级用户以及普通社群成员进行了交流，去发现他们在使用应用程序的过程中会发生的问题。这些采访显示：

  • 保持轻量级：大部分的用户希望他们可以轻松随意地走进聊天室，而并不希望时刻关注聊天室的更新。

  • 凌乱的首页：大部分用户困惑于首页的组织方式，以及他们所关注的人出现在了哪些聊天室里。

  • 首页仍然承载着主要的推荐功能：即使首页是凌乱的，大部分用户始终依赖首页去发现新的聊天室，即使这里有一个叫做"发现"的标签（并不是非常明显）。

  • 朋友优先：在决定加入某个聊天室之前，用户往往希望看看他们的朋友在哪些聊天室。

       
我的用户访谈亲和图（使用 Evolve 制作）


在促进轻量化的外部网络发现的同时，我们应该如何让首页变成一个简洁明了的交互界面？

5. UX 解决方案：简化从发现到首页的路径

5. UX Solution: Streamlining the Discovery-to-Hallway pipeline

我开发了一个简单而强大的交互界面，让用户可以轻松地在首页和聊天室之间切换，并使用户轻而易举地通过发现页搜索聊天室。



为了让这个解决方案更加完整，我几乎要对 Clubhouse 进行整体重设计。我将这项工作划分为 5 个主要体验。
        早期线框图

1）体验1：首页优化

        左：现在的样式；右：我重新设计的
用户希望他们的首页使用体验更加有效且在掌握之中。为了达到这个目的，我重新建立了顶层信息层级。

  • 正在进行中的和即将开始的：让用户不光只能看到已激活的聊天室，也能快速浏览他们交际圈中即将开启的聊天室

  • 兴趣主题筛选：根据用户在新手引导过程中选择的感兴趣话题，来实现信息过滤

  • 首页聊天室分类：根据用户关注的人和俱乐部进行分类

我的另一个 UI 设计决策是，在首页的聊天室信息卡片中，只展示你关注的人。这将缓解目前用户看不清聊天室信息卡片的用户信息这个问题。

               
重新设计的首页演示

2） 体验2：聊天室预览


               
房间预览，用户可以在其中查看任何聊天室内的用户完整列表

一般在 Clubhouse 中，在首页上点击聊天室，会让你直接进入该聊天室的对话中。
由于用户在选择要加入的聊天室前，会重点考虑自己的朋友在哪个聊天室，因此我希望设计一种方式，让用户在进入聊天室前就可以清楚地知道他们的哪一个熟人在这个聊天室里。

3）体验3：发现页

     左：Clubhouse 目前的探索选项卡；右：我的重设计

一般来说，发现功能在 Clubhouse 里是作为筛选功能存在的：在“探索”选项卡中，用户通过分类和关键字去寻找其他用户和俱乐部；在“日历”选项卡中，用户寻找目前正在进行和即将开启的聊天室。

       
左图：通过  Clubhouse 的日历选项卡将聊天室推到用户首页（目前的设计）
右图：将聊天室入口设计为简单的底部工作表（我的重设计）
大部分用户并不会使用这些选项卡来寻找他们的主要搜索目标。取而代之的是采用一些灵活的方法。例如通过用户资料来发现俱乐部，通过聊天室来发现用户，然后通过这些用户的主页来发现聊天室，但这仅限于他们所接触的内容范围。
               
丰富的筛选和排序选项带来沉浸的探索体验
虽然我设计出了 UI 方案来使这些灵活的方法更加流畅，但我希望发现页可以完成以下所有的用户需求：除了关键字搜索，允许用户通过 Clubhouse 不断扩充的话题目录搜索其他用户、俱乐部和聊天室。
我同时还设计了额外的分类功能来优化发现功能。
               
将网络外的聊天室发送到你的主页
用户同时也想要一个简单的，轻量级的方案来探索自己交际圈之外的聊天室。


如何在用户没有关注聊天室主持人、没有进入相应的俱乐部，或没有将讨论加入个人日程的情况下，将聊天室通过信息流推到用户主页，是该项目的最大挑战。为了更加直观地展现这些内容，需要多次迭代优化。

4）体验4：活跃用户

        左图：Clubhouse 目前的“可聊天”窗口
右图：我重新设计的“当前在线”选项卡
作为首页的承接页，“当前在线”页展示了所有您当前在线的朋友和活跃的俱乐部。百分之八十三的用户在访谈中提到他们会迅速浏览这个页面来寻找哪些聊天室里有他们的朋友。
我添加了一个搜索功能，让用户能快速地搜索朋友。此外，我还添加了一个可以选择目标朋友的下拉分类菜单：通过它可以快速发现你朋友是在听还是在聊天室中交谈。


                
通过不同的排序选项发现活跃用户

5） 体验5：用户和俱乐部简介

       
左图：Clubhouse 目前的用户简介页面
右图：将俱乐部简介并入后
87%的用户会通过其他用户账号发现适合的俱乐部，并直接关注。俱乐部内部还存在一种等级关系：跟随者（能在自己主页中接收到消息通知并看到俱乐部名下的聊天室成员）和会员（除了上述功能之外，还可以自行在俱乐部名下开启聊天室）。



在 Clubhouse 目前的设计里，用户关注的俱乐部和用户所属的俱乐部入口在两个不同的位置：前者在用户的关注列表里，后者在用户简介的底部。这使用户感觉混乱，以至于难以迅速浏览和特定用户相关的俱乐部。
               
浏览用户和俱乐部简介
当把用户及其相关俱乐部信息整合到同一页面后，浏览个人简介的用户可以更简单地看到其他用户所属的俱乐部，以及他所关注的俱乐部，并且在这个页面迅速完成关注的动作。

6. 用户界面和品牌调性：黑暗模式的用户界面探索

6. UI & Branding: A Case for Dark UI


把这次研究的所有体验归结到一起，发现加入太多视觉元素会影响视觉层级的清晰度，因此需要移除一些没有必要的元素。


另外，Clubhouse 的典型用户已经沉浸于这个应用程序，并且常常会体验整晚。我想利用这一用例，实现一套简练的 UI，巧妙地强调 Clubhouse 的各种内容类型。
        部分指导设计的风格指南

7. 可用性测试：整个app的可寻性和可发现性的效力如何？

7. Usability Testing: How effectively is findability and discoverability throughout the app?


在进行可用性测试后，我利用测试期间收集到的洞见、行为及发现，创建了一个亲和图。大部分用户几乎没有失误地使用了应用软件，但是对于大部分参与者来说，有一个关键问题影响了他们对这次重新设计后的软件的体验：如何访问一个从发现页保存到主页的聊天室。

8. 可用性测试洞察&优先级调整

8. Usability Testing Insights & Priority Changes



最初，我在发现选项卡中设计了即将开启的网外聊天室，由用户为房间加星标来排序，并显示在首页中。用户可通过“排序依据”这一下拉菜单来找到这些聊天室。这里存在几个问题：

  • 原始设计基本上将这些聊天室视为已保存的项目，无意中（错误地）在用户首页优先展示这些聊天室。

  • 这种处理方式可能会抑制用户自发创建聊天室，或不公平地优先考虑一般的网外聊天室。

  • 除此之外，在排序下拉列表中嵌入已保存的项目并不直观，这也不是用户查找此类内容的预期位置

                
设置聊天室、俱乐部及用户的通知级别
我想出的解决方法是让 Clubhouse 算法决定首页的聊天室外观，然后通过自定义通知功能，将优先级排序权交到用户手中。


我的最后一次迭代包括为不同用户、俱乐部、聊天室设置消息通知级别的解决方案设计，因此用户绝对不会错过他们想要参加的部分。

9. 结论：学到的东西&未来的方向

9. Conclusion: Lessons learned & where we go from here



自从开始做这个项目，我便知道这对于一个萌新设计师来说会是一个很大的挑战。但我不知道的是这会是一个极其错综复杂且包罗万象的挑战。
我明白了在一个高度知名且受欢迎的产品上进行设计，会伴随着很多来自外部的压力和来自内部的情绪，因为几乎每个人都想做正确的事情：对现有结构有强烈依恋的高级用户，无法完全体验静态原型中细微差别的新用户，以及每周都在积极迭代产品或推出富有想象力的解决方案的小而强大的 Clubhouse 团队，同时也在面对我所面对的挑战，或是一些我根本没办法想象的困难。


面对公众对一款令人激动的产品的持续讨论，我感到迷茫。我谦虚地承认，有时这种压力也让我变得更好。我感觉自己完全是个自不量力的骗子。
这个项目教会我的最重要一课是如何在面对复杂挑战时保持毅力，面对失败时保持从容，当做到足够好时及时满足。
在最后，我非常自豪我可以在这个阶段完成这个项目。回想起我最喜欢的一句口头禅，这也是引导我进行产品设计的初心：


“我所追求的是一份像书一样的工作，好到我余生都要完成它。”



产品设计对我来说就是这样一份工作，我很自豪地说，尽管这个项目永远不会结束，但我已经尽我所能地为它注入活力，希望你喜欢它！

原文：https://blog.prototypr.io/i-wanted-to-challenge-myself-as-a-young-designer-so-i-redesigned-silicon-valleys-buzziest-app-452c82c85ef6

作者：Amy Lima

译者：郑伊妮

审核：刘倩茹、李泽慧、张聿彤

编辑：孙淑雅

本文翻译已获得作者的正式授权（授权截图如下）  

往期精选文章：

十个技巧帮助你设计一款在线学习 APP

这些色彩心理学知识教你如何传递信息

案例研究｜康奈尔大学副业社区网站设计

Web Vitals —— 谷歌的新一代 Web 性能体验和质量指标

网页设计师能从日式美学中学到什么？

案例研究｜一款为你带来难忘体验的美食 APP

如何制作打动面试官的作品集，这里有一份完整的指导手册

如何做好用户体验项目？从一个好计划开始

如何建立设计系统

如何把握不同层级用户的需求：回归本质，打磨信息架构

TCC 视野｜2021 年用户体验设计趋势分析



- 设计师自习社区 -
TCC 设计情报局欢迎小伙伴加入，一起交流设计知识，了解全球设计资讯，锻炼英文能力，发掘更多可能性～
添加小助手微信，备注「社群」，即可加入读者群。

本文来自微信公众号“TCC翻译情报局”（ID：TCC-design）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。

TAGS:

相关文章