Application Design I / Final Task

16.06.2023 - 24.07.2023 / Week 12 - Week 16

Chai HongHong / 0354211

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

Final Task / High-Fidelity Prototype

INSTRUCTION

Final Task: High-Fidelity Prototype

Original Design

In this task, a high-fidelity prototype is to be created for the mobile application. This prototype showcases the final visual design, interactions, and functionality of your application.

In this interface, touch the option box will turn green.

Fig.1.1.

If you log in with a Google account, you can directly enter the main page, and the main page will pop up your personal information. The user profile picture and user nickname will be the same as the default Google account information.

Fig.1.2

The search history and recommended music types will be displayed on the Search interface. Search for songs in the record, and it will be played directly after clicking. Recommended music genres are updated and changed frequently. The circle will bounce slightly to animate.

Fig.1.3

In the original MusiC app, there is no lyrics display. So I made the function of sliding up to display lyrics on the player interface. Swipe down on the lyrics interface to return to the player. For the background of the player, I used a blurred song cover for the background.

Fig.1.4

The main color of the two main pages is still green. The "My Favorites" page is added to the main page so that many people can quickly find their favorite songs and play them. Because most users don't create many playlists, and they don't classify songs too much. They only click and like their favorite songs and add them to the "My Favorite" playlist. When there is this song list on the main page, it is convenient for them to quickly find their favorite songs every time.

Fig.1.5

Fig.1.6. original design

After I added the interaction effect, I invited five of my friends to test it. I have summarized the participants' comments in the following points:

1. There are too few interfaces, many buttons do not respond when clicked, the player interface cannot swipe left and right to switch songs, and there is no better interactive display function.

2. The three buttons on the homepage are very ordinary, and the experience when switching is average.

3. The cover font is not very good-looking, because the overall style of this app is simple and convenient, so the font should also use a simple font style

4. The interface layout is very clear, the functions are convenient and not cumbersome, and you can clearly know how to use this app when you use it for the first time. The color scheme is simple and eye-catching.

5. Swipe up and down on the player interface to display and hide lyrics functions to have a good experience.

Final Design

After getting feedback from participants, I reflected on my design. I decided to add some interfaces and made some changes:

I changed the cover and chose a more minimal-looking font.

Fig.2.1.

I modified the three buttons on the homepage, and the feedback from the participants mentioned that the clicking experience of these three buttons is very general. So I thought for a long time and decided to add a little animation effect. I used sound wave lines to connect each Button. This animation effect will only be displayed when the Button is clicked to switch pages.