The process of making a useful drink library

制作有用的饮料库的过程

Do you ever try a drink at a bar and think, “I could probably make this myself” or wish you had a better bar setup at home? With this project, we set out to find out what people really want out of a drink recipe app.

您是否曾经尝试过在酒吧喝一杯，然后想：“我可以自己做一个”，还是希望您在家中设置一个更好的酒吧？ 通过这个项目，我们着手从饮料食谱应用程序中找出人们真正想要的东西。

研究 (Research)

To start our research we had to see what was already out there. What were people using? What was successful and why was it successful? We downloaded and explored the top mixology apps in the app store and poured over the reviews to see what we could discover.

要开始我们的研究，我们必须看到那里已经存在的东西。 人们在使用什么？ 什么成功了，为什么成功呢？ 我们下载并浏览了应用程序商店中最流行的混合学应用程序，并倾注了评论以发现我们可以发现的内容。

From that initial round of exploration, we found that a visually appealing UI was important to users. It seemed like they preferred a better-looking app to one that has more recipes but looked unpleasant or cheesy. We also found that most of the apps were primarily a drink recipe library, and just took different approaches to how they presented that information to the user.

通过最初的探索，我们发现视觉上吸引人的UI对用户很重要。 似乎他们更喜欢外观更好的应用程序，而不是食谱更多但看起来不愉快或俗气的应用程序。 我们还发现，大多数应用程序主要是饮料配方库，只是采用了不同的方法来将这些信息呈现给用户。

Armed with these initial observations and assumptions, we sent out a survey and interviewed users to get more direct data. We built the questions around trying to find out more about their expectations and habits when it comes to mixing drinks for themselves. For example, some of the questions we asked included:

有了这些初步的观察和假设，我们进行了一项调查并采访了用户，以获得更直接的数据。 我们围绕着试图找出有关他们自己混合饮料的期望和习惯的更多信息来提出问题。 例如，我们提出的一些问题包括：

• What barriers have kept you from mixing your own drinks?哪些障碍使您无法混合自己的饮料？
• Tell me about your experience with making mixed drinks?告诉我您制作混合饮料的经历吗？

From all of our research, we received over 100 responses and gained a few valuable insights that would influence our designs: people are consistently worried about the costs of making mixed drinks, and also feel like they don’t know that much about it even if it sounded interesting to them.

从我们的所有研究中，我们收到了100多个反馈，并获得了一些会影响我们设计的宝贵见解：人们始终担心制作混合饮料的成本 ，并且即使他们对 混合饮料 了解甚少，对他们来说听起来很有趣。

Along with the collective thoughts and opinions that we thought best represented our user, we also obtained demographical data and used this to build our persona.

除了我们认为最能代表用户的集体思想和观点，我们还获得了人口统计数据，并以此来建立我们的角色。

Having a persona helped us to empathize with the user and keep the team on the same page when making decisions. It served as a great foundation to come back to when we got stuck in the design.

具有角色有助于我们同情用户，并在制定决策时将团队保持在同一页面上。 当我们陷入设计困境时，它可以作为重要的基础。

构想 (Ideation)

To come up with possible solutions, we made a few ‘how might we …’ statements encompassing the main concerns we wanted to address. Our final statement was:

为了提出可能的解决方案，我们做了一些“我们将如何……”的陈述，其中包含了我们要解决的主要问题。 我们的最终声明是：

“How might we help the user have useful information, and maximize what they are buying?”

“我们如何帮助用户获得有用的信息，并最大程度地增加他们的购买量？”

To answer this question we listed a few possible functions we could incorporate and boiled it down to two main things our app could do for the user.

为了回答这个问题，我们列出了一些可以合并的可能功能，并将其归结为我们的应用可以为用户做的两件事。

In our app, they would be able to explore drink recipes and also keep track of drink ingredients they already have. This way, when browsing recipes they can tell from a glance what they can make to save money, but also have the chance to try new drinks outside of their usual repertoire. We felt like these were the most important things we could incorporate to specifically answer to our users' needs to save money and have more information.

在我们的应用程序中，他们将能够探索饮料配方，并跟踪他们已经拥有的饮料成分。 这样，当浏览食谱时，他们可以一目了然地告诉自己可以节省多少钱，而且还可以尝试在常规菜单之外尝试新的饮料。 我们觉得这些是最重要的东西，我们可以将它们结合起来，专门满足用户节省资金和获取更多信息的需求。

We then created a user story map to visualize the users’ journey. This also helped us to catch other parts of the narrative we may have been overlooking when considering the design.

然后，我们创建了一个用户故事地图，以可视化用户的旅程。 这也帮助我们了解了在考虑设计时可能忽略的其他部分。

For example, we realized we needed to determine if we would have the user create an account when first launching the app. This required us to consult with our designs and our developers to see what the options were and why we might choose them. We ended up going with an icloud account storage option so users could open the app and start using it right away as long as they were logged into their icloud. Then we wouldn’t have to put them through a sign-up flow (which can be off-putting) but still save their custom recipes and favorites as they use the app.

例如，我们意识到我们需要确定在首次启动该应用程序时是否让用户创建帐户。 这就要求我们咨询设计人员和开发人员，以了解选择的内容以及为什么选择它们。 我们最终使用了icloud帐户存储选项，因此用户只要登录到icloud，就可以打开该应用并立即开始使用它。 然后，我们不必让他们进行注册流程(可能会令人反感)，但是在他们使用该应用程序时仍然可以保存他们的自定义食谱和收藏夹。

We would sketch little screens and elements while discussing solutions and drew a variety of styles to explore the pros and cons of different layouts. They weren’t neat but were very quick ways for us to hash-out ideas and get on the same page. After this stage, we started creating low fidelity wireframes to get a better idea of how we want it to look. This helped us to build out a more complete view of what screens we would need, and helped us to test and analyze our solution.

在讨论解决方案时，我们会画一些小的屏幕和元素，并绘制各种样式以探讨不同布局的利弊。 它们不是很整洁，但是对于我们来说，是散布想法并进入同一页面的非常快捷的方法。 在此阶段之后，我们开始创建低保真度的线框，以更好地了解我们的外观。 这有助于我们对所需的屏幕建立更完整的视图，并帮助我们测试和分析解决方案。

解 (Solution)

We took our low fidelity screens and built an interactive prototype to test with different users. This allowed us to see what the users’ initial response to the interface is, and check how our design is working so far. After encouraging them to think out loud while using the prototype, we made sure to use prompts that encouraged exploration rather than providing direct tasks.

我们采用了低保真屏幕，并构建了一个交互式原型来与不同的用户进行测试。 这使我们能够看到用户对该界面的最初React，并检查到目前为止我们的设计如何工作。 在鼓励他们在使用原型时大声思考之后，我们确保使用提示来鼓励探索，而不是提供直接任务。

For example, we wanted to see whether the user would use the search function more than just sorting to finding a drink. Instead of saying “click on sort” to see if they could find it, we would just say “find an old fashion recipe” or things like “where would you go if you wanted to see what drinks you could make right now?”. This allowed us to see where they would hesitate and what their instinctual reaction was.

例如，我们想看看用户是否会更多地使用搜索功能，而不仅仅是排序以查找饮料。 与其说“单击排序”以查看他们是否可以找到它，不如说“找到旧的时尚食谱”或“如果您想看看现在可以制造什么饮料，您会去哪里？”之类的东西。 这使我们能够看到他们会在哪里犹豫，他们的本能React是什么。

We made some useful observations in testing the prototype that we then applied to the design. For example, initially, we only had a swipe close option to get out of certain views but found that it wasn’t as discoverable as we hoped and added an x to close for more accessibility.

我们在测试原型后进行了一些有用的观察，然后将其应用于设计。 例如，最初，我们只有一个滑动关闭选项才能退出某些视图，但是发现它不如我们希望的那样被发现，并添加了x来关闭以提供更多的可访问性。

In our final design, we have the two main screens that you can toggle between and a card like style for the different elements. We chose this style for its simplicity and it allowed for a clean way to sort in many different ways and organize information neatly. Having a card for each recipe/ingredient also allowed us to include more information on each without over polluting or confusing the user.

在我们的最终设计中，我们有两个主屏幕，您可以在两个主屏幕之间进行切换，并且具有不同元素的类似卡片的样式。 我们选择此样式是因为其简单性，它允许采用一种干净的方式以多种不同方式进行排序并整齐地组织信息。 每个配方/成分都有一张卡片，还可以使我们在每个配方/成分上包含更多信息，而不会过度污染用户或使用户感到困惑。

On the initial view of each card, we have the name of the recipe, an icon for what glass type the drink is often served in, and the color of the card is related to how much of the ingredients you already have. By using these different forms of feedback we wanted to keep information clear and simple for the user when browsing.

在每张卡片的初始视图上，我们都有食谱的名称，一个图标，指示饮料通常用于哪种玻璃杯，卡片的颜色与您已经拥有的食材数量有关。 通过使用这些不同形式的反馈，我们希望在浏览时为用户保持信息的清晰和简单。

品牌推广 (Branding)

As we approached the final stages of the design, we came to one of the most fun parts of creating a new product: naming and logo design.

当我们接近设计的最后阶段时，我们进入了创建新产品最有趣的部分之一：命名和徽标设计。

We started with a brainstorming session with other design colleagues, and just made a list of any possible names including synonyms, or taking words from the main function of our app. We knew we wanted it to be easy to say and didn’t have to be a real word if the user could easily become familiar with it.

我们从与其他设计同事进行集思广益的会议开始，只是列出了所有可能的名称，包括同义词，或从应用程序的主要功能中提取了单词。 我们知道我们希望它易于表达，并且如果用户可以轻松地熟悉它，也不必成为一个真实的词。

After boiling it down to a few favorites we went around the office and took votes on their favorites. There was a tie in the top two most popular names, and we chose one after trying to picture it with our app and checking the availability of the names.

将其归结为几个收藏夹之后，我们绕着办公室走去，对他们的收藏夹进行投票。 最受欢迎的前两个名称中有一个并列，在尝试使用我们的应用程序将其图片化并检查名称的可用性之后，我们选择了一个。

Now that we had the name Sipsy we played with different logos and icons that we thought would best show the function and personality of the app. We wanted to keep in mind that as an app icon, it would be competing with other apps on the users’ home screen. At first, we thought of putting the name on the icon but found that it’s not as readable on a small scale. An image of a drink would pack more identity in one look.

现在我们有了Sipsy这个名字，我们使用了不同的徽标和图标，我们认为它们可以最好地显示该应用程序的功能和个性。 我们要记住，作为一个应用程序图标，它将与用户主屏幕上的其他应用程序竞争。 最初，我们考虑将名称放在图标上，但发现它在小范围内不易读。 饮料的图像在外观上将具有更多的身份。

The final icon we chose includes the primary purple shades of our designs to incorporate the brand, and we echoed the shape of the ingredient tiles in the ice cubes. We also added a little splash of movement to the drink to make it more dynamic but also as a nod to mixing drinks.

我们选择的最终图标包括设计中融入品牌的主要紫色阴影，我们呼应了冰块中成分砖的形状。 我们还为饮料增加了一点运动感，以使其更具活力，同时也向混合饮料致敬。

When choosing the colors, we experimented with a variety of shades but the final palette we chose for its compatibility with visual impairments. We also created 20 different glass icons in a similar style to the brand of the app to use on each of the drink recipes.

选择颜色时，我们尝试了多种阴影，但最终选择的调色板是其与视觉障碍的兼容性。 我们还创建了20种不同的玻璃图标，其样式与应用程序的品牌相似，可用于每种饮料配方。

结果 (Results)

Looking back on the project some important takeaways are the importance of user feedback and testing, as well as communication as a team.

回顾该项目，一些重要的收获是用户反馈和测试以及团队沟通的重要性。

For this project, we had two UI/UX designers including myself and three iOS developers. We also had three QA engineers that assisted us through the project.

对于这个项目，我们有两名UI / UX设计师，包括我本人和三名iOS开发人员。 我们也有三名质量检查工程师为我们完成了该项目。

Having a small team of different disciplines was very helpful in creating this app quickly and keeping communication open and constant. In the middle of this project, we had to switch to a remote setup, which was an unexpected setback. However, we were able to persevere with daily updates and regular check-ins with each other to keep working on a quality product.

拥有一支由不同学科组成的小组，对快速创建此应用程序并保持沟通的开放性和持续性非常有帮助。 在该项目的中间，我们不得不切换到远程设置，这是意外的挫折。 但是，我们能够坚持不懈地进行日常更新和定期签到，以保持高质量的产品。

The beauty of UX design is you are never really done, there can always be more testing and more improvements made. We are still actively working on this project and looking forward to launching it in the app store soon!

UX设计的美妙之处在于您从未真正完成过，总是可以进行更多的测试和进行更多的改进。 我们仍在积极地致力于这个项目，并希望很快在App Store中启动它！