Application Design - Project 3

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
• Usability Testing & UI Kit
• Usability Heuristics for UI Design
• User Interface Visual Elements
• Design Essentials: Color and Typography for UI
2. Instruction
3. Project 3 - Low Fidelity Mobile Application Design Prototype
• Low-fidelity Design
• Low-fidelity Interview
• Final Low-fidelity Prototype
4. Feedback
5. Reflection

1. LECTURE

Week 11 - F4F (5 Dec 2024)

1. Usability Testing & UI Kit

Usability Testing

Evaluating a product or service with real users to find issues and improve satisfaction.

• Process: Users complete tasks while observers take notes.
• Purpose: Identify usability problems, gather feedback, and measure user satisfaction.

---

UI Kit

A collection of pre-designed UI components for apps or websites.

• Templates: Often niche-specific (e.g., e-commerce UI kits).
• Impact: Well-designed UI reduces user frustration and increases engagement.

---

Key Elements of a UI Kit

1. Typography

   • Fonts for the product.
   • Sizes and weights for headings and content hierarchy.

2. Iconography

   • Icons paired with text to guide users.

3. Layouts and Grids

   • Ensures consistent alignment and flow across pages.

4. Color Palette

   • Maintains brand identity and sets the product’s tone.

5. Components

   • Pre-styled elements (e.g., modals, buttons, forms) for a cohesive design.

2. Usability Heuristics for UI Design

General principles to enhance usability and user-friendliness in websites or applications.

---

Jakob Nielsen’s 10 Usability Heuristics (look at ppt in drive for example)

1. Visibility of System Status

   • Keep users informed with clear, timely feedback.
   • Users should always know the system’s current state.

2. Match Between System and the Real World

   • Use familiar language, icons, and visuals (e.g., trash can for deleting).
   • Align design with real-world concepts for intuitive use.

3. User Control and Freedom

   • Allow users to undo, redo, or cancel actions easily.
   • Provide clear options to go back or close views.

4. Consistency and Standards

   • Maintain uniform colors, fonts, and actions across all screens.
   • Ensure similar actions always have the same outcomes.

5. Error Prevention

   • Minimize errors with clear instructions and validation (e.g., input checks).
   • Use confirmation prompts for critical actions.

6. Recognition Over Recall

   • Show menus, options, and history to reduce memory load.
   • Let users recognize, not memorize, tasks or items.

7. Flexibility and Efficiency of Use

   • Cater to all users by providing shortcuts and customization.
   • Let advanced users perform tasks faster while still guiding novices.

8. Aesthetic and Minimalist Design

   • Use simple, clear designs with necessary elements only.
   • Apply whitespace, visual hierarchy, and consistent styles.

9. Help Users Recognize, Diagnose, and Recover from Errors

   • Provide clear, specific error messages with solutions.
   • Highlight issues with icons or colors and offer recovery steps.

10. Help and Documentation

• Include tooltips, guides, FAQs, and searchable help resources.
• Ensure users can access support easily.

3. User Interface Visual Elements

4. Design Essentials: Color and Typography for UI

The Process

1. Choose a Main Color: Pick a base color for your design.
2. Create Your Palette: Add supporting colors.
3. Apply the 60/30/10 Rule:
   • 60% Dominant Color: Background or large sections.
   • 30% Secondary Color: Buttons, navigation, or secondary elements.
   • 10% Accent Color: Call-to-action buttons, links, or alerts.

---

Color Schemes

1. Monochromatic Colors

   • Use shades and tints of one color for a simple, unified look.
   • Pros: Calm and minimalist.
   • Cons: May lack contrast and visual interest.

2. Analogous Colors

   • Use colors next to each other on the color wheel.
   • Pros: Easy on the eyes, harmonious.
   • Cons: Can feel too uniform or lack contrast.

3. Complementary Colors

   • Use colors opposite each other on the color wheel (e.g., red & green).
   • Pros: Vibrant, strong contrast.
   • Cons: Overuse may overwhelm the design.

4. Triadic Colors

   • Use three evenly spaced colors on the color wheel.
   • Pros: Balanced contrast and harmony.
   • Cons: May feel busy if not handled carefully.

---

Gradients in Design

• What Are They? Smooth transitions between two or more colors.
• Types: Linear (side-to-side) or radial (center-outward).
• Benefits:
  • Adds depth and dimension.
  • Enhances focus and highlights important elements.

---

Typography Essentials

1. Hierarchy: Use headings, subheadings, and body text to guide the reader.
2. Spacing & Alignment: Ensure proper line spacing and clean alignment.
3. Paragraphs: Keep them concise and readable.
4. Font Pairing: Combine fonts with contrast yet complement each other.

---

Resources

• Color Tools:
  • ColorZilla: Grab colors and create gradients.
  • Kuler: Adobe’s color wheel.
• Typography Tools:
  • WhatFont: Identify fonts on any website.
• UI Inspiration:
  • Mobbin: Explore UI/UX design ideas.
• Figma Tutorials:
  • Prototypes: Watch here.
  • Wireframes: Watch here.
  • Mockups: Watch here.

2. INSTRUCTION

3. Project 3 - Low Fidelity Mobile Application Design Prototype

1. Low-fidelity Design

First, I looked for references from Pinterest, other music apps, and resources sir gave us. Here’s the Pinterest link that I used and some of the images I referenced:

https://pin.it/7pPFep0VZ

Fig 1.1 Reference, Week 12 (12/12/2024)

Fig 1.2 Reference, Week 12 (12/12/2024)

Fig 1.3 Reference, Week 12 (12/12/2024)

Fig 1.4 Reference, Week 12 (12/12/2024)

For the home page, I kept it simple. I used the reference images from Pinterest as a guideline for it.

Fig 1.5 Home Layout, Week 12 (12/12/2024)

Then for the search bar, I made it similar to the Spotify app search result. I also added filters for them and made them interactive. I struggled with properly doing the horizontal and vertical scrolling for the filters and search results, which made me neglect some of the more important pages than the search result.

Fig 1.6 Search Layout, Week 12 (12/12/2024)

For the next pages, I just made the most important ones according to the scenarios I made from the MVP features.

The search page immediately leads to the song player. It has all the buttons and icons a common song player would have—play/pause, skip, shuffle, heart to favorite, download—but the share and heart features are not implemented as they’re not used in the scenario.

Fig 1.7 Song Player, Week 12 (12/12/2024)

One thing I didn’t like in the Music app was that the lyric button was too small to see, so I placed it at the bottom with a clear indication that the user can open it. I also added the download option for offline listening. I’ve implemented these features in the prototype.

Fig 1.8 Lyric Layout, Week 12 (12/12/2024)

Then, I made the playlist management feature. Users click on the music menu and go to the "My Music" page. Then, they click on the "Your Playlist" option, which directs them to the list of playlists the user has made, with an option to create a new one. The user can click it and be given the option to name the playlist and whether to confirm or cancel the process. Once confirmed, a new playlist is made, and the user can start adding songs to it.

Fig 1.9 Making a Playlist Layout, Week 12 (12/12/2024)

The playlist page is similar to one of the referenced images on Pinterest. The search to add songs is similar to the search results of the search function but with a back button to return to the playlist. The search result songs will have an option to add them to the playlist. When done, the user can click the back button, and the songs will be added to the playlist.

Fig 1.10 Making a Playlist Layout, Week 12 (12/12/2024)

There’s an option to download songs so that when listening to the playlist offline, the user can still listen to downloaded songs. Songs already downloaded will show a "Downloaded" button instead of a "Download" button. Or, the user can immediately download the whole playlist from the download icon below the playlist title. This feature is not prototyped as it’s not used in the scenario.

Fig 1.11 Making a Playlist Layout, Week 12 (12/12/2024)

The playlist has a play button and a shuffle button.

The playlist also has the option to favorite/like it or add friends to make a collaborative playlist. These features are not prototyped as they’re not part of the scenario.

For the share icon in the playlist and song player, when clicked, it will present the user with their preferred method to share the said song or playlist.

Fig 1.12 Song Player Donwload and Share Layout, Week 12 (12/12/2024)

Fig 1.13 Playlist Share Layout, Week 12 (12/12/2024)

Lastly, there’s the user account page with a simple interface and a similar layout to the original app. It only has one page without a prototype as it’s not used in the scenario.

Fig 1.14 Profile Layout, Week 12 (12/12/2024)

This is the final result of the prototype currently.

Fig 1.15 The Prototype So Far, Week 12 (12/12/2024)

---

Improvement

After this, I showed the layout and process to Sir and got feedback from him on the layout of the app.

• For the artist's search results, add another box behind it to help differentiate songs and artists.

Fig 1.16 Artist's Search Results Layout Changes, Week 13 (19/12/2024)

• Add a place to see the downloads.

Fig 1.17 Downloaded Song Layout, Week 13 (19/12/2024)

• Add a place to see the favorite songs and an option to remove them from favorites.

Fig 1.18 Favorite Song Layout, Week 13 (19/12/2024)

---

Improvement

Then I showed it again to Sir, and he gave more feedback for it.

• Make a premium paid section (how does the app make money? Sir asked).

Fig 1.19 Prenium Layout, Week 13 (19/12/2024)

• In the song player, for the lyrics section, change it to allow scrolling down a bit, so the user can click and go to the full lyrics.

Fig 1.20 Song Lyric Layout, Week 13 (19/12/2024)

• In the playlist section, Sir said to shift the play and shuffle buttons to the middle more, and add a square behind it.

Fig 1.21 Playlist Layout Changes, Week 13 (19/12/2024)

• The home page is too similar to Spotify, so I should try to make another variation of it. Sir suggested adding a 'Hello, user' at the top.

Fig 1.22 Home Layout Variant, Week 13 (19/12/2024)

---

Improvement

Then I showed it again to Sir, and he gave more feedback for it.

• The title of the flow needs to be straightforward, and not confusing.
• Sir said to combine the scenarios that I made into one.

As previously, I made some of the scenarios with multiple options:

1. Personalized Recommendations and Search Function

• The user looks at the home page and scrolls for the latest popular songs (click on the song Die With a Smile). The user wanted to download it for offline listening.
• The user wants to listen to songs by Aurora. The user searches for the artist Aurora, then clicks on the "Runaway" song in the search result. The user likes the song and wants to download it for offline listening. The user clicks on the "My Music" menu, then clicks on the download song section and finds the song there.

2. Playlist Management

• Open the My Music menu, make an Aurora playlist, name the playlist, search for songs, and add four songs to the playlist. Click on the back button to see the added songs in the playlist.

3. Social Sharing and Community

• The user looks at the home page and scrolls for the latest popular songs (click on the song Die With a Smile). The user liked the song and wanted to share it with a friend. The user clicks on the share button, then chooses the preferred method to share the song.
• The user wants to share their Summer Vibes playlist with their friend. The user goes to the music menu, then clicks on the playlist button, selects the playlist they want to share, and clicks on the share button. The user chooses the preferred method to share the playlist.

But Sir said to just make the scenario into one, and for Scene No. 3, to change it into a purchasing premium scene and then using the premium feature.

1. Search Function

• The user wants to listen to songs by Aurora. The user searches for the artist Aurora, then clicks on the "Runaway" song in the search result. The user likes the song and wants to download it for offline listening. The user clicks on the "Music" menu on the bottom, then clicks on the "Downloaded Song" section and finds the song there.

2. Playlist Management

• Open the "Music" menu on the bottom, make an Aurora playlist, name the playlist, search for songs, and add four songs to the playlist. Click on the back button to see the added songs in the playlist.

3. Prenium Social Sharing

• The user wants to add her friend to their "Summer Vibes" playlist to collaborate together. The user clicks on the "Music" menu on the bottom, then clicks on "Your Playlist" and finds the "Summer Vibes" playlist. The user clicks on the playlist and finds the button to add people to the playlist. Upon clicking, the user discovers that a premium subscription is required for this feature. The user clicks on the "Get Premium Now!" button, selects the "Basic Plan", and clicks "Subscribe". The user then goes back and tries to add their friend to the playlist again. The user goes through the same steps to add their friend, then chooses to share it via WhatsApp. The user sends it to "Elisa das Zoho", then clicks the back button to see that the playlist has added another person to it.

• Change the playlist layout to have bigger square.

Fig 1.23 Playlist Layout Changes, Week 14 (26/12/2024)

• Sir said for one of the scenes, I can make it about doing the premium access—make the user pay for the premium and then showcase the features after buying premium.

Fig 1.24 Premium Feature Layout Process, Week 14 (26/12/2024)

• Add a followed artist page.

Fig 1.25 Followed Artist layout, Week 14 (26/12/2024)

---

Initial Final Low Fidelity Prototype

Thsis the final low fidelity prototype until now, before starting the interview.

Figma Link: https://www.figma.com/design/RVOfY5aFVbh477zHbB4P8C/Low-fi-Music-app?t=SgwBbralS5p5CKrR-1

Fig 1.26 Figma Design, Week 15 (2/1/2025)

Prototype Link: https://www.figma.com/proto/RVOfY5aFVbh477zHbB4P8C/Low-fi-Music-app?t=SgwBbralS5p5CKrR-1

Fig 1.27 Figma Prototype, Week 15 (2/1/2025)

Fig 1.28 Figma Prototype, Week 15 (2/1/2025)

2. Low-fidelity Interview

Interview

After that, I prepared the questions for the interview. Here are the questions for the interviewees after they completed their given scenarios:

1. What part of the design feels unclear or hard to use?
2. What could be improved to make the app more useful?
3. Is there anything that feels unnecessary or too much?

I wanted a variety of opinions, so I tried to interview people from different majors. I also know that most of them use music apps regularly, so their input would be valuable. One was another friend from the same module, the other is a graphic design specialization student, and my previous interviewee is the Psychology major student.

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.

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.

Interview - Google Drive

Fig 1.29 Interview Transcript, Week 16 (6/1/2025)

Improvement 

Based on one of the suggestions was that changing the history button was not necessary, and the interviewee would rather have it placed in the search history instead. So, I did change it to what could be previous searches of the songs—a mix of song titles and artist names.

Fig 1.30 Before and After Search Page, Week 16 (6/1/2025)

Another suggestion was about the prenium plan page, the inetrvieww tough tha the text is to samll ro read, thus redusing rediblitiyt and the small desc below the title plan was too long. 

Fig 1.31 Before and After Premium Page, Week 16 (6/1/2025)

Theres another suggestion for making the button to be able to change when hovered, and i did try them out in figma, but i figure it would be better to do it with the hight fi as well to match the colors together.

Fig 1.32 Button Hover, Week 16 (6/1/2025)

Fig 1.33 Button Hover/Low Fide Showcase, Week 16 (6/1/2025)

I'm glad that the interviewees' suggestions are not that much. I figured it's because I already went through a lot of feedback from Sir, and the wireframe layout is already pretty solid.

3. Final Low-fidelity Prototype

Figma Link

Fig 1.34 Figma Link, Week 16 (6/1/2025)

Prototype Link

Fig 1.35 Prototype Link, Week 16 (6/1/2025)

Fig 1.36 Low Fide Final Showcase, Week 16 (6/1/2025)

4. Feedback

Week 12: 

Specific Feedback:

• For the search result of the artist, add another box behind it to help differentiate songs and artists.
• Add a place to see the downloads.
• Add a place to see the favorite songs, and an option to remove them from favorites.

Week 13: 

Specific Feedback:

• Make a premium paid section (how does the app make money? Sir asked).
• In the song player, for the lyrics section, change it to allow scrolling down a bit, so the user can click and go to the full lyrics.
• In the playlist section, Sir said to shift the play and shuffle buttons to the middle more.
• The home page is too similar to Spotify, so I should try to make another variation of it. Sir suggested adding a 'Hello, user' on top.

Week 14: 

Specific Feedback:

• The title of the flow needs to be straightforward, not confusing.
• Sir said to combine the scenarios that I made into one.
• Change the playlist layout a bit.
• Sir said for one of the scenes, I can make it about doing the premium access—make the user pay for the premium and then showcase the features after buying premium.
• Add a followed artist page.

5. Reflection

1. Experience

The process of creating the low-fidelity prototype for the music app was an interesting and hands-on experience. At the beginning, I started by looking for references on Pinterest and checking out music apps to get an idea of how I wanted to design it. I used these as inspiration to come up with a simple and clean layout. From there, I built out the core features for the home page, search page, and the song player. One challenge was working with the search bar and filters, as I struggled to make sure the horizontal and vertical scrolling worked properly. Despite that, the feedback from Sir and the interviewees helped me keep the design on track and improve it. I also learned how to use Figma more effectively.

2. Observation

While creating the prototype, I noticed how important it was to keep the design clear and easy to use. The layout had to be simple enough so users could quickly find what they needed without feeling confused. Based on the feedback, I realized that the search bar needed to be more straightforward, and readible. These small but important observations helped me improve the overall user experience. 

3. Findings

The interviews were very useful, and I was happy to see that the feedback wasn't too overwhelming. The users had good suggestions that made me rethink a few things. For example, they found that the search history could be improved, and the premium plan text could be clearer. I was glad to see that the layout already felt pretty solid, probably because I had already gotten so much feedback from Sir before. Overall, the most important thing I learned was that small details, like text size or button placement, can really affect the user experience. These changes, even if they seem small, made a big difference in the app’s usability.