苹果风格ui设计

重点 (Top highlight)

TLDR？ UI重新设计 (TLDR? UI Redesign)

I didn’t realise how much I’d written for this piece (this is my first ever completed case study) so if you want to see just the UI redesign solely then please go to my Behance post for this project whilst I’m in the process of finishing up my portfolio & website — https://www.behance.net/gallery/92730569/Apple-Music-Redesign-UI-UX-Case-Study

我没有意识到我为这篇文章写了多少(这是我有史以来第一次完成的案例研究)，因此，如果您只想重新设计UI，那么请在我处于工作状态时转到我的Behance帖子以了解该项目。完成我的投资组合和网站的过程— https://www.behance.net/gallery/92730569/Apple-Music-Redesign-UI-UX-Case-Study

I would like to start by saying the intent behind this case study is with nothing but reverence for Apple. In fact, my one of my dreams as a designer is to work for a company of such calibre. Also, thanks to Jason Yuan and his incredible Apple Music Case Study for inspiring me to take a leap and dare to do this.

首先，我想说这个案例研究的目的只是对苹果的崇敬。实际上，我作为设计师的梦想之一就是为这样一个水平的公司工作。另外，还要感谢Jason Yuan和他令人难以置信的Apple Music案例研究，这激发了我勇往直前并敢于做到这一点。

Like Jason, I also applied to Apple as an intern last year. I got rejected too. It’s not their fault though. I was lacking whatever Apple was looking for in my (very amateur) portfolio back then. That’s ok, I wasn’t good enough. And maybe because I don’t have a degree and lack professional experience? That’s why I’ve been applying for internships. Regardless, I had to get better. I saw this as an opportunity to take the initiative in learning UX research and UI design beyond surface level. I had to teach myself whatever a company would be looking for and demonstrate it, which is what I’m going to try and do here.

像杰森一样，我去年也曾申请苹果实习生。我也被拒绝了。这不是他们的错。那时，我的苹果(非常业余)投资组合中缺少苹果想要的东西。没关系， 我还不够好。 也许是因为我没有学位并且缺乏专业经验？这就是为什么我一直申请实习的原因。无论如何，我必须变得更好。我认为这是一次主动学习超越表面水平的UX研究和UI设计的机会。我必须自学任何公司想要寻找和演示的东西，这就是我要在这里尝试并做的事情。

Using the brain to fix problems through psychology, the heart to empathise with users and their problems and my soul which lives for design sealed the deal. It’s the trifecta that made me realise long ago that UI/UX is my path.So, I decided to get good enough for my dreams. Despite my circumstances, I did what I had to do. The result is this piece.

用大脑通过心理学来解决问题，用心去理会用户及其问题，而我的灵魂则为设计而努力。它是由不久前，UI / UX是我path.So我实现了三连胜，我决定让配不上我的梦想。尽管有我的情况，我还是做了我必须做的。结果就是这样。

Aside from UI/UX being a dream career, to see further motivations behind why I did this case study, please read until the end. I didn’t want to start this piece explaining the adversity of my circumstances. I want my work on this to be the focal point, not my struggles. If you do go to the end and read it, I am truly thankful. With all my heart, thank you.

除了UI / UX是理想职业之外，要了解我为什么进行此案例研究的更多动机，请阅读全文。 我不想开始解释我所处环境的逆境。 我希望我在这方面的工作成为重点，而不是我的奋斗目标。 如果您确实读完了它，我真的很感激。 全心全意，谢谢。

起始时间 (Inception)

Last summer, I clocked out of work and was trying to think of ideas for a case study to use as the basis for learning UI/UX myself. What I was looking for was right in front of me. My iPhone and Beats are glued to me at all times. The Apple rejection was the key. The iOS app I use the most always bugged me. I’ve always had frustrations with the Music app. The writing was on the wall. And thus began my journey. I already had a solid design background from self teaching all my life. With HCI, I had a basic understanding of the principles from college and from being an avid user who is always pondering about why my favourite apps don’t have certain features I wished they did. Cut to me spending every second whilst and out of my retail warehouse job learning the ins and outs of UI design & UX research and switching between the Music and Notes app, dissecting every tiny thing I found right and wrong with the app.

去年夏天，我退出工作，试图思考一些案例研究的想法，以此作为自己学习UI / UX的基础。我要找的东西就在我眼前。我的iPhone和Beats一直都粘在我身上。苹果的拒绝是关键。我最常使用的iOS应用困扰着我。我一直对Music应用感到沮丧。文字在墙上。这样就开始了我的旅程。我一生的自我教学已经拥有扎实的设计背景。有了HCI，我对大学的原理和成为一个狂热的用户有了基本的了解，他一直在思考为什么我最喜欢的应用程序没有我希望他们拥有的某些功能。减少我在零售仓库工作中花费的每一秒钟，而无需花费大量时间来学习UI设计和UX研究的内容，并在Music and Notes应用程序之间进行切换，剖析了我发现该应用程序是非对错的每件事。

What started as a bullet point in Evernote last July at the lowest period of my life is something I’ve (somehow) managed to flesh out and actualise into something tangible in the last 8 weeks. I started dissecting Apple’s Music app in December. The redesign you see below? I did it in 1 week after collating almost 2 months of handwritten notes and sketches into a 14,000+ word document I accidentally created. Whoops.

在我生命中最艰难的时候，去年七月在Evernote上成为一个要点是，我(以某种方式)设法充实并在最近八周内实现了切实的东西。我从12月开始剖析Apple的Music应用。您在下面看到的重新设计？在将近2个月的手写笔记和草图整理成我不小心创建的14,000多个word文档之后，我花了1周的时间做到了。哎呀

Yes, I’ve not slept in over a week (or much of the last few months). How am I even writing this. Who knows?! Every waking minute, on the commute to and from my job and outside of working and caring for both my sick parents, I’ve been incessantly working on the lead up to this case study. Never did I think I’d actually make something with any of it. But here we are.

是的，我还没有睡一个星期(或过去几个月的大部分时间)。我什至怎么写这个。谁知道？！在每一次醒来的时候，上下班上下班，以及在工作和照顾生病的父母之外，我一直在不断地努力完成本案例研究。我从没想过我真的会用任何东西做点什么 。但是我们到了。

My first design in XD, Jan 16th 我在XD中的第一个设计，1月16日

On the left, what you see is the first thing I’d ever made in XD on January 16th. Just over 4 weeks later, I’m here writing this post. It feels surreal. I dared to actually make this entire project come to fruition. It doesn’t feel real, but it is. To me, it’s one of the biggest accomplishments of my life. To have started an idea that seemed impossible to finish and actually do it. Even more so with the chaos that is my life. Something in me believed I could. And I did. I did. One of my inspirations in doing this case study?

左边是1月16日我在XD中所做的第一件事。仅仅过了四个星期，我在这里写这篇文章。感觉超现实。我敢于使整个项目真正实现。感觉不真实，但确实如此。对我来说，这是我一生中最大的成就之一。提出一个似乎不可能完成并实际实现的想法。我的生活更加混乱。我内心深信我可以。而我做到了。是的我做这个案例研究的灵感之一？

“People don’t know what they want until you show it to them. That’s why I never rely on market research.” — Steve Jobs

“除非您向他们展示，否则人们不知道他们想要什么。这就是为什么我从不依赖市场研究的原因。” —史蒂夫·乔布斯

So, I attempted to design the Music app that I (and according to my research, many other users) want.

因此，我尝试设计我(并且根据我的研究，许多其他用户)想要的音乐应用程序。

前言 (Preface)

Apologies in advance for the interaction/animation quality. They aren’t the best. I can’t afford Principle or Sketch. I’ve had to make do with what I had. The main purpose of the prototypes are to demo the features more than the actual interactions, which, without a doubt, could be much better than what I managed to do with XD. My laptop couldn’t handle the power required to render my project files so every time I tried to record the prototypes in action, XD crashed or could only render with lag. I did the best I could.

预先为互动/动画质量致歉。他们不是最好的。我买不起Principle或Sketch。我不得不弥补我所拥有的。原型的主要目的是比实际交互更多地演示功能，这无疑比我对XD所做的要好得多。我的笔记本电脑无法处理渲染项目文件所需的功能，因此每次我尝试记录实际的原型时，XD崩溃或只能进行滞后渲染。我已经尽力了。

I’ve also done a short YouTube video as a thank you if you are reading this.

如果您正在阅读本文，我也做了一段简短的YouTube视频，谢谢。

Thank you 谢谢

目标-为什么，什么，如何 (The Goal — Why, What, How)

为什么我要重新设计Apple Music？ (Why have I attempted to redesign Apple Music?)

To use this as my first case study project to practice all my self-taught UI/UX theory
以此作为我的第一个案例研究项目来实践我所有的自学UI / UX理论
To redesign the Apple Music app to be an experience, one that is easier to use and provides more features that many users have been asking for
要将Apple Music应用重新设计为一种体验，它应易于使用并提供许多用户一直在要求的功能
To attempt finding and delivering tangible solutions to the problems I and many users have expressed with the Music app
为了尝试找到并提供切实可行的解决方案，以解决我和许多用户使用音乐应用程序表达的问题
I genuinely love Apple, Music, Design and Psychology more than I could ever express and my dream is to work in this field
我对苹果，音乐，设计和心理学的热爱超过了我的想象，我的梦想是在这个领域工作
Most importantly? I, and many others, have major problems with the Music app and it’s one many of us use most every single day. I wanted to see if I could find and deliver tangible solutions to the problems many users have expressed with the Music app
最重要的是？ 我和其他许多人在“音乐”应用中都遇到了重大问题，这是我们许多人每天最多使用的问题。 我想看看我是否可以找到并提供针对许多用户使用音乐应用程序表达的问题的切实解决方案

本案例研究的目标是什么？ (What was my goal for this case study?)

To redesigning the Apple Music app UI to solve identified UX problems from user research (including personal motivations having the same issues)
重新设计Apple Music应用程序用户界面以解决用户研究中发现的UX问题(包括具有相同问题的个人动机)
To reduce friction between users and their goals through removing frustrations and making the obvious prominent.
通过消除挫败感和明显表现来减少用户与其目标之间的摩擦。
To optimise the UI (design) with aims to improve the overall UX (usability)
优化UI(设计)，旨在提高整体UX(可用性)

我要如何达到目标？ (How was I going to reach my goal?)

Conduct research to identify user pain points/problems and find solutions to said problems
进行研究以确定用户的痛点/问题并找到解决问题的方法
Ideate to introduce new concepts and ideas for features and functionality that would enhance the user experience in the Music app, giving an abundance in user choices and controls
Ideate为功能和功能引入新的概念和想法，这些概念和想法将增强“音乐”应用程序中的用户体验，并提供大量的用户选择和控件
Adopt UI elements from across the Apple ecosystem (macOS, tvOS, watchOS) and iOS 13 (native apps) to apply desired UX improvements to the Music app
采用来自整个Apple生态系统(macOS，tvOS，watchOS)和iOS 13(本机应用程序)的UI元素，以将所需的UX改进应用于Music应用程序
Mitigate deviating away from familiarity; use Apple’s Human Interface Guidelines to maintain design consistency, build upon existing UI with the focus on improving usability, not overhauling aesthetics to create a foreign experience; aim for coherence and regularity through enhancing not eradicating.
减轻背离熟悉的步伐；使用苹果公司的人机界面指南来保持设计的一致性，在现有用户界面的基础上，重点在于提高可用性，而不是为了创造外国体验而对美学进行全面改革；通过加强而不是消灭力求一致性和规律性。

初步观察 (Initial Observations)

My main intentions behind this were simple — I wanted to redesign the Apple Music app to be an experience, one that is easier to use and provides more features that many users have been asking for. Music is meant to be enjoyed, so our experiences interacting with it should be too. I love the service but I, and most users from my research, are frustrated with the app.

我这样做的主要意图很简单-我想重新设计Apple Music应用程序，使其成为一种体验，一种易于使用，并提供许多用户所要求的功能。音乐本来就是要享受的，所以我们与之互动的经历也应该如此。我喜欢这项服务，但我和研究中的大多数用户对该应用程序感到沮丧。

Apple products are known for their flawless luxury design and ease of use.I wanted to bring Apple’s identity back to one of their roots — Music.

苹果产品以其完美无瑕的奢华设计和易用性而闻名。我想将苹果的身份带回到他们的根源之一-音乐。

Me: MusicApple:

我：音乐苹果：

Ok, all jokes aside, the iPod and iTunes are an integral part of Apple’s history. It’s in their DNA. The current iteration of the app seems bare and ready for an upgrade. Apple updated all of their native system apps in iOS 13, but Music is one of the few apps that had the least amount of new features, as corroborated on the New iOS 13 Features page on Apple’s website.

好吧，撇开所有笑话，iPod和iTunes是Apple历史不可或缺的一部分。这是他们的DNA。该应用程序的当前版本似乎已经准备就绪，可以进行升级。 Apple已在iOS 13中更新了其所有本机系统应用程序，但音乐是具有最少新功能的少数应用程序之一，这在Apple网站的“ 新iOS 13功能”页面上得到证实。

Apple are known for paying close attention to detail to the the most minute of details in everything they do, which is why its confusing that Music seems to have not been given the same nurture. In its current iteration, Apple Music (as an app) seems to have regressed back in many ways.

苹果公司以对细节的关注着称，在他们所做的每件事中都将其最细微的细节尽收眼底 ，这就是为什么它混淆了音乐似乎没有得到同样的启发的原因。在当前的迭代中，Apple Music(作为应用程序)似乎已经以许多方式回归。

The source of users problems? A lot of the core basic functionality and features are hidden away and there is no emphasis on an experience that is music-centric, something that Apple has built for other native iOS 13 apps. Apps like ‘Photos’, ‘Home’ and ‘Health’ feel curated and focused. The level of detail Apple has placed upon the UI and UX of those apps makes them feel contextual, and in turn they are experiences. The new Photos UI in iOS 13 is so well done that the UX feels perfect. It feels like the app was truly built for its purpose and use in mind, down to every tiny glyph, CTA prompt and menu button.

用户来源问题？ 很多核心的基本功能和特性隐藏起来，并有上体验没有强调这是音乐为中心，东西，苹果公司已经建立了其他的iOS原生应用13。诸如“照片”，“家庭”和“健康”之类的应用程序让人感觉井井有条且专注。苹果在这些应用程序的UI和UX上放置的详细程度使它们感到上下文相关，从而又是一种体验。 iOS 13中新的Photos UI非常出色，UX感觉很完美。感觉该应用程序是真正为它的目的而设计的，并牢记每个微小的字形，CTA提示和菜单按钮。

Apple Music has gone through multiple iterations, each of which have drastically switched up the visual identity and interface. They’ve come a very long way from the earlier versions of iOS. Throughout the years, I’ve loved specific design choices; the little nuances really enhanced the experience, both in function and design. But often times, they got axed and/or changed. Users had to learn how to use the new version of Apple Music with each overhaul. Right now, the app feels detached from the rest of iOS 13.

苹果音乐经历了多次迭代，每个迭代都极大地切换了视觉识别和界面。与早期版本的iOS相比，它们已经走了很长一段路。多年来，我一直喜欢特定的设计选择。这些细微的差别确实增强了功能和设计方面的体验。但是很多时候，他们被削减和/或改变了。用户必须学习每次大修时如何使用新版本的Apple Music。现在，该应用程序感觉与其他iOS 13分离。

Sure, the current iteration of the app works fine and looks clean but why do I still have to tap into a menu to shuffle and repeat a song?! Just like writing, it’s about making everything simple and obvious. That’s what I’ve attempted to do (I’m looking at you, current Now Playing menu full of non-contextual/broken features!).

当然，该应用程序的当前迭代工作正常并且看起来很干净，但是为什么我仍然必须进入菜单才能随机播放和重复播放歌曲？就像写作一样，它是要使一切变得简单而显而易见。那就是我试图做的(我正在看着您，当前的“正在播放”菜单中充满了非上下文/损坏的功能！)。

So instead of iOS 13 being like:

因此，不是像iOS 13那样：

iOS 13 vs Music iOS 13 vs音乐

to Music, I wanted her to get a seat at the lunch table!

音乐方面，我希望她能在饭桌上坐下！

The Music app seems to have become less of a priority for Apple. All resources and efforts regarding Music are seemingly being put into Apple Music, the service/streaming platform. But the vessel through which this is delivered, the app, should be just as, if not more, important to get right. This is exactly why iPhone users are opting for Apple’s competitors.

音乐应用似乎已不再是苹果的优先考虑事项。关于音乐的所有资源和精力似乎都投入到了服务/流媒体平台 Apple Music中。但是，通过它交付应用的容器app(应用程序 )应该同样重要，即使正确无误。 这正是iPhone用户选择苹果竞争对手的原因。

Essentially, this case study is my attempt at updating the Music app as if it got a deep iOS 13 upgrade along with the other native Apple apps. I’ve created this to solve the problems that I, and many Apple users, have with the app. It’s a culmination of my own design intuition and personal wants as a user with qualitative user research. The goal behind improving the UX? To achieve synergy and apply Apple’s ethos of the customer being the focal point. Make it EASY — help users USE the app.

本质上，此案例研究是我尝试更新Music应用程序，就像它与其他本机Apple应用程序一样进行了iOS 13深度升级一样。我创建此程序是为了解决我和许多 Apple用户在应用程序中遇到的问题。作为定性用户研究的用户，这是我自己的设计直觉和个人需求的结晶。改进UX的目标是什么？为了达到协同作用并应用Apple的客户风气为重点。简单易用-帮助用户使用该应用程序。

设计过程 (Design Process)

Design is form and function — how it looks (UI) and how it works (UX). As I said prior, the focal point of this UX case study is improving the features and usability of the Music app through design. The areas of the app pertaining to its core functional purpose as a music player are:

设计是形式和功能-外观(UI)和工作方式(UX)。正如我之前所说，此UX案例研究的重点是通过设计提高Music应用的功能和可用性。与音乐播放器的核心功能有关的应用程序领域包括：

Library
图书馆
Album Pages
专辑页面
Artist Pages
艺术家页面
Now Playing
正在播放
Search
搜索
General Music Settings/Features
常规音乐设置/功能

These are the areas I have redesigned. This is primarily a system level redesign (i.e. focusing on the app design, features and functionalities as a music player) and not Apple Music as a service (i.e. Browse, For You & Radio as a music platform) which is what I want to do a case study on separately.

这些是我重新设计的领域。这主要是系统级的重新设计(即专注于应用设计，作为音乐播放器的功能和功能)，而不是作为服务的 Apple Music(例如，浏览，For You和作为音乐平台的电台)，这是我要分别进行的案例研究。

I wanted to optimise the UI (design) to focus on improving the overall UX (usability) as they are often seen as synonymous when, in actuality, they compliment and rely on each other to optimise the user experience. To do this, I took a holistic approach during the design processes. I dissected the UI and UX of devices and services across the Apple ecosystem in aims to achieve a homogeneous redesign that felt familiar, fresh and feature full.

我想优化UI(设计)，以专注于改善总体UX(可用性)，因为实际上它们在互补并相互依赖以优化用户体验时通常被视为同义词。为此，我在设计过程中采用了整体方法。我剖析了整个Apple生态系统中设备和服务的UI和UX，目的是实现一种均匀的重新设计，使之熟悉，新鲜且功能齐全。

My design approach and thinking process were intertwined and iterated throughout the last 8 weeks. A brief synopsis of my design processes throughout the case study:

在过去的8周中，我的设计方法和思考过程相互交织并反复进行。整个案例研究中我的设计过程的简要提要：

我的角色 (My Role)

Um, everything? UX, UI, IxD, IA; I did this entire case study alone so I wore every hat (albeit jack of all trades). In one title? Product Designer.

嗯，一切都好吗？ UX，UI，IxD，IA；我独自完成了整个案例研究，所以我戴着每顶帽子(尽管千篇一律)。在一个标题中？产品设计师。

1.研究 (1. Research)

The aim of conducting user research was to identify user problems and seek out the WHY to justify each of the solutions I’ve proposed in this case study. As a designer, ideas came to me without much effort. My personal fascination with psychology allowed me to dive into research from a multifaceted perspective. As a user of the app, I asked myself, what obvious features are missing? Why is that menu hiding this feature I use constantly? Why can’t I do that? What can I do in a competitor app that I can’t in Apple Music? Then I conducted qualitative user research which corroborated with my personal discoveries and problems. The problems most users reported regarding the current iteration of the app echoed and aligned my sentiments.

进行用户研究的目的是识别用户问题并找出原因以证明我在本案例研究中提出的每种解决方案。作为设计师，我不费吹灰之力就想到了创意。我个人对心理学的迷恋使我能够从多方面的角度投入研究。作为该应用程序的用户，我问自己：缺少哪些明显的功能？为什么该菜单隐藏了我经常使用的功能？我为什么不能这样做？我无法在Apple Music中使用竞争对手的应用程序做什么？然后，我进行了定性的用户研究，证实了我的个人发现和问题。大多数用户报告的有关该应用程序当前迭代的问题都反映了我的观点。

进行定性研究 (Conducting Qualitative Research)

As I did this case study alone and in my own spare time alongside working my job, I didn’t have much access to quantitative user research or the time to acquire it. The qualitative research I did perform outside of my own “why’s” was a culmination of observations, comments, thoughts and feelings from users online (sources — social media, forums and comments from Apple fan and news websites as well as popular public online forums). It involved identifying different types of Apple Music users and the problems they have with the app. The narrative was largely the same and it allowed me to piece together a story about the current user experience that affirmed my design decisions and observations.

由于我是一个人进行案例研究，并在工作之余业余时间里，我没有太多机会进行定量的用户研究或获得时间。我在自己的“为什么”之外进行的定性研究是对在线用户的观察，评论，想法和感受的综合结果(来源-社交媒体，Apple粉丝和新闻网站的论坛和评论以及流行的公共在线论坛) 。它涉及确定不同类型的Apple Music用户以及他们在应用程序中遇到的问题。叙述基本上是相同的，它使我能够撰写有关当前用户体验的故事，该故事肯定了我的设计决策和观察结果。

用户研究流程 (User Research Process)

Defining: identify problems through dissecting the app myself and conducting qualitative online research of user feedback and requests for features/functionality (forums, Apple news website users, social media). What is the problem with the current version? What issues do I have with the app being a music and Apple enthusiast? What issues have users expressed in using the app? Do our opinions match?
定义：通过亲自剖析该应用程序以及对用户反馈以及对功能/功能的要求(论坛，Apple新闻网站用户，社交媒体)进行定性的在线研究，找出问题所在。当前版本有什么问题？我的应用程序是音乐和Apple爱好者，我会遇到什么问题？用户在使用该应用程序时表达了哪些问题？我们的意见相符吗？
Scope/Audience Needs: recognise the universality of the app and focus on the commonly shared goals of the user journey; empathising with a variety of different users by catering to casual users and enthusiast.
范围/受众需求 ：认识到应用程序的通用性，并专注于用户旅程的共同目标；通过迎合休闲用户和发烧友，与各种不同的用户产生共鸣。
Competitor Analysis: Looking at Spotify UI, what does it have that Apple Music is missing? Many users prefer competitors because of the basics and more choice (e.g. placement of buttons/features in UI).Analysing user preferences for competitor service, why do Apple customers use Spotify and not Apple Music? If a user has used Spotify, they will expect even the most basic of features in Apple Music that are currently missing. They will expect a polished and deeply fleshed out experience, abundant in user control and choice.
竞争对手分析 ：查看Spotify UI，Apple Music缺少什么？许多用户因为其基本知识和更多选择(例如，UI中按钮/功能的放置)而喜欢竞争对手。分析用户对竞争对手服务的偏好时，为什么Apple客户使用Spotify而不使用Apple Music？ 如果用户使用过Spotify，他们甚至会期望Apple Music中目前缺少的最基本功能。 他们将期望获得丰富的，充实的，丰富的用户控制和选择经验。

2.构想 (2. Ideation)

Collated all written notes into one document, distilled into actionable steps for designing in XD along with sketches, wireframes et al.
将所有书面注释整理到一个文档中，并与草图，线框等一起提炼为可操作的步骤，以便在XD中进行设计。
Analysing my research notes and using them to create sketches, wireframes, affinity maps, UX flow, information architecture diagrams, current UI annotations et al.
分析我的研究笔记，并使用它们创建草图，线框，亲和度图，UX流，信息体系结构图，当前的UI注释等。
Dissecting the Apple ecosystem across hardware and software to identify design trends and implement them into my redesign.
在硬件和软件上剖析Apple生态系统，以识别设计趋势并将其实施到我的重新设计中。
Synthesising my research findings and personal notes.
综合我的研究发现和个人笔记。
For user flows, I had the ideas for each sequence in my mind. Some I drew out which you can see here in my sketches/wireframes. Most, however, I just visualised the sequence in my mind and created it whilst I was designing. I often came up with better, more refined user flow sequences whilst designing in XD.
对于用户流，我想到了每个序列的想法。我画了一些，您可以在我的草图/线框图中看到。但是，大多数情况下，我只是在脑海中想象出序列，并在设计时创建了序列。在XD中进行设计时，我经常想出更好，更精致的用户流程序列。

Not ideation but here are the Prototype Wires from my Adobe XD Project Files for this case study. At first, I planned to do only HiFi mockups but ended up wiring every interaction, state and animation I possibly could that my laptop could handle rendering. 不是构思，这里是此案例研究的Adobe XD Project文件中的原型线。最初，我计划只做HiFi实体模型，但最终我希望笔记本电脑可以处理渲染的所有交互，状态和动画连接。

Collection of my sketches/wireframes/information architecture diagrams. 我的草图/线框/信息架构图的集合。

actually annotated). 实际上我注释了近50个)。

3.设计原则 (3. Design Principles)

设计系统 (Design System)

I wanted to maintain Apple’s iOS design principles so adhered to the Apple Human Interface Guidelines and used their design system. This case study is not about reinventing the wheel in terms of UI. The goal was to upgrade the app, not completely overhaul it with a new design system. It was about building upon the current foundations already laid by Apple and leveraging it to maximise the user experience. In the guidelines, Apple says “use colour judiciously for communication” which is what I’ve made sure to do throughout this project.

我想维护Apple的iOS设计原则，因此遵守Apple人机界面指南并使用其设计系统。本案例研究不是关于在UI方面重新发明轮子。我们的目标是升级应用程序，而不是通过新的设计系统对其进行全面检查。它的目的是基于Apple已经奠定的当前基础，并利用它来最大化用户体验。在指导方针中，苹果公司说“明智地使用颜色进行交流”，这是我在整个项目中始终要做的事情。

I mainly used the Apple’s Official iOS UI Kit but also pulled elements from the tvOS, macOS and watchOS UI kits to achieve the homogenous redesign I aimed to build. I wanted the Music app to not only feel intertwined with iOS 13, but also the Apple ecosystem as a whole, such that you could move between hardware and software and feel unity, not just between apps within iOS. I also cleaned up some tiny things like the positioning of the divider between the navigation menu and its glyphs as the composition looked slightly off. A couple pixels nudged upwards did the trick. Yes, I was meticulous about every single text pt size, divider pixel position and element opacity. The perfectionist in me jumped out. High levels of detail and accuracy were extremely important to me, down to every individual letter I typed out for a song title.

我主要使用苹果公司的官方iOS UI套件，但也从tvOS，macOS和watchOS UI套件中提取了一些元素，以实现我要构建的同质重新设计。我希望Music应用程序不仅可以与iOS 13交织在一起，而且还可以与整个Apple生态系统交织在一起，以便您可以在硬件和软件之间移动并感到团结，而不仅仅是在iOS内部的应用程序之间。我还清理了一些细微的东西，例如导航菜单及其字形之间的分隔线的位置，因为合成物看上去略微有些偏离。向上轻推几个像素就可以了。是的，我对每个文本的pt大小，分隔线像素位置和元素不透明度都非常谨慎。我中的完美主义者跳了出来。高度的细节和准确性对我来说非常重要，直到我键入歌曲标题的每个字母为止。

From the UI Kits, I primarily used:

在UI Kit中，我主要使用：

System Colours: a select few from the palette to keep the Music brand and visual identity intact (pink, grey, white, black).
系统颜色 ：从调色板中选择的几种，以保持音乐品牌和视觉标识的完整性(粉红色，灰色，白色，黑色)。
System Fills, Backgrounds, Materials: to convey varying levels of elevation dependent on the individual element (i.e. secondary and tertiary for buttons and modal cards etc).
系统填充，背景，材料 ：根据各个元素(例如，按钮和模式卡等的第二层和第三层)传达不同级别的高程。
Text: akin to system colours, retaining the same type styles, alignment, sizes and colouring as outlined in the style guide as to maintain visual identity and build upon the use of type in iOS 13; keep it familiar for users.
文本：类似于系统颜色，保留与样式指南中概述的相同的样式，对齐方式，大小和颜色，以保持视觉识别并基于iOS 13中的类型使用；让用户熟悉它。
Design Templates: use of official modal sheets, notifications, widgets etc to maintain design principles for composition of the UI; modifying them to create new custom templates and components.
设计模板 ：使用官方的模式表，通知，小部件等来维护用于UI组成的设计原则；修改它们以创建新的自定义模板和组件。
iPhone UI Elements: bars, buttons, controls, tables, labels, sliders et al; I did modify many of these (including glyphs from SF Symbols) to achieve an aesthetic that felt and looked new yet also “official” at the same time.
iPhone UI元素 ：栏，按钮，控件，表格，标签，滑块等；我确实对其中许多进行了修改(包括SF Symbols的字形)，以实现一种既具有感觉又看起来新颖但同时又“官方”的美学。

iOS 13视觉方向 (iOS 13 Visual Direction)

I intentionally implemented the new design aesthetics/accents deployed in iOS 13. If you look at the UI of native system apps in iOS 13, most, if not all of them, have had major, or at least significant, design updates. They look cohesive, in unison. The system apps look like they are in harmony with the design cues of iOS 13. You can tell they are a part of the system OS with the implementation of intricate design details like the use of SF Pro Rounded type, bigger headlines, text alignment, varied type sizes for hierarchy, increased range of system colours for text and glyphs, modal cards instead of just buttons, more use of blurred components and overlays et al.

我有意实现了iOS 13中部署的新设计美学/重点。如果您查看iOS 13中本机系统应用程序的UI，则大多数(如果不是全部)都进行了重大或至少是重大的设计更新。他们看起来凝聚力一致。系统应用看起来很符合iOS 13的设计提示。您可以通过实现复杂的设计细节(例如使用SF Pro Rounded类型，更大的标题，文本对齐，层次结构的各种类型大小，文本和字形的系统颜色范围增加，模式卡而不只是按钮，更多使用模糊的组件和覆盖等。

iOS 13设计分析 (iOS 13 Design Analysis)

When dissecting the visual design of native iOS apps, I identified a variety of design trends and motifs I wanted to implement in the redesign, with heavy inspiration from the Photos app in particular:

在剖析本机iOS应用程序的视觉设计时，我发现了要在重新设计中实现的各种设计趋势和主题，尤其是从“ 照片”应用程序获得了很多启发：

TV — the toggle and search, individual pages for shows/movies have better design than current artists pages
电视 -切换和搜索，用于表演/电影的单个页面比当前的艺术家页面具有更好的设计
Photos — list of albums, adjacent scroll view, category toggles with different view for each, photo album grid covers whole viewport with zoom in and out, search has two categories and smart suggestions, blurred components and elements
照片 —相册列表，相邻的滚动视图，每种视图具有不同视图的类别切换，相册网格涵盖了放大和缩小的整个视口，搜索具有两个类别和智能建议，模糊的组件和元素
Home — background app material element covers full viewport, adjacent swipe menu, favourites section, scroll section, small modal cards with contextual glyphs and text and same composition
主页 -背景应用程序的材质元素涵盖了完整的视口，相邻的滑动菜单，“收藏夹”部分，“滚动”部分，带有上下文字形和文本且组成相同的小型模式卡片
Maps — collections stack for grouping places
地图 -用于将地点分组的集合堆栈
Health — modal cards as buttons/options, coloured glyphs
运行状况 -模式卡用作按钮/选项，彩色字形
News — thick weight glyphs; swipe to save, like, dislike, headlines are bold and stick, infinite scroll, use of colours in menus for text and buttons (pink and red, small modal card menu with adjacent scroll
新闻 -厚字形；滑动以保存(不喜欢)，标题为粗体和大头棒，无限滚动，在文本和按钮菜单中使用颜色(粉红色和红色，带有相邻滚动条的小型模式卡片菜单)
Reminders — modal card menu with contextual coloured glyphs, circle glyphs for buttons, contextual keyboard suggestions
提醒 -模态卡菜单，带有上下文彩色字形，用于按钮的圆形字形，上下文键盘建议

自定义UI元素 (Custom UI Elements)

Yes, I went as far to create custom glyphs using Apple’s SF Symbols (in addition to creating new UI elements from the official UI kit). The perfectionist in me jumped out again. Why? There are so many system glyphs missing from SF Symbols. I had to literally rip/recreate glyphs like the AirPods Pro one myself from the Apple website and/or through screenshots from my iPhone, then vectorise them in Illustrator. Also, some glyphs I wanted to use in SF Symbols were rather ambiguous and needed some further context in order to be as specific as possible for whatever I was trying to build. I actually ended up building my own “Official Custom” Apple UI Kit. The micro design elements impact the macro user experience. Just like everything else in life, it’s the little things that really compound.

是的，我竭尽全力使用Apple的SF Symbols创建自定义字形(除了从官方UI工具包中创建新的UI元素之外)。我中的完美主义者又跳了出来。为什么？有这么多的系统从字形符号SF失踪。我必须亲自从Apple网站和/或通过我的iPhone的屏幕截图来翻录/重新创建像AirPods Pro这样的字形，然后在Illustrator中对其进行矢量化处理。另外，我想在SF Symbols中使用的某些字形是相当模糊的，并且需要一些进一步的上下文，以便对于我尝试构建的内容尽可能具体。实际上，我最终构建了自己的“官方定制” Apple UI套件。 微观设计元素会影响宏观用户体验。 就像生活中的其他一切一样，这些小事情确实会加重。

4.解决方案 (4. Solutions)

For each section of the redesign below, I will explain the problems identified during my research (the what) to justify my proposed solution (the why). Some features I created solely because I wanted them and felt like they would improve the UX in some fashion (like Steve said, sometimes people don’t know what they want unless you give it to them, this is my audacious attempt at that).

对于下面重新设计的每个部分，我将解释在研究过程中发现的问题( 是什么 )，以证明提出的解决方案是正确的( 原因) 。我创建这些功能的全部原因是我想要它们，并且感觉它们会以某种方式改进UX(如Steve所说，有时人们不知道自己想要什么，除非您将其提供给他们，这是我在这方面的大胆尝试)。

5.原型与测试 (5. Prototyping & Testing)

HiFi prototypes with Adobe XD.
具有Adobe XD的HiFi原型。
Honestly? Making it up as I go and figuring out how to make what was in my head and notes with my hands.
老实说随手进行化妆，弄清楚如何用双手制作脑海和笔记。
Testing myself using the Adobe XD iPhone app & sending the project to some UX contacts I met have online as well as asking friends to review.
使用Adobe XD iPhone应用程序进行自我测试，然后将项目发送给我遇到的一些UX联系人，并要求他们进行在线审核。

我的Apple Music应用重新设计 (My Apple Music App Redesign)

So, a culmination of the above has resulted in this. The moment you’ve been waiting for, right? RIGHT?

因此，上述结果达到了顶点。您一直在等待的那一刻，对吗？对？

Ok, I’ll finally shut up and let the design do the talking. Let’s begin.

好的，我最后闭嘴，让设计进行讨论。让我们开始。

My approach for each feature was taking my user research, looking at each feature, elaborating on the identified problems users expressed of the current UI and translating them into tangible solutions. I’ll explain why I think my design decisions solve user problems and in doing so meet the primary UX goals that I set for this case study.

对于每种功能，我的方法是进行用户研究，查看每种功能，详细说明用户对当前UI所表达的问题并将其转化为切实可行的解决方案。我将解释为什么我认为我的设计决策能够解决用户问题，并达到我为此案例研究设定的主要UX目标的原因。

TLDR — if I changed/added a feature: problem + solution = what + why.

TLDR —如果我更改/添加了一个功能：问题+解决方案=什么+原因。

First up…

第一…

正在播放 (Now Playing)

Now Playing Core UI Redesign 正在播放核心UI重新设计

核心UI重新设计 (Core UI Redesign)

I started this entire case study redesigning ‘Now Playing’. Apple placed more emphasis in use of blurred elements and components throughout iOS 13, prominently for system materials such as the home screen dock, notifications and heavily within the UI of native apps. I wanted to adopt this design aesthetic and apply it to the Now Playing UI and the Music app as a whole.The result you see is the ‘transparent’ theme I created (along with a ‘flat’ theme that mirrors the same plain white design in the current UI; scroll down to see more). Each design decision was made with meeting the UX goals I had in mind — to enhance functional clarity and ease of access to features (less taps) whilst upgrading the app’s visual design to match its native iOS 13 counterparts. Leverage the UI to improve the UX.

我开始了整个案例研究，重新设计了“正在播放”。苹果公司在整个iOS 13中更加强调使用模糊的元素和组件，特别是在系统材料(如主屏幕停靠，通知)以及本机应用程序的UI内。我想采用这种设计美学，并将其应用到``正在播放''UI和整个Music应用程序中。您看到的结果是我创建的``透明''主题(以及反映相同的纯白色设计的``扁平''主题)在当前用户界面中；向下滚动以查看更多)。每个设计决策都是为了满足我所想到的UX目标而做出的-增强功能的清晰度和易于使用的功能(更少的水龙头)，同时升级应用程序的视觉设计，使其与iOS 13原生版本相匹配。 利用UI来改善UX。

I dissect the problem and solution for each feature below, but in terms of the overall UI design, here’s what I’ve added/changed:

我剖析了下面每个功能的问题和解决方案，但就整体UI设计而言，这是我添加/更改的内容：

The background material element of the ‘transparent’ theme is dynamic and mirrors a blurred version of the cover for whichever song is currently playing; as tracks change, so does the background of the UI
“透明”主题的背景素材元素是动态的，并针对当前播放的每首歌曲反映了封面的模糊版本；随着轨道的变化，UI的背景也会变化
Adjacent songs, previous and next, can now be seen and swiped to switch between playing which is not possible in the current UI
现在可以查看和滑动相邻的歌曲(上一首和下一首)，并在播放之间切换，这在当前用户界面中是不可能的
More contextual use of Apple’s pink system colour to differentiate between active components i.e. pink denotes active button/option/current song; black/grey denotes inactive button/option etc
苹果在使用粉红色的系统颜色时会更多地根据上下文来区分活动组件，例如粉红色表示活动按钮/选项/当前歌曲；黑色/灰色表示无效的按钮/选项等
Bottom navigation menu is no longer hidden in the Now Playing screen; I’ve added an option in the general music settings to show/hide the menu so users can opt per preference
底部导航菜单不再隐藏在“正在播放”屏幕中；我在常规音乐设置中添加了一个选项来显示/隐藏菜单，以便用户可以根据喜好选择
Tighter composition and spacing between playback controls controls to maximise white space and create space to add in basic core features that are hidden in menus within the current UI (shuffle, repeat) as to reduce friction between user performing common tasks
回放控件之间的组成和间距更紧密，以最大化空白并创建空间以添加隐藏在当前UI的菜单中的基本核心功能(随机，重复)，以减少用户执行常见任务之间的摩擦
Implementing singular gestural interactions to perform core music functions that are familiar and expected by users through mitigating hiding core features into menus or forcing users to tap something (i.e. swipe gesture for track change, single tap to shuffle and repeat rather than two taps to do the same thing as in the current UI etc.); perform tasks in the most minimal way possible
通过减轻隐藏核心功能到菜单中或强迫用户轻敲某些内容(例如，轻扫手势以更改曲目，轻击以重复播放而不是轻击两次)，实现单一的手势交互以执行用户熟悉并期望的核心音乐功能。与当前用户界面等相同)；以尽可能最小的方式执行任务
Shuffle and repeat are no longer hidden in a menu, less taps to find and activate; these are core basic features of any and every music app that should not be hidden away in a menu, a problem that majority, if not all, users expressed with great confusion. These functions are so prominent in the music UI elsewhere within the ecosystem (Music in watchOS and macOS, even CarPlay!); current UI requires users to go into the Up Next menu to activate both, glyphs are also tiny and barely visible in this menu
随机播放和重复播放不再隐藏在菜单中， 更少的点击即可查找和激活；这些是任何音乐应用程序都不应隐藏在菜单中的核心基本功能，这个问题使大多数(即使不是全部)用户感到非常困惑。这些功能在生态系统内其他地方的音乐UI中非常突出(watchOS和macOS中的音乐，甚至是CarPlay！)；当前的用户界面要求用户进入“上一个下一个”菜单才能同时激活，字形也很小并且在此菜单中几乎看不到

Even CarPlay has repeat and shuffle in the Now Playing UI 甚至CarPlay在“正在播放”用户界面中也重复播放和随机播放

Track time slider now implements colour and varied weight to give clearer indication of the time elapsed thus far and remaining track time, almost like a fill effect
现在，“跟踪时间”滑块可实现颜色和变化的权重，以更清晰地指示到目前为止已过去的时间和剩余的跟踪时间，几乎就像填充效果一样
The volume slider has a tighter design with a smaller knob, it also mirrors the colour palette of the current volume indicator that shows/hides when you press an iPhone’s volume buttons whilst not in the Now Playing screen, I just flipped it horizontally and tweaked slightly
音量滑块的设计更紧凑，旋钮更小，它还镜像了当前音量指示器的调色板，当您按下iPhone的音量按钮时(不在“正在播放”屏幕中时)，它会显示/隐藏，我只是将其水平翻转并稍作调整
AirPlay now has contextual glyphs e.g. AirPods Pro in my redesign. Currently the UI has the generic AirPlay glyph no matter what audio device is being used. Adding contextual glyphs communicates clarity to the user as they can immediately see the specific device/accessory that audio is being streamed to rather than reading text or having to go into the menu to see the audio device being used
在我重新设计时，AirPlay现在具有上下文字形，例如AirPods Pro。当前，无论使用哪种音频设备，UI都具有通用的AirPlay字形。添加上下文字形可以向用户传达清晰的信息，因为他们可以立即看到正在将音频流传输到的特定设备/配件，而不是阅读文本或必须进入菜单查看正在使用的音频设备
Contextual and custom glyphs throughout the entire UI to add further depth and clarity for users, the goal being to mitigate ambiguity and enhance cohesion and connectedness
整个UI中的上下文和自定义标志符号为用户增加了深度和清晰度，目的是减轻歧义并增强凝聚力和连接性
A new ‘Album Menu’ button has been added (scroll down to see this feature in depth); I created a custom contextual glyph for this using a combination of SF Symbols; you can see this new menu below
添加了新的“相册菜单”按钮(向下滚动以深入查看此功能)；我使用SF符号的组合为此创建了一个自定义上下文字形。您可以在下面看到此新菜单
Updated all the glyphs in navigation menu with newer official variants from SF Symbols; current UI has more rigid glyphs without rounded corners. I also created a custom glyph for Library in the menu by combining two official glyphs together to make one that matches the rounder and thicker weight glyphs used across iOS 13. Also changed the glyph to swipe down the Now Playing screen to a downwards pointing chevron for contextual clarity
使用SF Symbols的较新官方变体更新了导航菜单中的所有字形；当前的UI具有更硬的字形，没有圆角。我还将菜单中的两个正式字形组合在一起，使之与iOS 13上使用的更圆和更粗的字形相匹配，从而在菜单中为“ 图书馆”创建了一个自定义字形。还更改了该字形以将“正在播放”屏幕向下滑动为向下的V形上下文清晰
Slightly more prominent drop shadow under album/playlist artwork and adjacent tracks to convey elevation and hierarchy along the z-axis, rather than feeling too flat and part of the background material
专辑/播放列表图稿和相邻音轨下的阴影略显突出，以沿z轴传达高度和层次结构，而不是感觉太平坦或背景材料的一部分

Okay, now onto the individual Now Playing features and changes!

好的，现在进入各个“正在播放”功能和更改！

音乐应用主题 (Music App Themes)

Music App Themes 音乐应用主题

Along with the UI redesign, I decided to make some app-specific themes; some visual options in addition to the overall system them. Users can opt for a preferred visual style — some may like the “Gaussian” transparent theme look whilst others may prefer the current “flat” feel of the UI with the plain theme. If I had more time, I would have made system dark mode theme variants for both, but what you can see here are the systems light mode Music app themes.

随着UI的重新设计，我决定制作一些特定于应用程序的主题。除了整个系统，还有一些视觉选项。用户可以选择首选的视觉样式-有些人可能喜欢“高斯”透明主题外观，而另一些人可能喜欢带有纯主题的UI当前的“扁平”感觉。如果我有更多的时间，我会为两者都制作系统暗模式主题变体，但是您可以在此处看到系统亮模式音乐应用主题。

Some users requested the ability to customise the look of individual apps rather than just the system wide themes that apply either light or dark mode. Additionally, throughout iOS 13, all the native apps use a mix of blurred and flat UI elements. I felt like this was a nice opportunity to present users with more customisable options as to make the experience of the app more personal & curated, something I aimed to implement in every feature/change.

一些用户要求能够自定义单个应用程序的外观，而不仅仅是自定义适用于亮或暗模式的系统范围主题。此外，在整个iOS 13中，所有本机应用程序都使用模糊和平坦的UI元素。我觉得这是一个很好的机会，可以为用户提供更多可自定义的选项，以使应用程序的体验更加个性化和精心策划，这是我旨在在每个功能/更改中实现的目标。

码头 (Dock)

Dock Feature 码头功能

Dock Feature Demo 码头功能演示

Introducing, the Dock! A new feature I created. The idea came to me from the home screen dock. I wanted to find a solution that could replace the bottom Navigation Menu if users opted to hide it in the settings (a new option I added) and also create non-intrusive solution to replace the current Mini Now Playing components of which there are too many variants that are obstructive and outdated (e.g. lock screen & AirPlay variants). Object blur has been applied to the material of the dock as I wanted it to be a “floating” component akin to the home screen dock.

介绍，码头！我创建的新功能。这个主意是从主屏幕停靠站想到的。我想找到一个解决方案，如果用户选择将其隐藏在设置中(我添加了一个新选项)，并且可以替换底部的导航菜单，并且还创建了一种非侵入式解决方案来替换当前的“ Mini Now Play”组件(其中的组件过多)阻塞性和过时的变体(例如锁定屏幕和AirPlay变体)。对象模糊已经应用于基座的材质，因为我希望它是类似于主屏幕基座的“浮动”组件。

A lot of users expressed issues with the fact there are currently a lack of options and alternatives to current UI elements like showing/hiding the bottom navigation menu and the multiple Mini Player components (i.e. variants seen in the Library and Lock Screens) lacking features or being too obstructive. Users also expressed issues with the fact there was no way to see what songs were Up Next in the Now Playing screen (or anywhere else) without tapping into the Up Next menu to see the list of upcoming songs.

许多用户对当前的UI元素缺乏选择和替代表示了疑问，例如缺少显示或隐藏底部导航菜单以及多个Mini Player组件(即，在库和锁定屏幕中看到的变体)缺少功能或太阻塞了。用户还表达了这样的问题，即如果不点击“上一个下一个”菜单以查看即将播放的歌曲列表，就无法在“正在播放”屏幕(或其他任何地方)中查看下一个歌曲是什么。

I created the music Dock to solve all of these issues in one solution. If you show/hide the bottom navigation menu in the app, you can opt to use the dock instead which acts multiple elements in one. You can also use the dock and the bottom navigation menu together (in this case, the dock contents adapt to reflect this choice). The two outer buttons on either side of the playback controls adapt based on the context of where the user is within the UI. The dock houses the traditional bottom navigation menu to switch between screens, shows the next track queued in Up Next without having to leave the Now Playing screen (complete with a new custom contextual glyph I created) and houses a detailed AirPlay section to show where the audio is being played and the device information (i.e. AirPods Pro battery indicators in the above example) without having to perform multiple swipes to find out. Currently, you have to tap the AirPlay button which brings up a variant of the Mini Player component that covers the entire Now Playing screen and only shows the overall battery levels of your audio device. It is obstructive yet lacks information. The only way to find out detailed AirPlay information in the current UI is to exit the Music app entirely and swipe all the way over to the Notification Centre; too time consuming, too many taps! The Dock removes all of these issues and puts everything into one component, in one screen, with just a couple of swipes. A true one-size-fits-all solution.

我创建了音乐Dock，以一种解决方案解决所有这些问题。如果在应用程序中显示/隐藏底部导航菜单，则可以选择使用停靠栏，它可以将多个元素合而为一。您也可以同时使用停靠栏和底部导航菜单(在这种情况下，停靠栏内容将适应此选择)。播放控件两侧的两个外部按钮将根据用户在UI内的位置的上下文进行调整。基座上设有传统的底部导航菜单，可在屏幕之间切换，显示下一首曲目，而无需离开“正在播放”屏幕(已完成我创建的新的自定义上下文字形)，在“上一个下一个”中排队，并包含一个详细的AirPlay部分，以显示正在播放音频和设备信息(即上述示例中的AirPods Pro电池指示器)，而无需执行多次滑动即可查找。当前，您必须点击AirPlay按钮，该按钮将弹出Mini Player组件的变体，该组件涵盖整个“正在播放”屏幕，并且仅显示音频设备的总体电池电量。它是阻塞性的，但缺乏信息。在当前UI中查找详细的AirPlay信息的唯一方法是完全退出“音乐”应用，然后一直滑动到通知中心；太耗时，水龙头太多！ Dock消除了所有这些问题，并且只需几次滑动即可将所有内容放入一个屏幕中的一个组件中。 真正 的一刀切解决方案。

音乐切换和播放控制 (Music HandOff & Playback Control)

HandOff + Playback Control In Action 越区切换+播放控制功能

I can’t quite believe these features have not been implemented yet. It’s 2020. I’m perplexed. HOW?! The current Music app still does not have a Music Handoff & Playback Control feature. From my research, this is one of the biggest reasons why users choose Spotify over Apple Music. In fact, I discovered people have literally cancelled their Apple Music subscription because it lacks these (and a few other) features.

我不太相信这些功能尚未实现。 2020年。我感到困惑。怎么样？！当前的音乐应用仍然没有音乐切换和播放控制功能。 From my research, this is one of the biggest reasons why users choose Spotify over Apple Music. In fact, I discovered people have literally cancelled their Apple Music subscription because it lacks these (and a few other) features.

What’s even more confusing is the Podcast app does have some kind of sync feature. It tracks where you last listened in the podcast and that is reflected in the macOS Podcast app, so you can continue listening from where you left off from your iPhone. Sure, it’s not perfect or seamless but there is some kind of feature akin to continuity there. Apple is known for their products working seamlessly in synchronicity, yet one of the most obvious music features is still nowhere to be found.

What's even more confusing is the Podcast app does have some kind of sync feature. It tracks where you last listened in the podcast and that is reflected in the macOS Podcast app, so you can continue listening from where you left off from your iPhone. Sure, it's not perfect or seamless but there is some kind of feature akin to continuity there. Apple is known for their products working seamlessly in synchronicity, yet one of the most obvious music features is still nowhere to be found.

Switching from one Apple product to another to listen to music shouldn’t be this counterintuitive. This is what I’m referring to regarding the lack of a music experience. Right now, you have to literally replay a song from the start when migrating over to a different Apple product. From my reasearch, it was a deal breaker for many users. I just want to go over to my Macbook and continue listening to my playlist without having to worry about starting the song again. Not only that, I want to be able to control the music playing from my Macbook on my iPhone too.

Switching from one Apple product to another to listen to music shouldn't be this counterintuitive. This is what I'm referring to regarding the lack of a music experience . Right now, you have to literally replay a song from the start when migrating over to a different Apple product. From my reasearch, it was a deal breaker for many users. I just want to go over to my Macbook and continue listening to my playlist without having to worry about starting the song again. Not only that, I want to be able to control the music playing from my Macbook on my iPhone too.

To solve this problem, I’ve integrated HandOff into the AirPlay menu. Simply tap the device you want to continue streaming your music from and it sends it over, just like the current Spotify mobile and desktop app. In addition, when you send over the audio to another Apple device, your iPhone acts as a remote for Playback Control so you can continue listening from your Macbook and control the Music macOS app with your iPhone’s Now Playing screen.

To solve this problem, I've integrated HandOff into the AirPlay menu. Simply tap the device you want to continue streaming your music from and it sends it over, just like the current Spotify mobile and desktop app. In addition, when you send over the audio to another Apple device, your iPhone acts as a remote for Playback Control so you can continue listening from your Macbook and control the Music macOS app with your iPhone's Now Playing screen.

播放/暂停 (Play/Pause)

Play/Pause 播放/暂停

Play/Pause Interaction Play/Pause Interaction

This is more of an aesthetic choice. The current UI has the same micro interaction in that the artwork expands and collapses in size to provide feedback indicating when a user taps to play and pause a song. However, the current UI lacks showing adjacent songs. I have included this feature (see below) but wanted to figure out an elegant way to show and hide the previous and next tracks. I achieved this by adopting the same interaction feature and animating the adjacent songs to show/hide when play/pause is tapped respectively. It’s a subtle interaction touch that adds a lot of depth to the experience.

This is more of an aesthetic choice. The current UI has the same micro interaction in that the artwork expands and collapses in size to provide feedback indicating when a user taps to play and pause a song. However, the current UI lacks showing adjacent songs. I have included this feature (see below) but wanted to figure out an elegant way to show and hide the previous and next tracks. I achieved this by adopting the same interaction feature and animating the adjacent songs to show/hide when play/pause is tapped respectively. It's a subtle interaction touch that adds a lot of depth to the experience.

Track Swipe (Track Swipe)

Track Swipe Track Swipe

Swipe To Change Tracks Swipe To Change Tracks

Akin to HandOff, I can’t really believe we are still waiting for a swipe gesture to change songs. Again, a basic core feature that kept coming up in my user research. Many users found this to be a problem. I didn’t need research to justify my solution to this problem though. It’s a very obvious feature that one would expect in any music app. Swiping is a gesture synonymous with the experience of using any touch screen and app, even more so now that swiping left and right has become a prominent gamified gesture (social media stories, dating apps et al).

Akin to HandOff, I can't really believe we are still waiting for a swipe gesture to change songs. Again, a basic core feature that kept coming up in my user research. Many users found this to be a problem. I didn't need research to justify my solution to this problem though. It's a very obvious feature that one would expect in any music app. Swiping is a gesture synonymous with the experience of using any touch screen and app, even more so now that swiping left and right has become a prominent gamified gesture (social media stories, dating apps et al).

Implementing this gesture is kind of a no brainer. In addition to adding in swipe, I added sneak peeks of artwork for adjacent tracks as mentioned before. Also, swiping means the user doesn’t have to look at their iPhone screen when swiping to change a track. Currently you have to look at your screen to tap the respective buttons for changing tracks and you can’t see what track was previous or is upcoming. Two small additions make a huge difference to the UX.

Implementing this gesture is kind of a no brainer. In addition to adding in swipe, I added sneak peeks of artwork for adjacent tracks as mentioned before. Also, swiping means the user doesn't have to look at their iPhone screen when swiping to change a track. Currently you have to look at your screen to tap the respective buttons for changing tracks and you can't see what track was previous or is upcoming. Two small additions make a huge difference to the UX.

Mini Player (Mini Player)

Mini Player Mini Player

Play/Pause Colour Interaction Play/Pause Colour Interaction

One common issue that users raised is that the current Mini Player lacks much of the basic core music functionality. The Mini Player in the current UI only houses the current song title, pause and next track buttons. You have to go into the main Now Playing screen or swipe down into the Notification Center to get access to the previous track and AirPlay.

Mini Player Track Slider Mini Player Track Slider

The idea behind this was to mitigate users being forced to perform extra swipes to do simple tasks. I redesigned it so that you don’t have to go into the main Now Playing screen at all to perform basic playback actions. I’ve included the artist name and core music controls as well as the most commonly used functions (Up Next, Shuffle, Repeat, AirPlay).

The idea behind this was to mitigate users being forced to perform extra swipes to do simple tasks. I redesigned it so that you don't have to go into the main Now Playing screen at all to perform basic playback actions. I've included the artist name and core music controls as well as the most commonly used functions (Up Next, Shuffle, Repeat, AirPlay).

I added added a couple of subtle design touches. I’ve included the use of colour to indicate when a track is playing and paused. A subtle pink blur is applied to the Mini Player when a song is playing and fades away into white when paused. I’ve also turned the divider above the bottom navigation menu into a mini track time bar to show the time elapsed without having to go into the Now Playing screen or Notification Center to see the track time.

I added added a couple of subtle design touches. I've included the use of colour to indicate when a track is playing and paused. A subtle pink blur is applied to the Mini Player when a song is playing and fades away into white when paused. I've also turned the divider above the bottom navigation menu into a mini track time bar to show the time elapsed without having to go into the Now Playing screen or Notification Center to see the track time.

往下 (Up Next)

Up Next 往下

Redesigned Up Next List Redesigned Up Next List

The redesigning for the the Up Next feature in Now Playing was inspired by a culmination of the design ideas and features I had come up with. In fact, a few users in my research expressed something I identified — the playback controls in the current UI for Up Next takes up almost a third of the screen estate. It severely lacks functionality. There is also no indication for how many tracks are in the current up next list, nor does it tell us what track we are currently on in said list. The lack of emphasis on the list in the because of the playback controls almost takes away from the fact it is the focal point of Up Next.

I was able to redesign Up Next so that the bottom navigation and dock can be accommodated should a user opt for either or both to be in view and whilst managing to display more tracks in the list and with more detail (i.e. album title), all of which the current UI lacks. The dock mitigates the list being obstructed by playback controls and gives users more options to navigate and control whilst in the Up Next list. I also managed to add some more white space through making the composition of the list tighter without compromising the sizing of any elements, echoing the proportions seen in other native iOS 13 system apps. There are some other design bells and whistles added too. Main point? Less taps, more choice.

I was able to redesign Up Next so that the bottom navigation and dock can be accommodated should a user opt for either or both to be in view and whilst managing to display more tracks in the list and with more detail (ie album title), all of which the current UI lacks. The dock mitigates the list being obstructed by playback controls and gives users more options to navigate and control whilst in the Up Next list. I also managed to add some more white space through making the composition of the list tighter without compromising the sizing of any elements, echoing the proportions seen in other native iOS 13 system apps. There are some other design bells and whistles added too. Main point? Less taps, more choice.

Now Playing Options (Now Playing Options)

Overhauled Options Menu Overhauled Options Menu

One of the main problems users expressed? The options menu. Honestly, the current UI makes the entire Music app seem trivial. There are two problems here —a lack of basic features and inclusion of those that are not contextual and literally don’t work at all. In the current UI, options like “Save to Dropbox”, “Download File” and “Drafts Quick Capture” do nothing. In fact they throw an error screen just saying “Failed”. Why are broken features even in the menu yet features everyone actually wants and have been begging for still not even on the radar? “Copy” just adds a URL of the current song to the clipboard with no prompt to say so. Why not just remove it and add it to the share feature? And why is the like feature hidden away in a menu? It’s a total waste of space and opportunity for real music features, something their competitors, including Spotify, offer in abundance. Yet again, more reasons why users deviate away from Apple Music, as confirmed in my research. These are the problems I found that were echoed by users in my research.

One of the main problems users expressed? The options menu. Honestly, the current UI makes the entire Music app seem trivial. There are two problems here —a lack of basic features and inclusion of those that are not contextual and literally don't work at all . In the current UI, options like “Save to Dropbox”, “Download File” and “Drafts Quick Capture” do nothing. In fact they throw an error screen just saying “Failed”. Why are broken features even in the menu yet features everyone actually wants and have been begging for still not even on the radar? “Copy” just adds a URL of the current song to the clipboard with no prompt to say so. Why not just remove it and add it to the share feature? And why is the like feature hidden away in a menu? It's a total waste of space and opportunity for real music features, something their competitors, including Spotify, offer in abundance. Yet again, more reasons why users deviate away from Apple Music, as confirmed in my research. These are the problems I found that were echoed by users in my research.

I decided an overhaul was needed. I changed the menu entirely. The goal was to make something intuitive. Using visual direction from other iOS 13 native apps, I created a brand new menu, one that combines the the contextual options that do work from the current UI, including the (very few) Music settings from the Settings app and adding in new music-specific options/settings and features I’ve designed.

Essentially, I’ve created a “control center” specifically for the Music app, a merging of options, settings and features. For each of these categories, I segregated them into separate sections. Atop the menu is where I put the options into a horizontal swipe menu of mini modal cards, inspired by the ‘Home’ app UI. Pretty much every single button in the current UI I have put into this one swipe menu, freeing up majority of the screen estate the current menu takes. I also removed the non-contextual options entirely. That gave me an entire menu full of free space to add new features and settings.

Essentially, I've created a “control center” specifically for the Music app, a merging of options, settings and features. For each of these categories, I segregated them into separate sections. Atop the menu is where I put the options into a horizontal swipe menu of mini modal cards, inspired by the 'Home' app UI. Pretty much every single button in the current UI I have put into this one swipe menu, freeing up majority of the screen estate the current menu takes. I also removed the non-contextual options entirely. That gave me an entire menu full of free space to add new features and settings.

The next section houses some new features! Introducing a new Equaliser, directly accessible from Now Playing. The current UI doesn’t have an EQ option at all, you have to go to the Settings app to get access to the (very basic) Equaliser options. I have a whole section on the new Equaliser I’ve built below. I also integrated native Shazam support (which Apple own but stands solely as a standalone app) so users don’t have to leave Now Playing let alone the Music app entirely to get access to the very popular music discovery app. Again, more on the Shazam feature below.

The next section houses some new features ! Introducing a new Equaliser, directly accessible from Now Playing. The current UI doesn't have an EQ option at all, you have to go to the Settings app to get access to the (very basic) Equaliser options. I have a whole section on the new Equaliser I've built below. I also integrated native Shazam support (which Apple own but stands solely as a standalone app) so users don't have to leave Now Playing let alone the Music app entirely to get access to the very popular music discovery app. Again, more on the Shazam feature below.

The last section houses new settings. Many users, from casual to advanced, expressed they wanted these features. Adding them not only enhances the experience, it caters to a larger audience of users who may want these options. As a music enthusiast, I would love to be able to stream a lossless file and have native FLAC support for local files. Crossfade Playback is common feature found in competitor apps and a lot of users wanted this, especially for listening to albums and playlists in particular. Tempo is another highly sought feature, so I included the most common speeds used across a variety of platforms. I like to listen to some tracks a little faster when working out so having the option would be nice. Theme and view are self explanatory, users can toggle between the Music app theme they would like and whether they want the nav, dock or both to show respectively.

For extra measure, I included the dock within the menu (again, users can opt this to be hidden) as it allows users to perform actions in the menu without having to leave to adjust playback. At most, you’d tap back only once to get access to playback rather than having to exit the entire menu. The entire goal of this was to allow for creation of a curated music experience. Should users want any of these options, it’s there. And it’s contextual. The menu and its features were made from the ground up with music as the focal point, not just a bunch of common and generic options.

For extra measure, I included the dock within the menu (again, users can opt this to be hidden) as it allows users to perform actions in the menu without having to leave to adjust playback. At most, you'd tap back only once to get access to playback rather than having to exit the entire menu. The entire goal of this was to allow for creation of a curated music experience . Should users want any of these options, it's there. And it's contextual. The menu and its features were made from the ground up with music as the focal point, not just a bunch of common and generic options.

分享 (Share)

Share Menu Share Menu

Native Social Media Integration Native Social Media Integration

Most users requested native social media integration. Right now, there is not a single option to do so in the current UI’s share option. Currently, you have to copy the URL, exit the Music app, go into each individual social media app, paste the URL and then you can post. How many steps, taps and swipes is that?! It will vary from user to user depending on the setup of their home screen. The entire user flow for this can be simplified into one tap as I’ve done here.

Most users requested native social media integration. Right now, there is not a single option to do so in the current UI's share option. Currently, you have to copy the URL, exit the Music app, go into each individual social media app, paste the URL and then you can post. How many steps, taps and swipes is that?! It will vary from user to user depending on the setup of their home screen. The entire user flow for this can be simplified into one tap as I've done here.

We live in the age of social media. There is no reason why social media sharing shouldn’t be an option to share music directly from the app. Because of this, I decided to not only include native social media sharing but also give it a dedicated section within the share menu. Instead of axing their own social ideas (remember Connect?), Apple needs to do what their competitors are doing — embrace these platforms. As platforms grow and news ones (inevitably) roll around (look at TikTok), it’s vital that users can easily share music without it being a chore through copying a link. Having a dedicated section for social media makes it easier for users to find the platforms quickly rather than swiping through a ton of non-social media sharing options and prepares the Music app for whatever new platforms come around in the future.

We live in the age of social media. There is no reason why social media sharing shouldn't be an option to share music directly from the app. Because of this, I decided to not only include native social media sharing but also give it a dedicated section within the share menu. Instead of axing their own social ideas (remember Connect?), Apple needs to do what their competitors are doing — embrace these platforms. As platforms grow and news ones (inevitably) roll around (look at TikTok), it's vital that users can easily share music without it being a chore through copying a link. Having a dedicated section for social media makes it easier for users to find the platforms quickly rather than swiping through a ton of non-social media sharing options and prepares the Music app for whatever new platforms come around in the future.

A few little changes I made are moving the “Copy” button from current UI into this share menu and renaming it “URL” to make the option contextual to what it actually does rather than it be an ambiguous feature and including a QR code feature so users can share the music they want with others in person who may not have an iOS device and therefore cannot share via AirDrop.

Equaliser & Shazam (Equaliser & Shazam)

Equaliser & Shazam Equaliser & Shazam

Again, top user requests.

There is no native Shazam support within the Music app. That’s it. Simple. Why should users be forced to go to the Shazam app? It’s even more perplexing because Apple owns Shazam. I get that it is a separate entity but why can’t they integrate it into the music app? I couldn’t see a reason not to (other than potential logistics that I’m not privy to or not knowledgable enough about).

There is no native Shazam support within the Music app. 而已。简单。 Why should users be forced to go to the Shazam app? It's even more perplexing because Apple owns Shazam. I get that it is a separate entity but why can't they integrate it into the music app? I couldn't see a reason not to (other than potential logistics that I'm not privy to or not knowledgable enough about).

The current equaliser is just a list of preconfigured options that can only be accessed from the system settings app and there is no way to customise any of them. As an audiophile, I wanted this feature just as much as the many users who requested it. I built a new, fully fledged, customisable equaliser. No longer do users have to tap and swipe through multiple screens to change a preset EQ option. Users can build their own EQ and save them as custom preset, accessible directly from within the new Now Playing menu.

喜欢 (Like)

Like Interaction Like Interaction

Double Tap to Like Double Tap to Like

Although I retained the Like button from the current UI and kept it in the new Now Playing menu I designed, the feature didn’t need to be confined away, not when there is already a universally familiar gesture used across a range of apps and platforms, namely social media. The gesture of double tapping, is synonymous, in fact, it’s convention at this point, specifically in the context of liking something. Users shouldn’t be forced to go into a menu to like a song as is the method of the current UI.

Although I retained the Like button from the current UI and kept it in the new Now Playing menu I designed, the feature didn't need to be confined away, not when there is already a universally familiar gesture used across a range of apps and platforms, namely social media. The gesture of double tapping, is synonymous, in fact, it's convention at this point, specifically in the context of liking something. Users shouldn't be forced to go into a menu to like a song as is the method of the current UI.

I wanted to mitigate tedious actions like this (the same goes for shuffle and repeat, hence why I moved them back). In addition to adding the feature, I wanted to figure out a way to subtly incorporate feedback to the user. Currently, when you like a song (or other actions e.g. add to a playlist), a big square component appears on the center of the screen. It’s obtrusive, far from subtle and it “paralyses” the user experience to a degree (quite literally, actually, as you can’t do anything until the feedback prompt disappears since it covers much of the screen). My solution was to utilise the material components of the UI to make the feedback of the gesture subtle. I moved the text portion of the feedback to show and hide behind the background material component and the ‘no fill’ version of the SF Symbols heart glyph for the main feedback. I chose to use the ‘no fill’ version of the glyph so that it didn’t obstruct the album artwork, which a filled version of a heart would given the animation of the interaction I designed.

I wanted to mitigate tedious actions like this (the same goes for shuffle and repeat, hence why I moved them back). In addition to adding the feature, I wanted to figure out a way to subtly incorporate feedback to the user. Currently, when you like a song (or other actions eg add to a playlist), a big square component appears on the center of the screen. It's obtrusive, far from subtle and it “paralyses” the user experience to a degree (quite literally, actually, as you can't do anything until the feedback prompt disappears since it covers much of the screen). My solution was to utilise the material components of the UI to make the feedback of the gesture subtle. I moved the text portion of the feedback to show and hide behind the background material component and the 'no fill' version of the SF Symbols heart glyph for the main feedback. I chose to use the 'no fill' version of the glyph so that it didn't obstruct the album artwork, which a filled version of a heart would given the animation of the interaction I designed.

Click Wheel (Click Wheel)

Click Wheel Concept Click Wheel Concept

This is more of a conceptual feature I came up with. In wanting to revisit Apple’s musical roots with the iPod, this idea popped into my head. The iPod was such a huge part of my life, I really wanted to see if I could create a cool alternative to the current playback controls. This my ode and love letter to the beloved click wheel. I’m happy with the way it turned out although it is not as perfect as I’d like due to the animation and interaction limitations of Adobe XD; they didn’t come out as well as I wanted but I settled on the best I could come up with is as I the HiFi mockup of the final iteration came out better than I had imagined. With some professional polish, I believe it could be a great optional feature, adding more gestural interaction into the music experience compared to traditional tapping and swiping.

This is more of a conceptual feature I came up with. In wanting to revisit Apple's musical roots with the iPod, this idea popped into my head. The iPod was such a huge part of my life, I really wanted to see if I could create a cool alternative to the current playback controls. This my ode and love letter to the beloved click wheel. I'm happy with the way it turned out although it is not as perfect as I'd like due to the animation and interaction limitations of Adobe XD; they didn't come out as well as I wanted but I settled on the best I could come up with is as I the HiFi mockup of the final iteration came out better than I had imagined. With some professional polish, I believe it could be a great optional feature, adding more gestural interaction into the music experience compared to traditional tapping and swiping.

Tap and hold the pause button and the click wheel appears. Where you swipe next determines the playback action that takes place. Still holding from the initial tap, swiping up and down increases and decreases the volume. Swiping left and right scrubs through the track. Originally I wanted to incorporate a winding gesture akin to the actual click wheel’s from back in the day but found the gestures I settled on worked much better. I thought about changing the name of the feature but incorporating haptic feedback would give it that “click”-esque feel.

Tap and hold the pause button and the click wheel appears. Where you swipe next determines the playback action that takes place. Still holding from the initial tap, swiping up and down increases and decreases the volume. Swiping left and right scrubs through the track. Originally I wanted to incorporate a winding gesture akin to the actual click wheel's from back in the day but found the gestures I settled on worked much better. I thought about changing the name of the feature but incorporating haptic feedback would give it that “click”-esque feel.

Album Menu (Album Menu)

Album Menu Album Menu

In addition to the new Now Playing menu above, I also created something I’ve called the “Album Menu” which allows users to access further information about the album from which the currently playing song derives. Essentially, the Album Menu is a hub that houses all aspects of an album — track list, release information, album credits, music video, artist’s Apple Music page and their social media accounts.

In addition to the new Now Playing menu above, I also created something I've called the “Album Menu” which allows users to access further information about the album from which the currently playing song derives. Essentially, the Album Menu is a hub that houses all aspects of an album — track list, release information, album credits, music video, artist's Apple Music page and their social media accounts.

I took inspiration for this idea from the ‘About’ section in the Apple TV app which gives detailed information and metadata about a show. Initially I wanted to create a quicker way to get access to an entire album directly from Now Playing. It then evolved into the hub that I designed, housing an album experience. As a scenario — if a user is listening to a playlist and they want to see more songs from the same album of the current track playing, they can do so directly from the Now Playing screen without having to scroll through their Library to find the album or go through the current UI options menu to then get access to the album page for said track (which again, takes you to the album page). My solution puts all of these new features into one screen.

I took inspiration for this idea from the 'About' section in the Apple TV app which gives detailed information and metadata about a show. Initially I wanted to create a quicker way to get access to an entire album directly from Now Playing. It then evolved into the hub that I designed, housing an album experience. As a scenario — if a user is listening to a playlist and they want to see more songs from the same album of the current track playing, they can do so directly from the Now Playing screen without having to scroll through their Library to find the album or go through the current UI options menu to then get access to the album page for said track (which again, takes you to the album page). My solution puts all of these new features into one screen .

Quick Navigation (Quick Navigation)

Quick Navigation Quick Navigation

Tap and hold for Quick Nav Tap and hold for Quick Nav

This feature wasn’t explicitly requested but I thought adding it wouldn’t hurt! Instead of swiping down Now Playing to access the Library categories, tapping and holding the nav menu icon displays a quick navigation menu to move directly to the area of the library a user wishes to access. The feature also works for the other nav buttons and provides contextual options within the quick nav for each of them.

This feature wasn't explicitly requested but I thought adding it wouldn't hurt! Instead of swiping down Now Playing to access the Library categories, tapping and holding the nav menu icon displays a quick navigation menu to move directly to the area of the library a user wishes to access. The feature also works for the other nav buttons and provides contextual options within the quick nav for each of them.

I just wanted to implement ways to reduce user flow in navigating the app as the current UI is void of any paths to quickly reach specific sections. Less taps!

Custom Arrange (Custom Arrange)

Custom Arrange Now Playing UI Custom Arrange Now Playing UI

Custom arranging the Now Playing UI is another small feature I decided would be good for user customisation. Inspired by the home screen app arrangement, adding the option for users to add and/or remove buttons would be a nice touch for giving more options to create a curated music experience. Make the app feel personal for users.

Lock Screen (Lock Screen)

Lock Screen Now Playing Lock Screen Now Playing

Volume Adjust With The Dock Volume Adjust With The Dock

For the lock screen, I changed the UI heavily. Once I had designed the Dock, I realised it would be a perfect alternative to the current Mini Player used for the lock screen which feels outdated and obtrusive. It hasn’t had an update in so long. It still takes up too much screen estate (almost 50%) and inducing hiding notifications as a result. Currently, you have to swipe up the Now Playing component up to reveal notifications. This is counterintuitive and causes unnecessary separation on the lock screen. Why can’t I see my notifications and now playing? That’s what I addressed with my solution. I used the Dock as a way to transform Now Playing into something minimal, with a sleeker look that uses much less space than the current UI allowing space for both notifications to live together on the same screen. Users no longer need to swipe the Now Playing component away to view their notifications. It’s all there, in on screen.

For the lock screen, I changed the UI heavily. Once I had designed the Dock, I realised it would be a perfect alternative to the current Mini Player used for the lock screen which feels outdated and obtrusive. It hasn't had an update in so long. It still takes up too much screen estate (almost 50%) and inducing hiding notifications as a result. Currently, you have to swipe up the Now Playing component up to reveal notifications. This is counterintuitive and causes unnecessary separation on the lock screen. Why can't I see my notifications and now playing? That's what I addressed with my solution. I used the Dock as a way to transform Now Playing into something minimal, with a sleeker look that uses much less space than the current UI allowing space for both notifications to live together on the same screen. Users no longer need to swipe the Now Playing component away to view their notifications. It's all there, in on screen.

In terms of the Dock’s buttons, these adapt based on the fact the user is on thee lock screen. Whilst designing this new music system for the lock screen, I tried to look for ways to reduce the amount of screen estate it would take up without compromising a single feature that is in the current UI whilst also looking for ways to add in those that are not.

In terms of the Dock's buttons, these adapt based on the fact the user is on thee lock screen. Whilst designing this new music system for the lock screen, I tried to look for ways to reduce the amount of screen estate it would take up without compromising a single feature that is in the current UI whilst also looking for ways to add in those that are not.

View Up Next From The Lock Screen With The Dock View Up Next From The Lock Screen With The Dock

The top component houses the artwork, track name and title along with the track time and contextual AirPlay button. Removing the volume slider from track component meant I had to find a solution to include it elsewhere on the lock screen. Thats where the dock came in. I opted for the left button on the dock to be a volume slider. Tap and slide the volume button to change the volume as you can see in the prototype GIF above.

In the current UI, there is no way to view the Up Next list at all. The problem is, you have to either switch tracks or unlock your iPhone and go all the way into the Now Playing app to see the previous/next tracks. My solution? Using the dock. I made the right button an Up Next button that when tapped expands the list directly in the lock screen. One tap, your whole list, complete with the ability to change the play sequence. No need to unlock your iPhone, go into Music, then Now Playing and finally into Up Next. A minimum of four screens and multiple taps I reduced to one tap.

Lyrics (Lyrics)

Lyrics Lyrics

Lyrics with the Dock Lyrics with the Dock

The current UI for lyrics is stunning. I love it. The type interactions are beautiful as the song plays and I wish I could have emulated something like that in XD. All I did was a couple of design tweaks that matched my redesign. I included the dock to save screen real estate compared to the current UI playback controls, which again, takes up too much space, obstructing the view which could be used to display more lyrics.

The current UI for lyrics is stunning. 我喜欢它。 The type interactions are beautiful as the song plays and I wish I could have emulated something like that in XD. All I did was a couple of design tweaks that matched my redesign. I included the dock to save screen real estate compared to the current UI playback controls, which again, takes up too much space, obstructing the view which could be used to display more lyrics.

For the Dock buttons, I opted to include a text size button so users can change the type size of the lyrics on screen with one tap. The other button I included was the options button which, in the current UI is at the top of the screen, out of thumbs reach. I moved it down into the dock so users don’t need to stretch to the top of the screen to reach and tap it. With the dock, everything is now in thumbs reach, mitigating users obstructing thee lyrics with their hand in order to perform actions atop the screen. One subtle touch I really wanted to add in was producer credits. I feel producers need more prominence as they are rarely acknowledged. In the current UI, only the artist and song writers are displayed.

For the Dock buttons, I opted to include a text size button so users can change the type size of the lyrics on screen with one tap. The other button I included was the options button which, in the current UI is at the top of the screen, out of thumbs reach. I moved it down into the dock so users don't need to stretch to the top of the screen to reach and tap it. With the dock, everything is now in thumbs reach, mitigating users obstructing thee lyrics with their hand in order to perform actions atop the screen. One subtle touch I really wanted to add in was producer credits. I feel producers need more prominence as they are rarely acknowledged. In the current UI, only the artist and song writers are displayed.

I could have improved this section a lot more with the right interactions/animations echoing similar to that of the current UI but I couldn’t emulate something as decent in Adobe XD.

I could have improved this section a lot more with the right interactions/animations echoing similar to that of the current UI but I couldn't emulate something as decent in Adobe XD.

图书馆 (Library)

Library Menu Library Menu

Core UI Redesign (Core UI Redesign)

Onto the Library! This was a beast in itself to redesign. So challenging yet so fun. Much of the user research I had collected pertained to problems with the features and functionality of playback and Now Playing. For the Library, users didn’t have much to say or offer in terms of specific problems and features they’d like to see outside pointing out two common issues almost everyone agreed on — it felt outdated and the user flow between screens, getting from A to B, was unnecessarily lengthy. Everything in regards to navigation is somewhat prolonged (i.e. having to go in and out/switch between menus) for users to get to their destination, without quicker alternatives.

Onto the Library ! This was a beast in itself to redesign. So challenging yet so fun. Much of the user research I had collected pertained to problems with the features and functionality of playback and Now Playing. For the Library, users didn't have much to say or offer in terms of specific problems and features they'd like to see outside pointing out two common issues almost everyone agreed on — it felt outdated and the user flow between screens, getting from A to B, was unnecessarily lengthy. Everything in regards to navigation is somewhat prolonged (ie having to go in and out/switch between menus) for users to get to their destination, without quicker alternatives.

My goal was to find a solution to this. I ended up redesigning the entire Library UI, removing every trace of the current UI and creating an entirely new navigation system based off iOS 13’s Photo app. Apple created a prominent visual direction in iOS 13 as identified and explained in my design process. I wanted to create a brand new Library experience that made the Music app feel like a part of its iOS 13 counterparts whilst keeping my focus on providing a greatly improved UX through the UI.

My goal was to find a solution to this. I ended up redesigning the entire Library UI, removing every trace of the current UI and creating an entirely new navigation system based off iOS 13's Photo app. Apple created a prominent visual direction in iOS 13 as identified and explained in my design process. I wanted to create a brand new Library experience that made the Music app feel like a part of its iOS 13 counterparts whilst keeping my focus on providing a greatly improved UX through the UI.

To achieve consistency and cohesiveness in my redesign for the Library, I adopted iOS 13's increased and varied use of material elements and styling, including prominent use of object blurred UI components. I use them at various levels (primary, secondary and tertiary) with a darker/lighter overlay to distinguish and denote a visual hierarchy for each type of element (e.g. different variants of menus). The level of blurred components denotes context and is determined by its intensity. For example, if a user is in a menu that needs to be the focal point of the current interaction, all else is blurred with an overlay to draw the users attention to the menu items, not other information around it or behind it.

To achieve consistency and cohesiveness in my redesign for the Library, I adopted iOS 13's increased and varied use of material elements and styling, including prominent use of object blurred UI components. I use them at various levels (primary, secondary and tertiary) with a darker/lighter overlay to distinguish and denote a visual hierarchy for each type of element (eg different variants of menus). The level of blurred components denotes context and is determined by its intensity. For example, if a user is in a menu that needs to be the focal point of the current interaction, all else is blurred with an overlay to draw the users attention to the menu items, not other information around it or behind it.

The main elements I have introduced into my redesign of the Library are:

A toggle menu at the top of the Library. This toggle houses all the different Library categories and replaces the list in the current UI; just swipe or tap to switch between each category to see their respective view; it uses the same material UI element of the bottom navigation bar as its background, object blur to convey elevation through transparency
A toggle menu at the top of the Library. This toggle houses all the different Library categories and replaces the list in the current UI; just swipe or tap to switch between each category to see their respective view; it uses the same material UI element of the bottom navigation bar as its background, object blur to convey elevation through transparency
The ability to pin music atop each category with a ‘Favourites’ section within each category
The ability to pin music atop each category with a 'Favourites' section within each category
The UI now has a “header”, housing the Library headline, the Sort and Settings buttons along with the user profile with direct access to the profile page from any screen within the Library; like the toggle menu, it uses the same material UI element with object blur to convey elevation through transparency above all other parts of the UI in each screen (e.g. elements scroll behind these components, indicating they are lower in elevation)
The UI now has a “header”, housing the Library headline, the Sort and Settings buttons along with the user profile with direct access to the profile page from any screen within the Library; like the toggle menu, it uses the same material UI element with object blur to convey elevation through transparency above all other parts of the UI in each screen (eg elements scroll behind these components, indicating they are lower in elevation)
A dynamic library that automatically hides music that can’t be played due to lack of WiFi. I took this to heart as most times, when making a decision to play a song, it is induced by what I can pick/choose. Currently the UI of the Library greys out any songs you can’t play but there is a problem that many users pointed out. When you hit shuffle or play when there is no access to data or WiFi, either a prompt shows saying the current song cannot be played and asks the user to leave the Music app and go to the settings or the song just doesn’t play and users have to keep tapping next until a song that has been locally downloaded is available to play. This makes the Music app feel trivial. If the Library shows only what can be played (i.e. local or local and stream), users will just pick whats available most times and it mitigates the app from stopping users from playing music as it currently does.
A dynamic library that automatically hides music that can't be played due to lack of WiFi. I took this to heart as most times, when making a decision to play a song, it is induced by what I can pick/choose. Currently the UI of the Library greys out any songs you can't play but there is a problem that many users pointed out. When you hit shuffle or play when there is no access to data or WiFi, either a prompt shows saying the current song cannot be played and asks the user to leave the Music app and go to the settings or the song just doesn't play and users have to keep tapping next until a song that has been locally downloaded is available to play. This makes the Music app feel trivial. If the Library shows only what can be played (ie local or local and stream), users will just pick whats available most times and it mitigates the app from stopping users from playing music as it currently does.

General Music Settings (General Music Settings)

General Music Settings General Music Settings

Essentially I emulated the music settings from the system Settings app and embedded it directly into the Music app, whilst adding in new features, some of which I outlined (Equaliser, Playback Settings et al) in the Now Playing section. The goal of this was to provide as many options to users as possible in creating a curated music experience. The result is a combination of user requests, my ideas and the settings available in the current UI.

General Music Settings General Music Settings

Here’s a brief overview of each setting:

Here's a brief overview of each setting:

Default Screen: Currently, if the app is closed entirely, it defaults to the last opened screen. With this option, users can choose what screen they see when the app opens from a hard close.
Default Screen: Currently, if the app is closed entirely , it defaults to the last opened screen. With this option, users can choose what screen they see when the app opens from a hard close.
Show Nav/Dock: toggles to show/hide the bottom navigation menu and dock, giving users more view preferences.
Show Nav/Dock: toggles to show/hide the bottom navigation menu and dock, giving users more view preferences.
Apple Music, Auto Add & Sync: these are currently all in the ‘System’ app. I migrated them into this settings menu for easier access so users aren’t forced to exit the app to change them.
Apple Music, Auto Add & Sync: these are currently all in the 'System' app. I migrated them into this settings menu for easier access so users aren't forced to exit the app to change them.
Shazam & Audio Sharing: toggles to turn these features on and off.
Shazam & Audio Sharing: toggles to turn these features on and off.
Mobile Data, Downloads & Playback: again, all in the current Music settings, just brought them over into the app settings for easier access.
Mobile Data, Downloads & Playback: again, all in the current Music settings, just brought them over into the app settings for easier access.
Report: this is a new feature I’ve added as many users requested there is currently no way to report issues within the app. Now, users can report problems about music or the app itself (i.e. wrong song titles/lyrics, any app bugs etc.)
Report: this is a new feature I've added as many users requested there is currently no way to report issues within the app. Now, users can report problems about music or the app itself (ie wrong song titles/lyrics, any app bugs etc.)
Equaliser: as shown above, another way to access the Equaliser menu.
Equaliser: as shown above, another way to access the Equaliser menu.
Volume Limit & Soundcheck: migrated from the Settings app
Volume Limit & Soundcheck: migrated from the Settings app
Lossless Quality, Crossfade Playback & Tempo: new features added that I explained above in the Now Playing section.
Lossless Quality, Crossfade Playback & Tempo: new features added that I explained above in the Now Playing section.
Auto Add: many users expressed problems with the fact that in the current UI, if you are listening to a song and decide to listen to a specific songs from another album, the entire Up Next List is automatically changed to play the album you’ve selected a single song from. There is no option for users to retain their Up Next list and just play the single song they requested. I added this feature to enable users the ability to do just that. Now, if you tap on a song, you can choose whether the album it comes from is automatically added to Up Next or the individual song is added without changing the rest of the Up Next queue. Auto add a single song or an entire album.
Auto Add: many users expressed problems with the fact that in the current UI, if you are listening to a song and decide to listen to a specific songs from another album, the entire Up Next List is automatically changed to play the album you've selected a single song from. There is no option for users to retain their Up Next list and just play the single song they requested. I added this feature to enable users the ability to do just that. Now, if you tap on a song, you can choose whether the album it comes from is automatically added to Up Next or the individual song is added without changing the rest of the Up Next queue. Auto add a single song or an entire album.

个人资料 (Profile)

Apple Music User Profile Page Apple Music User Profile Page

I didn’t get to flesh this out as much as I wanted as my ideas were heavily linked to the service side of Apple Music. So instead, I did a quick HiFi mockup of a profile page to show how it would be integrated into the Library and connected to the Browse, For You & Radio service sections of the app.

I didn't get to flesh this out as much as I wanted as my ideas were heavily linked to the service side of Apple Music. So instead, I did a quick HiFi mockup of a profile page to show how it would be integrated into the Library and connected to the Browse, For You & Radio service sections of the app.

Currently, the account page is completely bland and void of any personal experience for Apple Music users. I changed this into a Profile page that houses everything found in the current Account screen whilst adding in the visual direction I was aiming for (glyphs, cards etc). The Link & QR code buttons give more options, in addition to social media, for users to share their Profiles, as well as preferences for social media sharing.

I had more ideas for this from user requests but I’ll leave that for an Apple Music case study on the service rather than the app.

I had more ideas for this from user requests but I'll leave that for an Apple Music case study on the service rather than the app.

Queue & Remove Tracks (Queue & Remove Tracks)

Queue & Remove Tracks Queue & Remove Tracks

Swipe Right To Queue Swipe Right To Queue

Yeah, this one doesn’t really need an explanation. Why do we have to either tap, hold and go into a menu to queue or remove songs? And then also wait for the huge prompt to disappear? In the current UI, thats the only way you can perform these actions. If you simply tap on a song in the current UI, a whole prompt appears forcing users to either go to Up Next or clear the queue to play the song they tapped. It’s extremely outdated counterintuitive and obstructive.

Yeah, this one doesn't really need an explanation. Why do we have to either tap, hold and go into a menu to queue or remove songs? And then also wait for the huge prompt to disappear? In the current UI, thats the only way you can perform these actions. If you simply tap on a song in the current UI, a whole prompt appears forcing users to either go to Up Next or clear the queue to play the song they tapped. It's extremely outdated counterintuitive and obstructive.

Swipe Left To Remove Swipe Left To Remove

It’s one of my biggest issues with the current Music app and users complained in abundance about this too. Spotify has this basic functionality, something many users pointed out during my research. My solution is not innovative, its obvious. It turns a currently lengthy process into a single gesture. Apple are underutilising gestures in with the Music app.

It's one of my biggest issues with the current Music app and users complained in abundance about this too. Spotify has this basic functionality, something many users pointed out during my research. My solution is not innovative, its obvious. It turns a currently lengthy process into a single gesture. Apple are underutilising gestures in with the Music app.

摇 (Shake)

Shake For Shuffle Or Suggestions Shake For Shuffle Or Suggestions

Sometimes, I don’t know what I want listen to, so I wanted to come up some kind of feature to create a randomly shuffled playlist or present me with some options via suggestions. I realised, Apple have not utilised shake at all in Music. The most common native shake feature I could think of was the ‘Undo Typing’ shake gesture found throughout iOS. So, I decided to use the shake gesture and combine it with Siri to implement a “Shake To…” feature.

Sometimes, I don't know what I want listen to, so I wanted to come up some kind of feature to create a randomly shuffled playlist or present me with some options via suggestions. I realised, Apple have not utilised shake at all in Music. The most common native shake feature I could think of was the 'Undo Typing' shake gesture found throughout iOS. So, I decided to use the shake gesture and combine it with Siri to implement a “Shake To…” feature.

Shake your iPhone and Siri will ask if you want suggestions or shuffle. If you request suggestions, the Music app will present you with some music you may like to listen to based off your listening history and library. If you request shuffle, the app will begin playing a randomised playlist.

Shuffle Or Suggestion? You Choose, Siri Delivers. Shuffle Or Suggestion? You Choose, Siri Delivers.

Recent Category (Library Landing) (Recent Category (Library Landing))

Library Recent Category Library Recent Category

Currently, the Library landing page is completely bland. The category list alone takes up majority of the viewport and the app doesn’t give users a Music experience. So, I redesigned the entire Library from the ground up using the visual direction of iOS 13 native system apps. The Library categories are now housed in the new toggle menu, freeing up the entire landing page, (which I changed into a ‘Recent’ category), full of more choice with scroll and swipe menus, more colour with design changes and most importantly, more more music. Music is the focal point of the Library redesign.

Currently, the Library landing page is completely bland. The category list alone takes up majority of the viewport and the app doesn't give users a Music experience. So, I redesigned the entire Library from the ground up using the visual direction of iOS 13 native system apps. The Library categories are now housed in the new toggle menu, freeing up the entire landing page, (which I changed into a 'Recent' category), full of more choice with scroll and swipe menus, more colour with design changes and most importantly, more more music . Music is the focal point of the Library redesign.

Recent Category (Recent Category)

I turned the Library landing page into the ‘Recent’ toggle category, where users can find all the music from each category combined into this singular hub.

I turned the Library landing page into the 'Recent' toggle category, where users can find all the music from each category combined into this singular hub.

In the current UI, a list of categories take up majority of the entire viewport. Beneath is just a scrolling list of album covers with of recently added music.

Now, my redesign uses all screen estate using to show the music. Each section in the Recent page is contextual in that what is shown beneath each header is recent (i.e. the artists section is showing artists recently added to the Library and the favourites section is showing what users have recently chosen to pin as their favourite music). The page utilises a mix of swipe and scroll menus to house and display all recent content from each category. A favourites section is now included, allowing users to view the music they favourited recently and get access in one tap. The same concept applies to each section following — the header denotes the context and what is shown is what has been recently added.

Now, my redesign uses all screen estate using to show the music. Each section in the Recent page is contextual in that what is shown beneath each header is recent (ie the artists section is showing artists recently added to the Library and the favourites section is showing what users have recently chosen to pin as their favourite music). The page utilises a mix of swipe and scroll menus to house and display all recent content from each category. A favourites section is now included, allowing users to view the music they favourited recently and get access in one tap. The same concept applies to each section following — the header denotes the context and what is shown is what has been recently added.

More Recently Added For Each Category More Recently Added For Each Category

The mini menu at the top leads to showing all recently added music from each individual music category. Here is an example showing recent playlists in more detail. It provides more than what the Recent page shows. Essentially, it houses ‘more’ of the recently added music for each category rather than the brief overview of the Recent landing page.

The mini menu at the top leads to showing all recently added music from each individual music category. Here is an example showing recent playlists in more detail. It provides more than what the Recent page shows. Essentially, it houses 'more' of the recently added music for each category rather than the brief overview of the Recent landing page.

Library ‘Recent’ Category Settings Library 'Recent' Category Settings

Tapping the settings button atop the UI opens up the Library settings menu. The menu adapts depending on which Library category the user is currently in. For each category, the settings are contextual. Here you can see the settings for the Recent Library category, with specific options allowing users to edit the view of the recent page, from changing the position of each section, opting between swipe and scroll for each section in the Recent page, choice for the sequence in which they are placed on screen or even turning them off entirely.

Songs Category (Songs Category)

Library Songs Category Library Songs Category

Switch Library categories using the toggle menu Switch Library categories using the toggle menu

Next up is the songs toggle. Tapping it moves the Library UI to the Songs category.

Users can sort the songs list by title, artists or recently added. The sort menu has the highest elevation, utilising a darker overlay with object blur to emphasise the menu as the focal point of the interaction.

I added the album titles into the list as some users requested this be an option during my research.

Here you can the elevation of UI elements in action with the use of material components that have object blur applied. The UI header, navigation and toggle menus all have higher elevation, with the songs list scrolling behind them all, communicated visually by the way the list blurs behind the core UI elements. Essentially, this communicates that this section of the UI is adaptable and dynamic (i.e. it changes with each category) whereas the core UI elements stay static.

Here you can the elevation of UI elements in action with the use of material components that have object blur applied. The UI header, navigation and toggle menus all have higher elevation, with the songs list scrolling behind them all, communicated visually by the way the list blurs behind the core UI elements. Essentially, this communicates that this section of the UI is adaptable and dynamic (ie it changes with each category) whereas the core UI elements stay static.

Context Search Within Category Context Search Within Category

I added a contextual search feature in the Library. The idea stemmed from the universal search feature in iOS. In some menus, apps and on the home screen, if you swipe down, a search bar appears, allowing you to type in a query to perform a system/app wide search.

I wanted to see if there was a way I could implement searching within a Library category without users having to go to the Search page through the bottom navigation menu, allowing for quick contextual searching in a particular Library category. The solution I came up with can be seen here. Tap on the current Library category in the toggle menu and it turns into a search bar, allowing users to search for music in that specific category and in turn getting results solely from within that category (i.e. only songs will be delivered to users rather than searching all categories in their entire Library as would be the case and purpose for using the Search menu). I opted for this implementation for the feature as the OS wide universal search requires a swipe down gesture to access. This wouldn’t have worked within the Music app as swiping down would be interfered by elements within the Library UI that are interactive (i.e. the songs list), so the solution I came up with was the next best way to include the feature subtly.

I wanted to see if there was a way I could implement searching within a Library category without users having to go to the Search page through the bottom navigation menu, allowing for quick contextual searching in a particular Library category. The solution I came up with can be seen here. Tap on the current Library category in the toggle menu and it turns into a search bar, allowing users to search for music in that specific category and in turn getting results solely from within that category (ie only songs will be delivered to users rather than searching all categories in their entire Library as would be the case and purpose for using the Search menu). I opted for this implementation for the feature as the OS wide universal search requires a swipe down gesture to access. This wouldn't have worked within the Music app as swiping down would be interfered by elements within the Library UI that are interactive (ie the songs list), so the solution I came up with was the next best way to include the feature subtly.

Songs Category Settings Songs Category Settings

As I said before, the settings menu adapts depending on the Library category users are currently in. Here are the contextual settings for the Songs category. Users can now change the text size of the songs list, opt to show or hide album artwork and track length as well as have quick access to the Now Playing and Sound & Playback settings without having to navigate to those screens/menus to change settings in said sections.

Multi Track Select & Playlist Creation Multi Track Select & Playlist Creation

In my research, many users requested for a way to select and add multiple songs to a new or existing playlist. I implemented this feature through utilising tap and hold. Users can now tap and hold a song to initiate selecting multiple songs and either add them to a new playlist or an existing one.

There is also a new prompt which alerts users if the song(s) they are adding already exist in a current playlist and provides the option to add the duplicates anyway, add the rest of the selected tracks that are not duplicated or cancel entirely (you can see this new prompt in the HiFi mockups above).

Artist Category (Artist Category)

Library Artists Category Library Artists Category

Next category, Artists. The current UI only has one view, an alphabetical list.

I have implemented multiple different view options for users. I kept the current UI list view and modified the visual design slightly. I added sorting to the list view, allowing users to sort by first or last name and in reverse alphabetical order should they wish.

For the Artist category settings, I added options to change the text size, menu style from scroll to swipe and toggles to show or hide headers, favourites and library contents.

Here you can see the library view with favourites and headers turned on, giving users a slightly different UI with more options.

Scroll View With Sorting Options & Artist Category Settings Scroll View With Sorting Options & Artist Category Settings

New Artist Category Menu Style New Artist Category Menu Style

Here is a brand menu style for the Artist category. Opting for this view in the settings turns the category view into a horizontal menu where users swipe, instead of scroll, to view and select artist.

Another small issue I had with the current UI are the multiple entires for lead and featured artists. If you look at the current UI screenshot above, Big Sean is listed twice, alone and with Metro Boomin. It just look’s messy. Why not put the songs they are both in within their individual artist pages under a features section? That’s what I decided to do. Features are now put into their own section within the individual artist page unlike the current UI which takes up more screen estate with multiple unnecessary entries. Nesting artists features within their individual pages allows for a more clean list. Simplifying should take precedent.

Another small issue I had with the current UI are the multiple entires for lead and featured artists. If you look at the current UI screenshot above, Big Sean is listed twice, alone and with Metro Boomin. It just look's messy. Why not put the songs they are both in within their individual artist pages under a features section? That's what I decided to do. Features are now put into their own section within the individual artist page unlike the current UI which takes up more screen estate with multiple unnecessary entries. Nesting artists features within their individual pages allows for a more clean list. Simplifying should take precedent.

Album Category (Album Category)

At this point XD had crashed a hundred times so rendering the prototypes became impossible. The animations are very laggy as a result. Unfortunately, after multiple attempts, I couldn’t get anything decent to render so apologies in advance. Hopefully I’ll have a more powerful machine and software in the near future.

At this point XD had crashed a hundred times so rendering the prototypes became impossible. The animations are very laggy as a result. Unfortunately, after multiple attempts, I couldn't get anything decent to render so apologies in advance. Hopefully I'll have a more powerful machine and software in the near future.

Library Album Category Library Album Category

Albums Grid View Albums Grid View

Next up, the album category! Complete with a brand new UI. The current UI only has one scroll view with some sorting options. My redesign? A complete overhaul.

Many users in my research pointed out there are no other views available for albums other than the two-album-wide scroll view in the current UI. I wanted to implement as many dynamic views as I could. Thee grid system allowed me to solve this problem.

I am primarily showing the new grid view here however I have also included scroll and swipe album views too which can be seen in the HiFi mockup above.

The new grid view was inspired by the Photos app. Users can zoom in and out to see all the albums in their library. They can select multiple albums and play them in sequence or shuffle the selected albums.

Selecting & Sorting Selecting & Sorting

There are now more options to sort albums — by title, artists, date added, genre and release date. The settings allow users to change the text size and show favourites (when in scroll or swipe album views).

Zooming On The Album Grid + Mini Preview Zooming On The Album Grid + Mini Preview

I also wanted to add in a way for users to quickly access the tracklist and select songs from the grid without having to go into the album page. To do this, I implemented tap and hold so that users can access a mini preview of a selected album.

Playlist Category (Playlist Category)

Library Playlist Category Library Playlist Category

Last but not least, the Playlist Category. ‘Playlists’ shares a very similar redesigned UI akin to the Recent category.

Last but not least, the Playlist Category. 'Playlists' shares a very similar redesigned UI akin to the Recent category.

From my research, many users complained about the fact they have little choice over the view and sorting of the current Playlist UI as well as a lack of options in playlist creation.

Playlists now have notifications. Users can instantly see which ones have been updated recently and with how many tracks.

Users now have the option to sort via title or author of the playlist, by which were recently added and when they were created or modified, giving users more options over the current UI’s limited offerings. The settings here echo that of the Recent category, with some contextual options such as toggles for the playlist contents and notifications.

Users now have the option to sort via title or author of the playlist, by which were recently added and when they were created or modified, giving users more options over the current UI's limited offerings. The settings here echo that of the Recent category, with some contextual options such as toggles for the playlist contents and notifications.

Playlist Creation Playlist Creation

Smart Playlist Creation Smart Playlist Creation

As mentioned before, many users complained about the lack of playstation creation options, especially given that Smart Playlists are an option in Music on macOS.

I’ve built a new playlist creation feature into Playlists. Users can now create regular, smart and shared playlists. The smart playlists can be created by artist, album or genre by simply swiping around and tapping to create a playlist from what has been selected.

I've built a new playlist creation feature into Playlists. Users can now create regular, smart and shared playlists. The smart playlists can be created by artist, album or genre by simply swiping around and tapping to create a playlist from what has been selected.

Individual Playlist Page Individual Playlist Page

When a user taps into an individual playlist, the toggle menu dynamically adapts to provide menu options contextual to a playlist page. Within a playlist page, users can tap on songs to see the tracklist, tap artists to see all the artists in said playlist and tap albums to see all the albums from which the songs in the playlist derive from.

Compared to the current UI, I have moved the playlist description into a pop up that is accessed via a button to create more space in the playlist page.

I have also added in some new features:

Playlist Collections: users can create nested playlists, like a stacks of multiple playlists, stored within a collection.
Playlist Collections: users can create nested playlists, like a stacks of multiple playlists, stored within a collection.
Playlist Tagging: users can now tag their playlists by location, emoji or colour
Playlist Tagging: users can now tag their playlists by location, emoji or colour

Artist Page (Artist Page)

When users tap on an artist page, they are presented with a brand new hub UI. When you tap on an artist in the current UI, only their albums are presented to the user. It’s extremely bare. I wanted to completely overhaul this into an experience.

When users tap on an artist page, they are presented with a brand new hub UI. When you tap on an artist in the current UI, only their albums are presented to the user. It's extremely bare. I wanted to completely overhaul this into an experience.

A ll Toggle (Artist Landing Page) (All Toggle (Artist Landing Page))

Individual Artist Page — All Toggle Individual Artist Page — All Toggle

Artist Page, All Toggle, Sorting & Settings Artist Page, All Toggle, Sorting & Settings

When a user taps on an artist, they are presented with the ‘All’ toggle — a landing page.

When a user taps on an artist, they are presented with the 'All' toggle — a landing page.

This is where the start of the artist ‘hub’ experience begins. Like the Recent Library Category, users can see a categorised view of the artists music in their library. It is resonant of the current Apple Music artist pages. User can tap play or shuffle to begin listening to the artist or go to their Apple Music page.

This is where the start of the artist 'hub' experience begins. Like the Recent Library Category, users can see a categorised view of the artists music in their library. It is resonant of the current Apple Music artist pages. User can tap play or shuffle to begin listening to the artist or go to their Apple Music page.

Favourites shows the users pinned music from said artist, Top Songs shows a users most played songs by said artist. Scrolling down shows the artists albums, playlists, videos and features.

Like the adaptive Library settings, in the artist landing page, users have the option to toggle the view style of each category, turn them on and off and reorder them as they wish.

For sorting, users have the option of title, year released and recently added.

Song Toggle (Artist Page) (Song Toggle (Artist Page))

Individual Artist Page — Songs Individual Artist Page — Songs

Artist Page, Song Toggle Artist Page, Song Toggle

Tapping the songs toggle takes users to all the songs from said artist in their library. The settings contextually change, giving users options to change the text size, show album artwork and song length, mirroring the Library’s ‘Songs’ category.

Album Toggle (Artist Page) (Album Toggle (Artist Page))

Individual Artist Page — Albums Individual Artist Page — Albums

Artist Page, Albums Toggle Artist Page, Albums Toggle

Tapping the albums toggle takes users to all the albums from said artist in their library. The settings contextually change, giving users options to change the album artwork size and change the menu style from vertically swiping to horizontally scrolling.

Playlist Toggle (Artist Page) (Playlist Toggle (Artist Page))

Individual Artist Page — Playlists Individual Artist Page — Playlists

Artist Page, Playlist Toggle Artist Page, Playlist Toggle

Tapping the playlists toggle takes users to all the playlists from said artist in their library as well as showing them the playlists available from Apple Music. The UI is similar to that of the Library Playlist Category complete with the same settings and sorting options as well as different views (i.e. the traditional list view).

Playlist Toggle Sort & Settings Playlist Toggle Sort & Settings

More Toggle (More Toggle)

Individual Artist Page — More Individual Artist Page — More

Artist Page, More Toggle Artist Page, More Toggle

The last toggle on the artist page is more. This is where users can find other media from the artist within their library such as music videos and features.

Album Page (Album Page)

Individual Album Page Individual Album Page

Album Page Toggles Album Page Toggles

Tapping on an album now displays a new UI. I adopted the same toggle menu that dynamically changes whilst in an individual album page. Users can now see more than just a tracklist. They can access album information, where I’ve moved the placement of sections such as the editors notes in the current UI. The more section displays music and content relating the specific album (i.e. more from the artist, music videos specifically from the album era).

Tapping on an album now displays a new UI. I adopted the same toggle menu that dynamically changes whilst in an individual album page. Users can now see more than just a tracklist. They can access album information, where I've moved the placement of sections such as the editors notes in the current UI. The more section displays music and content relating the specific album (ie more from the artist, music videos specifically from the album era).

Users can now edit tracklist sequencing with their own custom arrangement. I have also removed “Show Complete Album” from the current UI and instead added the add (+) glyph to denote which tracks have not been added to the users Library. Lastly, I added a preview button, complete with a custom glyph I made. If users tap on it, they can hear a 30 second preview of the song before adding it to their library

搜索 (Search)

Search Menu 搜索菜单

Search Sort, Filter, Settings Search Sort, Filter, Settings

Here you see the new Search Menu. Similar to the Recent Library category settings, it’s a complete redesign with a similar landing page UI. Recent searches appear on the landing screen, showing the most recently searched results for each section. Users can sort the results seen by title or release date.

Here you see the new Search Menu. Similar to the Recent Library category settings, it's a complete redesign with a similar landing page UI. Recent searches appear on the landing screen, showing the most recently searched results for each section. Users can sort the results seen by title or release date.

Search is now merged into one. I have removed the separate toggles found in the current UI which force users to search their Library and Apple Music separately.

I have added a filter menu so that users can search their Library, Apple Music or both should they wish. In addition, users can opt to set their default search to Library, Apple Music or both in the Search settings instead of using the filter should they have a regular preference, otherwise what they search now will automatically show their Library and Apple Music results combined. In the Search settings, users can also toggle and change the view sequencing of each section within the Search landing page.

New design for searching and results New design for searching and results

Above you can see the new UI changes for tapping the search bar and the consequent Search UI dynamically adapting to display the results from the landing page.

Here you can see the Shazam search feature. Instead of having to go to the Shazam app or access the feature within the Now Playing menu, I decided to include quick access within the search field. Users can tap on the Shazam icon to search for a song quickly, which is often the case when out somewhere. Getting access to the feature quickly was paramount. The results of the Shazam search show the identified song and allows users to quickly add the song to their library, show it on Apple Music or cancel

感言 (Reflections)

Given Apple’s legacy, the Music app and Apple Music as a service have a lot of potential that they surely can leverage. Spotify reigns supreme for a number of reasons (they’re not perfect either but definitely outdo Apple Music in more ways than one). If Apple addressed even the basics of the Music app, they’d be outdoing their competition with ease like they do in other domains. The service side needs huge improvements too but that’s for another day. As an Apple Music user myself, I want to see it thrive. Apple can, of course, do it.

Given Apple's legacy, the Music app and Apple Music as a service have a lot of potential that they surely can leverage. Spotify reigns supreme for a number of reasons (they're not perfect either but definitely outdo Apple Music in more ways than one). If Apple addressed even the basics of the Music app, they'd be outdoing their competition with ease like they do in other domains. The service side needs huge improvements too but that's for another day. As an Apple Music user myself, I want to see it thrive. Apple can, of course, do it.

Hey, Spotify, if Apple come through with an overhaul,

The Size Of This Case Study Write Up (The Size Of This Case Study Write Up)

I realise the format of this case study is extremely excessive. After writing almost 16,000 words for this, I realised, I overdid it. Not many will read this entire thing But it’s a lesson I’ve learnt. I will reduce it for my portfolio/website. Now I know what not to do (i.e. write a thesis) for the next cases study I do. But I figured, publishing this could potentially provide me with feedback from UI/UX’ers as to what I should do. All feedback and critique is valuable.

I realise the format of this case study is extremely excessive. After writing almost 16,000 words for this, I realised, I overdid it. Not many will read this entire thing But it's a lesson I've learnt. I will reduce it for my portfolio/website. Now I know what not to do (ie write a thesis) for the next cases study I do. But I figured, publishing this could potentially provide me with feedback from UI/UX'ers as to what I should do. All feedback and critique is valuable.

Usability Testing & Feedback (Usability Testing & Feedback)

I wish I could test this with users and get some qualitative feedback. The only way I would be able to prove my solutions solved users problems would be with quantifiable data which I don’t have since I did this entire case study alone using online feedback and corroborating this with my own problems with the app. I also don’t have any solid sources for my qualitative data outside online forums (primarily Apple news sites), Reddit, Youtube comments and social media. I just collated the recurring comments and feedback that were prominent.

I wish I could test this with users and get some qualitative feedback. The only way I would be able to prove my solutions solved users problems would be with quantifiable data which I don't have since I did this entire case study alone using online feedback and corroborating this with my own problems with the app. I also don't have any solid sources for my qualitative data outside online forums (primarily Apple news sites), Reddit, Youtube comments and social media. I just collated the recurring comments and feedback that were prominent.

时间 (Time)

Simply put, I had hardly any time to do this entire thing. It was a pipe dream that I pushed myself to my absolute limits to squeeze in at any second I could. You can see in the Youtube compilation, I’ve been working on this every free waking moment I had. From pulling all nighters to literally working on the train to and from work.

Simply put, I had hardly any time to do this entire thing. It was a pipe dream that I pushed myself to my absolute limits to squeeze in at any second I could. You can see in the Youtube compilation, I've been working on this every free waking moment I had. From pulling all nighters to literally working on the train to and from work.

XD Issues (XD Issues)

GOD. Once the project got bigger, my laptop couldn’t handle the power XD needed. I had to force quit a hundred times and have nothing else open just to open files at one point. Half way through the Library section, Adobe XD decided to fry my CPU which meant 2 files got corrupted and I had to redo the entire section from scratch. It cost me a lot of lost time, which isn’t a luxury I had. I think I’ll pivot and try other platforms going forward just to see if they work out better. Since I can’t afford Principle or Sketch, Figma/Invision?

GOD. Once the project got bigger, my laptop couldn't handle the power XD needed. I had to force quit a hundred times and have nothing else open just to open files at one point. Half way through the Library section, Adobe XD decided to fry my CPU which meant 2 files got corrupted and I had to redo the entire section from scratch. It cost me a lot of lost time, which isn't a luxury I had. I think I'll pivot and try other platforms going forward just to see if they work out better. Since I can't afford Principle or Sketch, Figma/Invision?

Interaction Design (Interaction Design)

Micro interactions and the general quality of animations and transitions could, without a doubt, be much better. Again, if I had the software and time to invest in perfecting every tiny little interaction, transition and animation, believe me, I would have. Going forward, I hope I’ll be in a position to have the opportunity to do this. I would love to dive more into IxD.

Micro interactions and the general quality of animations and transitions could, without a doubt, be much better. Again, if I had the software and time to invest in perfecting every tiny little interaction, transition and animation, believe me, I would have. Going forward, I hope I'll be in a position to have the opportunity to do this. I would love to dive more into IxD.

Working Smarter (Working Smarter)

Honestly, if I had an actual plan and more time for this case study other than taking a leap of faith, I would’ve optimised so that I worked smarter and not crammed as much as I could in every day. Again, circumstances left me with no choice. But I would have invested more time in learning how to improve my XD workflow efficiency with master components and states from the get go. Learning how to use assets, linked comps et al properly so I could work faster would have mitigated me spending too much time copying & individually editing assets. Once I got to the end of the Library and Search sections, my workflow reduced from 16 hours to like 4 hours doing the same tasks as I had essentially learned to keep master copies of comps that were easily editable. I learnt the hard way how to do things quicker and easier. I guess this was a good thing as I was learning from my mistakes what not to do each day I revisited the project and started a new section. Also, to reduce the perfectionism. Details are very important in UI UX but obsessing over the tiniest things with the restricted time I had wasn’t smart. I spent hours editing, copying and importing specific images, zooming in to position the divider in a menu a few pixels up and more. I wanted this case study to be pixel perfect, to look real and official, hence why I put so much time and effort into every tiny little thing. Thinking about the design process in depth before making the HiFi prototypes and Chunking the project into pieces rather than cramming would have saved me iterations along the way.

Honestly, if I had an actual plan and more time for this case study other than taking a leap of faith, I would've optimised so that I worked smarter and not crammed as much as I could in every day. Again, circumstances left me with no choice. But I would have invested more time in learning how to improve my XD workflow efficiency with master components and states from the get go. Learning how to use assets, linked comps et al properly so I could work faster would have mitigated me spending too much time copying & individually editing assets. Once I got to the end of the Library and Search sections, my workflow reduced from 16 hours to like 4 hours doing the same tasks as I had essentially learned to keep master copies of comps that were easily editable. I learnt the hard way how to do things quicker and easier. I guess this was a good thing as I was learning from my mistakes what not to do each day I revisited the project and started a new section. Also, to reduce the perfectionism. Details are very important in UI UX but obsessing over the tiniest things with the restricted time I had wasn't smart. I spent hours editing, copying and importing specific images, zooming in to position the divider in a menu a few pixels up and more. I wanted this case study to be pixel perfect, to look real and official, hence why I put so much time and effort into every tiny little thing. Thinking about the design process in depth before making the HiFi prototypes and Chunking the project into pieces rather than cramming would have saved me iterations along the way.

Whats Next? (Whats Next?)

Apple Music App vs Service (Apple Music App vs Service)

I began designing the service side of the Apple Music app — Browse, For You & Radio — before I realised the ideas I have for them go far deeper than system level functionality. They go further into Apple Music at a service level, a very complex beast to tackle in itself. I realised, Apple Music, the app, and Apple Music, the service, are two separate but connected entities under the same umbrella. This case study is a redesign of the app.

The Browse, For You & Radio redesigns I want to do are of the service. This distinction made me realise I wouldn’t be able to redesign the service side in this case study without compromising quality. Some last minute rushed HiFi mockups instead of properly fleshing out my ideas with more time wasn’t a good idea. I actually want to do another UX case study on Apple Music, the service — my ideas for changes to the core UI, brand identity, subscription model et al — which is more than design and feature changes/implementations to improve usability. Music Discovery and Playlists are broken compared to Spotify. The Radio section is severely in need of an entire overhaul. I have a few thousands words worth of notes and sketches of issues with Browse, For You and Radio. I digress. I shall revisit.

The Browse, For You & Radio redesigns I want to do are of the service . This distinction made me realise I wouldn't be able to redesign the service side in this case study without compromising quality. Some last minute rushed HiFi mockups instead of properly fleshing out my ideas with more time wasn't a good idea. I actually want to do another UX case study on Apple Music, the service — my ideas for changes to the core UI, brand identity, subscription model et al — which is more than design and feature changes/implementations to improve usability. Music Discovery and Playlists are broken compared to Spotify. The Radio section is severely in need of an entire overhaul. I have a few thousands words worth of notes and sketches of issues with Browse, For You and Radio. 我离题了。 I shall revisit.

Future Iterations/Axed Ideas (Future Iterations/Axed Ideas)

Majority of my iteration ideas are more so on the service side of Apple Music which I want to dive into in a separate case study to fully flesh them out. Ideas got axed either because of time constraints, better ideas whilst designing or ideas were hard to emulate in XD. I had to prioritise which features were critical to the core experience (essentials) and choose what features would enhance the UX. Tradeoffs were dependent on each feature.

Dark Mode: didn’t have the time but would love to do some HiFi mockups when I do get the chance
Dark Mode: didn't have the time but would love to do some HiFi mockups when I do get the chance
Landscape Mode: again, didn’t have the time but have the sketches and early prototypes, would love to go back when I have the time and make it
Landscape Mode: again, didn't have the time but have the sketches and early prototypes, would love to go back when I have the time and make it
More Accessibility Features: this is complex to a degree so using XD wasn’t going to make this viable for me time wise
More Accessibility Features: this is complex to a degree so using XD wasn't going to make this viable for me time wise
User Stats: akin to screen time, this is intertwined with the Apple Music service ideas I had, hence why cut it)
User Stats: akin to screen time, this is intertwined with the Apple Music service ideas I had, hence why cut it)
iPad version of the app: again, no time to make a working prototype
iPad version of the app: again, no time to make a working prototype
Custom/Animated Album Covers: this is linked to the service concepts I have so I omitted it as to not implement a half baked version
Custom/Animated Album Covers: this is linked to the service concepts I have so I omitted it as to not implement a half baked version
Native FLAC Audio Support: PLEASE Apple!
Native FLAC Audio Support: PLEASE Apple!
Full Screen Cover Art: couldn’t see adjacent tracks which was an integral part of my redesign
Full Screen Cover Art: couldn't see adjacent tracks which was an integral part of my redesign
Mini Now Playing: swiping to change tracks didn’t work, it was obscuring the buttons. I couldn’t find a decent solution so cut it
Mini Now Playing: swiping to change tracks didn't work, it was obscuring the buttons. I couldn't find a decent solution so cut it
Artist Page: auto add/push new music to library from artists (opt in toggle) and following artist — again, tied to the service side, I have an entire concept for artist landing pages in Browse
Artist Page: auto add/push new music to library from artists (opt in toggle) and following artist — again, tied to the service side, I have an entire concept for artist landing pages in Browse
Diction: it is currently broken; when you say something, you still have to tap to get results and cannot end diction with voice, counterintuitive
Diction: it is currently broken; when you say something, you still have to tap to get results and cannot end diction with voice, counterintuitive

My Story, My Why (My Story, My Why)

I didn’t want to preface this case study with my backstory as the work I’ve done is more important and that’s what I want to speak for me. But what I’ve done here is more than just a chance to put what I’m learning into practice. It’s me tackling my circumstances head on and taking my destiny into my own hands. I pray this is the beginning of a new path. Having the time to do this was a luxury (in the context of my personal circumstances). I chose to spend this rare time I had spare on chasing my dream. That birthed this case study.

I didn't want to preface this case study with my backstory as the work I've done is more important and that's what I want to speak for me. But what I've done here is more than just a chance to put what I'm learning into practice. It's me tackling my circumstances head on and taking my destiny into my own hands. I pray this is the beginning of a new path. Having the time to do this was a luxury (in the context of my personal circumstances). I chose to spend this rare time I had spare on chasing my dream. That birthed this case study.

At 26 years old, I tried to go back to University last September to change my life. Then a whole load of things happened — the parent I’ve been living with all my life is now at rock bottom and refusing help and I just got told last week that my father whom I’ve been caring for since my teens is dying and his heart won’t hold up anymore. When I tell you every second of my life went to this case study outside caring for my dad and working, I am not exaggerating. When we got the news about him, I thought, if I can do one thing for my sake and for his before he goes, it’s to finally go after my dream and change my life for the better.

At 26 years old, I tried to go back to University last September to change my life. Then a whole load of things happened — the parent I've been living with all my life is now at rock bottom and refusing help and I just got told last week that my father whom I've been caring for since my teens is dying and his heart won't hold up anymore. When I tell you every second of my life went to this case study outside caring for my dad and working, I am not exaggerating. When we got the news about him, I thought, if I can do one thing for my sake and for his before he goes, it's to finally go after my dream and change my life for the better.

I couldn’t pursue the University scholarship I was awarded in 2013 as I went to work full time to provide for us all. Right now, neither of my parents can work due to their health and I’m supporting us all on one wage. From retail, to corporate and then back to warehouse jobs and now in an IT job that doesn’t pay near enough something liveable to provide for us all. I have not got a penny or career to my name right now. I thought I couldn’t go after my dreams due to my personal circumstances. I’ve just been jumping from job to job trying to survive. Even now, food seems like a luxury. But in life, we are dealt with some cards that can paralyse us. It’s how we react that matters.

I couldn't pursue the University scholarship I was awarded in 2013 as I went to work full time to provide for us all. Right now, neither of my parents can work due to their health and I'm supporting us all on one wage. From retail, to corporate and then back to warehouse jobs and now in an IT job that doesn't pay near enough something liveable to provide for us all. I have not got a penny or career to my name right now. I thought I couldn't go after my dreams due to my personal circumstances. I've just been jumping from job to job trying to survive. Even now, food seems like a luxury. But in life, we are dealt with some cards that can paralyse us. It's how we react that matters.

So, I was faced with a choice. Do I give up and accept my hand? Or do I dare to dream about the career I want?

“You’ve got to find what you love. And that is as true for your work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle… — Steve Jobs

“You've got to find what you love. 对于您的工作和对恋人来说都是如此。您的工作将占据您一生的大部分时间，而真正令您满意的唯一方法就是做您认为出色的工作。做伟大工作的唯一方法就是热爱自己所做的事情。如果尚未找到它，请继续寻找。别解决与内心所有事情一样，当您找到它时就会知道。而且，就像任何伟大的关系一样，随着岁月的流逝，这种关系会越来越好。所以继续寻找，直到找到它。 Don't settle… — Steve Jobs

I choose to dream. I have no expectations for this case study. I did this completely of my own accord. Because I wanted to. I love doing this. Design has always been the light in my dark circumstances. It has been a pleasure grinding away at this. I did it more to prove to myself that my dream is valid and to believe in myself. To show I can push harder than I ever have even when everything around me is in flames. Hell, this submission to a UX publication on Medium might not even get approved. If not, then I’ll self publish. Maybe nobody sees this case study. It’s ok. Because I did this for no other reason than to push myself to never give up on my dream. To believe in possibility. The hands I have been dealt will not be my demise. This case study and writing have been my saviours the last few months.

I choose to dream. I have no expectations for this case study. I did this completely of my own accord. Because I wanted to. I love doing this. Design has always been the light in my dark circumstances. It has been a pleasure grinding away at this. I did it more to prove to myself that my dream is valid and to believe in myself. To show I can push harder than I ever have even when everything around me is in flames. Hell, this submission to a UX publication on Medium might not even get approved. If not, then I'll self publish. Maybe nobody sees this case study. 没关系。 Because I did this for no other reason than to push myself to never give up on my dream. To believe in possibility. The hands I have been dealt will not be my demise. This case study and writing have been my saviours the last few months.

“You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. This approach has never let me down, and it has made all the difference in my life.” — Steve Jobs

“You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. You have to trust in something — your gut, destiny, life, karma, whatever. 这种方法从未让我失望，它改变了我的生活。” — Steve Jobs

Right now, my hopes of being a Product Designer seem impossible. Seem. But they are not. I find myself chasing my own tale trying to juggle survival, self education and looking after my parents. University isn’t my path, not right now at least. It’s a hard pill to swallow. This case study is me taking my situation into my own hands and not throwing in the towel on my goals for good because of my circumstances. Instead of letting my situation trap me, I’m using it as the catalyst to me going harder than ever.

Right now, my hopes of being a Product Designer seem impossible. 似乎。 But they are not. I find myself chasing my own tale trying to juggle survival, self education and looking after my parents. University isn't my path, not right now at least. It's a hard pill to swallow. This case study is me taking my situation into my own hands and not throwing in the towel on my goals for good because of my circumstances. Instead of letting my situation trap me, I'm using it as the catalyst to me going harder than ever.

What’s kept me going? How did I even manage to do this case study amidst everything going on right now? I have no idea. All I remind myself is that years ago, I literally almost died and both my parents are literally dying right now. I’ve survived. I can do this. Nothing is impossible. Life is too short to not go after my dreams, even when I can’t fathom how as I type this. I’ve studied UI & UX theory for a couple years and stayed awake 20 hours everyday the past 10 days to make this happen because I’ve never wanted something so badly in my life. UI/UX is my dream career. I’ll do anything to make it happen. Every second I spent on this project was worth it tenfold. I’ve learnt so much and pushed myself in ways I never thought I could.

What's kept me going? How did I even manage to do this case study amidst everything going on right now? 我不知道。 All I remind myself is that years ago, I literally almost died and both my parents are literally dying right now. I've survived. I can do this. 没有什么是不可能的。 Life is too short to not go after my dreams, even when I can't fathom how as I type this. I've studied UI & UX theory for a couple years and stayed awake 20 hours everyday the past 10 days to make this happen because I've never wanted something so badly in my life. UI/UX is my dream career. I'll do anything to make it happen. Every second I spent on this project was worth it tenfold. I've learnt so much and pushed myself in ways I never thought I could.

The next step? I need a shot. That one chance. A foot in the door within the UI/UX field. Even if I work for absolutely free to start off, I am willing to. The truth is, I’m broke, with no contacts/network and I can’t afford a bootcamp or to study at University. I wish I did, but I don’t. An internship would allow me to learn and get experience whilst I work in the field. This is the only path that is viable for my situation. I want to learn and go after my dreams of being in this field. I want to change my life for the better. I want to actually live and do the things I know in my heart I can work hard to do.

The next step? I need a shot. That one chance. A foot in the door within the UI/UX field. Even if I work for absolutely free to start off, I am willing to. The truth is, I'm broke, with no contacts/network and I can't afford a bootcamp or to study at University. I wish I did, but I don't. An internship would allow me to learn and get experience whilst I work in the field. This is the only path that is viable for my situation. I want to learn and go after my dreams of being in this field. I want to change my life for the better. I want to actually live and do the things I know in my heart I can work hard to do.

This isn’t a plea for a handout or seeking sympathy. This is me looking at my situation and doing something to get through it. Medium has been my saving grace since the end of last year. All I get is rejection emails for design apprenticeships/internships. So I decided to create my own opportunity in the midst of all the chaos instead of waiting for that one congratulations email I pray for.

This isn't a plea for a handout or seeking sympathy. This is me looking at my situation and doing something to get through it. Medium has been my saving grace since the end of last year. All I get is rejection emails for design apprenticeships/internships. So I decided to create my own opportunity in the midst of all the chaos instead of waiting for that one congratulations email I pray for.

As I attempted this case study over the last 8 weeks, I kept these Steve Jobs quotes on loop in my mind.

Here’s to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently — they’re not fond of rules… You can quote them, disagree with them, glorify or vilify them, but the only thing you can’t do is ignore them because they change things… they push the human race forward, and while some may see them as the crazy ones, we see genius, because the ones who are crazy enough to think that they can change the world, are the ones who do.

Here's to the crazy ones, the misfits, the rebels, the troublemakers, the round pegs in the square holes… the ones who see things differently — they're not fond of rules… You can quote them, disagree with them, glorify or vilify them, but the only thing you can't do is ignore them because they change things… they push the human race forward, and while some may see them as the crazy ones, we see genius, because the ones who are crazy enough to think that they can change the world, are the ones who do.

— Steve Jobs

— Steve Jobs

I’m no genius. I realise I have only touched the surface of this field. I probably didn’t even use the right terminology or format for this case study and maybe I didn’t explain the “why” behind all my design decisions properly. But thats what learning is all about — failing and accepting I’ll be a student my entire life. Thank you, Steve. I guess I’m one of the crazy ones. I hope one day I can follow in your footsteps and join Apple. In the meanwhile, I’ll keep dreaming and trying. If you read this far, thank you, sincerely. With all my heart, I truly appreciate you and your time. You even clicking on this piece means more to me than words could ever articulate. I hope I did something worthy enough of your time. Thanks for coming to my TED Talk.

I'm no genius. I realise I have only touched the surface of this field. I probably didn't even use the right terminology or format for this case study and maybe I didn't explain the “why” behind all my design decisions properly. But thats what learning is all about — failing and accepting I'll be a student my entire life. Thank you, Steve. I guess I'm one of the crazy ones. I hope one day I can follow in your footsteps and join Apple. In the meanwhile, I'll keep dreaming and trying. If you read this far, thank you , sincerely. With all my heart, I truly appreciate you and your time. You even clicking on this piece means more to me than words could ever articulate. I hope I did something worthy enough of your time. Thanks for coming to my TED Talk.

翻译自: https://blog.prototypr.io/redesigning-the-apple-music-app-ui-ux-case-study-8c1f4cc13d50