Page 1

UX, Interaction Designer Jang Seung Hwan



“Good products” come from logic and productivity, but “Great products” come from value and philosophy.

Personal Information

Award & Qualification


Seunghwan Jang


Watchface Design Silver Award / Watchmaster




Presentation Award / CJ


Korean, English


Brand Manager (Rank 1)

Date of birth

May 27, 1991


TOEIC 980 (LC 495 / RC 485)


TOEIC Speaking 160 (Lv. 7)


Seoul, Korea

Cell phone

+82 10 2082 7118


Education 2010 - 2016

Skills & Tools Pusan National Univertisy Business Administration(Major) Art, Culture and Image(sub-Major) Bachelor’s Degree, CGPA: 3.71 / 4.5 (92%)

Activities 2015.12 - 2016.12

UX Design Intern SAP Design & Co-Innovation Center

2015.04 - 2016.12

Workshop Designer Design Thinking Community


Mentee SAP, Design Thinking Tour


Educational Mentor Samsung Dreamclass

2013 - 2014

UX Design

Wireframe Site map

Design Thinking

Process Persona Ideate method

User Research

Ethnography User interview Paper study


Site map Affinity Diagram


Sketch3 Paper prototyping Illustrator Photoshop MS Office Suite

Academic Director Business case Academic club


Volunteering Workcamp, Poland

*References available upon request

Introduction Hi, I’m UX designer from Seoul, South Korea. I try to see positive and valuable part of everything and every situation to sustain my creative mindset, and passionate about removing complexity from how I design the problems. Field experience I have a year of design experience for internship as an UX designer at SAP Design & Co-Innovation Center, which includes UX/UI design, screen based design, UX research, workshop design, and facilitation. I have been co-worked with may types of company, from heavy industry company to governmnet departments and universities. Human centered Coming from my background in Business Administration, Department of Art Culture and Image, and my interest in marketing, advertisement, technology has left me hungry to understand design’s impact on every move of human behavior. All led to user experience. Diciplined I’m dedicated to designs which meets end users’ specific needs, practicing pairdesign, and learn, build from group work. I try to involve users from discover to develope phase, to iterate quickly. I accumulate learning from every design and designers. This makes my passion and knowledge much concrete.



I design based on simple Discover - Disign - Deliver process. My primary emphasises in design process are Clear, Usefulness, Scalable.

360° Research


Synthesize Scope


• Meet with stakeholders • Scope to understand the challenge at hand • Create a problem definition. • 360° Research: observations and interviews with users and subject matter experts, and also look at similar situations. • Analyse and synthesize the artifacts collected during the 360° Research • Define personas • Derive insights and principles


Validate Ideate


• Generate ideas to address the design challenge • Make to think is a mantra • Building and embodying our ideas • Make ideas tangible as prototypes. • Test and iterate them further

Deploy Implement


• Implementing functional prototypes by

implementing technology • Core features are selected • Explore further what is technically possible to address the design challenge. • Continue to test and iterate before deploying a new solution.



Predictive Customer Insight


UX Project

Date Management App


UX / UI Project

Traveler’s Subway Experience Service Design Project


Predictive Customer Insight *NDA(Non-Disclosure Agreement) Project

Customer Tracking Software for Industry Duration: 7 weeks Tools used: Sketch3, Zeplin, Pair design Team: 4 UX Designers Contribution: 25% - Dashboard design - Data visualization - Key function: Expandable list - Pair design: Minimize time effort and mistakes Various design experiments (One-display, two-designers)


Objective PCI is solution for comprehensive analysis and can be used to reach customers for both proactive and targeted CRM for banks. The solution’s advantage is focused on prediction, so the design contains lots of data visualization. The objective of this project is a UX design of existing PoC(Proof of Customer) to develop high fidelity visual design based on SAP Fiori design/development requirements.



Lesson learned

Storyboards per personas Wireframe Interaction design flow Visual Design mockup Design Spec Findings

Researcher UX/Visual designer

Right UX design Feasible UI deisgn Pair design


[ Scope - Research - Synthesis] - [Ideate - Prototype - Validate] - [Implement - Test - Deploy ] Discover



Project Process Scoping

Requirement analysis


Define Project Goal & Schedule


1 Set up

Dev. Team interview POC Analysis

2 Discover

Project Proposal

User Research

Lo-fi Design

Generate Blueprint with Solution experts

Sketch Mockup Design Interaction Flow Wireframe Visual Design Initial Validation

Findings from Users

~ week 2

1. User Research For great UX, understanding users’ needs is an essential part of our design process. With the constraints of this project(tight limitation of time and narrow developement scope), however, we’ve invited SAP internal professionals who can share us both users’ point of view and knowledge of relevant solutions. We conducted 3 sessions with 9 industry/solution experts, and we could gain 3 findings on business and 5 findings on UX.

• • •


Simple & Intuitive Role-Based Scalable

4 Deliver

Storyboards per Persona Wireframe / Interaction Design Flow Visual Design Mockup & Design Spec

(Challenges and Strengths)

From that, we set three design rules for the product.

Final Presentation

Visual Design Design Spec Create Storyboards

3 Design

Requirement summary

~ week 1

Hi-fi Design

~ week 3

~ week 4

GUI Design & Spec Storyboard Suggestions for next version

~ week 4

~ week 5

~ week 6

2. Required Features Decision Persona


Top Event

At Risk Customer


Business Analyst

Site Manager

Customer Service Staff

Action Tracking

Customer Pane


Required for persona’s responsible area

Account w/ problem



● for next version

3. Core UX Value

Summary From what we have found from user research and major rules we set, we ideated key functions to meet the user’s and our needs.

Follow Design Guide

We followed basic design guideline from SAP Fiori to make solution simple. We changed few types of charts which couldn’t show the data effectively, to make it more intuitive.

Data Visualization

Current PoC has 4 depth information architecture for most used story flow, which is too much burden for users and time consuming, so we used expandable list to make it 2 depth. We came up with modulized card veiw to show key numbers and charts so that the company can configure the type and number of cards depending on the role they have. Plus this could make the solution easily scalable.

Expandable list view 4 depth IA → 2 depth IA Modulized Card Configurable & Scalable

4. Wireframe & Validation Through analysis, large numbers with sub charts and modulized card view were used on the dashboard, in order to create a intuitive and role-based content view. To follow what users’ might expect from the UI, we put indicators visible for major actions. The significance of modulized card view and expandable list is more than just for easy layout and show main contents stand out. Users can configure based on their own roles, and they can search through solution much easier and faster way. Through wireframing, we created templates, modulize assets, and select assets through prioritizing them. ↓ Wireframe design

Test & Validation ↑ We used Sketch3 to create wireframes and printed out to make a visible user flow. We tested our wireframe to industry experts and internal consultants. Since there is no “one -fits-all UX”, our feature focused on essential features. After testing, the wireframe’s core feature has been proven to be efficient. We gathered feedbacks and used them to iterate the wireframe few times more. After testing and iteration, we could validate the basic UI format.


5. Deliverable - Visual Design After designing a lo-fi design of wireframe, we developed it to hi-fi design mockups also using Sketch3. Hi-fi design contains 10 pages of screen, design eliments, style guide, interaction guide and next version proposal. Our design process was component-based design. We choose component-based design for modulized functions, scalability, and flexibility. In addition, Sketch is better tool for component-based design rather than page-based design. We used Zeplin to share design deliverables to Austrailia develop team.

- Storyboard

We made 4 personas for banking industry specific role. The storyline contains the discovering negative situation, found root cause, target the customer with appropriate benefits, and then the situation turned into positive one.

Date Account Management

Couple budget managing app design project Duration: 2016.11.30 -2016.12.03 Tools used: Sketch, InVision Team: 1 UX/UI Designer Contribution: 100%


Objective Not all budget saving app is for more than one person. A pair of lovers can easily sync, track and see statistics of their budget in single app. If goal is set between them, the probability of saving is shown much higher than those who aren’t. This account/budget managing app for multiple users can scale to family account, mutual benefits group account, and finance investment account, etc. Also, this project is to perform of full UX & UI design process done solely by myself.



Lesson learned

Design Process Information Architecture Wireframe GUI Prototype(InVision)

Researcher UX Designer UI Designer

Practice full UX/UI process Create UI from insights found


[ Scope - Research - Synthesis] - [Ideate - Prototype - Validate] - [Implement - Test - Deploy ] Discover



Project Process Activity

Scoping Define Project Goal & Schedule


1 Set up

User Research

Customer PoV

Lo-fi Design

Hi-fi Design

Desk Research User Interview

Define Persona Storyboard

Idea Sketch Wireframe

GUI Design Prototype

2 Discover

Project Proposal Project Process

Findings from Users Persona

3 Design

Test and Feedback

4 Deliver

Information Archietcture WIreframe GUI Design Prototype

~ day 1

~ day 2

Design Mockup Expandable Model Suggestions

~ day 3

~ day 4

1. Interview Interviewd with 3 age mid-to-late 20’ females who use shared bank account with their lovers. *Dark text: pain point & Insight


Lim (27): Date Account

Lee (26): Date Account

Ok (27): Travel Account

Save 100,000 eact per month Use at date Activities are more important than numbers Balance is most important in budget managing Often forgot to deposit on the regular deposit day Without goals set, it is consuming and hard continuing

Mid 20 female, early 30 male F: 200,000 M: 300,000 deposit each Use at weekend date Under name of male, managed by female Use personal budget for some case Save budget for travel abroad

Deposit 100,000 - 150,000 per month each Managed by female Save budget for travel domestic & abroad First use credit card for card benefits then allot savings Want to plan future expenses

2. Persona Main Target Minhee Kim, Female, 26, Beginner at Business

Sub Target Jungjae Park, Male, 28, Beginner at Business Common facts

Use shared date account Deposit regularly (once a month) Use budget from shared account when dating Date 2 or 3 time a week Need for go domestic travel if there’s enough budget saved Pain point, Needs, Insight • •

Need to check frequently to see how much budget saved for travel Hard to save enough budget for the travel

• •

Need to check how much money they can spend on the day of date Hard to manage shared account

3. UX Value Based on the interviews, persona, scenario, I choose three core UX value of this product. since users don’t stay long on the budget managing app, it is important for app to be task oriented, simple, intutive, and able to finish task easily.

Minimum effort



Can check balance and expenditure in a short period of time

Concentrate on the key features without heavy features

Intuitive usage needed because users don’t stay long on the app

4. Information Architecture 0.Loading

0.1 Invitation

0.2 Onboarding

0.3 Goal Setting

1) Logo

1) Invite other or 2) Invitation link confirm

1) Name of one in relation 2) Relation start date 3) Frequency of date 4) Budget deposit frequency 5) Budget deposit amount

1) Instruction 2) Goal name 3) Amount of money 4) Due day 5) Reserve rate 6) Skip button

First visit

After Second Visit 1. Goal

2. View

3. Statistic

4. Setting

1) Goal, Reserved, Due day 2) Budget balance 3) Amount can use today 4) Expenditure 5) Deposit 6) Day count from begin

1) Day/Week/Month tab select 2) Duration(day) 3) Broken line graph 4) Expenditure 5) Deposit

1) Category/Date tab select 2) Pie graph 3) Total Expenditure 4) Expenditure per category (+%)

1) Lover information 2) Regular deposit 3) Alert 4) Category add/adjust

1.1 Add Expense/Deopsit

2.1 Add Expense/Deposit

4.1 Lover information

1) Category 2) Amount 3) Date, time 4) Confirm 5) Keyboard (number keypad)

1) Category 2) Amount 3) Date, time 4) Confirm 5) Keyboard (Number Keypad)

1) Name 2) Relation start date 3) Terminate link

1.2 Add Goal

4.2 Regular deposit

1) Goal name 2) Amount 3) Due day 4) Reserve rate 5) Confirm, cancel button 6) Keyboard (QWERTY Keyboard)

1) Amount 2) Repeat date

I made users connect with their lovers before using the app. Also, users should fill in necesssary information by filling in simple survey form as their first step. I made minimum hierarchy to stay simple as possible. Contents which can be swiped is viewd with horizontal scroll, and additional page is always shown as full-frame pop up.


4.3 Alert 1) Regular deposit alert 2) Goal achievement alert

5. Wireframe 1.0


Goal Card View: User can easily recognize more cards scrollable, and grasp concept of adding new card.




View Tab View: User can easily swipe pages of daily, weekly, monthly view by tapping tabs.

Available Blanace: User main need for budget mamangement app is to see balance.

Broken Line Graph: Users can easily see changes, can click each bubble to see details

Expenditure: Expenditure is more frequently used function than Deposit. Users can easily see the total expenditure and add more.

Regular Deposit: Regular deposit is automatically defined as ‘regular deposit’ and differenciated with names

Add Goal


Add Goal


Add Expense



Statistics Pie Graph: User can easily see proportion of each category by color. Graph part is fixed and not scrollable.



Category: Users can easily tell category by color coding and icon. Exact proportion is explained.

Add Deposit Add Deposit: Full-frame popup. Users easily type numbers, then click confirm button to add expense, no additional editing needed.

Add Goal: Card is highlighted, with slightly movable interaction. Editable text is distinguished as bold and darker color.

Add Expense: Full-frame popup. Users easily type numbers, choose category then click confirm button to add expense, no additional editing needed.

The metaphor of ripped receipt is used for the expense and deposit items. As many texts are shown on one page, I choose to reduce color usage to reduce users’ burden.

6. GUI Design

InVision Prototype

Loading, Onboading

Today, Add Goal

Add Expense

View Weekly

To reduce users’ burden, App uses only three colors - variation only with opacity. Red with high saturation is used as main color for warm and lovely atmosphere. I made minimum hierarchy to stay simple as possible. Contents which can be swiped is viewd with horizontal scroll, and additional page is always shown as fullframe pop up. 15


Regular deposit day


7. Scenario 1) Before the date day, Mr. Park checks how much they can spend for tomorrow. He roughly assume each item’s managable budget. 2) On the date day, Ms. Kim adds actual amount of their expenditure in between or during Mr. Park pay with their shared account. 3) In the evening of the day at their each house, Ms. Kim checks how much more can be saved for travel, and Mr. Park checks each auto-synced expended items are correctly entered. 4) At the end of the month, Ms. Kim compares last month and this month’s expenses, and list up which items are expended more than planned. 5) On a regular deposit day, Ms. Kim and Mr. Park receives push alert about the deposit. When they click through the push alert, they can see automatically filled add-deposit screen, and simply click confirm button to add deposit.

8. Expandable Model 1) Function •Allocate multiple budget •Entering interim expense for expenditure planning •Expend & Deposit ratio per person 2) Service value •Expand to other shared account, such as family account, real-estate investment account, mutual savings account, etc. •Motivation to achieve goal, such as bucket list. •Work together with private relation app, such as Between, or alert message text mining app, such as SumsUp.

Traveler’s Subway Experience

Subway carrier ramp Redesign (Seoul STN) Duration: 4 weeks Tools used: Design Thinking, Illustrator, Photoshop Team: 3 Service Designers, 1 UX Designer Contribution: 40%


Objective Seoul metro has intalled a ramp at stairway at Seoul station for many travelers with carriers. But people struggle climbing up and down a ramp for travel carrier at subwaystation, and even they don’t know what that is and how to use it. We tried to solve their inconvenience / ignorance through UX methodology as well as testing prototype.



Lesson learned

Storyboards per personas Visual Design mockup Prototype

Researcher UX Designer

Application of UX to everyday life problems


[ Scope - Research - Synthesis] - [Ideate - Prototype - Validate] - [Implement - Test - Deploy ] Discover



Project Process Activity

Scoping Define Project Goal & Schedule


1 Set up

User Research

Customer PoV

Desk Research Field Research User Interview

Journey map Storyboard

2 Discover

Project Proposal

3 Design

Findings from Users Current Usage Rate Foriegn Examples

~ week 1

Lo-fi Design

Test and Feedback

Idea Sketch Design Mockup

4 Deliver

Storyboards per Persona Design Mockup Solution Design

~ week 2

Solution Design Design Mockup Campaign Suggestions

~ week 3

~ week 4

1. Field Research We conducted both desk research and field research for better usage example and enhanced user experience. We found out that carrier ramp is very leading service through out the globe. Because of the fast introduce, not everybody know what this is and how to make use of it. In addition to ignorance, the experience was very painful because of the ramp itself was badly designed.

3 Main insights from user research: • Too steep angle *Carrier • ramp isIgnorance only for luggage, walking is prohibited of usage • Unintuitive design


*Carrier ramp is only for luggage, walking is prohibited

2. Analysis_Journey map

Second usage of carrier ramp

5 4


3 2 1 0 -1 -2

20’ female Chinese traveler traveling with friends

30’ Korean career woman returning from business trip

❖ Both most suffered at second usage of carrier ramp. Main cause was due to repeated bad experience without any informative instruction.

3. Problem Definition From desk research, field research, user interview, and customer journey map, we used 2x2 matrix to choose most real (x axis) and valuable (y axis) problem. Most real and valuable problem we choose was users’ ignorance of the carrier ramp, followed by ramp’s compatibility to other types of carrier, followed by missing rubber break pad. We then converted the selected problem into How might we(HMW) question. “How might we make 20-30 years old woman with luggage to use carrier ramp properly at Seoul metro station’s transfer walkway?”

4. Solution Ideation Based on problem definition, lots of wild and mild ideas were generated and then sketched on the paper. Two main ideas were selected to proceed to prototype step.

*Idea sketching Staircase sticker Floor(ramp) sticker Floor icon sticker

5. Mid-fidelity Mockup The two main ideas selected were stair sticker and floor sticker. I used Adobe Illustrator and Photoshop to create hi-fidelity visual design & mock up. Created visual mock up will be used at test & validation stage.

Solution1. Stair sticker. pictogram


Solution2. Stair sticker. picture

Solution3. Floor sticker

6. Usability Testing

Field test - voting

Facebook campaign

Use dot sticker to vote for a better idea. *A/B testing & user interview

After watching the video, people can know what made hard to use the carrier ramp and how to use ir properly. *How-to-video

We made voting board to get to users easily. We A/B tested variation of solutions to find out which matches users’ needs better. After voting, we made a brief interview with users to see what they say about the problem and the solution. We also made how-to-video and posted on-line to make it spread.

Artworks Gear fit 2 watchface design (Silver Award) Create watchface design based on “Sport & Dynamic� theme Photoshop, Sketch3 are used for mockup

Sketch3 minimal icon design Used Sketch3 to create vector icons as a symbol

Lockscreen ad GUI UX project of how commerce company can ad thorugh lock screen Used Sketch3 to create wireframe and GUI


Design Thinking Enablement Experiences Design Thinking: A process & mindset to Innovation. First clarify the right problem (Empathy, Define), and then get creative to solve the problem (Ideate, Prototype, Test)



GS Caltex


Doosan Heavy Industry




Amore Pacific MBA


Multi National Star Ventures

Start ups

Maekyung Design Thinking pop-up Schoo


CCEI (Center for Creative Economy and Innovation)


Innovation Fellowship


George Kembel


Ministry of Science, ICT and Future Planning - Managers


Ministry of Science, ICT and Future Planning - Related orgs


Gyunggi Province Government emplyees


Gyunggi Province Manager Level


Yeonsei University

University Student

National University of Singapore

University Student

Korea Polytechnic University

University Student

Design Thinking Community

University Student

Design Thinking 1 day Workshop with DTC vol.1

University Student

Design Thinking 1 day Workshop with DTC vol.2

University Student


UX Portfolio Richard Jang  

UX Portfolio Richard Jang - 2016

Read more
Read more
Similar to
Popular now
Just for you