Pursuit of Ultimate Design Design Portfolio of Uijun Park
Uijun Park cacao1985@gmail.com
Driven to provide valuable user experience with the streaming of design, based on the user context POFESSIONAL EXPERIENCE
2011 – Present
2010
User Interface/User Experience (UI/UX) Designer Pantech Co., Ltd. UX Design Intern IRIVER
Introduction Donald Norman states that users make mistakes when designers do not design thoughtfully in his book, "The Psychology Of Everyday things." As a young student who decided to become a designer, I was deeply inspired by this statement and realized the importance of design in people's life. I became enthusiastic in the field of Human-Centered Design and User Experience Design. I passionately put all my energy, time and resources to acquire skills and knowledge in basic and advanced design methods to understand human anatomy, behavior and interaction in college and in the industry in pursuit of ultimate design that offers values to users. This is a portfolio that demonstrates some of my works that I strived for ultimate design. In the first chapter, I include my works I have done in the industry. The second chapter contains some of the projects that I did during the college years. I also include designs that won awards for product and graphic design. I believe that this portfolio reveals my passion, creativity, efforts and evolution as a designer.
EDUCATION
2011
B.S. Products Design B.A. Visual Communication Design B.A. Management Handong Global University
User User Graphic Interaction Product Interface Experience Design Design Design Design Design
Picture above shows that which design fields I have learned and practiced.
1
TABLE OF CONTENTS 01 Projects at Pantech Next Generation Calendar Next Camera User Interface
3 User User Interaction Interface Experience Design Design Design
Making Global Standard UI for branding
02 Projects at HGU Connecting E-Book Device and Human Information Archtecture Restructuring & User Interface Proposal
13 User User Product Interaction Interface Experience Design Design Design Design
03 Projects for Competition Water-Saving Faucet Never Stop Exploring
18 Graphic Design
Product Design
2
01 Projects at Pantech
User User Interaction Interface Experience Design Design Design
At Pantech, I have been working as a researcher, UI/UX designer and project manager for several preloaded applications in User Experience Design team from 2011. I have been conducting research on market trend and user behavior to see if our applications provide valuable experiences to our users, and holding seminars in the team to share UI/UX trends and knowledge, periodically. I have also been designing UI wireframe and coordinating with GUI designers and software engineers to create applications as a project manager. Pantech is global smartphone manufacturer located in South Korea. Main markets are South Korea, Japan, United States. In South Korea and Japan, brand name for Pantech’s smartphone is “VEGA” and varies in US.
Pantech’s UX Design Process Model Initiative
Model Concept Definition
UI concept Definition
UI Wireframe Design
GUI Design
Software Development
3
Project history
For smartphone manufacturer, the roll-out date for each smartphone model is the most important issue because every work process is scheduled considering the roll-out date. So I have summarized all of my projects by aligning with the smartphone models. For all the projects, except for the Camera project, I worked as a researcher, UI designer, and project manager. For Camera project, I was an assistant project manager because it was much more large-scale and important project for the company.
2011
Roll-out Carrier
1Q
2Q
2012
3Q
4Q
1Q
2Q
3Q
2013 4Q
1Q
2Q
2014
3Q
4Q
1Q
2Q
3Q
4Q
United States Perception
Marauder Burst Flex
Element(Tablet)
S. Korea V. LTE M VEGA(V) Racer
Discover V. No.6
V. Racer 2 V. R3
V. LTE A V. IRON
V. Secret UP V. Secret Note
V. IRON2
Japan Mirach
My role as
VEGA PTL21
UI/UX Designer
Weather(A/W) DLNA(A) Miracast Music(A), Media cover Calendar(A/W) Gallery(A/W) Camera(A/W. Ast.M) * A: App * W: Widget * Ast.M: Assistant Manager
Mar, 2011 - Mar, 2012 Mar, 2011 - Mar, 2013 Apr, 2012 - Mar, 2013 Jan, 2013 - Apr, 2013
Mar, 2013 - Dec, 2013 Sep, 2013 - Present Sep, 2013 - Present
Development Period
Managing Period
4
Calendar App Roadmap
: Next Generation Calendar Project period: March~July, 2013
“What does user need when using Calendar App?�
made our calendar app
In this project, I was a project manager for proposing and designing next User Interface of Calendar App. Required works for this projects were market research, user research, wireframe design, communication with software engineers, cooperation with GUI designers. Purpose of this Project In a world where people are using smartphone and even managing daily schedules with it, the importance of calendar application is getting bigger. Main goal of this project was to set up direction of user interface for next generation calendar app which will enhance brand identity of Pantech's smartphone. Design Process First of all, my project team looked into market trend by analyzing Pantech and competitor's calendar app. And then we had user research to understand user's expectation and real user's behavior on utilizing calendar app especially of main user group. With this, my team enhanced usability of Pantech’s calendar app and provided User Selling Point(USP) features to provide differentiated service experience to our users. To be specific, market and trend research was performed to see how each smartphone manufacturers and third party market applications provide service on criteria of representative user task in calendar app, viewing event / adding event / managing and editing event / convenient features. With issues derived from market research, user research which consists of both quantitative and qualitative research was fulfilled to listen to real voice from main user group on calendar app. For quantitative research, my team had user survey with more than two hundred people, and in-depth interview with nine users as qualitative research.
The result of user research directly showed how well Pantech and competitors are prepared to cope with user needs so that we could build UI direction. At last, with ideation with methods of card sorting, ideas patterning, user scenario, I proposed final UI concept and wireframe. This final ideas were applied to smartphone that rolled out on Dec, 2013 after discussing technological issues with software engineers concerning how the ideas are going to be actualized. Epilogue From this project, the most memorable achievement was that final UI concept from this project was made in the long-term perspective compared to previous calendar app which its directions were easily shaken by market trend. In mobile world, there are so many changes happen in market that easily bother UI designer for constructing UI consistency. However, the result of this project made made our calendar app to have UI consistency which can also mean UX philosophy. This was used as criterion when new trend came out in market to examine if it is applicable on our device. In addition to this, there were several challenges during the project. Even though my team made UI concept in long-term perspective and completed design, there were some difficulties for applying the calendar app to Pantech's smartphone. One of them was technological discussion with software engineers. Since there were some technological limitations for applying full design proposal to smartphone, some part of new features had to be modified from original ideas.
5
Market Research
Result of User Research Competitor group A
Response
Pantech
As a result of user research, my team could find out that there are greater user needs on fast add and fast view of event. They were not satisfied with market supply on these features. However, there were little needs on convenient or additional features such as adding event with pen or hand. Competitors have provided convenient features excessively considering the result of user needs. So, we found that focusing on satisfying user needs about quick add and view of events will bring our calendar app to the greatly advanced level.
Competitor group B
Fast viewing
Fast adding
Customization
Convenient Functions
Competitor group A
Response
Market and trend research were done to see how each smartphone manufacturers and third party market applications provide calendar services on criteria of representative user task, viewing event / adding event / customizing user's own calendar / convenient features, in calendar app. Various features and characteristics of those calendar apps were verified. Those derived issues from this step were used as reference for making Pantech's differentiated direction after user research.
User needs Pantech
Graph. How Pantech & Competitors positioned
Pantech
User Research
Future Direction
Competitor group B
User research, which consists of both quantitative and qualitative research, was practiced for listening to voice of main user group and finding intrinsic user needs on issues stemmed from market research.
Fast viewing
Fast adding
Customization
Convenient Functions
1) Quantitative research
2) Qualitative research
Final UI Concept
My team had web-based survey with Google tool of more than two hundred people on various topics including purpose of use, mainly using items, and so on. The result was used for seeing user behavior and selecting main user group for qualitative research.
My team had in-depth interview with nine users who are recruited from different ages and gender as qualitative research. On this step, we examined to see intention of use and user behavior on main issues resulted from market research.
In conclusion, my team had brainstorming for new calendar with several methods including card sorting, user scenario, and made final UI concept "All at once calendar" with three sub concepts as below.
Concept Keyword “All at once calendar� 1. All at once view / 2. Quick add / 3. Convenient Management
Survey Tool
1. "All at once view" is for viewing events easily by minimizing the checking steps and gathering events in one screen. 2. "Quick add" is for adding events as quick as possible. It can be practiced by minimizing adding steps and learning steps of how to add events, and simplifying adding sreen. 3. "Convenient mangament" is less important than other two concepts. However, as long as there are meaningful features, those can be provided.
Designing Wireframe Main UI screens were defined in accordance with key concept "All at once calendar" which provides user environment where quick adding and fast viewing event is possible.
1. All at once view
1. All at once view 3. Convenient Management
Indicator
Indicator
Today
1. All at once view 3. Convenient Management
A
Mon
Tue
Wed
Thu
25
26
27
28
29
Fri
30
Sat
1
Event1
Birthday: 2
Events: 5
London, 78° F am
10
event 1
11 pm
12 13 14 15 16
9
Event1
November
event 2 event 3
A
3
Event1
4 11 18 25
5 12 19 26
6 13 20 27
7 14 21 28
1 8 15 22 29
2 9 16 23 30
3 10 17 24 31
event 4
Tomorrow There are 7 events scheduled in tomorrow. It’s going to be busy day. Take a deep rest today.
4
Event1
5
6
10
11
12
Event1
13
Event1
Mid term exam on 3re week 16 17 18 19 20 Event1 Event2 +2
(11.4)
23
24
Christmas
25 26 Event1 Event1 Event2
(11.11)
30
C
8
14
15
Event2
(10.26)
Event1
7
Event1
Event2
(10.19)
31
1
27
Event2
2
Event1 Event2
X21 28
Event1 Event2
3
4
+ 22
Event1 Event1
29 Event1 5
(11.18)
Day
Week
B
Month Agenda
Today
Mon
Tue
Wed
Thu
Fri
Sat
25
25
26
27
28
29
Today, Tuesday, 25 December
B
Christmas
Pantech@gmail.com
Dec, 2013 Sun
Mon
Tue
Wed
Thu
25
26
27
28
29
30
1
Map
Anniversary
2
Add Event 3 4 5
6
7
8
14
15
Event1
OFF
Lunch @Bistro London
Start 2013.12.28 (Sun)
10:00pm
2013.12.28 (Sun)
11:00pm
End
12:50 PM~1:20 PM
Wednesday, 26 December
OFF
All day
Lunch with Jones
One time Month Agenda
Pantech@gmail.com
10
(10.26)
Add event
Today
Event1
11
12
Event1
13
Event1
10:00pm
Event2
Mid term exam on 3re week 16 17 18 19 20
Event1 More Event2details
(11.4)
23
Event1
Event1
Event1 Event2
X21
+ 22
Event1 Event1
+2
24
(11.11)
30
Repeat
12:20 PM~1:20 PM Outback steakhouse
Event1
Sat
Event2 Calendar
9
Event1
9:20 AM~10:20 AM JC Penny mall
Fri
Dinner with Joshua
(10.19)
Shopping with Sue
Week
Calendar
Sunny hill
25 December
Day
Indicator
C
Add event
Tue, 25 Dec, 2013
Sun
2. Quick add
Indicator
Indicator
Dec, 2013
Tue, 13 Nov
2. Quick add
31
Christmas
25
Event1 Cancel Event2
1
26
27
28
29 Event1
2
3
4
5
Event1 Event2
OK Event1 Event2
(11.18)
Reminder
Day
10 minutes
Week
Month Agenda
Today
Notifications
Memo
Today view : Able to overview today’s schedule
Events displayed by text : Able to view events at a glance in monthly view Post- it : Able to memo events that might happen within a month
Fast Scroll : Able to change date of the month easily with fast scroll in Agenda view
Pop-up add : Able to add events without switching to another screen
Input detail memo.
More details
Cancel
OK
Anniversary add : Able to add anniversary at once with anniversary button
7
GUI Design for Launched Smartphone After wireframe is confirmed and I completed discussion with software engineers, Graphic User Interface was designed to make new calendar working on smartphone. This was applied to smartphone model VEGA IRON2 that lauched on June 2014.
Default screen
Event add pop-up
Today’s events
D-Day widget
Default screen is monthly view with events made by texts and stickers. This is the most important part of new calendar since it enables all at once viewing events.
User can add event quickly without switching to another screen since pop-up is provided. When tapping “More details”, additional adding items are provided.
This feature provides today’s eventrelated items such as Weather, Events, To-Do list, Anniversary in one page view.
D-Day widget is provided for user who wants to manage special events separately.
8
Camera App Roadmap
: Next Camera User Interface
“Prototyping as a Decision Making Tool”
Project period: June ~ April, 2013
Trend Research In this project, I was assistant project manager for proposing and deciding next User Interface of Camera App. (Members of this project: Jisun Yoon, Aehyun Kim, Uijun Park) Required works for this project were market research, user research, concept keyword issuance, prototyping and final design Purpose of this Project When making a decision, wireframe is not enough to discuss for deciding UI direction. That’s why prototyping is essential. Also, prototyping is useful especially when communicating with GUI designer and software engineers for how to make it. There are various methods for prototyping such as making paper prototype, developing flash file and so on. This time, assignment for camera application roadmap was to apply trendy user interface. So, we made real software as prototype of camera application for making final decision if the design is valuable for users. Design Process Market research for knowing trend of design was practiced and made direction based on core trend. And then hands-on prototypes, two versions, were made to evaluate which prototype best satisfies user needs. After usability test, final design was chosen and developed in detail.
For knowing design styles that can be adapted to camera application design, trend research was practiced on not only camera relevant design, but also other references. Fun Interaction
Interactive Motion
Stylish Design Dynamic Motion
Analogue Emotion
Direction: Applying Core Trend From trend research, my team issued core trend which will guide direction of next camera application’s user interface. MEGA Trend
Other Trends
Simple
1. Interaction/Animation 2. Stylish GUI
Hands-on Prototyping
Final Design Concept A. Interactive Motion
To practice usability test objectively, my team made hands-on prototype as an app software type to make users directly use camera app. It helped users to understand how it works substantially, so that they could tell us its inconvenience of use easily.
As a result of usability test, my team decided to use concept A as next camera user interface. Since this decision was made with substantial prototype, communicating with software engineers and GUI designers were easier than previous roadmaps without prototyping.
Concept A. Interactive Motion
Concept B. Stylish Design
This concept is for users who expect interactive motions that give fun element when using. Also, circle GUI is core of this concept for making the smooth animation.
This is for users who want unique design when they are using their camera. Oblique line as a partition for each UI element provide unique experience of design.
* GUI was Designed with Photoshop and Software was made with Android Studio program
Usability Comparison Test My team had usability test with ten users on both concept A and concept B. The result of the test was used for making a decision which way we should go for. Selected
Error Freq. 15%
Error Freq. 40%
Pref High
Pref. Low
Default Screen
More Menu
Other screens
Default screen is simple because users focus on preview image not GUI elements when taking a picture. However, every items are circled GUI for interactive animation.
Interactive animation is provided when user touches more menu button. All the circled items appear with animation.
For design consistency, UI items were made in circle look. This was adapted to entire UI elements in camera application.
Epilogue Since hands-on prototype was made as real software this time, communication with stakeholders was not difficult especially when delivering explanation about how our design will look like to software engineers. In conclusion, I realized that as much as the prototpye be sophisticated, the quality of the product or service will go up.
Weather App UI Integration Cooperation with
: Making Global Standard UI for branding Project period: August, 2011 ~ January, 2012
In this project, I was as an User Interface designer for integrating user experiences of Weather App’s User Interface. Required works for this project were market research, user research, user interface design, wireframe design, cooperation with AccuWeather company for integrating weather information in our smartphone.
“Enhancing brand value by making design consistency”
Weather Service
Japan Market
Purpose of this Project This project was practiced to enlarge brand value of VEGA smartphone by integrating Weather app UI for each carriers in different countries. Korea Market
Design Process Since our smartphone had adopted different weather service solutions for different countries, the information provided by each solutions decided composition and layout of weather app's User Interface. So, I decided to use only one solution, AccuWeather because of its contents that can be used globally. And then, with usability test and trend research, I founded general and standard UI that can be accommodated by various users from different countries. Epilogue The most memorable experience was communicating with AccuWeather, the weather service solution company. For founding standard UI, I had communicated with AccuWeather for using additional information that they can provide and upgrading accuracy of region names of Republic Korea. During this time I found out that people from AccuWeather were so friendly and active for finding common interests for both Pantech and AccuWeather. From this experience, I could learn communication and negotiation skill for cooperating with other parties.
Weather Service
U.S Market
Weather Service
Korea Weather Service
Pantech’s Global Market and Contracted Weather Services Pantech’s Weather UI and Weather Service solution on each markets had been provided differently. So, global standard UI for Pantech’s branding was needed because of its consistency.
11
Weather UI Integration in Global Scale I decided that, for enhancing brand identity, UI integration for each models should be made. So, after UI design is confirmed, Final integrated weather app UI was fristly applied to a model VEGA R3 that launched in South Korea. Problem
“There are no consistency for Weather App UI” Weather UI for Korea Market
Weather UI for Japan Market
Integrated Weather UI
Weather UI for U.S Market Solution
UI Integration Daegu Geyong-buk
Weather Service
Weather Service
Weather Service
Korea Weather Service
UI elements 5 days of daily info. Today’s 24 hours info. Korea regional info.
UI elements 5 days of daily info. Global regional info.
UI elements 5 days of daily info. Global regional info.
Weather Service
UI elements
5 days of daily info. Today’s 24 hours info. Global regional info.
12
User User Product Interaction Interface Experience Design Design Design Design
02 Projects at HGU
I studied Products Design, Visual Communication Design, and Management in order to have wellrounded perspectives on market, user and design at Handong Global University. Since inspired by Norman, I was driven to learn about Human-Centered Design and User Experience Design along with Product and Graphic Design skill. LOBAL HANDONG GUNIVERSITY
Handong Global University, located in Pohang of South Korea, highlights the biggest importance on honesty that students should have in their heart with slogan of “Why Not Change The World?�. Department of Industrial and Information Design in HGU is great Design School that stresses both Engineering and liberal arts. This is why students of the department have various backgrounds.
Overview Work type
Project 01
Connecting E-Book Device and Human Graduate team project cooperating with the industry Project period: March~September, 2010
02
Teamwork
UX/UI Product Graphic
Individual Work
UX/UI Product Graphic
Information Archtecture & User Interface Proposal Course project on Design Studio 2 Project period: September~December, 2009
Relevant Field
13
Redesigning E-Book Device Graduate team project cooperating with the industry
: Connecting E-Book Device and Human This project is for proposing new concept of E-Book device with design direction that is made from various design method and analysis of user behavior.
Quartre
Transformer
Multi-tasking with four different screens in one display Free move interaction with "M(Magic)" menu button Default Screen optimized for each users "Like a book" interaction provided by Previous/Next button
Multi-tasking with two different screens Free move interaction with "M(Magic)" menu button Default Screen optimized for each users Previous/next page interaction provided by Wheel button Additional control button provided in back Book-metaphorical Graphic User Interface
I was team leader in this project. Required skills for this project were team managing, in-depth user interview, framework making, 3d modeling, GUI/UI design.
In-depth Interview & Video Protocol Reader’s Object(book) Observation Best Practice
2-1. Methodology Proposing proper methodology for verifying founded framework
3. Persona
Best Practice Expert Aid
2. Framework
1. Heuristic & Pre-research
Benchmarking, Usability Test
Founding perspectives for advancing usability START
Preliminary usability testing E-Book for understanding issues
Founding criteria and selecting representative interviewees for usability test
vice ess De ndlin Frie ion izat Util ion izat ook B Util E ok o B xt nte Co
C A
rn
atte
gP
adin
Re
Overviewing E-Book user behavior with documents and web research
D
B
Keyword Extracter
Interviewee
Interviewer 1st Evaluator
Sub Recorder
Main Recorder 1st Evaluator
Analysis
Hidden Assistant
5. Consolidation
Design Process
for Redesigning E-Book Device
Integrating and analyzing every issues derived from UT, Best practie, Heuristics and so on
6. Direction
Writer 2nd Evaluator
4. Usability Test Fulfilling UT with Personas with written script based on Framework
7. Concept
Final proposal for E-Book advancement that provides new experiences and user values
15
Information Archtecture Restructuring & User Interface Proposal
This project was individual course assignment in Handong for practicing understanding product’s IA structure and optimizing with final redesign. Also, making promotion web-page that introduces new GUI/UI design was one of its course.
“Renovating Information Architecture for opimizing Menu Structure”
16
Design Process
IA Analyzation
IA Restructuring
Product Redesign
User Interface Design
Realization
Designed Promotion User Interface with redesigned product design and Information Architecture
Introduction Page: Displays redesigned Powershot in 360 degrees
Old & New: Compares old and redesigned product
Main Features: Explains main features that are redesigned
Scene: Displays use case that provides sense of reality when using product
17
Graphic Design
Product Design
03 Projects for Competition I have always enjoyed participating in competitions because they challenge my thinking and invigorate creativity while broadening my perspectives. I earnestly participated in design and other competitions before I joined Pantech and here are some works that won awards for design including product and graphic designs.
Overview Project 01
Work type Water-Saving Faucet [The Honorable Mention Winner] 2010 Seoul International Design Competition Project period: June~September, 2010
02
Relevant Field
Product Design Individual Work
Never Stop Exploring [Finalist] 2005 The North Face Graphic Design Award Project period: March-April, 2005
Graphic Design Individual Work
18
2010 Seoul International Design Competition
: Water-Saving Faucet [The Honorable Mention Winner] Water shortage is becoming big issue in this world. This “WaterSaving Faucet” product is for saving water with people’s little willingness. I designed the faucet that provides only certain amount of water in each modes.
WATER-SAVING Faucet
19
2005 The North Face Graphic Design competition
: Never Stop Exploring [Finalist] This poster is for The North Face T-shirt graphic design that shows active motion of outdoor activities.
NEVER STOP EXPLORING
23