蘋(píng)果風(fēng)格ui設(shè)計(jì)

重點(diǎn) (Top highlight)

TLDR？ UI重新設(shè)計(jì) (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

我沒(méi)有意識(shí)到我為這篇文章寫(xiě)了多少(這是我有史以來(lái)第一次完成的案例研究)，因此，如果您只想重新設(shè)計(jì)UI，那么請(qǐng)?jiān)谖姨幱诠ぷ鳡顟B(tài)時(shí)轉(zhuǎn)到我的Behance帖子以了解該項(xiàng)目。完成我的投資組合和網(wǎng)站的過(guò)程— 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.

首先，我想說(shuō)這個(gè)案例研究的目的只是對(duì)蘋(píng)果的崇敬。 實(shí)際上，我作為設(shè)計(jì)師的夢(mèng)想之一就是為這樣一個(gè)水平的公司工作。 另外，還要感謝Jason Yuan和他令人難以置信的Apple Music案例研究 ，這激發(fā)了我勇往直前并敢于做到這一點(diǎn)。

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.

像杰森一樣，我去年也曾申請(qǐng)?zhí)O果實(shí)習(xí)生。 我也被拒絕了。 這不是他們的錯(cuò)。 那時(shí)，我的蘋(píng)果(非常業(yè)余)投資組合中缺少蘋(píng)果想要的東西。 沒(méi)關(guān)系， 我還不夠好。 也許是因?yàn)槲覜](méi)有學(xué)位并且缺乏專(zhuān)業(yè)經(jīng)驗(yàn)？ 這就是為什么我一直申請(qǐng)實(shí)習(xí)的原因。 無(wú)論如何，我必須變得更好。 我認(rèn)為這是一次主動(dòng)學(xué)習(xí)超越表面水平的UX研究和UI設(shè)計(jì)的機(jī)會(huì)。 我必須自學(xué)任何公司想要尋找和演示的東西，這就是我要在這里嘗試并做的事情。

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.

用大腦通過(guò)心理學(xué)來(lái)解決問(wèn)題，用心去理會(huì)用戶(hù)及其問(wèn)題，而我的靈魂則為設(shè)計(jì)而努力。 它是由不久前，UI / UX是我path.So我實(shí)現(xiàn)了三連勝，我決定讓配不上我的夢(mèng)想。 盡管有我的情況，我還是做了我必須做的。 結(jié)果就是這樣。

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是理想職業(yè)之外，要了解我為什么進(jìn)行此案例研究的更多動(dòng)機(jī)，請(qǐng)閱讀全文。 我不想開(kāi)始解釋我所處環(huán)境的逆境。 我希望我在這方面的工作成為重點(diǎn)，而不是我的奮斗目標(biāo)。 如果您確實(shí)讀完了它，我真的很感激。 全心全意，謝謝。

起始時(shí)間 (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.

去年夏天，我退出工作，試圖思考一些案例研究的想法，以此作為自己學(xué)習(xí)UI / UX的基礎(chǔ)。 我要找的東西就在我眼前。 我的iPhone和Beats一直都粘在我身上。 蘋(píng)果的拒絕是關(guān)鍵。 我最常使用的iOS應(yīng)用困擾著我。 我一直對(duì)Music應(yīng)用感到沮喪。 文字在墻上。 這樣就開(kāi)始了我的旅程。 我一生的自我教學(xué)已經(jīng)擁有扎實(shí)的設(shè)計(jì)背景。 有了HCI，我對(duì)大學(xué)的原理和成為一個(gè)狂熱的用戶(hù)有了基本的了解，他一直在思考為什么我最喜歡的應(yīng)用程序沒(méi)有我希望他們擁有的某些功能。 減少我在零售倉(cāng)庫(kù)工作中花費(fèi)的每一秒鐘，而無(wú)需花費(fèi)大量時(shí)間來(lái)學(xué)習(xí)UI設(shè)計(jì)和UX研究的內(nèi)容，并在Music and Notes應(yīng)用程序之間進(jìn)行切換，剖析了我發(fā)現(xiàn)該應(yīng)用程序是非對(duì)錯(cuò)的每件事。

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.

在我生命中最艱難的時(shí)候，去年七月在Evernote上成為一個(gè)要點(diǎn)是，我(以某種方式)設(shè)法充實(shí)并在最近八周內(nèi)實(shí)現(xiàn)了切實(shí)的東西。 我從12月開(kāi)始剖析Apple的Music應(yīng)用。 您在下面看到的重新設(shè)計(jì)？ 在將近2個(gè)月的手寫(xiě)筆記和草圖整理成我不小心創(chuàng)建的14,000多個(gè)word文檔之后，我花了1周的時(shí)間做到了。 哎呀

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.

是的，我還沒(méi)有睡一個(gè)星期(或過(guò)去幾個(gè)月的大部分時(shí)間)。 我什至怎么寫(xiě)這個(gè)。 誰(shuí)知道？！ 在每一次醒來(lái)的時(shí)候，上下班上下班，以及在工作和照顧生病的父母之外，我一直在不斷地努力完成本案例研究。 我從沒(méi)想過(guò)我真的會(huì)用任何東西做點(diǎn)什么 。 但是我們到了。

My first design in XD, Jan 16th我在XD中的第一個(gè)設(shè)計(jì)，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中所做的第一件事。 僅僅過(guò)了四個(gè)星期，我在這里寫(xiě)這篇文章。 感覺(jué)超現(xiàn)實(shí)。 我敢于使整個(gè)項(xiàng)目真正實(shí)現(xiàn)。 感覺(jué)不真實(shí)，但確實(shí)如此。 對(duì)我來(lái)說(shuō)，這是我一生中最大的成就之一。 提出一個(gè)似乎不可能完成并實(shí)際實(shí)現(xiàn)的想法。 我的生活更加混亂。 我內(nèi)心深信我可以。 而我做到了。 是的 我做這個(gè)案例研究的靈感之一？

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

“除非您向他們展示，否則人們不知道他們想要什么。 這就是為什么我從不依賴(lài)市場(chǎng)研究的原因。” —史蒂夫·喬布斯

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

因此，我嘗試設(shè)計(jì)我(并且根據(jù)我的研究，許多其他用戶(hù))想要的音樂(lè)應(yīng)用程序。

前言 (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.

預(yù)先為互動(dòng)/動(dòng)畫(huà)質(zhì)量致歉。 他們不是最好的。 我買(mǎi)不起Principle或Sketch。 我不得不彌補(bǔ)我所擁有的。 原型的主要目的是比實(shí)際交互更多地演示功能 ，這無(wú)疑比我對(duì)XD所做的要好得多。 我的筆記本電腦無(wú)法處理渲染項(xiàng)目文件所需的功能，因此每次我嘗試記錄實(shí)際的原型時(shí)，XD崩潰或只能進(jìn)行滯后渲染。 我已經(jīng)盡力了。

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

如果您正在閱讀本文，我也做了一段簡(jiǎn)短的YouTube視頻，謝謝。

Thank you謝謝

目標(biāo)-為什么，什么，如何 (The Goal — Why, What, How)

為什么我要重新設(shè)計(jì)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
  以此作為我的第一個(gè)案例研究項(xiàng)目來(lái)實(shí)踐我所有的自學(xué)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應(yīng)用重新設(shè)計(jì)為一種體驗(yàn)，它應(yīng)易于使用并提供許多用戶(hù)一直在要求的功能
• To attempt finding and delivering tangible solutions to the problems I and many users have expressed with the Music app
  為了嘗試找到并提供切實(shí)可行的解決方案，以解決我和許多用戶(hù)使用音樂(lè)應(yīng)用程序表達(dá)的問(wèn)題
• I genuinely love Apple, Music, Design and Psychology more than I could ever express and my dream is to work in this field
  我對(duì)蘋(píng)果，音樂(lè)，設(shè)計(jì)和心理學(xué)的熱愛(ài)超過(guò)了我的想象，我的夢(mèng)想是在這個(gè)領(lǐng)域工作

• 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

  最重要的是？ 我和其他許多人在“音樂(lè)”應(yīng)用中都遇到了重大問(wèn)題，這是我們?cè)S多人每天最多使用的問(wèn)題。 我想看看我是否可以找到并提供針對(duì)許多用戶(hù)使用音樂(lè)應(yīng)用程序表達(dá)的問(wèn)題的切實(shí)解決方案

本案例研究的目標(biāo)是什么？ (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)
  重新設(shè)計(jì)Apple Music應(yīng)用程序用戶(hù)界面以解決用戶(hù)研究中發(fā)現(xiàn)的UX問(wèn)題(包括具有相同問(wèn)題的個(gè)人動(dòng)機(jī))
• To reduce friction between users and their goals through removing frustrations and making the obvious prominent.
  通過(guò)消除挫敗感和明顯表現(xiàn)來(lái)減少用戶(hù)與其目標(biāo)之間的摩擦。
• To optimise the UI (design) with aims to improve the overall UX (usability)
  優(yōu)化UI(設(shè)計(jì))，旨在提高整體UX(可用性)

我要如何達(dá)到目標(biāo)？ (How was I going to reach my goal?)

• Conduct research to identify user pain points/problems and find solutions to said problems
  進(jìn)行研究以確定用戶(hù)的痛點(diǎn)/問(wèn)題并找到解決問(wèn)題的方法
• 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為功能和功能引入新的概念和想法，這些概念和想法將增強(qiáng)“音樂(lè)”應(yīng)用程序中的用戶(hù)體驗(yàn)，并提供大量的用戶(hù)選擇和控件
• 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
  采用來(lái)自整個(gè)Apple生態(tài)系統(tǒng)(macOS，tvOS，watchOS)和iOS 13(本機(jī)應(yīng)用程序)的UI元素，以將所需的UX改進(jìn)應(yīng)用于Music應(yīng)用程序

• 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.

  減輕背離熟悉的步伐； 使用蘋(píng)果公司的人機(jī)界面指南來(lái)保持設(shè)計(jì)的一致性，在現(xiàn)有用戶(hù)界面的基礎(chǔ)上，重點(diǎn)在于提高可用性，而不是為了創(chuàng)造外國(guó)體驗(yàn)而對(duì)美學(xué)進(jìn)行全面改革； 通過(guò)加強(qiáng)而不是消滅力求一致性和規(guī)律性。

初步觀(guān)察 (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.

我這樣做的主要意圖很簡(jiǎn)單-我想重新設(shè)計(jì)Apple Music應(yīng)用程序，使其成為一種體驗(yàn)，一種易于使用，并提供許多用戶(hù)所要求的功能。 音樂(lè)本來(lái)就是要享受的，所以我們與之互動(dòng)的經(jīng)歷也應(yīng)該如此。 我喜歡這項(xiàng)服務(wù)，但我和研究中的大多數(shù)用戶(hù)對(duì)該應(yīng)用程序感到沮喪。

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.

蘋(píng)果產(chǎn)品以其完美無(wú)瑕的奢華設(shè)計(jì)和易用性而聞名。我想將蘋(píng)果的身份帶回到他們的根源之一-音樂(lè)。

Me: MusicApple:

我：音樂(lè)蘋(píng)果：

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.

好吧，撇開(kāi)所有笑話(huà)，iPod和iTunes是Apple歷史不可或缺的一部分。 這是他們的DNA。 該應(yīng)用程序的當(dāng)前版本似乎已經(jīng)準(zhǔn)備就緒，可以進(jìn)行升級(jí)。 Apple已在iOS 13中更新了其所有本機(jī)系統(tǒng)應(yīng)用程序，但音樂(lè)是具有最少新功能的少數(shù)應(yīng)用程序之一，這在A(yíng)pple網(wǎng)站的“ 新iOS 13功能”頁(yè)面上得到證實(shí)。

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.

蘋(píng)果公司以對(duì)細(xì)節(jié)的關(guān)注著稱(chēng)，在他們所做的每件事中都將其最細(xì)微的細(xì)節(jié)盡收眼底 ，這就是為什么它混淆了音樂(lè)似乎沒(méi)有得到同樣的啟發(fā)的原因。 在當(dāng)前的迭代中，Apple Music(作為應(yīng)用程序)似乎已經(jīng)以許多方式回歸。

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.

用戶(hù)來(lái)源問(wèn)題？ 很多核心的基本功能和特性隱藏起來(lái)，并有上體驗(yàn)沒(méi)有強(qiáng)調(diào)這是音樂(lè)為中心，東西，蘋(píng)果公司已經(jīng)建立了其他的iOS原生應(yīng)用13。 諸如“照片”，“家庭”和“健康”之類(lèi)的應(yīng)用程序讓人感覺(jué)井井有條且專(zhuān)注。 蘋(píng)果在這些應(yīng)用程序的UI和UX上放置的詳細(xì)程度使它們感到上下文相關(guān)，從而又是一種體驗(yàn)。 iOS 13中新的Photos UI非常出色，UX感覺(jué)很完美 。 感覺(jué)該應(yīng)用程序是真正為它的目的而設(shè)計(jì)的，并牢記每個(gè)微小的字形，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.

蘋(píng)果音樂(lè)經(jīng)歷了多次迭代，每個(gè)迭代都極大地切換了視覺(jué)識(shí)別和界面。 與早期版本的iOS相比，它們已經(jīng)走了很長(zhǎng)一段路。 多年來(lái)，我一直喜歡特定的設(shè)計(jì)選擇。 這些細(xì)微的差別確實(shí)增強(qiáng)了功能和設(shè)計(jì)方面的體驗(yàn)。 但是很多時(shí)候，他們被削減和/或改變了。 用戶(hù)必須學(xué)習(xí)每次大修時(shí)如何使用新版本的Apple Music。 現(xiàn)在，該應(yīng)用程序感覺(jué)與其他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!).

當(dāng)然，該應(yīng)用程序的當(dāng)前迭代工作正常并且看起來(lái)很干凈，但是為什么我仍然必須進(jìn)入菜單才能隨機(jī)播放和重復(fù)播放歌曲？ 就像寫(xiě)作一樣，它是要使一切變得簡(jiǎn)單而顯而易見(jiàn)。 那就是我試圖做的(我正在看著您，當(dāng)前的“正在播放”菜單中充滿(mǎn)了非上下文/損壞的功能！)。

So instead of iOS 13 being like:

因此，不是像iOS 13那樣：

iOS 13 vs MusiciOS 13 vs音樂(lè)

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

音樂(lè)方面，我希望她能在飯桌上坐下！

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.

音樂(lè)應(yīng)用似乎已不再是蘋(píng)果的優(yōu)先考慮事項(xiàng)。 關(guān)于音樂(lè)的所有資源和精力似乎都投入到了服務(wù)/流媒體平臺(tái) Apple Music中。 但是，通過(guò)它交付應(yīng)用的容器app(應(yīng)用程序 )應(yīng)該同樣重要，即使正確無(wú)誤。 這正是iPhone用戶(hù)選擇蘋(píng)果競(jìng)爭(zhēng)對(duì)手的原因。

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.

本質(zhì)上，此案例研究是我嘗試更新Music應(yīng)用程序，就像它與其他本機(jī)Apple應(yīng)用程序一樣進(jìn)行了iOS 13深度升級(jí)一樣。 我創(chuàng)建此程序是為了解決我和許多 Apple用戶(hù)在應(yīng)用程序中遇到的問(wèn)題。 作為定性用戶(hù)研究的用戶(hù)，這是我自己的設(shè)計(jì)直覺(jué)和個(gè)人需求的結(jié)晶。 改進(jìn)UX的目標(biāo)是什么？ 為了達(dá)到協(xié)同作用并應(yīng)用Apple的客戶(hù)風(fēng)氣為重點(diǎn)。 簡(jiǎn)單易用-幫助用戶(hù)使用該應(yīng)用程序。

設(shè)計(jì)過(guò)程 (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:

設(shè)計(jì)是形式和功能-外觀(guān)(UI)和工作方式(UX)。 正如我之前所說(shuō)，此UX案例研究的重點(diǎn)是通過(guò)設(shè)計(jì)提高M(jìn)usic應(yīng)用的功能和可用性。 與音樂(lè)播放器的核心功能有關(guān)的應(yīng)用程序領(lǐng)域包括：

• Library

  圖書(shū)館

• Album Pages

  專(zhuān)輯頁(yè)面

• Artist Pages

  藝術(shù)家頁(yè)面

• Now Playing

  正在播放

• Search

  搜索

• General Music Settings/Features

  常規(guī)音樂(lè)設(shè)置/功能

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.

這些是我重新設(shè)計(jì)的領(lǐng)域。 這主要是系統(tǒng)級(jí)的重新設(shè)計(jì)(即專(zhuān)注于應(yīng)用設(shè)計(jì)， 作為音樂(lè)播放器的功能和功能)，而不是作為服務(wù)的 Apple Music(例如，瀏覽，For You和作為音樂(lè)平臺(tái)的電臺(tái))，這是我要分別進(jìn)行的案例研究。

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.

我想優(yōu)化UI(設(shè)計(jì))，以專(zhuān)注于改善總體UX(可用性)，因?yàn)閷?shí)際上它們?cè)诨パa(bǔ)并相互依賴(lài)以?xún)?yōu)化用戶(hù)體驗(yàn)時(shí)通常被視為同義詞。 為此，我在設(shè)計(jì)過(guò)程中采用了整體方法。 我剖析了整個(gè)Apple生態(tài)系統(tǒng)中設(shè)備和服務(wù)的UI和UX，目的是實(shí)現(xiàn)一種均勻的重新設(shè)計(jì)，使之熟悉，新鮮且功能齊全。

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:

在過(guò)去的8周中，我的設(shè)計(jì)方法和思考過(guò)程相互交織并反復(fù)進(jìn)行。 整個(gè)案例研究中我的設(shè)計(jì)過(guò)程的簡(jiǎn)要提要：

我的角色 (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； 我獨(dú)自完成了整個(gè)案例研究，所以我戴著每頂帽子(盡管千篇一律)。 在一個(gè)標(biāo)題中？ 產(chǎn)品設(shè)計(jì)師。

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.

進(jìn)行用戶(hù)研究的目的是識(shí)別用戶(hù)問(wèn)題并找出原因以證明我在本案例研究中提出的每種解決方案。 作為設(shè)計(jì)師，我不費(fèi)吹灰之力就想到了創(chuàng)意。 我個(gè)人對(duì)心理學(xué)的迷戀使我能夠從多方面的角度投入研究。 作為該應(yīng)用程序的用戶(hù)，我問(wèn)自己：缺少哪些明顯的功能？ 為什么該菜單隱藏了我經(jīng)常使用的功能？ 我為什么不能這樣做？ 我無(wú)法在A(yíng)pple Music中使用競(jìng)爭(zhēng)對(duì)手的應(yīng)用程序做什么？ 然后，我進(jìn)行了定性的用戶(hù)研究，證實(shí)了我的個(gè)人發(fā)現(xiàn)和問(wèn)題。 大多數(shù)用戶(hù)報(bào)告的有關(guān)該應(yīng)用程序當(dāng)前迭代的問(wèn)題都反映了我的觀(guān)點(diǎn)。

進(jìn)行定性研究 (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.

由于我是一個(gè)人進(jìn)行案例研究，并在工作之余業(yè)余時(shí)間里，我沒(méi)有太多機(jī)會(huì)進(jìn)行定量的用戶(hù)研究或獲得時(shí)間。 我在自己的“為什么”之外進(jìn)行的定性研究是對(duì)在線(xiàn)用戶(hù)的觀(guān)察，評(píng)論，想法和感受的綜合結(jié)果(來(lái)源-社交媒體，Apple粉絲和新聞網(wǎng)站的論壇和評(píng)論以及流行的公共在線(xiàn)論壇) 。 它涉及確定不同類(lèi)型的Apple Music用戶(hù)以及他們?cè)趹?yīng)用程序中遇到的問(wèn)題。 敘述基本上是相同的，它使我能夠撰寫(xiě)有關(guān)當(dāng)前用戶(hù)體驗(yàn)的故事，該故事肯定了我的設(shè)計(jì)決策和觀(guān)察結(jié)果。

用戶(hù)研究流程 (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?

  定義 ：通過(guò)親自剖析該應(yīng)用程序以及對(duì)用戶(hù)反饋以及對(duì)功能/功能的要求(論壇，Apple新聞網(wǎng)站用戶(hù)，社交媒體)進(jìn)行定性的在線(xiàn)研究，找出問(wèn)題所在。 當(dāng)前版本有什么問(wèn)題？ 我的應(yīng)用程序是音樂(lè)和Apple愛(ài)好者，我會(huì)遇到什么問(wèn)題？ 用戶(hù)在使用該應(yīng)用程序時(shí)表達(dá)了哪些問(wèn)題？ 我們的意見(jiàn)相符嗎？

• 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.

  范圍/受眾需求 ：認(rèn)識(shí)到應(yīng)用程序的通用性，并專(zhuān)注于用戶(hù)旅程的共同目標(biāo)； 通過(guò)迎合休閑用戶(hù)和發(fā)燒友，與各種不同的用戶(hù)產(chǎn)生共鳴。

• 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.

  競(jìng)爭(zhēng)對(duì)手分析 ：查看Spotify UI，Apple Music缺少什么？ 許多用戶(hù)因?yàn)槠浠局R(shí)和更多選擇(例如，UI中按鈕/功能的放置)而喜歡競(jìng)爭(zhēng)對(duì)手。分析用戶(hù)對(duì)競(jìng)爭(zhēng)對(duì)手服務(wù)的偏好時(shí)，為什么Apple客戶(hù)使用Spotify而不使用Apple Music？ 如果用戶(hù)使用過(guò)Spotify，他們甚至?xí)谕鸄pple Music中目前缺少的最基本功能。 他們將期望獲得豐富的，充實(shí)的，豐富的用戶(hù)控制和選擇經(jīng)驗(yàn)。

2.構(gòu)想 (2. Ideation)

• Collated all written notes into one document, distilled into actionable steps for designing in XD along with sketches, wireframes et al.
  將所有書(shū)面注釋整理到一個(gè)文檔中，并與草圖，線(xiàn)框等一起提煉為可操作的步驟，以便在XD中進(jìn)行設(shè)計(jì)。
• Analysing my research notes and using them to create sketches, wireframes, affinity maps, UX flow, information architecture diagrams, current UI annotations et al.
  分析我的研究筆記，并使用它們創(chuàng)建草圖，線(xiàn)框，親和度圖，UX流，信息體系結(jié)構(gòu)圖，當(dāng)前的UI注釋等。
• Dissecting the Apple ecosystem across hardware and software to identify design trends and implement them into my redesign.
  在硬件和軟件上剖析Apple生態(tài)系統(tǒng)，以識(shí)別設(shè)計(jì)趨勢(shì)并將其實(shí)施到我的重新設(shè)計(jì)中。
• Synthesising my research findings and personal notes.
  綜合我的研究發(fā)現(xiàn)和個(gè)人筆記。
• 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.
  對(duì)于用戶(hù)流，我想到了每個(gè)序列的想法。 我畫(huà)了一些，您可以在我的草圖/線(xiàn)框圖中看到。 但是，大多數(shù)情況下，我只是在腦海中想象出序列，并在設(shè)計(jì)時(shí)創(chuàng)建了序列。 在XD中進(jìn)行設(shè)計(jì)時(shí)，我經(jīng)常想出更好，更精致的用戶(hù)流程序列。

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.不是構(gòu)思，這里是此案例研究的Adobe XD Project文件中的原型線(xiàn)。 最初，我計(jì)劃只做HiFi實(shí)體模型，但最終我希望筆記本電腦可以處理渲染的所有交互，狀態(tài)和動(dòng)畫(huà)連接。 Collection of my sketches/wireframes/information architecture diagrams.我的草圖/線(xiàn)框/信息架構(gòu)圖的集合。 actually annotated).實(shí)際上我注釋了近50個(gè))。

3.設(shè)計(jì)原則 (3. Design Principles)

設(shè)計(jì)系統(tǒng) (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.

我想維護(hù)Apple的iOS設(shè)計(jì)原則，因此遵守Apple人機(jī)界面指南并使用其設(shè)計(jì)系統(tǒng)。 本案例研究不是關(guān)于在UI方面重新發(fā)明輪子。 我們的目標(biāo)是升級(jí)應(yīng)用程序，而不是通過(guò)新的設(shè)計(jì)系統(tǒng)對(duì)其進(jìn)行全面檢查。 它的目的是基于A(yíng)pple已經(jīng)奠定的當(dāng)前基礎(chǔ)，并利用它來(lái)最大化用戶(hù)體驗(yàn)。 在指導(dǎo)方針中，蘋(píng)果公司說(shuō)“明智地使用顏色進(jìn)行交流”，這是我在整個(gè)項(xiàng)目中始終要做的事情。

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.

我主要使用蘋(píng)果公司的官方iOS UI套件，但也從tvOS，macOS和watchOS UI套件中提取了一些元素，以實(shí)現(xiàn)我要構(gòu)建的同質(zhì)重新設(shè)計(jì)。 我希望Music應(yīng)用程序不僅可以與iOS 13交織在一起，而且還可以與整個(gè)Apple生態(tài)系統(tǒng)交織在一起，以便您可以在硬件和軟件之間移動(dòng)并感到團(tuán)結(jié)，而不僅僅是在iOS內(nèi)部的應(yīng)用程序之間。 我還清理了一些細(xì)微的東西，例如導(dǎo)航菜單及其字形之間的分隔線(xiàn)的位置，因?yàn)楹铣晌锟瓷先ヂ晕⒂行┢x。 向上輕推幾個(gè)像素就可以了。 是的，我對(duì)每個(gè)文本的pt大小，分隔線(xiàn)像素位置和元素不透明度都非常謹(jǐn)慎。 我中的完美主義者跳了出來(lái)。 高度的細(xì)節(jié)和準(zhǔn)確性對(duì)我來(lái)說(shuō)非常重要，直到我鍵入歌曲標(biāo)題的每個(gè)字母為止。

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).

  系統(tǒng)顏色 ：從調(diào)色板中選擇的幾種，以保持音樂(lè)品牌和視覺(jué)標(biāo)識(shí)的完整性(粉紅色，灰色，白色，黑色)。

• 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).

  系統(tǒng)填充，背景，材料 ：根據(jù)各個(gè)元素(例如，按鈕和模式卡等的第二層和第三層)傳達(dá)不同級(jí)別的高程。

• 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.

  文本 ：類(lèi)似于系統(tǒng)顏色，保留與樣式指南中概述的相同的樣式，對(duì)齊方式，大小和顏色，以保持視覺(jué)識(shí)別并基于iOS 13中的類(lèi)型使用； 讓用戶(hù)熟悉它。

• 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.

  設(shè)計(jì)模板 ：使用官方的模式表，通知，小部件等來(lái)維護(hù)用于UI組成的設(shè)計(jì)原則； 修改它們以創(chuàng)建新的自定義模板和組件。

• 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元素 ：欄，按鈕，控件，表格，標(biāo)簽，滑塊等； 我確實(shí)對(duì)其中許多進(jìn)行了修改(包括SF Symbols的字形)，以實(shí)現(xiàn)一種既具有感覺(jué)又看起來(lái)新穎但同時(shí)又“官方”的美學(xué)。

iOS 13視覺(jué)方向 (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.

我有意實(shí)現(xiàn)了iOS 13中部署的新設(shè)計(jì)美學(xué)/重點(diǎn)。如果您查看iOS 13中本機(jī)系統(tǒng)應(yīng)用程序的UI，則大多數(shù)(如果不是全部)都進(jìn)行了重大或至少是重大的設(shè)計(jì)更新。 他們看起來(lái)凝聚力一致。 系統(tǒng)應(yīng)用看起來(lái)很符合iOS 13的設(shè)計(jì)提示。您可以通過(guò)實(shí)現(xiàn)復(fù)雜的設(shè)計(jì)細(xì)節(jié)(例如使用SF Pro Rounded類(lèi)型，更大的標(biāo)題，文本對(duì)齊，層次結(jié)構(gòu)的各種類(lèi)型大小，文本和字形的系統(tǒng)顏色范圍增加，模式卡而不只是按鈕，更多使用模糊的組件和覆蓋等。

iOS 13設(shè)計(jì)分析 (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:

在剖析本機(jī)iOS應(yīng)用程序的視覺(jué)設(shè)計(jì)時(shí)，我發(fā)現(xiàn)了要在重新設(shè)計(jì)中實(shí)現(xiàn)的各種設(shè)計(jì)趨勢(shì)和主題，尤其是從“ 照片”應(yīng)用程序獲得了很多啟發(fā)：

• TV — the toggle and search, individual pages for shows/movies have better design than current artists pages

  電視 -切換和搜索，用于表演/電影的單個(gè)頁(yè)面比當(dāng)前的藝術(shù)家頁(yè)面具有更好的設(shè)計(jì)

• 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

  照片 —相冊(cè)列表，相鄰的滾動(dòng)視圖，每種視圖具有不同視圖的類(lèi)別切換，相冊(cè)網(wǎng)格涵蓋了放大和縮小的整個(gè)視口，搜索具有兩個(gè)類(lèi)別和智能建議，模糊的組件和元素

• 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

  主頁(yè) -背景應(yīng)用程序的材質(zhì)元素涵蓋了完整的視口，相鄰的滑動(dòng)菜單，“收藏夾”部分，“滾動(dòng)”部分，帶有上下文字形和文本且組成相同的小型模式卡片

• Maps — collections stack for grouping places

  地圖 -用于將地點(diǎn)分組的集合堆棧

• Health — modal cards as buttons/options, coloured glyphs

  運(yùn)行狀況 -模式卡用作按鈕/選項(xiàng)，彩色字形

• 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

  新聞 -厚字形； 滑動(dòng)以保存(不喜歡)，標(biāo)題為粗體和大頭棒，無(wú)限滾動(dòng)，在文本和按鈕菜單中使用顏色(粉紅色和紅色，帶有相鄰滾動(dòng)條的小型模式卡片菜單)

• Reminders — modal card menu with contextual coloured glyphs, circle glyphs for buttons, contextual keyboard suggestions

  提醒 -模態(tài)卡菜單，帶有上下文彩色字形，用于按鈕的圓形字形，上下文鍵盤(pán)建議

自定義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創(chuàng)建自定義字形(除了從官方UI工具包中創(chuàng)建新的UI元素之外)。 我中的完美主義者又跳了出來(lái)。 為什么？ 有這么多的系統(tǒng)從字形符號(hào)SF失蹤。 我必須親自從Apple網(wǎng)站和/或通過(guò)我的iPhone的屏幕截圖來(lái)翻錄/重新創(chuàng)建像AirPods Pro這樣的字形，然后在Illustrator中對(duì)其進(jìn)行矢量化處理。 另外，我想在SF Symbols中使用的某些字形是相當(dāng)模糊的，并且需要一些進(jìn)一步的上下文，以便對(duì)于我嘗試構(gòu)建的內(nèi)容盡可能具體。 實(shí)際上，我最終構(gòu)建了自己的“官方定制” Apple UI套件。 微觀(guān)設(shè)計(jì)元素會(huì)影響宏觀(guān)用戶(hù)體驗(yàn)。 就像生活中的其他一切一樣，這些小事情確實(shí)會(huì)加重。

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).

對(duì)于下面重新設(shè)計(jì)的每個(gè)部分，我將解釋在研究過(guò)程中發(fā)現(xiàn)的問(wèn)題( 是什么 )，以證明提出的解決方案是正確的( 原因) 。 我創(chuàng)建這些功能的全部原因是我想要它們，并且感覺(jué)它們會(huì)以某種方式改進(jìn)UX(如Steve所說(shuō)，有時(shí)人們不知道自己想要什么，除非您將其提供給他們，這是我在這方面的大膽嘗試)。

5.原型與測(cè)試 (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.
  老實(shí)說(shuō) 隨手進(jìn)行化妝，弄清楚如何用雙手制作腦海和筆記。
• 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應(yīng)用程序進(jìn)行自我測(cè)試，然后將項(xiàng)目發(fā)送給我遇到的一些UX聯(lián)系人，并要求他們進(jìn)行在線(xiàn)審核。

我的Apple Music應(yīng)用重新設(shè)計(jì) (My Apple Music App Redesign)

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

因此，上述結(jié)果達(dá)到了頂點(diǎn)。 您一直在等待的那一刻，對(duì)嗎？ 對(duì)？

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

好的，我最后閉嘴，讓設(shè)計(jì)進(jìn)行討論。 讓我們開(kāi)始。

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.

對(duì)于每種功能，我的方法是進(jìn)行用戶(hù)研究，查看每種功能，詳細(xì)說(shuō)明用戶(hù)對(duì)當(dāng)前UI所表達(dá)的問(wèn)題并將其轉(zhuǎn)化為切實(shí)可行的解決方案。 我將解釋為什么我認(rèn)為我的設(shè)計(jì)決策能夠解決用戶(hù)問(wèn)題，并達(dá)到我為此案例研究設(shè)定的主要UX目標(biāo)的原因。

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

TLDR —如果我更改/添加了一個(gè)功能：問(wèn)題+解決方案=什么+原因。

First up…

第一…

正在播放 (Now Playing)

Now Playing Core UI Redesign正在播放核心UI重新設(shè)計(jì)

核心UI重新設(shè)計(jì) (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.

我開(kāi)始了整個(gè)案例研究，重新設(shè)計(jì)了“正在播放”。 蘋(píng)果公司在整個(gè)iOS 13中更加強(qiáng)調(diào)使用模糊的元素和組件，特別是在系統(tǒng)材料(如主屏幕停靠，通知)以及本機(jī)應(yīng)用程序的UI內(nèi)。 我想采用這種設(shè)計(jì)美學(xué)，并將其應(yīng)用到``正在播放''UI和整個(gè)Music應(yīng)用程序中。您看到的結(jié)果是我創(chuàng)建的``透明''主題(以及反映相同的純白色設(shè)計(jì)的``扁平''主題)在當(dāng)前用戶(hù)界面中；向下滾動(dòng)以查看更多)。 每個(gè)設(shè)計(jì)決策都是為了滿(mǎn)足我所想到的UX目標(biāo)而做出的-增強(qiáng)功能的清晰度和易于使用的功能(更少的水龍頭)，同時(shí)升級(jí)應(yīng)用程序的視覺(jué)設(shè)計(jì)，使其與iOS 13原生版本相匹配。 利用UI來(lái)改善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:

我剖析了下面每個(gè)功能的問(wèn)題和解決方案，但就整體UI設(shè)計(jì)而言，這是我添加/更改的內(nèi)容：

• 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
  “透明”主題的背景素材元素是動(dòng)態(tài)的，并針對(duì)當(dāng)前播放的每首歌曲反映了封面的模糊版本； 隨著軌道的變化，UI的背景也會(huì)變化
• Adjacent songs, previous and next, can now be seen and swiped to switch between playing which is not possible in the current UI
  現(xiàn)在可以查看和滑動(dòng)相鄰的歌曲(上一首和下一首)，并在播放之間切換，這在當(dāng)前用戶(hù)界面中是不可能的
• 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
  蘋(píng)果在使用粉紅色的系統(tǒng)顏色時(shí)會(huì)更多地根據(jù)上下文來(lái)區(qū)分活動(dòng)組件，例如粉紅色表示活動(dòng)按鈕/選項(xiàng)/當(dāng)前歌曲； 黑色/灰色表示無(wú)效的按鈕/選項(xiàng)等
• 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
  底部導(dǎo)航菜單不再隱藏在“正在播放”屏幕中； 我在常規(guī)音樂(lè)設(shè)置中添加了一個(gè)選項(xiàng)來(lái)顯示/隱藏菜單，以便用戶(hù)可以根據(jù)喜好選擇
• 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
  回放控件之間的組成和間距更緊密，以最大化空白并創(chuàng)建空間以添加隱藏在當(dāng)前UI的菜單中的基本核心功能(隨機(jī)，重復(fù))，以減少用戶(hù)執(zhí)行常見(jiàn)任務(wù)之間的摩擦
• 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
  通過(guò)減輕隱藏核心功能到菜單中或強(qiáng)迫用戶(hù)輕敲某些內(nèi)容(例如，輕掃手勢(shì)以更改曲目，輕擊以重復(fù)播放而不是輕擊兩次)，實(shí)現(xiàn)單一的手勢(shì)交互以執(zhí)行用戶(hù)熟悉并期望的核心音樂(lè)功能。與當(dāng)前用戶(hù)界面等相同)； 以盡可能最小的方式執(zhí)行任務(wù)

• 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

  隨機(jī)播放和重復(fù)播放不再隱藏在菜單中， 更少的點(diǎn)擊即可查找和激活； 這些是任何音樂(lè)應(yīng)用程序都不應(yīng)隱藏在菜單中的核心基本功能，這個(gè)問(wèn)題使大多數(shù)(即使不是全部)用戶(hù)感到非常困惑。 這些功能在生態(tài)系統(tǒng)內(nèi)其他地方的音樂(lè)UI中非常突出(watchOS和macOS中的音樂(lè)，甚至是CarPlay！)； 當(dāng)前的用戶(hù)界面要求用戶(hù)進(jìn)入“上一個(gè)下一個(gè)”菜單才能同時(shí)激活，字形也很小并且在此菜單中幾乎看不到

Even CarPlay has repeat and shuffle in the Now Playing UI甚至CarPlay在“正在播放”用戶(hù)界面中也重復(fù)播放和隨機(jī)播放

• 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
  現(xiàn)在，“跟蹤時(shí)間”滑塊可實(shí)現(xiàn)顏色和變化的權(quán)重，以更清晰地指示到目前為止已過(guò)去的時(shí)間和剩余的跟蹤時(shí)間，幾乎就像填充效果一樣
• 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
  音量滑塊的設(shè)計(jì)更緊湊，旋鈕更小，它還鏡像了當(dāng)前音量指示器的調(diào)色板，當(dāng)您按下iPhone的音量按鈕時(shí)(不在“正在播放”屏幕中時(shí))，它會(huì)顯示/隱藏，我只是將其水平翻轉(zhuǎn)并稍作調(diào)整
• 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
  在我重新設(shè)計(jì)時(shí)，AirPlay現(xiàn)在具有上下文字形，例如AirPods Pro。 當(dāng)前，無(wú)論使用哪種音頻設(shè)備，UI都具有通用的AirPlay字形。 添加上下文字形可以向用戶(hù)傳達(dá)清晰的信息，因?yàn)樗麄兛梢粤⒓纯吹秸趯⒁纛l流傳輸?shù)降奶囟ㄔO(shè)備/配件，而不是閱讀文本或必須進(jìn)入菜單查看正在使用的音頻設(shè)備
• 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
  整個(gè)UI中的上下文和自定義標(biāo)志符號(hào)為用戶(hù)增加了深度和清晰度，目的是減輕歧義并增強(qiáng)凝聚力和連接性
• 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
  添加了新的“相冊(cè)菜單”按鈕(向下滾動(dòng)以深入查看此功能)； 我使用SF符號(hào)的組合為此創(chuàng)建了一個(gè)自定義上下文字形。 您可以在下面看到此新菜單

• 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的較新官方變體更新了導(dǎo)航菜單中的所有字形； 當(dāng)前的UI具有更硬的字形，沒(méi)有圓角。 我還將菜單中的兩個(gè)正式字形組合在一起，使之與iOS 13上使用的更圓和更粗的字形相匹配，從而在菜單中為“ 圖書(shū)館”創(chuàng)建了一個(gè)自定義字形。還更改了該字形以將“正在播放”屏幕向下滑動(dòng)為向下的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
  專(zhuān)輯/播放列表圖稿和相鄰音軌下的陰影略顯突出，以沿z軸傳達(dá)高度和層次結(jié)構(gòu)，而不是感覺(jué)太平坦或背景材料的一部分

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

好的，現(xiàn)在進(jìn)入各個(gè)“正在播放”功能和更改！

音樂(lè)應(yīng)用主題 (Music App Themes)

Music App Themes音樂(lè)應(yīng)用主題

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的重新設(shè)計(jì)，我決定制作一些特定于應(yīng)用程序的主題。 除了整個(gè)系統(tǒng)， 還有一些視覺(jué)選項(xiàng)。 用戶(hù)可以選擇首選的視覺(jué)樣式-有些人可能喜歡“高斯”透明主題外觀(guān)，而另一些人可能喜歡帶有純主題的UI當(dāng)前的“扁平”感覺(jué)。 如果我有更多的時(shí)間，我會(huì)為兩者都制作系統(tǒng)暗模式主題變體，但是您可以在此處看到系統(tǒng)亮模式音樂(lè)應(yīng)用主題。

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.

一些用戶(hù)要求能夠自定義單個(gè)應(yīng)用程序的外觀(guān)，而不僅僅是自定義適用于亮或暗模式的系統(tǒng)范圍主題。 此外，在整個(gè)iOS 13中，所有本機(jī)應(yīng)用程序都使用模糊和平坦的UI元素。 我覺(jué)得這是一個(gè)很好的機(jī)會(huì)，可以為用戶(hù)提供更多可自定義的選項(xiàng)，以使應(yīng)用程序的體驗(yàn)更加個(gè)性化和精心策劃，這是我旨在在每個(gè)功能/更改中實(shí)現(xiàn)的目標(biāo)。

碼頭 (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.

介紹， 碼頭 ！ 我創(chuàng)建的新功能。 這個(gè)主意是從主屏幕停靠站想到的。 我想找到一個(gè)解決方案，如果用戶(hù)選擇將其隱藏在設(shè)置中(我添加了一個(gè)新選項(xiàng))，并且可以替換底部的導(dǎo)航菜單，并且還創(chuàng)建了一種非侵入式解決方案來(lái)替換當(dāng)前的“ Mini Now Play”組件(其中的組件過(guò)多)阻塞性和過(guò)時(shí)的變體(例如鎖定屏幕和AirPlay變體)。 對(duì)象模糊已經(jīng)應(yīng)用于基座的材質(zhì)，因?yàn)槲蚁Ｍ穷?lèi)似于主屏幕基座的“浮動(dòng)”組件。

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.

許多用戶(hù)對(duì)當(dāng)前的UI元素缺乏選擇和替代表示了疑問(wèn)，例如缺少顯示或隱藏底部導(dǎo)航菜單以及多個(gè)Mini Player組件(即，在庫(kù)和鎖定屏幕中看到的變體)缺少功能或太阻塞了。 用戶(hù)還表達(dá)了這樣的問(wèn)題，即如果不點(diǎn)擊“上一個(gè)下一個(gè)”菜單以查看即將播放的歌曲列表，就無(wú)法在“正在播放”屏幕(或其他任何地方)中查看下一個(gè)歌曲是什么。

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.

我創(chuàng)建了音樂(lè)Dock，以一種解決方案解決所有這些問(wèn)題。 如果在應(yīng)用程序中顯示/隱藏底部導(dǎo)航菜單，則可以選擇使用停靠欄，它可以將多個(gè)元素合而為一。 您也可以同時(shí)使用停靠欄和底部導(dǎo)航菜單(在這種情況下，停靠欄內(nèi)容將適應(yīng)此選擇)。 播放控件兩側(cè)的兩個(gè)外部按鈕將根據(jù)用戶(hù)在UI內(nèi)的位置的上下文進(jìn)行調(diào)整。 基座上設(shè)有傳統(tǒng)的底部導(dǎo)航菜單，可在屏幕之間切換，顯示下一首曲目，而無(wú)需離開(kāi)“正在播放”屏幕(已完成我創(chuàng)建的新的自定義上下文字形)，在“上一個(gè)下一個(gè)”中排隊(duì)，并包含一個(gè)詳細(xì)的AirPlay部分，以顯示正在播放音頻和設(shè)備信息(即上述示例中的AirPods Pro電池指示器)，而無(wú)需執(zhí)行多次滑動(dòng)即可查找。 當(dāng)前，您必須點(diǎn)擊AirPlay按鈕，該按鈕將彈出Mini Player組件的變體，該組件涵蓋整個(gè)“正在播放”屏幕，并且僅顯示音頻設(shè)備的總體電池電量。 它是阻塞性的，但缺乏信息。 在當(dāng)前UI中查找詳細(xì)的AirPlay信息的唯一方法是完全退出“音樂(lè)”應(yīng)用，然后一直滑動(dòng)到通知中心； 太耗時(shí)，水龍頭太多！ Dock消除了所有這些問(wèn)題，并且只需幾次滑動(dòng)即可將所有內(nèi)容放入一個(gè)屏幕中的一個(gè)組件中。 真正 的一刀切解決方案。

音樂(lè)切換和播放控制 (Music HandOff & Playback Control)

HandOff + Playback Control In Action越區(qū)切換+播放控制功能

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.

我不太相信這些功能尚未實(shí)現(xiàn)。 2020年。我感到困惑。 怎么樣？！ 當(dāng)前的音樂(lè)應(yīng)用仍然沒(méi)有音樂(lè)切換和播放控制功能。 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 InteractionPlay/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 SwipeTrack Swipe Swipe To Change TracksSwipe 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 PlayerMini Player Play/Pause Colour InteractionPlay/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.

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 SliderMini 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 ListRedesigned 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.

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 MenuOverhauled 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.

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.

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 MenuShare Menu Native Social Media IntegrationNative 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.

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 & ShazamEqualiser & Shazam

Again, top user requests.

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. 而已。 簡(jiǎn)單。 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.

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 InteractionLike Interaction Double Tap to LikeDouble 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 ConceptClick 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 MenuAlbum Menu Album MenuAlbum 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 NavigationQuick Navigation Tap and hold for Quick NavTap 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!

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 UICustom 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.

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 PlayingLock Screen Now Playing Volume Adjust With The DockVolume 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 DockView 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.

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.

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)

LyricsLyrics Lyrics with the DockLyrics 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.

圖書(shū)館 (Library)

Library MenuLibrary 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:

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 SettingsGeneral 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.

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 SettingsGeneral 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.

個(gè)人資料 (Profile)

Apple Music User Profile PageApple 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.

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 TracksQueue & Remove Tracks Swipe Right To QueueSwipe 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 RemoveSwipe 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 SuggestionsShake 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.

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 CategoryLibrary 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.

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 CategoryMore 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 SettingsLibrary '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.

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 CategoryLibrary Songs Category Switch Library categories using the toggle menuSwitch Library categories using the toggle menu

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

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.

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.

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 CategoryContext 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 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 SettingsSongs 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.

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 CreationMulti 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.

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).

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 CategoryLibrary Artists Category

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

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.

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.

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.

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 SettingsScroll View With Sorting Options & Artist Category Settings New Artist Category Menu StyleNew 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.

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 CategoryLibrary Album Category Albums Grid ViewAlbums 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.

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.

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.

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.

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 & SortingSelecting & 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).

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 PreviewZooming 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.

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 CategoryLibrary 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.

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.

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 CreationPlaylist Creation Smart Playlist CreationSmart 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.

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 PageIndividual 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.

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.

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:

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 ToggleIndividual Artist Page — All Toggle Artist Page, All Toggle, Sorting & SettingsArtist 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.

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.

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.

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

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

Individual Artist Page — SongsIndividual Artist Page — Songs Artist Page, Song ToggleArtist 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.

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 — AlbumsIndividual Artist Page — Albums Artist Page, Albums ToggleArtist 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.

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 — PlaylistsIndividual Artist Page — Playlists Artist Page, Playlist ToggleArtist 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).

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 (ie the traditional list view).

Playlist Toggle Sort & SettingsPlaylist Toggle Sort & Settings

More Toggle (More Toggle)

Individual Artist Page — MoreIndividual Artist Page — More Artist Page, More ToggleArtist 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.

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 PageIndividual Album Page Album Page TogglesAlbum 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

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, SettingsSearch 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.

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.

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 resultsNew 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.

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

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,

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.

時(shí)間 (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.

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.

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?

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. 對(duì)于您的工作和對(duì)戀人來(lái)說(shuō)都是如此。 您的工作將占據(jù)您一生的大部分時(shí)間，而真正令您滿(mǎn)意的唯一方法就是做您認(rèn)為出色的工作。 做偉大工作的唯一方法就是熱愛(ài)自己所做的事情。 如果尚未找到它，請(qǐng)繼續(xù)尋找。 別解決 與內(nèi)心所有事情一樣，當(dāng)您找到它時(shí)就會(huì)知道。 而且，就像任何偉大的關(guān)系一樣，隨著歲月的流逝，這種關(guān)系會(huì)越來(lái)越好。 所以繼續(xù)尋找，直到找到它。 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. 沒(méi)關(guān)系。 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. 沒(méi)有什么是不可能的。 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.

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

蘋(píng)果風(fēng)格ui設(shè)計(jì)

總結(jié)

以上是生活随笔為你收集整理的苹果风格ui设计_重新设计苹果音乐应用程序ui ux案例研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。