Application Design - Final Project

5/12/2024 - 2/1/2025  / Week 11 - Week 15

Velicia Raquel Dewi Setiawan | 0369188 | Bachelor of Design (Honours) in Creative Media

Application Design

JUMPLINK:

1. Lecture
2. Instruction
3. Mobile Application Design Prototype (High-Fi)
• High-fidelity Design
• High-fidelity Interview
• Final High-fidelity Prototype
4. Feedback
5. Reflection

1. LECTURE

2. INSTRUCTION

3. Completed Mobile Application Design Prototype (High-Fi)

1. High-fidelity Design

UI Toolkit

Fig 1.1 Font, Week 16 (7/1/2025)

for the Font I chose ADLaM Display for its bold, modern look that stands out while remaining easy to read. Its unique style brings personality to the app, fitting with the creative and emotional aspects of music. Alata, used for body text, offers a simple and clear design.  

For the design process, I chose a color palette based on the app's original logo using the ColorZilla extension. The app had three primary colors, and I added black for contrast. The original logo uses a gradient for the colors, so I decided to reflect that theme in the app's style.

Fig 1.2 Color Picker, Week 16 (7/1/2025)

Here is the RGB of the colors:

• FE2633 (a bright red)
• FD6C4D (a warm orange)
• FDEBEB (a soft pastel pink)
• 1A1A1A (a deep black)

Fig 1.3 Color Palate, Week 16 (7/1/2025)

Design Process (Home Page) 

The first thing I designed was the homepage. I spent a couple of hours experimenting with different iterations, and in the end, I settled on this one. Unfortunately, I didn’t document the previous iterations before the final one.

During my experimentation with different iterations, I found that what’s unique about this color palette is the contrast. If the background is red, it’s better to use white text inside it, as black didn’t pop out as much as white. Meanwhile, a white background contrasts well with red and black text.

The design uses the gradient from the color palette, with clean lines of the same gradient color. In terms of color hierarchy, the blocks of color take priority, followed by the colored lines, and then anything smaller than that.

For the song player at the bottom, I initially used just the gradient lines, but that made the song player less noticeable as it blended in with the other elements. So, I compensated by adding a gradient inside it. This way, the song player is in the second or third point of hierarchy, where the eyes would naturally wander when the user opens the app. It also has a different style from all the other elements, making it stand out quickly.

Fig 1.4 Home Page, Week 16 (7/1/2025)

Search Result Page

For the search result page, I made the search bar the most prominent element, using a bold color to ensure it's the first thing the user sees. Filters were highlighted with a gradient line and color-blocking, making it clear to the user which filter was active. 

Artist names were placed in their own color block, with song titles prominently displayed above the download button. The visual hierarchy directs users to see the artist first, followed by the song name, and lastly, the download button.

Fig 1.5 Search Page, Week 16 (7/1/2025)

Song Player Page 

For the song player page, I colored the most important buttons to make them stand out, while icons beside the song title change color when hovered over. I also added an option to open the lyrics page, which I discovered wasn't integrated into the original app.

Fig 1.6 Song Player Page, Week 16 (7/1/2025)

Playlist Pages

I continued using the color hierarchy system across the remaining pages, ensuring that the first things the eye sees are the color-blocked sections, followed by the gradient lines, red text, and black text. Depending on text size, the hierarchy can shift slightly to create emphasis.

Fig 1.7 Playlist Page Process, Week 16 (7/1/2025)

Fig 1.8 Playlist Page Process, Week 16 (7/1/2025)

Buttons and Icons

For consistency and clarity, I colored in icons and buttons to indicate actions, such as when a song is added to a playlist. This makes it visually clear to users what actions have been performed.

Fig 1.9 Adding Song Process, Week 16 (7/1/2025)

Premium Pages

The premium pages, with multiple action buttons, were designed with color-blocked sections to draw the user's attention. This helps emphasize the key actions on these pages.

Fig 1.10 Premium Page Process, Week 16 (7/1/2025)

Fig 1.11 Premium Page Process, Week 16 (7/1/2025)

Pop-ups and Alerts

For pop-ups and alerts, I combined colored circular lines and color-blocked sections to differentiate them from the background. The pop-ups are surrounded by circular colored lines when the background is a color block and vice versa.

Fig 1.12 Premium Page Process, Week 16 (7/1/2025)

Additional Pages

There were also some additional pages that weren’t part of the original scenario but were suggested by Sir. I ensured these pages were also designed with the same color scheme to maintain visual consistency throughout the app.

Fig 1.13 Removal of Favorited Song Process, Week 16 (7/1/2025)

Fig 1.14 Downloaded Song and Followed Artist Pages, Week 16 (7/1/2025)

Fig 1.15 Other Variation of Song Player Page, Week 16 (7/1/2025)

Initial Final High Fidelity Prototype

Figma Link

Fig 1.16 Initial High Fidelity Prototype Figma, Week 16 (7/1/2025)

Prototype Link

Fig 1.17 Initial High Fidelity Prototype Prototype, Week 16 (7/1/2025)

Fig 1.18 Initial High Fidelity Prototype Video, Week 16 (7/1/2025)

2. High-fidelity Interview

Then for the interview, I wanted to recruit the same people from the last interview, but sadly one of them couldn't make it, so I found another person for it.

1. When you go through the scenario, were there any steps that felt unclear or cumbersome?
2. How did you feel about the overall look and layout of the app? Were there any elements that stood out as particularly helpful or distracting?
3. Based on your experience, do you have any suggestions for improvement on the app?

Scenarios:

1. Search Function
   The user searches for the artist Aurora, clicks on the "Runaway" song in the search result, and decides to download it for offline listening. They navigate to the "Music" menu at the bottom, click on the "Downloaded Song" section, and find the song there.

2. Playlist Management
   Open the "Music" menu at the bottom, create an Aurora playlist, name the playlist, search for songs, and add four songs to the playlist. Use the back button to view the added songs in the playlist.

3. Premium Social Sharing
   Add a friend to the "Summer Vibes" playlist to collaborate. Navigate to the "Music" menu at the bottom, go to "Your Playlist," and locate the "Summer Vibes" playlist. Click on the playlist and find the option to add people, which requires a premium subscription. Select the "Get Premium Now!" button, choose the "Basic Plan," and subscribe. Return to the playlist, add a friend via WhatsApp by sending it to "Elisa das Zoho," then click the back button to confirm the addition.

Sam as last time, the interview was conducted through Zoom, and the Figma link was sent to the interviewees so they could share their screen during the call and navigate through the app. All of the videos are available in the drive link below.

Final Project - Google Drive

Fig 1.19 Interview Transcript, Week 16 (10/1/2025)

Improvement

From the suggestions of the interviews, the playlist could add pictures in it. I made it with a colored line around them to keep the design consistent.

Fig 1.20 Before and After Playlists Page, Week 16 (11/1/2025)

Another suggestion was adding the profile picture to the profile page. I forgot about this since it's not in the scenario, but the interviewee had taken it upon herself to look around the prototype after finishing the scenario.

Fig 1.21 Before and After Profile Page, Week 16 (11/1/2025)

Fig 1.22 Fixing the Home Page, Week 16 (11/1/2025)

Along with that, I also fixed the scroll element to match the others and finished coloring the search result filters pages.

Fig 1.23 Finishing the Search Page, Week 16 (11/1/2025)

I'm glad this feedback interview also didn't have too much that I needed to fix. I definitely glossed over some details while doing the main coloring during it, though, and didn't quite think about the consistency of the app. I was too focused on the main elements that needed color, and I forgot about the little details. I think I need to use colors more effectively, not just to decorate the app.

3. Final High-fidelity Prototype

Fig 1.24 Application Mockup, Week 16 (12/1/2025)

Fig 1.25 Application Mockup, Week 16 (12/1/2025)

Figma Link

Fig 1.26 Figma Link, Week 16 (12/1/2025)

Prototype Link

Fig 1.27 Prototype Link, Week 16 (12/1/2025)

Fig 1.28 Youtube Link, Week 16 (12/1/2025)

Fig 1.29 UI Kit, Week 16 (12/1/2025)

4. Feedback

Week 15: 

Specific Feedback:

• None, didn't realize that feedback was still given.

5. Reflection

1. Experience 

Throughout the project, I found the design process to be a mix of creativity and problem-solving. While working on the high-fidelity prototype, I focused heavily on the main elements and their colors, which led me to overlook some smaller details. This became apparent during the feedback interview when suggestions pointed out inconsistencies. Despite these challenges, I enjoyed the process of refining the design and implementing the feedback, as it pushed me to consider how to make the app more cohesive and user-friendly.

2. Observation

During the interviews, it was interesting to see how users interacted with the prototype beyond the given scenarios. One interviewee explored the profile page on their own, which made me realize I had forgotten to include a profile picture feature. This observation highlighted the importance of looking at the app as a whole rather than focusing solely on specific tasks or pages. Additionally, the feedback on adding pictures to playlists and improving color consistency across pages demonstrated the value of small but impactful design changes.

3. Findings

The feedback from the interviews reinforced that consistency and attention to detail are critical in creating a polished design. I learned that colors should serve a purpose beyond decoration, such as guiding the user’s attention and emphasizing actions. Fixing elements like the scroll bar and coloring the search result filters helped align the design better. Overall, the suggestions were manageable, and implementing them enhanced the app's usability and visual appeal. This process showed me how user feedback can reveal overlooked areas and lead to meaningful improvements.