Application Design II /Task 2

29.08.2023 - 08.12.2023 / Week 1 - Week 14
Chai HongHong / 0354211
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 2 / Mobile App Interaction Design



Task 2 Mobile App Interactive Design

Todo:
  • Create a prototype that presents all the animations the final app should have

Process


App Flow Mapping

1. splash screen: I used bubble elements and a gradient background on the startup page to clarify the theme and style of the app and visually attract users.

2. Login page: If you are an old user, you can log in directly on the login page. There are two registration interfaces for new users, one is to bind email registration. Another is that users with Google accounts can directly bind Google to enter. Since most users have Google accounts, this can improve the convenience of user registration.

3. Side panel of the main page: After logging in, a side panel will pop up on the home page, which contains the user’s basic information and the app’s setting functions. This makes it easier for users to understand the app and their own accounts.

4. Main page: After the side page is folded, the main page 1 (Discover) will be displayed, where users can explore music and artists.
Click (My) in the bottom bar to enter the second main page, where users can find their favorites and downloads, and change personal information here.
Click (Favorite) on the bottom bar to enter the third main page. Users can quickly find their favorite songs to play every time they open the app. Improve the convenience of operations that users are used to.

5. Music search: Click the magnifying glass button on the main page to enter the music search page, where users can search for music.

6. Player: When users find the music they want to listen to, they will enter the player page. Scroll down to enter the lyrics page. Users can switch songs by clicking on the left and right covers.

7. Recommended playlists & playlist lists: When users don’t know what songs they want to listen to, they can explore the playlists on the “Discover” page. Clicking on the playlist will display the songs in the playlist.

8. Search artist page & artist page: Users can click artist on the "Discover" page to find more artists, and can enter the artist page to view all the artist's songs.

Fig.1.1.App Flow Mapping

Figma Link:

Fig.1.2. My animation flow

Figma Link:



I exported my animation into gif.

Gif.1.1. 

Gif.1.2 

Gif.1.3. 

Gif.1.4. 

Gif.1.5. 

Gif.1.6. 

Gif.1.7. 

Gif.1.8. 

Gif.1.9. 

Gif.1.10. 

Final application



Presentation:


Google Folder


Reflection

During this task, Mr. Razif provided me with a lot of effective suggestions. As I continued to improve, I became more and more familiar with the operation of Figma. My app interface design has improved significantly from the beginning to now. The process is challenging. I spent a lot of time exploring this app, and I hope to better express my creativity in this app. This is no longer a task for me. To me, it is more like my own app, with my own preferences and style. I hope that it will be liked by others after it is released and that it can bring a relaxing experience to users.


Comments

Post a Comment

Popular posts from this blog

Games Development

Image
23.04.2025 - 27.07.2025 (Week1-Week15) ZengYu/035538​​​​8 Chai HongHong/0354211 Bachelor of Design (Hons) in Creative Media Game Development INSTRUCTIONS Our Google Drive Submission Link： https://drive.google.com/drive/folders/1J4MP9nAnGTgJlgFNlyGJDq4o1plwtkaO?usp=drive_link Task 1 -  Game Design Document   In this task, we are required to design a 2D side-scrolling/platformer game and create a Game Design Document (GDD). The GDD should outline: Game concept and mechanics Character design and abilities Level and world design Art style and visuals Weekly Progress Final Proposal Submission Task 1 Feedback We named the game "Run, Eggsy!", which shaped the core concept and gameplay framework of the game eggman's adventure. Our goal is to create a humorous, trap-filled platformer inspired by games like Level Devil, with a unique twist on the typical puzzle adventure formula. While the project is still in progress, here are some key observations and conclusions so far: Clear ch...
Read more

Advanced Typography / Final Compilation & Reflection

Image
30.08.2023-29.11.2023（Week1-Week14） Chai HongHong/0354211/Creative Media Design. Advanced Typography /  Final Compilation & Reflection                                 INSTRUCTION Task 1:  Typographic Systems & Type & Play Task 2:  Key Artwork and Collateral Task 3:   Type Exploration and Application SUBMISSIONS Task 1 Exercise 1/Typographic Systems Fig.1.1. Axial Final attempt. Fig.1.2. Radial final attempt Fig.1.3. Modular final attempt Fig.1.4. Random final attempt Fig.1.5. Dilatational attempt Fig.1.6. Transitional final attempt Fig.1.7. Grid final attempt Fig.1.8. Bilateral final attempt PDF.1.1. Task 1/Exercise 1/Typographic Systems PDF.1.2. Task 1/Exercise 1/Typographic Systems/Grid Exercise 2/ Type & Play Fig.1.8. Final A Fig.1.9. Final L Fig.1.10. Final M Fig.1.11. Final U PDF.1.3. Task 1/Exercise 2 Fig.1.12. Final Poster  PD...
Read more

Application Design I / Final Task

Image
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 boun...
Read more