Application Design I / Project 1: Mobile Application Proposal

 

7.4.2023 - 28.4.2023 (Week 1 - Week 4)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Application Design I

Project 1: Mobile Application Proposal

---

LECTURE

Week 1 Module Briefing

In the first week, the overview of the module was explained.

1. Project Proposal
2. UX Document
3. Low-Fi Prototype

In this module, students will learn the theory and practice of usability, especially the theory underlying UX design, such as building and improving applications for mobile devices, through the three main assignments above.

Students were assigned to groups and used for in-class activities from W2 onward. And also assigned to whatsapp group and google classroom for class communication in this module.

Week 2 Usability: Designing Products for User Satisfaction

What is Usability?

Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation. It is a part of User Experience (UX) Design.

The usability of a design is determined by how well its functionality responds to the user's needs and context. A highly usable interface can guide the user through the easiest way to achieve their goals.

Ex) If a user is using an application for the first time, he/she will naturally understand how to use it without any special knowledge.

5 Key Principles of Usability

1. Consistency

Consistency is a key factor in web design for both visual elements and functionality. 

Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars.

Design elements such as page layout, menu structure, fonts, typography and branding must be consistent within the same website. For example, if there are multiple back button designs, they will confuse users.

Consistent design = intuitive design helps users to utilize the service.

Fig.1-1: Sample 1 (Consistency)

Adidas

Fig.1-2: Sample 2 (Consistency)

Adidas

Fig.1-3: Sample 3 (Consistency)

Adidas

The Adidas official application, shown in the figures above, has a consistent design style across all pages, making it easy for users to understand its functionality.

2. Simplicity

The principle that user interfaces should be “simple” for users.

Simplicity is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes.

Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.

Fig.1-4: Sample 1 (Simplicity)

Airbnb

Fig.1-5: Sample 2 (Simplicity)

Airbnb

Airbnb's app is designed to be simple with little useless information, yet necessary information is easy to understand, such as large layouts of photos in the room list.

3. Visibility

Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it’s difficult to know about and use.

Users should know, just by looking at an interface, what their options are and how to access them.

Fig.1-6: Sample 1 (Visibility)

Strava

Fig.1-7: Sample 2 (Visibility)

Strava

The example above shows the menu button in a position that is easily visible to the user and allows for easy identification of functions.

4. Feedback

Feedback communicates the results of any interaction, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.

An example of feedback is when you’re on your mobile app and the selected icon changes color when you in the selected screen.

*This is not about user's feedback/voice.

Fig.1-8: Sample 1 (Feedback)

Adidas

Fig.1-9: Sample 2 (Feedback)

Adidas

In the examples, the color of the bottom navigation icon clearly tells the user which page is currently open.

5. Error Prevention

It involves alerting a user when they’re making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important is that we humans are prone to, and will always make mistakes.

Fig.1-10: Sample 1 (Error Prevention)

Fig.1-11: Sample 2 (Error Prevention)

Warning messages should be triggered when making some important decision or missing an important choice.

Common Usability Pitfalls

• Complex interfaces
• Confusing navigation
• Poor feedback
• Inadequate error handling

Week 4 Card Sorting Method

What is Card Sorting

Card sorting is a powerful and popular method used to gain insights into how users group and categorize information. One of the primary ways to figure out an organization scheme that best matches users’ mental model is through card sorting. It's a technique that can be used to inform the design of navigation menus, website or app architecture, and even content strategy.

Fig.1-12: Example of Card Sorting 1

Card sorting involves presenting users with a set of cards, each containing a piece of information, such as a page title, menu item, or product category. 

Users are then asked to group these cards into categories that make sense to them. They may also be asked to give each category a name or label that reflects its contents.

Fig.1-13: Example of Card Sorting 2

Types of Card Sorting

There are two main types of card sorting: open and closed. 

1. Open card sorting allows users to create their own categories.
2. Closed card sorting provides users with predefined categories to sort the cards into.

Participation Environment

1. Moderated = Face-to-face way using actual cards or sticky notes

Moderated card sorting includes step 4 in the process outlined above: the debrief (and/or think-aloud during the actual sorting). This step is a highly valuable opportunity to gain qualitative insights into users’ rationale for their groupings. You can ask questions, probe for further understanding, and ask about specific cards, as needed.

2. Unmoderated = Done by both of online, in person

Unmoderated card sorting involves users organizing content into groups on their own, usually via an online tool, with no interaction with a facilitator. Generally faster and less expensive than moderated card sorting, for the simple reason that it doesn’t require a researcher to speak with each user. Unmoderated card sorting can be useful as a supplement to moderated card sorting sessions.

Utilize the information for UX design

Once the card sorting study is complete, the data collected can be analyzed to identify common patterns and themes among the groups and categories created by users. 

This information can be used to inform the design of a website or app, ensuring that the navigation and content structure are intuitive and user-friendly.

---

INSTRUCTION

Project 1: Mobile Application Proposal

Students are required to create a proposal documentation for their mobile application project. You are required to redesign an existing app that you find unsatisfactory in terms of the user experience or interface design and its subject to preliminary approval by the module coordinator. Students need to do surveys, interviews, market studies and research on the selected topic. The document should also include key features of their mobile application and provide clear flowchart of the app.

W1 Project 1 Task

To research mobile apps in the specified theme and select 3 unsatisfactory design apps. The theme is "Lifestyle".

Process

To propose good UX design, one should be a good user.

Therefore, I considered that I should at least choose an application that I have already installed and have experience utilizing in practice. First, to quote from my lifestyle, there are three basic activities: studying at the university, working out at the gym, and playing on my mobile. Then, I chose an app that has inappropriate design aspects associated with it.

Idea 1: Fitness App "Home Workout"

Fig.2-1: Idea 1

Fig.2-2: Analysis of Idea 1

Idea 2: Internet Provider "Celcom Life"

Fig.2-3: Idea 2

Fig.2-4: Analysis of Idea 2

Idea 3: Scheduling "Taylor's Mobile"

Fig.2-5: Idea 3

Fig.2-6: Analysis of Idea 3

W2 Group Activity (In-class)

• Research: Conduct research on the way-finding system in Taylor’s University. Learn about the different types of users and their needs, such as visitors, students, and people with disabilities. Identify common problems that users encounter when using the way-finding system.
• Ideation: Brainstorm ideas for your kiosk design. Think about how you can address the needs and problems of the users. Sketch out your ideas on paper or using digital tools.
• Prototyping: Choose one of your design ideas and create a prototype of the kiosk.
• Testing: Test your kiosk prototype with potential users. Observe how they interact with the kiosk and ask for feedback. Use the feedback to refine your design.
• Reflection: Reflect on the design process and the feedback you received from users. Identify areas for improvement and think about how you can apply what you learned in future projects.

Fig.2-7: Mobile Application Design, Paper Prototype

First, in creating the prototype we discussed what features we needed.

1. Launch the mobile app
2. Search for a destination and set it in the app
3. A map opens and navigation begins
4. Follow the navigation and reach your destination

These four steps are necessary.

Our university consists of five buildings (A to E), each with a different number of floors and rooms. And in addition to classrooms, there is a lecture theater (LT). The main page has a search function for these buildings, and a map is also displayed for easy visual understanding.

Fig.2-8: Discussion

It turned out that almost all of the members had experienced getting lost when they visited Building B for the first time. Therefore, we set the destination to a classroom in Building B and asked non-member classmates to test the operation.

The test participant was given a mission. In this case, the objective was to go to a classroom called B-01.13. They were then asked to determine if they could operate the application for the purpose, without instructions on how to do so on the paper prototype.

Fig.2-9: User Testing

Although this activity does not actually run the application, it proved to be sufficient for usability testing with the layout in the paper prototype. Fortunately, our prototype was successful in getting people to understand how to use it.

W3 Self-directed Class (Holiday)

Task to Do

1. Choose one of the mobile apps that you have selected for the potential topic for your project.
2. Conduct an initial evaluation of the product's UX design. Take note of the product's layout, visual design, user flow, and other key UX elements.
3. Research the UX Laws and theories that are relevant to your analysis. This may include the Doherty Threshold, Fitts's Law, Hick's Law, the Law of Common Region, the Law of Proximity, the Law of Similarity, the Law of Uniform Connectedness, Miller's Law, the Serial Position Effect, Von Restore Effect, and Zeigarnik Effect.
4. Create a checklist or an outline to guide your analysis. Use the principles and theories you researched to develop a set of criteria that the product should meet in order to provide a good user experience.
5. Conduct a thorough analysis of the product's UX design. Use your checklist or the outline to evaluate the product's UX design and take note of any areas that could be improved.
6. Write a report summarizing your findings. Your report should include a detailed analysis of the product's UX design, a list of strengths and weaknesses, and recommendations for how the product could be improved.
7. Create a visual presentation of your analysis. You can use  Google Slides to create a presentation that summarizes your findings and recommendations.

Reference: Laws of UX

Referring to the Law of UX website, I have analyzed Idea 2: Celcom Life.

Fig.2-10: The Presentation Slides

W4 Group Activity (In-class)

Topic: Health and fitness mobile app

Scenario: You are designing a mobile app that helps users track their daily fitness and health goals.

Purpose: The health and fitness app is designed to help users track their daily fitness and health goals in a fun and interactive way.

Goals: The goals of the app are to:

• Provide users with an easy way to track their progress toward their fitness and health goals
• Encourage users to adopt healthy habits and behaviors
• Motivate users to stay on track with their goals through fun challenges and achievements
• Connect users with a supportive community of like-minded individuals

Item List

• Step tracker: Allows users to track their daily steps and monitor their activity levels
• Calorie counter: Helps users track their daily calorie intake and make healthier food choices
• Workout log: Allows users to log their workouts and monitor their progress over time
• Water intake tracker: Helps users stay hydrated by tracking their daily water intake
• Sleep tracker: Helps users monitor their sleep patterns and improve the quality of their sleep
• Weight tracker: Allows users to track their weight and monitor their progress towards weight loss or gain goals
• Blood pressure tracker: Helps users monitor their blood pressure and identify any potential health issues
• Heart rate monitor: Allows users to monitor their heart rate during exercise and throughout the day
• Exercise library: Provides users with a library of exercises and workouts to choose from, tailored to their fitness level and goals
• Meal planner: Helps users plan healthy meals and snacks throughout the day
• Recipe book: Provides users with a library of healthy recipes to try out
• Nutrient tracker: Helps users track their daily intake of essential nutrients and identify any deficiencies
• Mindfulness exercises: Provides users with guided meditations and relaxation exercises to reduce stress and improve mental well-being
• Achievement badges: Rewards users for reaching milestones and achieving their goals
• Social sharing: Allows users to share their progress and connect with other members of the app's community.

Fig.2-11: Our Sort (Group1)

Our group first established the major items.

All items were assumed to fall into five categories: fitness, lifestyle, nutrition, community, and other.

Two of the categories, "Exercise Library" and "Mindfulness Exercises," were separated into separate categories because of their function as data archives.

Therefore, under "Fitness" and "Lifestyle," there are two uses: "for actual use" and "to search for data as needed".

Fig.2-12: Group2

Fig.2-13: Group3

Fig.2-14: Group4

Referring to the sorting of the other groups, there are some similarities between each of them, but no exact match. This is because they depend on the senses of the users (members). However, for example, there are many areas of agreement in the nutrition/meal-related items, which are considered to be close to the ideal form of UX obtained by this activity.

Thus, the data obtained from card sorting is useful for creating an application structure that is user-sensitive.

W4-5 Project 1 Task 

We students, needed to finalize the document based on the knowledge we learned in the W2-4 lecture for the final submission of the proposal.

Contents in the first ver.;

1. Introduction of Task 1

    1-1. Abstract of Mobile Application Re-designing

    1-2. Specific Procedure

2. Background and Context

    2-1. Importance of UI/UX Design in Mobile Apps

    2-2. Determination of the App to Re-design

3. UX Analysis

    3-1. Analytical Methodology

    3-2. UX Analysis in Celcom Life

4. Project Outline

    4-1. Rationale & Problem Statement

    4-2. Identification of the Purpose

    4-3. Project Goals (Objectives)

    4-4. User Research

5. References

Fig.2-15: Proposal Document First Ver. (26/4/2023)

After the Lecturer's check, the document was organized according to the instructions given.

Contents in the final ver.;

1. Introduction

    1-1. UX design improvement proposal for “Celcom Life”

    1-2. Why this App was chosen?

2. Background and Context

    2-1. The purpose of the App

    2-2. Problem Statement

    2-3. User Demographics and User Needs

    2-4. Examples of inappropriate design

3. Goals and Objectives

    3-1. Project Goals

    3-2. Project Objectives

4. User Research

    4-1. Method 1 “Card Sorting”

    4-2. Method 2 “Pre-designing User Survey”

    4-3. Method 3 “Checklist Evaluation”

5. Reference List

Fig.2-16: Proposal Document Revised Ver. (2/5/2023)

Fig.2-17: Final Outcome PDF (2/5/2023)

---

REFLECTIONS

Experiences

In this module, I felt that I gained very practical knowledge in app development, with UI/UX as the main focus. The group activities in class (some of which were simplified due to limited time) helped us practice specific research techniques and understand the theory behind them. Then, they used their knowledge and methods to get to the root of the module, the redesign of each student's chosen mobile app, and the improvement of the UX design. Currently, Project 1: Proposal has been completed first.

Observation

Although the terms UI/UX are used interchangeably, UX refers to the entire experience of using a series of services, whereas UI refers to the functionality or external configuration of tools such as applications and websites. In other words, good UI design is part of good UX design.

Findings

The topics covered in this module are basically related to mobile apps. However, I have found the concept of UX improvement suggestions to be applicable to any industry and any service. Of course we are visual design majors, but in reality critical thinking skills can be used in many different situations in our work.