Microsoft Studio9
Text to Speech Tuning Tool

Microsoft Studio9 文字转语音调整工具

PERIOD
Jul 2017 to Oct 2017

​MY ROLE
UX & UI Designer

DESIGN PEERS
Hannah Li

 

Studio9 is a voice tuning platform based on SSML control to get high-quality audio outputs. It provides a useful toolset to empower 1st party and also 3rd party developers on audio producing in a cost-saving and efficient way.

Studio9 是一个基于 SSML 控制的语音调谐平台,以获得高质量的音频输出。 它提供了一个有用的工具集,以节省成本和高效的方式授权第一方和第三方开发人员进行音频制作。

 

What is Studio9

什么是Studio9

Let's say I have a bunch of text and want to turn this into a high-quality audio or speech output. So the first thing you need to do is to put it into Studio9, and then you can choose a specific voice (we have a bunch of presets of different language gender ages, you can also input the voice model created in Custom Voice), but with some flaws, the speech is not that perfect. So that's why it needs tuning and editing to make it better.

假设我有一堆文本,想将其转换为高质量的音频或语音输出。 所以你首先要做的就是把它放进Studio9,然后你可以选择一个特定的声音(我们有一堆不同语言性别年龄的预设,你也可以输入自定义声音中创建的声音模型),但是 有一些缺陷,演讲不是那么完美。 所以这就是为什么它需要调整和编辑以使其更好。

 
1-1.png

Target Users

目标用户

 
 
1-3.png

1st Party Developer 第一方开发商

3rd Party Developer 第三方开发者

Design of The Previous Platform

旧平台的设计

The editing function is not well organized
The operation flow is circuitous
Some of the functions shall be removed from the tool, and build a new tool
The device is not easy to use for long paragraph editing – the space is limited

编辑功能没有很好的组织
操作流程是迂回的
部分功能应从工具中移除,并构建一个新工具
设备不易用于长段编辑 - 空间有限

 
 
1-5 copy.png

Our Goals of The Redesign

再设计目标

Like we see, the previous platform is messy and disorganized. All the functions are tiled there with no priority and order. We want to give the users a clear mind to control this tool through our design.

就像我们看到的那样,以前的平台是杂乱无章的。 所有功能都平铺在那里,没有优先级和顺序。 我们希望通过我们的设计让用户清楚地控制这个工具。

 
 
M2.jpg
 

Simple – Easy to learn
简单 – 易于学习

If the interface is clear enough, it will be easier for users to understand the platform and Identify different function areas. So they don't have to spend too much time learning how to use it.

如果界面足够清晰,用户会更容易理解平台,识别不同的功能区域。 所以他们不必花太多时间学习如何使用它。

Efficiency – Easy to use
效率 – 易于使用

We should place and organize these functions to easily attach and find them based on user habits. In addition, we want our design fast for our users' working process to accomplish more in a short time.

我们应该根据用户习惯来放置和组织这些功能,以便于附加和查找它们。 此外,我们希望我们的设计能够快速为用户的工作流程在短时间内完成更多工作。

Scalability – Easy to add new function
可扩展性 – 易于添加新功能

TTS tuning and editing systems are growing fast nowadays. So we will add a lot more new features and functions in the future time. So the organization and layout should be flexible enough to fit in.

如今,TTS 调谐和编辑系统发展迅速。 因此,我们将在未来添加更多新特性和功能。 所以组织和布局应该足够灵活以适应。

Design Process

设计过程

Before our design, it's surprising that Studio9 has been used for three years in Microsoft. So long-term users must be very familiar with the platform though it is tough to use and control. So the first step of changing is essential that it may influence old users while engaging new users. So we need to be closer to our actual users and hear from their feedback for each step.

在我们设计之前,令人惊讶的是,Studio9 在微软已经使用了三年。 所以长期用户必须非常熟悉该平台,尽管它很难使用和控制。 因此,改变的第一步至关重要,它可以在吸引新用户的同时影响老用户。 所以我们需要更接近我们的实际用户,并听取他们对每一步的反馈。

 
IMG_2339 copy.JPG

Problem Researching 问题研究

The design started from finding problems in the current platform. We tried to discover the issues that hide in the experience process by creating different mind maps from the whole to the details. And we also compared the current experience process with the user manual to find out more.

But expect all that, the most important thing is that we talk to the users, play with the platform, and try to be the user themselves.

设计从发现当前平台的问题开始。 我们试图通过创建从整体到细节的不同思维导图来发现隐藏在体验过程中的问题。 并且我们还将当前的体验过程与用户手册进行了比较以了解更多信息。

但是期待这一切,最重要的是我们与用户交谈,与平台一起玩,并尝试成为用户自己。

Problem Summary 问题总结

After finding all the problems, we summarized them into a deck, classified the REAL ones into four main categories, and discussed them with the PM.

① Flat Visual Hierarchy
② Unclear Indication
③ Information Repetition
④ Illogical Workflow

找到所有问题后,我们将它们汇总成一个PPT,将真正的问题分为四大类,并与 PM 进行讨论。

① 平面视觉层次结构
② 指示不清
③ 信息重复
④ 不合逻辑的工作流程

IMG_2306 copy.JPG

Redesign Challenges 再设计挑战

① Current Structure & Functions;
② Current problems of structure & functions are chaotic, hard to organize;
③ New Feature & Functions;
④ New features and functions are adding to the platform, but the frame design is still not straightforward.

① 当前结构和功能;
② 当前的结构和功能问题混乱,难以组织;
③ 新特性和功能;
④ 新的特性和功能正在添加到平台中,但框架设计仍不清晰

 
 

Redesign Structure

再设计结构

Studio9 is more like a functional tool or online software, like PowerPoint or Word. One of the most important things about it is that we need to define a central section for users, for example, the editing area, the action area, etc.

So we decided to start from the whole structure setting, reorganizing these features, reconsider the entire frame and positions. Group up some of them, and delete some ones that we do not need. Give proposals first, then do some quick tests to see users' reactions. During this "whole structure" time, we may ignore the specific functions, keep it how it goes temporarily, and figure out how to refine them after locking down the whole structure.

Studio9 更像是一个功能性工具或在线软件,如 PowerPoint 或 Word。 关于它最重要的事情之一是我们需要为用户定义一个中心部分,例如,编辑区,操作区等。

所以我们决定从整个结构设置开始,重新组织这些特征,重新考虑整个框架和位置。 将其中一些分组,并删除一些我们不需要的。 先给出建议,然后做一些快速测试,看看用户的反应。 在这个“整体结构”的时间里,我们可能会忽略具体的功能,暂时保持它的状态,在锁定整个结构之后再想办法细化它们。

 
 
 

We remove the "popup" functions in the old platform during the redesign and give all the parts a specific stable place to stay. Users can find all the standard procedures there, and it's going to be easy for them to switch between different functions.

我们在重新设计期间删除了旧平台中的“弹出”功能,并为所有部件提供了一个特定的稳定位置。 用户可以在那里找到所有标准程序,并且可以轻松地在不同功能之间切换。

 

Whole Structure Test

整体结构测试

Structure 框架

We run a small test through company email (Since most of the users are working inside Microsoft but may base in different countries) right after finishing the whole structure wireframe. Because we want to get the feedback faster, so it could instruct us for the next step.​

在完成整个结构线框后,我们通过公司电子邮件进行了一个小测试(因为大多数用户在微软内部工作,但可能位于不同的国家)。 因为我们想更快地得到反馈,所以它可以指导我们下一步。

 
 

Visual 视觉

We also interviewed users about visual preference (We didn't have enough resources to do both versions). At first, we thought most devs might prefer a darker background for a web tool because it's more "cool," once a dev friend told me. But we are not 100% sure about that, so we give another light theme in the test to see how it goes.

我们还就视觉偏好采访了用户(我们没有足够的资源来制作这两个版本)。 起初,我们认为大多数开发人员可能更喜欢 Web 工具的深色背景,因为它更“酷”,曾经有开发人员朋友告诉我。 但我们并不能 100% 确定这一点,所以我们在测试中给出了另一个轻量级主题,看看它是如何进行的。

 
 

Except for all the questions about the structure and visual design, we also proposed the terminal device they are using, whether it's a desktop or a laptop, to decide the size of the invention. And the result is shocking that most of the answers are not what we expected. So you must do the test early because you can find problems early and solve them at an early stage. Besides, we got some interesting feedback from our users, and they also gave excellent proposals.

除了所有关于结构和视觉设计的问题,我们还提出了他们使用的终端设备,无论是台式机还是笔记本电脑,来决定发明的大小。 结果令人震惊的是,大多数答案都不是我们所期望的。 所以你一定要早做测试,因为你可以早点发现问题,早点解决。 此外,我们从用户那里得到了一些有趣的反馈,他们也提出了很好的建议。

 

Redesign Specific Functions

重新设计特定功能

We move to the next step right after locking down the whole structure. And since we have already given the functions a stable area, we could explore different functions' flow separately. But there are so many other functions in Studio9. What is their priority? Where should we begin? So we did a little research on the usage of each process. Then have a clear focus.

在锁定整个结构后,我们立即进入下一步。 由于我们已经给函数一个稳定的区域,我们可以分别探索不同函数的流程。 但是 Studio9 中还有很多其他功能。 他们的优先事项是什么? 我们应该从哪里开始? 所以我们对每个进程的用法做了一些研究。 然后有一个明确的重点。

 
 
Screen Shot 2021-08-10 at 2.34.03 PM copy.png
 
1-10.png

Hifi

高保真

Studio9 needs to have a flat and clean visual style to keep the Microsoft style consistency. So after that, we started the hi-fi design by creating the component to fast the design process. And after a few hi-fi iterations, we finally lockdown this part.

Studio9 需要有一个扁平和干净的视觉风格,以保持微软风格的一致性。 所以在那之后,我们通过创建组件来开始高保真设计,以加快设计过程。 经过几次高保真迭代后,我们终于锁定了这部分。

 
 
1-12.png
 
Previous
Previous

Custom Voice

Next
Next

Bing Ads