Application Design - Project 1

26/09/2024 - 17/10/2024  / Week 1 - Week 4

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

Application Design

JUMPLINK:

1. Lecture
• Week 1 Introduction to Mobile Mobile Application Design
• Week 2 The Art of User-Centered Design
• Week 3 Usability: Designing Products for User Satisfaction
2. Instruction
3. Project 1 Mobile Application Proposal
• 1. Draft - 3 App Proposal
• 2. Final - Chosen App Proposal
• 3. Final Project 1: Mobile Application Proposal
4. Feedback
5. Reflection

1. LECTURE

Week 1 - F4F (26 Sep 2024)

1. Introduction to Mobile Mobile Application Design

A well-designed app provides a seamless user experience, boosting engagement (e.g., shares, likes), retention, and overall customer satisfaction. Key aspects such as intuitive navigation, responsive layouts, and visual aesthetics set successful apps apart from competitors.

Defining Usability

Usability measures how effectively and efficiently users can achieve their goals while interacting with a product. It includes:

• Learnability: How quickly users can learn to use the app.
• Efficiency: How fast users can perform tasks.
• Memorability: How easily users remember how to use the app after a break.
• User Satisfaction: How enjoyable the experience is.

---

Applying Usability Principles

By applying usability principles, designers can create applications that meet user needs. Key focus areas include:

• Navigation: Ensuring users can find what they need easily.
• Information Architecture: Organizing content logically.
• Visual Hierarchy: Guiding users’ attention effectively.

---

Why Well-Designed Apps Matter

• Increased Engagement: Encourages interaction (e.g., likes, shares).
• Higher Retention: Keeps users returning.
• Customer Satisfaction: Improves overall experience.

---

How to Achieve Great Design

• Intuitive Navigation: Simple, user-friendly pathways.
• Responsive Layout: Adapts seamlessly to different screen sizes.
• Visual Aesthetics: Clean and pleasing design.

---

Key Mobile Design Considerations

1. Small Screens: Design for compact layouts.
2. Intuitive Navigation: Ensure usability is straightforward.
3. Visual Hierarchy: Guide user focus.
4. Gestures: Incorporate natural interactions like tapping, swiping, and pinching.
5. Cohesive Experience: Maintain consistency across screens.
6. Continuous Optimization: Regularly update and improve the app.

---

Mobile Usage Trends

• As of 2023, 60% of web traffic originates from smartphones. This makes mobile-friendly design critical.

---

Usability Testing

Usability testing involves evaluating how effectively users can interact with a product. Methods include:

• User Interviews
• Talk-Aloud Protocols
• Observations

This testing helps identify and solve issues, ensuring designs meet user needs.

---

Design Process

1. Analysis: Understand user needs, strengths, weaknesses, and key features to optimize.
2. Conception: Generate ideas and solutions.
3. Design: Create prototypes (low and high fidelity).
4. Evaluation & Optimization: Test and refine based on feedback.

Prototyping Types:

• Low-Fidelity Prototype: Focuses on functionality without visuals. Users should know where to click even without pictures or colors.
• High-Fidelity Prototype: Includes full visuals and details.
• User Testing: Conduct tests for both prototypes to gather feedback.

Week 2 - F4F (3 Oct 2024)

1. The Art of User-Centered Design

User-Centered Design (UCD) is a design philosophy that prioritizes the needs, goals, and experiences of users. It ensures that every aspect of a product or service is tailored to provide maximum usability, satisfaction, and efficiency.

Key Components of UCD

1. User Experience (UX) Design

Focuses on the functionality and ease of use of a product, much like designing a house layout for optimal movement, room sizes, and overall flow.

2. User Interface (UI) Design

Covers the visual aesthetics and interactive elements, akin to selecting the finishes, colors, and decor of a house to enhance its appeal and usability.

---

UCD Process

1. DISCOVER

   • Business Requirements: Define brand vision, goals, objectives, target audience, and competitors.
   • User Personas: Understand users’ motivations, goals, triggers, and needs.

2. DEFINE

   • Ideation: Generate ideas for campaigns, websites, software, or products.
   • Experience Mapping: Create tools like user journey maps and user scenarios.

3. DESIGN

   • User Experience: Develop user flows, tasks, and feature analyses.
   • User Interface: Design sitemaps and prototypes to visualize the product.

4. VALIDATE

   • Usability Testing: Assess how real users interact with the product.
   • Prototype Validation: Test functionality with a Minimum Viable Product (MVP).

5. DEVELOP

   • Production Coding: Implement final designs into functional products.

---

Benefits of UCD (Return on Investment)

1. Improved Credibility:

   • Enhances user satisfaction and trust.
   • Increases visits and referrals.

2. Enhanced Performance:

   • Reduces user errors.
   • Makes the product easier to use and learn.

3. Increased Exposure:

   • Boosts audience size and traffic.
   • Encourages return visitors.

4. Reduced Costs:

   • Cuts development, maintenance, and redesign costs.

---

Principles of Great User Experience

1. Utility: The product must be useful and solve user problems.
2. Usability: It should be easy to use and navigate.
3. Desirability: The design must be visually appealing.
4. Brand Experience: It should evoke positive emotions and foster brand loyalty.

---

Understanding UX

UX is about stepping into the users’ shoes and understanding their experiences from their perspective, not from the designer's own assumptions. By prioritizing the user's journey, we can create products that are both functional and delightful.

Week 3 - F4F (17 Oct 2024)

1. Usability: Designing Products for User Satisfaction

Usability ensures products are intuitive, efficient, and enjoyable to use, helping users achieve their goals with ease.

---

Core Principles of Usability

1. Clarity and Learnability

   • Interfaces should be intuitive, allowing users to navigate without prior experience or manuals.
   • Users should find necessary features effortlessly.

2. Efficiency and Goal Completion

   • Simplify workflows to save time and reduce unnecessary steps.
   • Guide users toward goal achievement quickly and logically.

---

Common Usability Pitfalls

• Complex Interfaces: Overloaded with features, leading to confusion.
• Inconsistent Design: Disorganized layouts and unclear navigation.
• Poorly Placed CTAs: Missed engagement opportunities due to vague buttons.
• Inadequate Error Handling: Generic error messages without guidance for fixes.
• Slow Feedback: Lack of progress indicators (e.g., loading bars) causes user frustration.

---

Usability Best Practices

1. Consistency

• Use uniform colors, fonts, and layouts across all pages.
• Maintain familiar navigation to reduce cognitive load.
• Reinforce brand identity with cohesive visual elements.

2. Simplicity

• Minimize steps to complete tasks; prioritize essential features.
• Use familiar symbols, terminology, and progressive disclosure for clarity.
• Provide simple tutorials to guide new users.

3. Visibility

• Highlight important actions with clear visual hierarchies (e.g., size, color).
• Use feedback like state changes (e.g., buttons changing color when clicked).
• Avoid screen clutter to focus users' attention.

4. Feedback

• Offer immediate confirmation for actions (e.g., “Success!” in green).
• Guide users with progress bars, animations, and textual cues.
• Use sound or haptic feedback for mobile devices.

5. Error Prevention

• Validate inputs (e.g., flag incorrect formats with red highlights).
• Use confirmation steps for critical actions (“Are you sure?”).
• Offer error messages with actionable guidance.

---

Usability in Real-World Apps

Examples of Good Usability

1. Adidas

   • Bold, clear categories with arrows for navigation.
   • White backgrounds with clean black text for readability.

2. Airbnb

   • Large, prominent titles and images for clarity.
   • Subtle, smaller descriptions to avoid clutter.

3. CTA Design

   • Big, bold buttons encourage interaction.
   • Only one actionable option per screen to avoid confusion.

Key Features to Implement

• State Changes: Visual cues like progress bars or color shifts for selected options.
• Breadcrumbs: Show users where they are and guide them on the next steps.
• Customization: Offer shortcuts and favorite menus for frequent actions.
• Aesthetics: Use whitespace and minimal colors to avoid overwhelming users.

---

Key Takeaways for Designers

• Usability increases user confidence by ensuring they feel in control.
• Familiarity with standard design patterns (e.g., search bars at the top) helps users navigate effortlessly.
• As a designer, consider user goals, align with business objectives, and maintain a customer-first mindset.

Remember: If users struggle, it’s the designer's fault. Ensure usability by putting users' needs at the center of your design decisions.

2. INSTRUCTION

3. Project 1 - Mobile Application Proposal

1. Draft - 3 App Proposal

We were tasked with proposing three apps to redesign, and our instructor, Mr. Zeon, emphasized the importance of selecting apps with low ratings. This allows us to dig into the reviews and identify weaknesses in the user interface (UI) and user experience (UX).

Mr. Zeon also highlighted that for the final app proposal, we need to thoroughly explore the chosen app. If it’s a booking or shopping app, we must make actual purchases to fully understand how the feedback mechanisms work. The same applies to premium apps. With this in mind, I decided to choose apps that don't require any money to use.

After scouring the Play Store, I selected a weather app, a music app, and a freelancer app.

Here are the three apps I chose:

1. Swag
2. Music
3. WeatherPro

Fig 3.1 Three Apps, Week 2 (03/10/2024)

We need to gather general information about each app, such as the target audience, app ratings, current design, weaknesses, and potential solutions. Here are the criteria for each app:

• Category
• Application Name
• About
• Target Audience
• Ratings
• Weaknesses and Solutions

Click here for the final presentation slides in Canva!

Fig 3.2 Draft 3 App Proposal, Week 2 (03/10/2024)

For the ratings, I will focus on low-star reviews that discuss the app's design rather than its functionality (like loading times, ads, or bugs), since those are issues for the code developers to address. My role is to ensure the user can achieve their goals quickly and easily by making the design intuitive.

Regarding the current design and weaknesses, we will focus on general aspects, with a more thorough analysis for the final chosen app.

2. Final - Chosen App Proposal

App Chosen: Music

Fig 3.3 Chosen App, Week 3 (10/10/2024)

After presenting the three options to Mr. Zeon, I chose the Music app (yes, the app is literally called "Music"). I’ve been using this app for four years, and I’m very familiar with its poor UI/UX, which makes it a perfect candidate for a redesign. Now, I will perform a detailed analysis of the app based on the following criteria:

1. Introduction

• Purpose: Revamp existing mobile app to elevate user experience and interface quality.
• Stress the pivotal role of mobile app design in shaping user contentment.

2. Background and Context

• Evaluate the current app's design and functionalities.
• Identify strengths and weaknesses.
• Competitive analysis.
• Gain insights into user demographics and requirements.

3. Goals and Objectives

• Establish clear objectives for the redesign initiative.
• Prioritize addressing current deficiencies and enhancing user satisfaction.
• Define primary and secondary goals to align with user expectations.
• Developing your design strategy

4. User Research

• Detail methodologies for conducting user research.
• Describe the methods you will utilize to collect user feedback and gain insights.
• Devise a robust plan for user testing and validation.

5. References

• Curate pertinent articles, books, and design samples for inspiration.

---

Background and Context

• Application Name: Music
• Category: Entertainment (Music & Audio)

Fig 3.4 Chosen App, Week 3 (10/10/2024)

The Music app is designed to enhance your music listening experience, offering access to a large library of songs, playlists, and personalized recommendations. It currently has a 3.8-star rating, which is decent overall. However, after reading through the reviews, I found that many users were frustrated by the app’s shift from being free to introducing a lot of ads, which happened about a year ago.

Fig 3.5 App Rating & Review, Week 3 (10/10/2024)

Despite this, I focused on recent reviews discussing the UI/UX rather than functionality issues like ads, loading times, or bugs.

Out of the three apps I initially chose, Music has the most pages to analyze. After attending Mr. Zeon’s lecture on user satisfaction, I began to notice even more weaknesses than I initially did. I found myself nitpicking everything, and I was surprised at how many little details were bothering me about this app.

Fig 3.6 App Current Design, Week 3 (10/10/2024)

---

Competitive Analysis

To better understand the design flaws of the Music app, I downloaded several high-rated music apps. Interestingly, I found that high ratings don’t always correlate with good design—some highly rated apps had poor UI/UX in my opinion.

Fig 3.7 Competitive Analysis, Week 3 (10/10/2024)

For my competitive analysis, I compared Music with Spotify, DDMusic, and Music Player. Overall, these apps had much better design in terms of UI/UX than Music, which provided great inspiration for my redesign. I had expected Spotify to stand out the most, but to my surprise, I found DDMusic to have a more cohesive overall design.

Fig 3.8 Competitive Analysis, Week 3 (10/10/2024)

---

Goals and Objectives

For this section, Mr. Zeon advised us to summarize the weaknesses we identified and provide solutions. The goals can be derived from user ratings and reviews, helping to shape a redesign strategy that improves user satisfaction.

Fig 3.9 Redesign Objective, Week 3 (10/10/2024)

---

User Research

When planning how I would improve the app, I decided to use surveys and user testing as my primary data collection methods. These insights will help me uncover additional pain points in the current design and guide me in creating effective prototypes.

Fig 3.10 User Research, Week 3 (10/10/2024)

3. Final Project 1: Mobile Application Proposal

Click here for the final presentation slides in Canva!

Fig 3.11 Final Proposal, Week 3 (10/10/2024)

4. Feedback

Week 2: 

General Feedback:

• The client will eventually need to see all of the pages. If it's a shopping app, for example, you’ll need to go through the purchase process to understand the full experience.
• Focus on apps with lower ratings to find comments that highlight design issues.
• Don't include ads and slow loading times in the "weaknesses" section, as that's not part of our (designer) responsibility to fix.

Specific Feedback:

• Mr. said my proposal looks good and asked me which app I wanted to work on (I hadn’t decided yet).

Week 3: 

Specific Feedback:

• I decided to work on the Music app, and Mr. said to continue and finish the final proposal.

Week 4: 

Specific Feedback:

• Everything is good, but I need to add more comparison screenshots to the proposal.

5. Reflection

1. Experience

Honestly, I was rushing through the final proposal, and during most of the progress, I was pretty tired. I stayed up late working on it, which made me really sleepy during class, and I probably missed a few things. I didn’t get a lot of feedback either since I was one of the last to present, and Mr. didn’t have much time left. Despite that, I actually enjoyed the process, especially the analysis part. Finding the mistakes made me feel proud.

2. Observation

For the presentation, I wish I had practiced more because I ended up feeling really nervous and just reading off the slides. I noticed some of my friends seemed to have a good grasp of their material and presented it really clearly, while others had more average presentations. I also realized that even though I thought we had to have the proposal completely locked in, it turned out we could still get more feedback for improvement.

3. Findings

I learned that time management is crucial, and I need to make sure I’m well-prepared next time, especially for presentations. I also found that feedback is really important, and I could have benefited from getting more of it earlier on. Lastly, analyzing the app was actually really fun and rewarding, and it made me realize how much I enjoy diving into the details and fixing issues.