Application Design I / Lectures & Exercises

07.04.2023 - 07.07.2023 / Week 1 - Week 14
Yung Siew Weng / 0339847
Application Design I / Bachelor of Design (Hons) in Creative Media
Lectures & Exercises

LECTURES

#WEEK 1
Application Design I Lecture #1: Introduction to Module
As with the other modules, Mr Shamsul, our module coordinator, presented a brief overview of this module, Application Design I, outlining what to expect over the length of the semester. Additionally, we had been briefed on the expectations and requirements for the Project 1 proposal. Also, we had also been informed that the project prototype will either be investigated using Figma or Adobe XD based on our preferences.

#Important Notes :

Fig 1.1 Low - Fidelity Prototype vs. High - Fidelity Prototype

The main difference between low-fidelity and high-fidelity prototypes comes in terms of user interaction. Low-fidelity prototypes are often paper-based and do-not allow user interactions. Whereas, High-fidelity prototypes are digital and allow clickable user interaction.

Low - Fidelity Prototype  : Gummy text, B&W, wireframe ; 
High - Fidelity Prototype : look-and-feel of the final product, details and functionality, real-time iteration (clickable)

#WEEK 2
Application Design I Lecture #2: Understanding User Interface and User Experience, User- Centred Design


#Important Notes :

1. Design Thinking Process
Emphasises 
➜
 Define 
➜
 Ideate 
➜
 Prototype 
➜ T
est

2. What is Usability?

Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation. A design’s usability depends on how well its features accommodate users’ needs and contexts.


When users first encounter an interface, they should be able to find their way about easily enough to achieve objective without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal. [onboarding app]


3. Onboarding Application

An onboarding experience is a way to introduce users to a new product, app, or feature. Onboarding UX is the design of a flow or series of flows that give the user a guided introduction to the product, set up some initial preferences, or point out critical UI elements in an interface.

4. Key Principles of Usability
➜ 

Consistency 

[navigation system, page layout and menu structure, fonts and typography and branding]
➜ 

Simplicity

➜ 

Visibility

➜ 

Feedback

➜ Error Prevention

5. Common Usability Pitfalls and How to Avoid Them
➜ 

Complex interfaces

➜ Confusing navigation
➜ Poor feedback
➜ Inadequate error handling

#Application Design I 
- Week 2 Given Task : Low Fidelity Prototype
For this particular exercise, we are required to 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, brainstorm ideas and think about how you can address the needs and problems of the users. Sketch out ideas on paper or using digital tools.Test your kiosk prototype with potential users. Observe how they interact with the kiosk and ask for feedback. Use the feedback to refine the design. Last, reflect on the design process and the feedback received from users. Identify areas for improvement and think about how we can apply what you learned in future projects.

Exploration
After receiving the task requirement, we start to develop ourselves into groups. W
e had separated ourselves into various groups depending on "table." I had joined a group of six people, which included four design students and two computer science industry students. Prior to establishing the concept, we assumed that everything would go easily, and we discussed our views and pooled our thoughts and ideas.


Fig 2.2 Low Fidelity Prototype Development (week 2/ 14.04.2023)

In fact, it appears to be very difficult for us to participate adequately in a very short workout time during this particular session. But as a group, we/ I forgot that we needed to share our responsibilities in order to contribute to the team. Regardless of what transpired along the way, we ended up with four design students that completed the entire exercise. And the result was "terrible" for us; in actuality, I had made the circumstance really horrible by portraying it in an absurd manner and deceiving the play tester. Overall, this straightforward and practical approach to paper application design appears to be a challenge, a lesson, or perhaps an experience for me in the future industry of my career. 
  • Clear Navigation : Provide clear navigation options that allow users to explore the application without feeling constrained or directed. Users should be able to easily find what they are looking for without feeling like they are being led in a particular direction.
  • Minimal Guidance : Avoid providing excessive guidance or direction to users, as this can lead to frustration and a feeling of being overly controlled. Instead, provide users with the information they need to make informed decisions and let them explore the application on their own.
  • General Experience : A satisfied user-friendly outcome of any applications or websites should be incorporated with both front-end and back-end to achieve the goal; designers should know the basics of how programmers work, whereas programmers should also know the basics of making user-friendly applications to at least make the progress less argumentative.

#WEEK 3
Application Design I #3: Self-directed Class 

#Application Design I 
- Week 3 Given Task : Product UX analysis
For this particular task, we are required to select one of the mobile app from the potential topic, conduct an initial evaluation of the product's UX design, research the UX Laws and theories, create a checklist or an outline to guide the analysis, conduct a thorough analysis of the product's UX design, write a report summarising your findings as well as create a visual presentation of your analysis.

Exploration
After received the requirement, I began my adventure on research and develop. The selected mobile application for this task is the mobile application : MBO Cinemas. Although the requirements was to create a visual presentation via google slides for the UX analysis, I did some research and documented the information into a document file under the PDF below :

Fig 3.1 UX analysis, docs file (week 3/ 22.04.2023)

After finalising all of the content, I proceeded to develop the visual slide. To make the slide more engaging and dynamic, I described the first implementation of the MBO Cinemas application using screenshots from its current application design :

Fig 3.2 UX analysis, Visual Presentation Slide (week 3/ 22.04.2023)

#WEEK 4
Application Design I Lecture #4: Card Sorting Method


#Important Notes :

1. What is Card Sorting?
Card Sorting is a powerful and popular method used to gain insights into how users group and categorise information. It is also one of the primary ways to figure out an organisation scheme. Overall, it is a technique that can be used to inform the design of navigation menus, website or app architecture and even content strategy.

2. Types of Card Sorting
Two main types of card sorting : open and closed. 
Open card sorting allows users to create their own categories; closed card sorting provides users with predefined categories to sort the cards into.

#Application Design I 
- Week 4 Given Task : Card Sorting 
For this particular exercise, we are required to design a health and fitness mobile app that helps users track their daily fitness and health goals. The health and fitness app is designed to help users track their daily fitness and health goals in a fun and interactive way. Card sorting the features of the mobile app.

Exploration
After receiving the requirement, the group had started to discuss and develop idea towards the topic. Prior from getting into a deeper explanation, we was required to prepare the "card" that you will use for the exercise. Each "card" represent a piece of the features given from the requirement. Then, we continued to sort the cards into categories that make sense to us in order to create an user-friendly health and fitness application.

Fig 4.1 In-class Exercise, Progress (week 4/ 29.04.2023)

As shown above, we sorted our card by using sticky notes and the visual might be dull in terms for digital scanning, I did a digital version on our card sorting exercise for a better visual in this blog. 

Fig 4.2 Card Sorting, Outcome - Digital (week 4/ 29.04.2023)

Throughout this activities, it had allowed us to identify common themes and categories that users might expect from a health and fitness app. We/ I also gained insight into specific subcategories that users might find useful, such as having own user profile, some challenge and quests for the community to achieve the leaderboard, saved the user's favourite collection or contents, etc.

Overall, the card sorting exercise helped us to better understand the needs and preferences of our target audience and informed the organization and design of our health and fitness mobile app. It was a collaborative and engaging activity that allowed us to work together as a team and provided us with valuable insights that we can use to improve the user experience of the app.


#WEEK 5
Application Design I Lecture #5: Introduction To User Experience Research


#Important Notes :

1. User Experience (UX) Research
According to Design Modo, UX research is "the process of understanding user behaviours, needs, and attitudes using different observation and feedback collection methods." 

2. The 5 Steps of User Experience Research
Created by Erin Sanders, the Research Learning Spiral provides five main steps for conducting UX research. The first two steps are about forming questions and hypotheses, and the last three steps are about gathering knowledge through selected UX research methods.
  • Objectives
  • Hypotheses
  • Methods
  • Conduct 
  • Synthesise
3. UX Research Methods
  • Usability Testing
  • Interviews
  • Online Surveys
  • User Personas

#Application Design I 
- Week 5 Given Task : User Personas
For this task, we are given instruction on designing a mobile app for a local coffee shop that allows customers to order and pay for their coffee and food ahead of time, and pick it up at the store. Identify the different types of customers who might use this app. Based on our assumptions and prior knowledge, brainstorm a list of different types of customers. For each type of customer, create a user persona that includes name, demographics, goals and motivations, pain points and challenges, behaviours and preferences.

Exploration
After receiving the task, our group which consists of Carmen, Cheng Yu, Pei Yun, Avril and me joined a breakout room [online class this week] and start our development in creating the user persona. We had the ideation to create 4 user persona on :

1. Evelyn - Students who need to grab a quick coffee and snack in between classes.
2. Crystal - Coffee enthusiasts who want to customize their orders and concerned about the environmental impact of disposable coffee cups.
3. Brian Lu -  A sales manager that prefers morning workouts and prefer to buy coffee at nearby cafes with early opening hours.
4. Kah Yong - Busy professionals who want to save time by ordering and paying for their coffee and food ahead of time.
Fig 5.1 User Personas, Outcome Presentation Slides (week 5/ 05.05.2023)

#WEEK 6
Application Design I Lecture #6: User Journey Map


#Important Notes :

1. What is User Journey?
User journey is the path that a user takes to complete a specific task or achieve a particular goal within a mobile app. It refers to the series of steps that the user needs to take to navigate through the app's features and functions. User journey is an essential concept in UX design because it helps designers to create a mobile app that is intuitive and user-friendly.

#Application Design I 
- Week 6 Given Task : User Journey Map
For this exercise, choose a persona, define the user journey that identify a specific task the persona wants to accomplish using your app, map the journey, add emotions and actions, analyse and improve as well as create solutions. By creating this user journey map, we will gain valuable insights to improve the mobile app's user experience.

Exploration
After receiving the requirement, we start to explore our ideation towards the user journey map. We used the user persona, Crystal as our target persona for this particular exercise. 

#Crystal : A graphic designer that is tech-savvy. She prefer using mobile app to order her food and beverage in order to grab and go. Her preferences of her coffee is regular latte, extra shots, light foam and with oat milk, so she prefer an application that is able to customise.

Fig 6.1 In-class Exercise, Progress (week 6/ 12.05.2023)

Fig 6.2 Full Outcome _ Overview (week 6/ 12.05.2023)

After the development, we have finalized our ideation for the application and decided to create a user-friendly app. The app will allow users to personalize their coffee options, such as choosing their preferred milk, shots, and foams. It will offer various payment methods, including on-the-spot payment and e-wallet options. Additionally, the app will include a loyalty rewards program and a feedback form for users to provide their input.

#WEEK 7
- No Lecture. Task 2 Feedback Session -

#WEEK 8
- No Class. Independent Learning Week -

#WEEK 9
Application Design I Lecture #9: User Interface Design Principle

 

#Important Notes :

1. WHAT is UI Design?
UI design is referred to as Graphical user interfaces (GUI) and other types, such as voice-controlled interface.

2. Good UI Principle
  • Clarity - The most important aspect of any user interface. User must understand why they would use it.
  • Flexibility - efficiency of user through the use of shortcuts and accelerators, for example, button.
  • Efficiency - 
    Make everything simple, for example, border having low opacity, white, grey or black.
  • Invisibility - Make all the feature including logo to be visible.
  • Instant Feedback - Essential to interaction design which serves a larger purpose in any system as a whole, in that it tells people how they can and should interact with what's on the screen. For example, "Congratulations" for a fitness app when user hits their goals, page loading, pagination, hover on navigation, highlight on menu.
  • User Control - Users should be able to quick correct mistakes or backtrack on choices made. For example,
     "Do you confirm to cancel"
3. Visual Elements

  • Line
  • Shape - normally profile pic is round
  • Color 
  • Form
  • Texture - smooth shape not rough shape
  • Space
// Extra Tips to Task 3 //
- at least 3 work flow required in task 3, for example, Onboarding, log In, Purchasing (at least 3 movie to select)

#Application Design I 
- Week 9 Given Task : Replicate an App Interface
Select an app interface (Sectograph, Trip, Airbnb, Premier League, Strava) to replicate. Research the app interface to gather information on its design elements and principles. Take note of the visual design elements, typography, layout and user interface design principles used in the app. 

Using the design software, Figma to replicate the app interface as closely as possible. Pay attention to details such as color, typography and layout. Once the interface has been replicated, assess how well it conforms to user interface design principles.


Exploration
For this exercise, I have chosen Airbnb as my focus since the app is already installed on my device. I have conducted an exploration of the application's typography, color scheme, and layout. I specifically examined the selection pages for Home, Wishlists, Trips, Inbox, and Profile.

Fig 7.1 Airbnb Layout Details (week 9/ 02.06.2023)

After completing the exploration of the layout details, I began to my journey ofinvestigating the features of Figma. During this process, I used the "tracing method" in which i import the original image, locked the image and reduce its opacity.

Fig 7.2 Screenshot, Development (week 9/ 02.06.2023)

And, I am not able to plug-in the initial typography "airbnb cereal" in my Figma; so I utilised the similar font which is "Inter" for replicating the typography throughout the full replicated version.

Fig 7.3 Airbnb Cereal vs. Inter (week 9/ 02.06.2023)

It was crucial to note that I encountered some difficulties during the process, such as experiencing a blackout screen while working on my project. As a beginner exploring the software, I faced challenges in understanding and utilizing all the tools. Fortunately, I was able to overcome these difficulties by seeking help from online platforms and finding additional sources to clarify any confusion I had regarding specific features. For instance, one challenge I encountered was fixing the navigation bar at the bottom position within the overall layout. To address this,

#solution:
Create a frame [command + F] on the space where you want the scrolling function to be implemented > Drag all the scrolling elements (grouped) and place them inside the frame.

By following these steps, you can ensure that the navigation bar remains fixed at the bottom of the layout while the remaining content scrolls within the frame.

Fig 7.4 Screenshot, outcome in Figma (week 9/ 03.06.2023)

Continuing on, since I am curious regarding the user flow interaction in Figma (which I
believed its potential usefulness in my wireframe development), I seized the opportunity to delve deeper and explore its functions.

Fig 7.5 Screenshot, user flow interaction (week 9/ 03.06.2023)

Fig 7.6 Final Outcome, Prototype - Replicated Airbnb (week 9/ 03.06.2023)


Fig 7.7 Final Outcome, Prototype - Replicated Airbnb (week 9/ 03.06.2023)


#How well Airbnb conforms to user interface (UI) design principles? 
  • Consistency - The design of the app maintains consistency in elements such as typography, colour scheme, spacing, and overall layout throughout the interface. 
  • Clarity - The visual hierarchy of the app is well-defined, having clear labels, icons, and indicators aid user understanding.
  • Efficiency - A clean and minimalistic design in having grey border with some light shadow effect helps users navigate and interact with the application more efficiently.

#WEEK 10 - 14 
- No Lecture. Progression Check & Self-directed Class -

REFLECTION

Throughout the entire journey of designing the application, I found it to be a knowledgeable but also a somewhat stressful experience, especially compared to previous interactive design projects. I found the overall lectures and exercises to be very refreshing and knowledgeable. One aspect that I particularly enjoyed was the in-class exercises. These activities allowed us to apply the knowledge gained from the lectures and put it into practice. Whether it was creating user journey flow, user personas, replication in Figma, these exercises helped solidify our understanding and allowed us to experience the process of application design firsthand.

However, I also experience challenge during the in-class exercise, as the first exercise turned out to be one of the worst experiences I've had during my university life. The outcome of our group's work was far from satisfactory and it led to a sense of depression within the team. However, this experience taught me the significance of having the right group dynamics and effective communication within a team. It became clear that without proper collaboration and understanding among team members, even the most well-intentioned efforts can go astray. It highlighted the importance of each member's contribution and the need to work together towards a common goal.

Comments

Post a Comment