Application Design I - Project 1: Mobile Application Proposal

23.04.2025 - 16.05.2025

Guan Wee Lun/0364012
Application Design/Bachelor of Design in Creative Media

Project 1: Mobile Application Proposal

---

Lectures

Week 1/23.04.2025

Mobile Application Design

• The fundamentals of designing engaging and user-friendly mobile application
• It cover the visual aesthetics, user interaction with the product, comprehensive principles that guide the whole development process

Importance of Application

• Well-designed app provides a seamless user experience, boosting engagement, retention and overall customer satisfaction.
• It's improved app performance and accessibility, and making it usable for wider audience
• intuitive navigation, responsive layouts and natural interaction 

Understanding Usability

• Defining Usability
• This explains usability as the ability of users to effectively complete their goals using an application. Key factors include learnability, efficiency, memorability, and satisfaction.
• Applying Usability Principles
•  Focuses on tailoring design to meet user needs, optimizing aspects like navigation, information architecture, and visual hierarchy for better usability.
• Conducting Usability Test
• Involves observing real users interacting with the app, collecting feedback, and refining the design based on pain points to ensure a seamless experience.
• Developing Practical Skills
• Highlights the importance of hands-on experience in app design, covering proficiency in tools, prototyping techniques, and user research.

 importance of mobile in the digital era

• Ubiquity of Smartphones: 
• With over 6 billion users worldwide, smartphones provide constant connectivity and instant access to information.
• Shift in User Behavior: 
• Mobile devices are increasingly used for everything—social media, shopping, banking, and entertainment—changing how people consume digital content.
• Mobile-First Approach: 
• Businesses now prioritize mobile-friendly design to cater to the growing number of mobile-centric users.
• Competitive Advantage: 
• A well-designed mobile experience improves customer satisfaction and loyalty, helping businesses stand out in the digital landscape.

Designing for mobile applications presents unique challenges 

• Screen Size & Limited Space:
• Smaller screens, meaning designers must prioritize essential content and create intuitive navigation to maximize usability.
• Variety of Devices & Platforms: 
• diversity in screen sizes, resolutions, and operating systems requires adaptable, responsive designs that work across multiple devices.
• Context-Awareness: 
• Users often interact with mobile apps in different environments and on the go, so designing for accessibility, offline usage, and minimal distractions is essential.

User - Centered Design Approach

Figure 1.1 UCD Process

1. Research: to understand target audience and specific requirement
1. Indepth Research
2. Insight from user needs, behavior and pain point
2. Design
1. Based on insight, starting on create wireframes, prototypes and mockup that addresses the user needs
3. Evalution
1. Help validate design decision and identify the areas for improvement

Benefit of User-Centered Design

• Increases user satisfaction
• Improved product adoption
• Reduced development cost
• Enhanced brand reputation

METHODOLOGY on UCD

• Understand USER NEED
• Prioritize key FEATURES
• Optimize for MOBILE 
  
• VALIDATE and ITERATE

Prototyping and Testing (METHODOLOGY)

1. Lofi Prototypes
2. Interactive Prototypes
3. Interactive Testing

Week 2/30.04.2025

The art of UCD (User Centered Design)

• A kind of design philosophy/process
• Communication between designer and user
• Iterative cycle where designer focus on user needs
• User Centered Design
• considered the needs of the user by providing framework and the foundation
• UXDesign
• focus on functionality
• UX design build upon to ensure a smooth and functional interaction
• UIDesign
• Aesthetic and visual perception and interaction

Process

User Centered Design

• Discover/Analysis
• Requirement
• Persona
• Define
• Ideation
• User Journey
• Design
• User Experience
• User Interface
• Validate
• Testing
• Prototype
• Develop
• programming

ROI of UCD

• Improve Credibility
• User satisfaction
• trust in system
• no of visit referral
• Improve Performance
• reduce user error
• ease of use
• ease of learning
• Increase exposure
• Traffic/audience size
• more user means more potential customer means more profit
• Return customer
• visit from search
• Reduce resource burden (MVP)
• Reduce development time & cost
• Reduce maintenance cost
• Reduce Redesign cost

UX Design

• A person's perception and response that result from the use or anticipated use of a product, service and system.
• Interaction: I see, I hear, I touch
• Create a delightful experience, service, product or system that satisfied user's needs and wants while achieving the goal of your organization
• UX focus on user feeling than our perception

The Fundamentals of great user experience

• Functional
• Easy to use
• Visual appearance
• Positive Brand experience

Visibility

Week 3/07.05.2025

Usability

• It's effectiveness, efficiency, and success of a user in using a product or design
• how well user can achieve their goals
• how quickly they can learn it and how many errors they encounter
• Concerned with user needs and context
• Measurable(prototype): Usability can be evaluated through testing

Clarity and Learnability
Be easy and straight forward for Payment

Log in pages should be easy as to let them to be user without any thought and fast

people attention can just be captured for 7 second

• How easy can users understand the UI and function
• Can they find what they need without prior experience

Efficiency and Goal Completion

Common Usability Pitfalls

• Complex interfaces
• Wide range of features can overwhelm users
• Info is organized within the UI isn't logical or consistent
• lack of clear labeling and instruction
• Confusing navigation
• lack of search functionality
• need to let user uses easily without any thinking
• Inconsistent layout
• consistent color, brand, typography
• Bounce rate
• it's increase when user just use seldom
• it's decrease when user continue using the application
• Lack or unclear of call-to-action button
• A button to require user to do something
• background need to be simple to let CTD button catch user eyes
• Inadequate of error

Key Principle of Usability

• Consistency
• User friendly
• Cohesive experience
• Intuitive navigation
• familiarity and learnability
• stronger brand identity
• Simplicity
• effortless to use
• clear communication
• Progressive disclosure
• Visibility
• Clarity and hierarchy
• Focus and Attention
• State changes
• need difference to differentiate the selection such as color, scale, animation etc
• CTA button
• Well Placed icon, menus and clear labelling
• Feedback
• Confirmation and clarity
• confirm after payment, action etc
• Guidance and learning
• Textual Messages
• Visual Cues
• color, progress indicators
• Sounds
• Haptic Feedback
• Error Prevention
• Confirmation letter to confirm user action
• reduced frustration
• increased efficiency
• improved accuracy
• input validation based on user what to do next
• clear & immediate feedback

Week 5/21.05.2025

User Research

Crucial role of UX in driving sales and customer perception

• Positive User experience is more influence than strong advertising
• Focus more usability than the functionality of the design

What is UX research

• Understanding user based on their experiences
• User behavior, needs and attitudes
• Through feedback collection methods

Role of UX design

1. Understanding user behavior, goal, motivation and needs
2. Pain points
3. User emotion during interaction
4. Design process focus in user understanding

UX Research solution

1. developing research methodology
2. selecting and recruiting targeted end user
3. interviews
4. data analysis

Integrated Process

1. Starting early
1. Understanding
2. Concept and iterative Design
1. Concept Validation
2. Continuous Feedback
3. Launch Phrase
1. User Centric Adjustments
2. Post Lauch Insight

Interviews

User attitudes, beliefs and experience

A time maximum 20 minutes

observe both user say and body language or facial expression 

These Observation help understand if user feel positive or negative about the product or service

Project 2 - uiux research

Week 6/28.05.2025

Synthetize research

What to do with data

• Even it out
• scatter the resources on the same level, chunk of one info each if possible
• Spread it
• Give space to each a bit, 
• Find Pattern
• Find Outliners

Why synthesizing

• Funnel it down
• take data and reduce volume by thinking it through make it easy to understand
• Make sense of it
• When it's too much of take in, it helps to find the high trends, but also low,
• Find the root cause

When do we synthesizing

Week 7/04.06.2025

Week 8/11.06.2025

Note

• User journey Map
• Two scenario, first is before using app, and after using app
• what can be improved

MOSCOW & 2x2 Matrix

MOSCOW

1. Must
• Things that make your app a MUSTHAVE
2. Should
• Things that make your app SHOULD have to work
3. Could
• Things that nice to have
4. Won't
• Thing the app won't do/have

Must and should is the thing will be in apps

Could might be or not in the app

Won't is the thing that won't show in your app

2x2 Matrix

• Effort and output

Designer decision need to have reason to be a better designer, not bc i like it

you will need to have support for all your decision

SITE MAP

• Footprint showing page relate to app hierarchy
• it guides the user's attention and organizes content
• You will need hierarchy to lead the user where to read first, create a path for user
• Card sorting insight

User Flow

• Visualization tool
• User flow are visual representations of all interactions a user has on your site
• Purpose:
• Design efficient completion

Task Analysis

• To analyze task of the user flow, what is the flow of the app usage
• Entry point
• an action to start the flow
• End point
• The point that user achieve their goal
• For the homepage prefer the user already have account

Make the user happy, and make your design stronger than competitor

Week 9

Retrospective

• 
  

Perspective

HMW question

• lead creative answer
• sparks imagination
• create friction
• excite the team

Week 11

Visual Design

"Design is thinking made visual" Saul Bass, Graphic Designer

• Basic of composition
• Visual Design Rules
• Balance
• Contrast
• Emphasis
• Unity
• Proximity
• Repetition
• Alignment
• Align screen orderly
• Hierarchy
• Contrast on the icon
• Font used San serif that are more suitable for screen
• Information Hierarchy
• Strong highlight for primary action
• Simplicity
• Negative Space
• Stay consistence with the same rules applied
• Give choice for user, explore themself
• Make all the screen to look like it's together
• Visual reference
• Weight to show difference hierarchy
• Primary Button
• Secondary Button
• Tertiary Button
• Icon Button
• FAQ
• The elements that are heavier stand out
• Ergonomic
• Important navigation on the hotspot
• Such as right-handed person, it will be needed to design for one side that are mostly used (right bottom side)
• Intuitivity
• things that are halfway on the screen can tell people, that the thing are scrollable
• Always tell user whey they are, and where are they going 
• Typography on screen
• one font for text
• one font for graphic

Week 12

This week covers how to evaluate your design with real users and how to create a consistent design system.

• Usability Testing: This is a research method where you evaluate your app by having representative users perform specific tasks. The goal is to uncover usability issues, collect feedback, and assess user satisfaction. You will learn how to prepare a low-fidelity prototype, recruit participants, conduct remote testing sessions, and analyze the feedback to improve your design.

• Usability Test Reporting: After testing, you will create a report that details each issue found, provides evidence from the user sessions, and suggests a specific design change to address the problem.

• UI Kit: A UI kit is a comprehensive collection of pre-designed, reusable components and styles that are used to build your app's interface. It ensures consistency and efficiency in the design process.

• Key Elements of a UI Kit:

• Typography: A consistent set of fonts, sizes, and weights.

• Color Palette: The primary, secondary, and accent colors that define the brand's look and feel.

• Components: A library of UI elements like buttons, forms, and icons, with defined states (e.g., normal, hover, active).

• Layouts and Grids: A standardized grid system to ensure all elements are aligned consistently across different screens.

Week 13

This week introduces foundational principles for creating user-friendly interfaces, focusing on Jakob Nielsen's 10 Usability Heuristics. These are "rules of thumb" that help you evaluate and improve your design's usability.

• The 10 Heuristics:

1. Visibility of System Status: Always keep users informed about what is happening through appropriate feedback (e.g., loading indicators).

2. Match Between System and the Real World: Use language and concepts familiar to the user, not technical jargon.

3. User Control and Freedom: Provide users with a clear way to undo actions or exit a task, like a "back" button or a "cancel" option.

4. Consistency and Standards: Maintain uniform design patterns and terminology throughout the app so that users don't have to learn new conventions.

5. Error Prevention: Design the interface to prevent users from making mistakes, for instance, by using confirmation dialogs before they delete something important.

6. Recognition Rather Than Recall: Minimize the user's need to remember information by making options and actions visible.

7. Flexibility and Efficiency of Use: Provide shortcuts and accelerators for experienced users to speed up their interaction with the app.

8. Aesthetic and Minimalist Design: Keep the interface clean and focused. Avoid cluttering it with irrelevant information.

9. Help Users with Errors: Error messages should be clear, explain the problem, and suggest a solution.

10. Help and Documentation: While the goal is an interface that doesn't need explanation, you should provide easy-to-find help and documentation for users who need it.

This week is a deep dive into the specific elements and components that make up a user interface.

• Fundamental Visual Elements: You will learn about the core building blocks of UI design, including:

  • Line, Shape, and Color: How they are used to create structure and hierarchy.

  • Whitespace: The importance of "empty" space in creating focus and improving readability

  • Shadows and Textures: How to use them to create depth and indicate interactivity.

  • Typography: The role of font choice and hierarchy in clear communication.

  • Imagery: Guidelines for using photos and illustrations effectively.

• UI Components: This covers the interactive parts of the interface that users will engage with.

  • Navigational Components: Includes elements that help users move around the app, such as Search Bars, Breadcrumbs, Pagination, Sliders, Tags, and Carousels.

  • Input Controls: These allow users to input information. You'll study

  • Dropdown menus, Radio Buttons (for single selections), Checkboxes (for multiple selections), and Toggle switches.

• Mobile Design Specifications: The lecture will also cover key guidelines for designing for mobile devices, such as ensuring tappable targets are at least 44x44 pixels and body text is at least 16 pixels for readability.

---

Instruction

---

Progress

Project 1/Mobile Application Proposal

Project Description:

• Proposal for Mobile Application Project
• Redesign an existing app that is unsatisfactory in term of the UIUX
• Survey, interview, market studies, and research on the selected topic
• Include of key feature of the mobile application and the flowchart of the app
• To determine whether the app is good or not regarding on the proposal

What to include

1. Introduction:

   • State the reason for this proposal.
   • Highlight the significance of mobile app design for positive user experiences.

2. Current Situation:

   • Describe the existing mobile application's design.
   • Analyze what works well and what doesn't in the current design.
   • Explain who uses the app and what their needs are.

3. Aims and Targets:

   • Clearly define what the redesign intends to achieve.
   • List the main and supporting goals for the new design.
   • Explain how the redesign will meet user needs and enhance their experience.

4. Understanding Users:

   • Describe the methods for researching user behavior and preferences.
   • Explain how user feedback and insights will be collected.
   • Outline the plan for testing the design with users to ensure its effectiveness.

5. Sources:

• List any materials (articles, books, design examples, etc.) used for research and inspiration

Draft # 1

Draft #2Draft #3  Draft #4     Draft #5     Draft #6    Draft #7    Draft #8   

Submission

APPLICATION DESIGN PROPOSAL by GUAN WEE LUN

---

Feedback

Week 2/30.04.2025

• Mr Wong suggested me to go on with the MyJpj mobile application as still don't have anyone choose this topic
• He suggested me to do more research on the application, identify more issue of the user interface and user experience

Week 3/07.05.2025

• Mr Zeon reminded me to add more explanation of the problem of the app, not using too much of speaking tone, third view 
• And for the issue of my analysis is just full of User interface problem, he suggested me to identify more on user experience problem
• Make the presentation slide be presentive, careful with the spacing, gap, hierarchy

Week 4/14.05.2025

• Need to add more description on each of the problem, more precise
• screenshots reflect to the slide
• In text citation in the user analysis
• solution for each problem
• enhanced visual hierarchy of the presentation slide
• label with each screenshot for better clarity
• highlight the issue indicate in the screenshot

Week 11

• In screen, it can be scrollable, don't just fixed on size of screen

---

Reflection

This project trained my analysis on mobile application, what is good and what is bad, something I cannot tell in the past that actually have some terminology to explain it such as mobile design principles, emphasizing user engagement and the mobile-first approach, followed by an exploration of UCD as an iterative, user-focused process with a clear ROI. Usability was defined with key principles and common pitfalls. In Project 1 I need to apply all of  these concepts by requiring an app redesign proposal, it is quite touch especially I haven't touch analysis for already 1 year, this let me know that my skill of studying and analyze is not that deep that I need to keep on moving and I observe that my presentation skill is quite weak can't even present my idea fluently. Feedback highlighted the iterative learning process and the crucial emphasis on user-centricity, clear communication, and the distinction between UI and UX. Key findings include understanding the mobile landscape, appreciating UCD and usability principles, developing analytical skills, recognizing the importance of feedback, and identifying specific areas for proposal improvement let me learn how much thing  that I need to keep on strengthen.