Application Design II /Task 1

29.08.2023 - 08.12.2023 / Week 1 - Week 14

Chai HongHong / 0354211

Application Design II / Bachelor of Design (Hons) in Creative Media

Task 1 / Application Design 1 Self-Evaluation and Reflection

LECTURE

Week 1

In the first week, we did an exercise with Mr. Razif in class.

Mr. Razif gave feedback after seeing my work. He thought that the size of my web page was too short and that it would be better to make it longer.

Fig.1.1

Fig.1.2

Week 2 & Week 3

Sample given by Mr. Razif.

Fig.1.3

Fig.1.4

This is what it looks like when I check it on Google.

Fig.1.5

Week4-Week8

This class was very challenging for me and coding was difficult for me. Mr. Razif is very responsible and will come to see each of our work and help us solve our problems. Due to my personal reasons, when I took this class, my English was not very good. When I looked at the teacher typing code, and then lowered my head to type code, when I looked up again, the teacher had already entered the next step. In the first few weeks, I was able to keep up with the class on simple code, but later in class, I struggled to keep up with the teacher. As a result, I was very stressed for a while, didn’t want to go to class, and wanted to give up.

Although I don't like typing code, I know this is what I have to learn. If I want to become a qualified designer and a qualified student, there are some difficulties that must be overcome. I reflected on myself, and I felt that I had to do something to keep up with the progress of my teachers and classmates, so after class, I would go to my classmates and ask them questions about code, and they taught me without hesitation. In the end, I successfully completed these weeks of practice. Here I am very grateful to my classmates Chenyu, Zengyu, and Ember who helped me.

Fig.1.6. Code

Final GitHub Link:

https://harperich.github.io/HongChai.github.io/

TASK 1

Application Design 1 Self-Evaluation and Reflection

This is an app I designed based on the MusiC app.

In this task, we need to select an app that we think is terrible and redesign it. The app I chose is a music app. Its interface design is very simple, but the layout feels cluttered. I think there are a lot of areas for improvement. This app does not have many complex functions, which is the reason why many people choose this app. Nowadays, many music apps have complex functions, which is dazzling. This is not suitable for all people, so when I redesigned this app, I decided to keep it This app is simple and convenient. A music app is originally a software for listening to music. I hope that people who use this app can feel relaxed instead of feeling cumbersome. So I didn't add more functions, but made more interactions and beautified the interface based on the original functions of the app.

The MusiC application has 5 main pages, some of which are redundant, have almost no interactive functions, and the experience is not strong. The background color is black, which makes people feel very depressed. There are many types of music on the main page, but there is no search button, which means users have no way of knowing where to search for the music they want to listen to when they open the app.

Fig.2.1.Main page

As a music app, I think it’s terrible that it doesn’t have a lyrics interface.

Fig.2.2.Player

My design concept is to have a simple interface and convenient functions, allowing users to use the software easily. In the questionnaire survey last semester, I learned that most users like a simple and functional user interface. Nowadays, many music apps are adding functions and interfaces, but I decided to make subtractions. I want users to have a more relaxed experience.

Application Design 1 High-Fidelity Prototype Link：https://www.figma.com/file/l7tOzGlzo054MTYZ0qarWG/Untitled?type=design&node-id=0%3A1&mode=design&t=KZ7iHMW1d5H7TQJx-1

I started by changing the color from a depressing black to something more vibrant, I chose a unique green between green and orange. I think green is very refreshing.

Fig.2.1. App Design1 (Overview)

I added bubble elements to embellish the login interface.

Fig.2.2. Login interface

After logging in, a personal information side panel will pop up. The purpose of this design is to hope that users can understand their information settings as soon as they enter the app. Click on the bottom main page and the side panel will retract.

Fig.2.3.

I set the functions that users frequently use as the main page so that users can easily use the app and find the functions they want to use. Then group secondary features into different homepages. For example: I think I can add a "My" home page, which is a personal account and can add personal information. I want to put the "Collection" and "Download" pages on the "My" page.

The main page consists of three functional pages commonly used by users:

Discover: Users can explore music, playlists, and artists.

My: Users can quickly view their favorite music, created playlists, and more.

Favorite: This interface exists because most users will collect their favorite songs in a list. When users open it next time, they can directly find their favorite music and play it, which can improve the convenience of user operations.

I added some animation when the three pages switch between the bottom bar. I put the player zoomed out below every page when the user plays music. No matter which interface you browse, you can return to the player.

Fig.2.4. Main page

I focused on the simplicity of the player interface while improving its aesthetics, and added practical interactive functions, such as clicking on the cover to switch songs and sliding up to display lyrics. The MusiC app does not have a lyrics interface. I redesigned the player interface and added a lyrics interface.

Fig.2.5. player & lyrics

There are two search interfaces. I added a search button to the main page. After entering the search interface, there will be different types of music recommendations. Click "Artist" on the main page to search for artists. These two search interfaces are displayed in the form of bubbles, and there will be small animations here to increase interest.

Fig.2.6.Song Search & Artist Search

The original MuciC app put all the recommended songs on the main page, resulting in a very cluttered page layout. I put all the recommended playlists together, and users can click to see more.

Fig.2.7. Playlist

Search and click on the artist interface to see all the music of this artist.

Fig.2.8.Artist interface

Improvements

Reflection:

Mr. Razif said that my login screen and the homepage of the app don't look like the same app because the login screen uses purple and pink bubble elements, but the app uses green and doesn't involve bubble elements. He suggested that I should unify all pages.

I decided to go straight to the bubble element and use a gradient color as the background to keep my original design intent: simple and convenient. There are also some pages that have redundant layouts and headers that I will remove and adjust.

The changed interface looks simpler and more interesting.

Fig.2.9.Redesign (Overview)

I used the purple color of the bubble element for the color of the Button, which looks very harmonious and unified.

Fig.2.10. Splash Screen

Fig.2.11.Login interface 2

Fig.2.12.Login interface 3

I also added bubble elements to the user avatar.

Fig.2.13.

I changed the bottom bar animation to purple. Recommended playlists and singers on the main page, swipe left to view more.

Fig.2.14. main page1

Fig.2.15. main page2

Fig.2.16. main page3

Fig.2.17. The effect of bottom bar switching

I wanted to integrate bubble elements into the player interface. After trying it a few times, I found that placing the bubble elements behind the song cover would make it look like a record.

Fig.2.18. Player

Swipe up to reach the lyrics interface. I use white for the overall lyrics. When you sing a line, the lyrics of that line turn purple. The progress bar has a gradient color and looks more harmonious with the bubble element.