Application Design / Project 1

29.08.2022 - 31.10.2022 (Week 1 - Week 10)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Application Design / Taylor's University 
Project 1 : Mobile Application Proposal

---

LIST

• Lectures
• Instructions
• Progression
• Feedback
• Reflection

OTHER POST:

• Application Design / Project 1
• Application Design / Project 2
• Application Design / Project 3
• Application Design / Final Project
• Application Design / Final Compilation and Reflection

---

LECTURES
<back to top>

Week 2 (05/09/2022): Lecture 1 - "UI vs UX"

UI = production phase, UX = pre-production phase. 

UX DESIGNER

• UX Designers focus on the structure and layout of content, navigation and how users interact with them.
• The types of deliverables they produce include site-maps, user flows, prototypes and wireframes, which are more focussed on the underlying structure and purpose of the software.
• The visual appearance does impact on these, but can be created as a separate layer that is applied over the top.
• How UX Designer works:

fig 1.1, UX Designer, Week 2 (05/09/2022), source: Dan Saffer

UI DESIGNER

• Focus on the way the functionality is displayed and the fine detail of how users interact with the interface.
• They produce the visual comps and functioning front-end code.
• This is very much about polished final production quality outputs.

WHY SO IMPORTANT?

• Successful UI Design, improves the product.
• “If people can’t use a product, it might as well not exist,” - Jakob Nielsen

COMMON CHARACTERISTIC

• There are a couple of standards that identify effective design across the board (regardless of media or discipline)
• First consideration is determining who the user is
• The design must be as broad or narrow as necessary to accommodate the intended user
• “There’s no such thing as good design,”- Nielsen -> then how? LISTEN to your audience first.
• Think ahead of who will actually be using your product and go from there
• Graphic designers have been reared on a variety of formulaic methods and approaches for successful design.
• Think ahead of who will actually be using your product and go from there
• Graphic designers have been reared on a variety of formulaic methods and approaches for successful design.
• Changing the focus from the designer’s aesthetic to the user’s need allows the product to be designed in a way that helps the user succeed
• From here, the aesthetic considerations can follow

GOLDEN RULES IN INTERFACE DESIGN

Nielsen identified five features to achieve usability on making User Interface

• Ease of Learning
• Efficiency of Use
• Memorability
• Minimize Errors
• Satisfy the User

DO'S AND DON'T IN USER INTERFACE DESIGN

• Strong Logo Position

fig 1.2, Strong Logo Position, Week 2 (05/09/2022)

• Provide Hierarchy

fig 1.3, provide Hierarchy, Week 2 (05/09/2022)

• Don’t Use Placeholder as Label

fig 1.4, don’t Use Placeholder as Label, Week 2 (05/09/2022)

• Primary CTA button should always stand out

fig 1.5, Primary CTA button should always stand out, Week 2 (05/09/2022)

• Format the text properly

fig 1.6, format the text properly, Week 2 (05/09/2022)

• Don’t use radio button, instead use card

fig 1.7, don’t use radio button, instead use card, Week 2 (05/09/2022)

• Provide sample and use simple email address text field
• except password - use attribute

fig 1.8, provide sample and use simple email address text field, Week 2 (05/09/2022)

• Use Color Psychology

fig 1.9, use Color Psychology, Week 2 (05/09/2022)

• Horizontal Alignment

fig 1.10, Horizontal Alignment, Week 2 (05/09/2022)

• Keep fields minimal

fig 1.11, keep fields minimal, Week 2 (05/09/2022)

• Properly place your CTA button

fig 1.12, Properly place your CTA button, Week 2 (05/09/2022)

Week 3 (12/09/2022): Lecture 2 - "User Experience Research"

“The process of understanding user behaviors, needs, and attitudes using different observation and feedback collection methods.” - Design Modo

Objective : solving a problem, NOT only aesthetics.

First we need to deconstruct the app and create process-flow.

Example:

fig 1.13, example of process flow diagrams, Week 3 (12/09/2022)

• Diamond : Decision
• Square : Process
• Rounded Rectangle : Start/end
• Circle : Yes / No

COLLECTING DATA:

Hardest method: random sampling - sometimes it won't answer the question.

5 steps based on Erin Sanders:

1. OBJECTIVES. What are the knowledge gaps we need to fill?
2. HYPOTHESES. What do we think we understand about our users?
3. METHODS. Based on time and manpower, what methods should we select?
4. CONDUCT. Gather data through the selected methods.
5. SYNTHESIZE Fill in the knowledge gaps, prove or disprove our hypotheses, and discover opportunities for our design efforts.

Each person perceive different ways in having the user experience.

WHAT'S THE VALUE IN CONDUCTING USER EXPERIENCE RESEARCH?

PRODUCT BENEFITS

UX research provides data about the end user of the product, how and when the user will use the product, and the main problems the product will solve. UX research is also helpful when a team has to decide between multiple design solutions.

BUSINESS BENEFITS

UX research brings a lot of a value to businesses. By knowing the end users and incorporating design requirements upfront, businesses can speed up the product development process, eliminate redesign costs, and increase user satisfaction.

USER BENEFITS

One of the greatest values of user experience research is that it’s unbiased user feedback. Simply put, UX research speaks the user’s thoughts—without any influence from outside authority. It also serves as a bridge between users and the company.

3 top positive 3 top problems

Week 4 (19/09/2022): Lecture 3 - "UI UX Documentation"

fig 1.14, UI UX Documentation, Week 4 (19/09/2022)

Sequences:

1. Research
2. Define
3. Design
4. Prototype
5. Handover
6. Improvements

Documentation:

• Overview (define)
• Project summary
• Problem (HCW)
• Solution (SWOT)
• Definition (Role/Duration)

• Discovery (empathize)
• Project summary
• Problem (HCW)
• Solution (SWOT)
• Definition (Role/Duration)

• Design (ideate)
• Sketch
• Wireframe
• Usability prototyping
• Key Findings

• Prototype

• Final Design
• Prototype
• Documentation

• Handover
• Engineer
• Developer
• Video Prototype

• Improvements
• Next steps
• Long term Plan

---

INSTRUCTIONS
<back to top>

fig 2.1, Module Information Booklet of Application Design

Project 1 requirements:
Market Research (SWOT analysis), real-time data (surveys)

Week 1 (29/09/2022):

• Look on some applications that we think the UI UX is bad.
• Decide whether we want to design android or apple applications.

PROPOSAL:

Students are required to create 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 the app and provide a clear flowchart of the app. The document will determine whether or not the app idea is good to continue to the next development phase. This task is an iterative process whereby during the assignment period, students are free to get feedback from their peers and module coordinator to further refine their idea.

PROGRESSION

<back to top>

Week 1 (29/09/2022): 

When Mr. Shamsul gave the task, the first application that popped up on my mind is Monny - it's a expense tracker application.

fig 3.1, Monny, Week 1 (29/08/2022)

Thinking of the platform, what I want to do is creating Android's, because I'm an Android user for a very long time, and I'm more familiar with Android, that's why.

Week 2 (05/09/2022): 

I analyzed the application:

fig 3.2, Analysis of Monny, Week 2 (05/08/2022)

Then, I analyzed the SWOT of my application:

fig 3.3, Analysis of Monny's SWOT, Week 2 (05/08/2022)

Then I created project goals which I plan to reach later.

        PROJECT GOALS:

Name         : MONNY (version 1.8.15 on Android)

Type           : Finance Application

Problem    : UX and Interface Design

What?

What I want to achieve from the project are better interfaces and improvising some point of the application users' experience. My desirable outcome will be an improvised design of the apps in certain area, mostly on the user experience. 

Why?
I found out the buttons placement could be better, the separation of income and expenses are difficult for those first timer. Other than that, I found that there're some disunity in term of the interface.
Input real user data

Where?
Type of OS (ios, android, desktop etc)
Input real user data

When?
Draft your timeline

Who?
Who are experiencing the pain points

Success Metrics
State your Key Performance Index (KPI)

fig 3.4, project definition, Week 2 (05/08/2022)

Week 3 (12/09/2022):
These are the general interface of Monny:

fig 3.5, Monny's General Interface, Week 3 (12/09/2022)

From that, I analyzed and mapped out the application's flowchart:

fig 3.6, Monny's Flowchart, Week 3 (12/09/2022)

Week 4 (19/09/2022):

I research on the market of "finance tracking app," and found this data:

fig 3.7, Market study, Week 4 (19/09/2022)

Then moving on to the user research, I conducted a survey which is being responded to 56 people. I also conducted an interview that've been answered by 3 people.

fig 3.8, survey's result, Week 4 (19/09/2022)

fig 3.9, interview result, Week 4 (19/09/2022)

From the survey, I created some user personas:

fig 3.10, user personas, Week 4 (19/09/2022)

Then, based on the market research and study, I created the sketch for the wireframe:

fig 3.11, rough wireframe, Week 4 (19/09/2022)

I also attempted on creating the low fidelity prototype (Home Screen):

fig 3.12, wireframe, Week 4 (19/09/2022)

Week 5 (26/09/2022):

Mr. Shamsul asked to complete more the slides, like adding the key feature, flowchart, etc. Thus I created the new flowchart based on the new app UI:

fig 3.13, New Flowchart, Week 5 (28/09/2022)

Thus, here's the complete progression of my app proposal:

fig 3.14, Final App proposal, Week 5 (28/09/2022)

---

FEEDBACKS

<back to top>

WEEK 2 (05/09/2022)

        GENERAL FEEDBACKS:

• Keep on learning, reading, and analyze User Interfaces.

WEEK 10 (31/10/2022)

    

    SPECIFIC FEEDBACKS:

• Proceed with low fidelity prototype and test to 2-3 person

---

REFLECTION 

<back to top>

In this task I learn on how to analyze an app user interface. It was quite fun and challenging, especially if the app interface is not really bad. In this task also, I learnt how to make the proper UI, how to create a good UI. More things that I should reflect, is on how to make a simple design on a proper layout, because sometimes I struggle with making simplicity when the contents are many, thus, I accidentally created an outdated design.

---

FURTHER READING

<back to top>

*all images sourced from websites

UX / UI DESIGN PROCESS

(fen)

Steps:

• 1. Research - Meet the user
• Figure out the things needed to research
•  Use interview + observation, survey

• 2. Empathize - Be the user
• Empathy map
  

• Personas

• Scenarios

• Storyboard

• 3. Ideation - Concepting
• Flowcharts
• Paper Prototype

• Digital Prototype (wireframe - actual design)

• 4. Testing - Seeing how it works
• Prototype should be real enough to get an authentic response in order to validate or invalidate a hypothesis.
• Think critically about what to build in prototype in order to get the feedback.
• Test goal is to find out if the solution works as planned or provides. 

• 5. Iteration - Feedback and develop further
• Adjust based on client's feedbacks

REFERENCE:

Fen. (2021, February 5). UX/UI Design Process - NYC Design. Medium. Retrieved September 7, 2022, from https://medium.com/nyc-design/ux-ui-design-process-for-beginner-753952bb2241

---

PERSONAS

(usability.gov)

• Purpose: to create reliable and realistic representations of your key audience segments for reference.
• Should be based on qualitative and some quantitative user research and web analytics.
• Effective personas (as written in the web):
• Represent a major user group for your website
• Express and focus on the major needs and expectations of the most important user groups
• Give a clear picture of the user's expectations and how they're likely to use the site
• Aid in uncovering universal features and functionality
• Describe real people with backgrounds, goals, and values
• Questions that can be asked during personas development:

• Elements of persona:
• Persona Group (i.e. web manager)
• Fictional name
• Job titles and major responsibilities
• Demographics such as age, education, ethnicity, and family status
• The goals and tasks they are trying to complete using the site
• Their physical, social, and technological environment
• A quote that sums up what matters most to the persona as it relates to your site
• Casual pictures representing that user group

REFERENCES:

Assistant Secretary for Public Affairs. (n.d.). Personas | Usability.gov. Retrieved September 7, 2022, from https://www.usability.gov/how-to-and-tools/methods/personas.html