Heonjae Jung Design Portfolio
email digimill@gmail.com web www.w-ire.com November 2009
2
Brief
TABLE OF CONTENTS
01 Coursework at DA
3 4
Sociociti Loupe table Pixonic V-fit
02 User Experience Design
14
03 User Interface Design
23
04 Communication Design
28
Digital camcorder for new lifestyle Samsung Built-in kitchen appliance LG the secrets
CAT Websites Web design at Dazone Tech Connection spectrum
Trend Square Bit typeface Graphic design foundation Visual identity
Heonjae Jung Portfolio 2009
Brief I have been fascinated by how digital technology may change our life completely since I read a book called ”Being Digital” by Nicholas Negroponte when I was sixteen. Playing a key role in this revolution has become my long-term goal. To pursue my goal I have been learning how to materialize ideas at college, work and most recently here at master’s level course. I classified my trace into four categories in the diagram to the right. Most of my works belong to several areas that often intersect because they are deeply connected.
2 User Experience Design
Information Architecture
4 Communication Design
1 Interaction Design
Industrial Design
Coursework at DA
3 User Interface Design
Usability Engineering
From Dan Saffer’s IxD Relationship
01
Coursework at DA Interaction design course provided me with practical and conceptual skills to carry out a problem-solving activites as well as developing concepts, scenarios and strategies with more technical and market-oriented competence. During the course I completed five workshops. Workshop activities includes two investigations, focused on fundamental aspects of interaction design and three Crossing Design Seminars. The following pages show a sample of my work.
Heonjae Jung Portfolio 2009
Coursework at DA
socioCITI
Innovative urban information infrastructures for the 2015 Expo in Milan. Collaboration with the Master in Design.
5
http://w-ire.com/works/sociociti
WHAT IS IT Networking has become a key part of our daily lives nowadays; being online and connected is part and parcel of our social existence. We try to share all the interesting aspects of our day to day lives in the form of online status messages and by uploading pictures of our trysts and travels. Our project aims at satisfying this growing need of person to person interaction by creating a live and interactive journal for an individual. We have tried to create two systems, one that applies to people who decide to walk and explore the city of Milan during the Expo; we have a software that could be downloaded onto a mobile phone from the internet or from various information kiosks set up in public spaces. This software will create a live online journal for the user, which will constantly update itself according to the users movement and activity across the city, at the same time the software will use the GPS feature and help guide the user. The second system we have developed is essentially for people using the BikeMi bicycles, it will help them navigate through the city and at the end of a journey be able to provide them with a data log of their travels, which once again they can upload to blogs etc, or simply use it to compare other such trips. The essence of our project is that users can now share more detailed experiences online with friends or simply save them as a personal travel journal to enrich their own memories.
HOW IT WORKS For our first system wherein users will be walking around the city, they can either download the Sociociti application from the expo website or they can download it from a SocioPort. These will essentially be Bluetooth towers set-up in and around some of the important locations of the city. These towers will create a Bluetooth hotspot, as soon as the user is within range of one of these towers they will receive a message on their phone, asking if they wish to download the desired application. Once the application is installed on the user’s phone they will get map readings according to their current location, they can now set a destination point on the phone and they will receive guidance on various routes and information pertaining to it. Simultaneously the application will create
a live journal for the user and keep updating their location to it. Along the route the user will encounter various Photostops; there will be cameras set up at these sites, where a user can get their picture clicked and automatically uploaded to their journal. Along the way users will receive information on their phone telling them about rest stops in the form of local restaurants and cafés. Users can visit these places and rate them on their phone, if a restaurant or café receives a good enough rating it can also be advertised on the user’s journal page for further references. The application will also inform users when they are in range of other public conveniences such as Metro stations and taxi stops. Once the user reaches his destination point the application stores all of the journey information on the online journal. After reaching home users can access their journal online and share it with their friends and family or simply upload it to their own blog, thus making the trip a very interactive experience for the user. Our second system relates to the Bike Mi project in Milan, it will actively encourage visitors to use the bikes by making it more interactive and user friendly experience in terms of sharing more information in regards to the city and sights to see. For this system a user simply has to purchase a USB key, which will be available at various vending machines set-up close to the Bike Mi stations around the city. The USB will contain vital information about the city such as maps and routes and it will also contain information about the via Di Terra project of Milan. The user then plugs the key into a small GPS unit attached to the handlebar of the bike. The GPS gets activated and displays the current location, now the user can enter his destination point and the GPS will help guide him there. On the way, once again users will encounter Photostops where they can get their pictures clicked, but in this case the images are downloaded to the bike GPS and stored on the USB key. The GPS also stores route information and distances covered by the user. Once the user arrives at his destination the GPS stores all the information collected onto the USB and the user can now detach it from the bike and take it with him. At home the user can check his data log and images collected along the trip. He can choose to print his own journal or upload it to his blog, he can also use this information to compare other such trips in the future.
Heonjae Jung Portfolio 2009
6 SocioPort Bluetooth tower
BikeMi GPS module
Mobile Application
BikeMi Application
Heonjae Jung Portfolio 2009
7
Coursework at DA
LOUPE TABLE
The projects was developed within the context of exhibition design trying to find useful applications for interaction design solutions inspired by physical computing and tangible interfaces.
http://projects.domusacademy.net/bnm/?cat=4
WHAT IS IT Loupe Table is a kind of digital contents searching and displaying system which people can navigate and get the detailed multimedia information by controlling unique display. The idea is started that the many museums have a lot of slides film in their storehouse and could not find way to show them to visitors.
HOW IT WORKS Loupe Table is influenced by combination of digital technology and emotion of analog things. Interactivity of analog way can be more familiar with people in terms of communication. In addition, this system focuses on the interfaces to identify the classification and position of slide film. And this system encourages active participation of user in interesting and familiar ways, and to reduce his or her rejection as interactive role player. This system consists of two elements, the one is a physical table having many slides on cover of the top and LED light under the cover. And the other part is a circular LCD display looking like Loupe. User can move the Loupe by the controlling Loupe arms with hands to position of the slide where user wants to see. After moving the Loupe to the position of one slide, people can get more information and multimedia contents. As there are magnetic sensors underneath the slides, different content by position of the slide can be shown by triggering magnetic sensors with the magnet on the bottom of Loupe display. At the same time, by the same logic, LED light under the cover of table can be on and off. By controlling vertical height of display, user can zoom in and out the slides. As the data of height continuously is detected by distance sensor on the bottom of Loupe. Also user can control graphic interface on display by using dial knob on the side of loupe. By rotating it user can select digital contents such as video, photos, detail info.
VALUE AND POTENTIAL In particular, Loupe Table used the normal behavior of user which control analog thing, as a physical behavior of user to communicate with digital contents. It could have easy access and be used for rich digital information through ‘out-of-style’ things. It could help museum to manage, utilize materials accessible that they already have. In other words, this system could be multimedia database searching solution based on the slides. And the other potential is that this system could be extendible and flexible. Even if there are different kinds of data or no slide film, this system could handle it in the various way and could be used as many different types of contents and models. Heonjae Jung Portfolio 2009
8 INTERACTION MODALITY
Heonjae Jung Portfolio 2009
System Structure - LOUPE
SYSTEM STRUCTURE
9
PROCESS
Display
1.Stakeholder meetings
2.Concept generation, Presentation
Rotator
Magnet
Infrared Ranger
Slides
3.Prototyping, Exhibition Lights
Arduino
Computer
Magnetic Sensors
ASSEMBLY
PROTOTYPE VIDEO Heonjae Jung Portfolio 2009 http://vimeo.com/5126571
10
Coursework at DA
PIXONIC
http://w-ire.com/works/pixonic
Humankind has always related to visual and aural dimensions for communicative and artistic expressions. Most of the time, these two dimensions are independent from each other. This project broadens user’s imagination and creativity through the creation of a strong link between sounds and images. We want to give the user a way to express his/her curiosity and discover the surrounding environment through sounds. HOW IT WORKS The application works in two modalities: exploration and expressive modes. In the exploration mode, the software recognizes visual elements and translates them into sounds through an object detection algorithm. The camera embedded in the portable device catches real-time pictures to be analyzed and directly transforms them into pleasant sounds the user can listen to, and decide whether to save them or not. In this modality the user can affect image properties by changing some basic parameters as brightness, zoom and contrast, this way the user can assist the software to investigate the visual elements and create new sounds. In the expressive mode it is possible to directly interact with sounds, playing with both visual and interactive elements. The main idea is to give the user an interface to move sound scanners that detects meaningful spots in the taken picture, each spot represents a specific object based on shape and color.
WHAT IS IT Pixonic is an application for smart phones and other portable devices which transforms real time images into sounds. Using a camera to take real time pictures, the software can generate pleasant sounds by scanning the visual contents. The user can interact and manipulate sounds through some simple graphics editing functions. Another level of interaction is based on direct sound control. Themes are provided to customize sounds and they can also be suggested by geolocation. Sounds can be shared and published on the web through social networking.
Sound spots can be added, removed and moved inside the picture to define unique sounds. A wide range of themes are available to customize sounds, they are based on different instruments, rhythm and melodies from various music and countries. A geolocation system provides suggestions based on the location the user has taken the picture from. As final step the user can save his/her sound and share it with other people through publishing it to the web and social networks. Heonjae Jung Portfolio 2009
VALUE AND POTENTIAL Pixonic gives people, a chance to investigate reality in an unusual way: through sound. We believe that this application could change the passive attitude of the user and make him/her more active and discover the surrounding space in engaging ways, answering the question: “Maybe this sounds nice!�. Increasing the creativity towards sound in terms of fun is not the only aim of this project, we also expect Pixonic to help the users to create memories of places and moments and share them with others. This last goal might be achieved with the adoption of themes, which will provide different musical experiences based on locations.
11 USER INTERFACE AND INTERACTION FLOW
SYSTEM MAP
Heonjae Jung Portfolio 2009
12
Coursework at DA
V-Fit
http://w-ire.com/works/vfit
The focus of the project is to reinvent the shopping experience into retail spaces through visual interfaces to create a meaningful interaction between users, the space and products. The specific scope of the project is to enhance the way the shop supports the moment of testing in fashion and accessories shops. The visual interface helps to describe a person in terms of height, width and overall body shape using different body language and gestures. It is very useful to visualize the person, who is not present in the shop, and choose the correct size of clothes for him. This gives certain added value to the overall shopping experience by engaging the user in an innovative way.
CONCEPTS
HOW IT WORKS
Buying clothes for someone not there in the store with you
You don’t know his/her size exactly
Then you use Body Language to describe his/her appearance
The system is based on human gesture recognition technology. The system mainly comprises of three components: Infrared rays led array, Camera-based Recognition, Capacity Sensor-based Recognition. In the standby mode the interface displays different images from the visual library and the users can choose the image which closely resembles the person to be described. The interface reacts to the gestures and hand movement and enables the user to modify the image to suit his requirement. It is possible to modify the image in terms of height, width and overall body shape in the front and side profile. After completing the image description the system gives the recommendation for a suitable size of clothes for the person described. Heonjae Jung Portfolio 2009
VALUE AND POTENTIAL
INTERACTION FLOW
13
The visual interface enhances the overall shopping experience driven by consideration of moments of engagement between people and space. It helps to add a certain value to the moment of testing and provide a new entertainment to the user within the retail environment. The solution, V-fit, serves as a high adaptive interface for variable fashion stores. Further potential development would be a printable version of the interface feedback which people can take away as a souvenir of their experience.
Heonjae Jung Portfolio 2009
02
User Experience Design User Experience Design is the practice of designing products, processes, services, events, and environments with a focus placed on the quality of the user experience and culturally relevant solutions, with less emphasis placed on increasing and improving functionality of the design. The following pages include my undergraduate thesis project in school and a project as intern in global UX consultancy.
Heonjae Jung Portfolio 2009
User Experience Design
Digital Camcorder for New Lifestyle Thesis project of product design major at Handong Global University In conjuction with digital AV division of Samsung Electronics / Exhibited at Seoul Design Olympiad 2008
15
2008
OBJECTIVES To propose a video camera UI design that can provide user extraordinary experiences which fits to their new lifestyle.
CHALLENGES Analyze new using pattern and behavior in user-generated contents age Propose UI design strategy based on the analysis. Find way to overcome the stereotyped image of camcorder which is hard to use, troublesome. It was huge opportunity to experience whole process related to design research and UI design with taking into account the competitive industry.
MY ROLE In-depth user research Concept generation Product design, model making (only for OMO model) Graphic user interface design Graphic works for degree show
Heonjae Jung Portfolio 2009
16
Digital Camcorder for New Lifestyle
Heonjae Jung Portfolio 2009
17
Digital Camcorder for New Lifestyle
Heonjae Jung Portfolio 2009
ALL FEATURES SIMULATION 18 Korean / High-bandwidth
http://www.w-ire.com/worklist/camcorder/start.html
OMO
OMO has a revolutionary 360 degree swivel grip. More comfortable shooting position, diverse angle is now enabled. When camcorder is turned off, the lens portion is completely disappears and changes to a compact and simple appearance. New interaction way with analog type jog under LCD screen allows fast browsing of recording list and accurate recording setting control.
3 Smart tagging Based on OCR technology, you can manage thousand of videos with very little efforts
1 Instant start As soon as you grasp the camera, powers on, lcd screen half-opened automatically. Everything is ready for your unexpected recording.
2 No more wrist pain 360ยบ rotating grip parts ensure freedom of angle without any wrist pain.
4 Tutorial mode
Digital Camcorder for New Lifestyle
Heonjae Jung Portfolio 2009
19
User Experience Design
Samsung Built-in kitchen appliances
2009
I contributed to this project during my internship at Experientia as a design researcher.
OBJECTIVES The project aim is to support the Samsung Digital Appliances Division in gaining better knowledge of the European built-in kitchen market current products and future trends, to provide insights and ideas for future 2012 concepts. The objective is to understand people’s needs and behaviors, issues and annoyances, desires and expectations in three European countries (France, Germany and Italy).
SCOPE & METHODOLOGY Research methods divides into two phases - benchmark analysis and contextual user research. The results was used to create USP ideations and PUI guidelines, which will help to improve the design and finally the user experience of selected products.
phase 1
phase 2
phase 3
Competitor analysis in three countries: France, Germany, Italy.
User analysis of physical user interfaces (PUI) and graphical user interfaces (GUI) in three countries: France, Germany, Italy.
USP ideation and PUI guideline development using the analytical insights from phase 1 and 2.
Desk research
16 Expert interviews
Opportunity mapping
Competitive benchmark evaluation of the usability and design aspects of two French, German and Italian well-known white goods brands.
In-depth interviews with 3 UI Tech experts, 2 food and culture experts, 2 built-in journalists, 1 architect, 1 furniture designer, 1 futurist, 4 kitchen specialists, 2 installers.
Define opportunities, experience paradigms and suggestions for product improvement based on user research insights.
Benchmark analysis
MY ROLE Carry out background research which is called benchmarking phase Participate in mid-term workshop with clients Prepare materials for field researchs
Contextual user research
9 Focus groups Shop visits Visits and observation in appliances stores and kitchen showrooms.
Participatory understanding sessions on emerging usage requirements, proving conceptual appliances ideas.
14 Home visits IFA Berlin 2009 Visit at the IFA Berlin 2009, observing built quality, general usability and user interfaces of different appliances.
Visits & observations in people’s houses.
USP ideation & PUI guidelines
Opportunity map
Concept development Applying user-research insights into concept development of 2-3 design directions for UI and PUI.
Design directions
11 Mystery shopping visits
Guidelines development
Visits and observations in kitchen specialist stores and showrooms.
Develop design guidelines for selected products, platforms and tasks.
PUI guidelines
Heonjae Jung Portfolio 2009
Benchmarking Phase
20
The following is just a short example of analysis because of the project is under Non-disclosure agreement.
COMEPTITOR OVERVIEW Exploration of six prominent competitors in Europe, documenting their approaches in user interface, brand strategy and key innovative aspects.
Companies
User interface characteristics Pros
• Consideration of cultural aspects in language and regional settings.
Whirlpool
• Fairly standard and neutral controls.
Cons
Opportunities for Samsung
• Inconsistent design language. UI for each appliance is optimized for
• Software flexibility can provide more
that appliance and not for unification
• Touch sensitive control panel lacks feedback • Stovetop mapping and meaning of controls are confusing and • •
• Cooktop: Unevenly spaced labels for cooktop heating levels
• Oven: Cooking time is indicated by showing the planned finish time • General: Consistent use of red LEDs
• Additional features do not
• Oven: Large display area communicates the menu
• Oven: Combination use of rotary control and directional arrow
• Appliance should not require complex
Electrolux •
allows easier control where people need more often. Cooktop: Feature for instantly putting cooking process on hold without losing heat and quickly resuming.
interaction well
Siemens
• General: Minimized and symbolic use of icons.
buttons.
• Cooktop: Use of simultaneous touch on more than one button or • •
USER INTERFACES EXPLORATION Exploring existing user interfaces of five key appliances and some out-of-the-kitchen interfaces that can be applied in the kitchen space.
• Minimizing the steps required to execute numerous functions.
Miele
Smeg Hotpoint Ariston
suitable programs for different cultures with relatively lower cost
difficult to understand. Stovetop icons are ambiguous. Arrangement of UI elements is crowded and hard to grasp quickly.
• Thoughtful navigation design with constant feedback on user’s current menu position.
• Focus on visual feedback that is intuitively understood
• Very strong and conscious choice of analog interactions
(including digital interface mimicking analog behavior).
• Consistent design language
different touch patterns on a single button. Oven: Limited attention to details of invisible aspects of menu navigation. General: Inconsistent design language.
• Frequent use of touch sensitive control panels either with or without dial knobs.
• Hood: visual information design (e.g. icons) are not optimized for touch sensitive controls
compromise the people’s original intentions (e.g. Immediate stop button does NOT stop the heating completely)
inputs such as pushing multiple buttons at the same time.
• Appropriate use of text and graphical labels can differentiate the core functions people need and optional ones people can take time to learn
• It needs to be made sure touch
sensitive controls are accommodated with very good feedback
• Menu navigations that cannot be
simplified must provide clear indication of what and where user input is.
• Style-driven: controls are designed to fit retro design, which makes
• Exploit the intuitiveness and comfort
• Very inconsistent design language • Relatively traditional use of both analog and digital UI, and colors
• Attention to every details makes an
it difficult to adopt digital controls.
on displays.
• Control panel area is not centered, nor right or left aligned.
people have with analog controls
overall impression far better
• Keep the design language of UI as consistent as possible
EMERGING TREND Existing appliance innovations based on emerging themes.
Heonjae Jung Portfolio 2009
User Experience Design
21
LG the SECRET 2008 http://w-ire.com/worklist/gtv.htm
Won LG Electronics display idea competition ‘space & motion 2008’ Collaborated with School of Mechanical Engineering students. Proposing useful, innovative yet realistic idea for digital display products and implementing OBJECTIVES
it through capstone design process.
CHALLENGES I joined this project to help enginnering students who are doing this as their thesis capstone project. We were asked to set up a hyphothetical company by ourselves, and progress planning and marketing of a product like real company. All of our ideas should meet cost-effectiveness, value of commodity and possibility of mass-production by building prototypes at the end. During this four months period, we received mentoring and evaluation from the company regularly mainly about technical issues of production and usage.
MY ROLE Giving idea from designer’s point of view Product design Design and managing deliverable documents
Heonjae Jung Portfolio 2009
Approach
SPACE Space saving
Main concept
22
Invisible wall-mount
Toe-in speaker
By hiding ugly wall-mount braket can achieve ZERO gap between TV and wall. This is secret of the first real wall-mount TV.
Rotational speakers make better sounds. Different sounds depends on what you’re doing, game, movie, news.
Slim structure of wall mount
the secret by GTB
MOTION New mechanism Easy of adjust in large size display
Customer insight Distintive style Interior sensitive
1210
Radiation through space
40 23
Easy cable management
Push and Adjust
Advantage of moving input/output box from back to side of TV is that you can just open side wing speaker and plug cable without creeping into back of TV.
Oil pressure powered semi-automatic bracket makes extreamly easy to tilt or swivel your huge screen
70
demo of working mockup
Sleek and clean surface e.g. want to hide wall moundt braket
164
Durability e.g. concerns about heat
Easily adjustable 600
Heonjae Jung Portfolio 2009 550
03
User Interface Design User interface design is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. As far as UI design is concerned, keeping the balance between visual aesthetic and usability is always important. Here’s some sample works mostly built on web platforms and software applications.
Heonjae Jung Portfolio 2009
User Interface Design
CAT GUI
Developing graphic user interface of CAT for Happy Mind Inc. CAT is a software testing program designed to identify weaknesses in attention and executive function, which is a collection of the brain’s organizing abilities used for shifting, planning and complex reasoning.
24
2008 http://ihappymind.com
“ Over 90 sites in Korea are using the CAT program to evaluate the attention ability including working memory. Many major university hospitals, private clinics, and mental health community centers in Korea are in their network. ”
Heonjae Jung Portfolio 2009
25
User Interface Design
Websites HISNet
2007
HISNet is Handong Global University’s intranet http://hisnet.handong.edu system for students, faculties and staff. I was in charge of re-designing the school’s web service including intranet since I had worked for the university’s Information & Computer Center.
IT Support page
Grace and Victory Church
2006 http://www.gnvchurch.org
Volunteering design work for my friend’s church in need.
Library website
Heonjae Jung Portfolio 2009
26
User Interface Design
Web design at Dazone Tech
2003 - 2005
Worked on various website renewal projects as a Junior Designer at Dazone Tech Inc. Clients were mainly educational organizations like universites and colleges.
Suwon Women’s College
Seokyung University, proposal
Anyang Technical College
Chuncheon National University of Education
Sungshin Women’s University
Rex Motors, proposal Heonjae Jung Portfolio 2009
27
User Interface Design
connection SPECTRUM Self-initiated experiment of visualizing connected individuals and interconnection. Shown at Mutual Response’s 4th online exhibition ‘connection’ http://www.mutualresponse.com/res/4th
2005 http://w-ire.com/connection/spectrum.htm
connection MATCH (2005) followed work, not completed
connection SPECTRUM is an interactive artwork which shows, at a glance, the variety of people who are connected to the network. This is shown through different colors visually. IP address is composed of 4 digits from 0 to 255 which can correspond by 1:1 in the color value (RGB) in a 24 byte computer system. Among this, the first digit is determined by the nation and institution in general so the color should be determined by the remaining three digit. Every connected person will be given his or her own color from a palette of 16,777,216 possible colors, and each saved color will gather up to form a beautiful spectrum. Heonjae Jung Portfolio 2009
04
Communication Design Communication design seeks to attract, inspire, create desires and motivate the people to respond to messages. Here are some example of communication design which are not overlapped with interaction design or user interface design.
Heonjae Jung Portfolio 2009
29
Communication Design
TREND SQUARE
2008
Trend Square is a marketing and brand electronic-magazine for the internal staff of SK Communications, a leading Korean internet service company. I worked on the identity and layout of the magazine. Tentative draft
Final design
Logotype study
The concept is your pleasurable bento (lunchbox) of brand and marketing concerns Heonjae Jung Portfolio 2009
Communication Design
BIT Typeface
30
2006
BIT is a combination type Hangul font that I designed in typography class. Hangul is the native alphabet of the Korean language. The alphabet is organized into syllabic blocks. Each block consists of at least two of the 24 Hangul letters, with at least one each of the 14 consonants and 10 vowels. These syllabic blocks can be written horizontally from left to right as well as vertically from top to bottom. Hangul fonts are classified into two categories, complete type and combination type which have their own strengths and weaknesses. The complete type shows a high quality of fonts, while the combination type takes less time, effort, and storage space to develop.
Heonjae Jung Portfolio 2009
31
Communication Design
Graphic design foundation course
2006
Assignments of visual graphic design foundation course, Handong Global University
WORLD CITY TOUR Calendar
Hemingway and Cuba Brochure
From Amsterdam to Seoul to Buenos Aires. Each month experience one of the world’s 16 most beautiful cities through color, typography and icons.
Promotion for Cuban Tourism through Hemingway’s literary work and his life. Put his traces left in Cuba and Havana’s atmosphere in some photos.
Heonjae Jung Portfolio 2009
32
Communication Design
Visual Identity
2003 - 2009
FusionTech Security Solutions (Canada)
DazoneTech - Groupware
Grace & Victory Church Identity
Newtech (S.Korea) Golfware Brand Identity
DazoneTech - CMS Software
Hason Inc. (Vietnam) Corporate Identity
Heonjae Jung Portfolio 2009