Introduction to Information and Interaction Design

Prof.

Soojin Jun, Hyunjung Kim

Grade

first-year student

This course provides better understanding of information and interaction design, designing of the link between a user and a product that communicates information and how a product will be used, and creating an experience for the people who will interact with it.

PROJECT 01- redesigning mobile app

1/3

redesigning Korailtalk app

Kahyun Lee Sangjun Park

DESIGN PROBLEM

Elegance and visibility, Image and Representation• needs simplification for less distraction and clear understanding

INFO STRUCTURE

Modified information structure
• we divided 할인상품/관광열차 into 할인/가족석 예매 and 영화/관광 열차, so that users can easily use those functions.

GUI DESIGN

Design Objectives• focus on main menu and subpages used when reserving a ticket
• simplify application by eliminating all unnecessary features• improve consistency within pages

EVALUATION

New Home Screen• removed images inconsistent with style
• used bar layout without icons to match other pages• removed “talk” from application name
• separated 할인상품 into 2 categories• added PC version for convenience

Lack of Constraint• Font is applied to English keypad only, but no constraint exists in using Korean keypad, gives misleading information to its users
• There should be constraint on using Korean keypad if font is only available in English

Excessive Service• Although there is already an icon for mode purchase (marked by yellow box), purchase messages are too frequent which is very inconvenient and distracting for the application users

INFO STRUCTURE

GUI DESIGN

EVALUATION

Modifications 1. Icon
• Colors: We narrowed the colors down to two so that it is simpler for the users to see.
• Meaning: Modified version looks like a speech bubble, which signifies the usage of the app

Modifications 2. Home• Unintelligible: Unintelligible wordings like Emoji Keyboard which actually is modified to an exact wording
• Inappropriate: An icon for download which is inappropriately used is modified
• Unnecessary: Unnecessary title like ‘cool emoji fonts’ is modified to ‘fonts’ to include only the necessary meaning.

Modifications 5. Select Font• Indistinctive icon for purchase: Modification made to mark the icons that need to be purchased
• Inconsistent design: the upper bar has different color to the other pages which are pink

Modifications 6. Message• Inconsistent icon: the color of the upper bar different from other pages inconsistent icon used for sending the text
• Unnecessarily long title: modification from ‘cool emoji fonts’ to ‘message’