Page 1

PORTFOLIO Han Jiawen UX/UI Designer


Personal Introduction Education Aug.2013 ~ Jun.2017

Sun Yat-Sen University

Apr.2018 ~ Mar.2020

Keio University Graduate School of Media Design

Experience

School of Communication and Design Internet and New Media

Mar.2016 ~ Jul.2016

NetEase Game User Experience Center Internship

Awards 2015

The Seventh National Advertsing Art Design Competition for College Students First Prize(video)

2015

Times Young Creative Awards Excellent Prize


Contents P1-P8

Motigym

Motivates those who work out in Gym Interaction among Equipment, Band and App

P9-P16

Education Information Sharing Platform Connect Examinees with Certain Seniors Posts / Hall / Lives

P17-P18

China Industrial Museum Promotional Design Brand / Brochure / Website / AR Exhibition

P19

Graphic Design Posters


Motigym This project is designed for people who go to Gym. Instead of providing them with detailed working out videos or plans, Motigym is designed as a supplement. Motigym focuses on increasing people’s both Intrinsic and Extrinsic motivation in order to help them keeping on going to gym. With NFC technology, Motigym is more than an App. The synchronizaiton among Equipment, Hand Band and App will be more trustworthy and reliable.

1


Motigym

Who is the target?

Keeping fit has become a popular topic and ways are also more diversified than before. Through our research, we narrow the targets to those who go to gym for working out.

Competitive Analysis

Courses

Fittime Keep Hotbody

NikeTraining

Data Tracking

Target Users

In the market, main trend is providing various courses in forms of pictures and videos. Most of them also provide the function ofdata tracking including calories which have been consumed.

After interviews with 4 potential users,we work out Personas of our target users. They have following characteristics:

Users Feedback

Plan to work out in Gym

By collecting feedbacks from users of those 4 popular applications, we have following discoveries.

Have clear aim to lose weight or keep fit. Feel hard to stick to working out plan. Do not resist social networking.

Those who have lost weight or with a fit figure also go to Gym. Application is a supplementary.

If you are determined to keep fit, working out in Gym may still be the best choice.

Most of courses are more suitable to those already with experience, since it is hard for inexperienced people to complete the action correctly. Data tracking is not scientific enough. Once “Start� was clicked, calories will be counted even users did not move at all.

2


Motigym

User Research

On basis of the personas, we draw the User Journey Map of two primary target users to find out pain points during the process of working out in Gym.

Violet Chen

Flexibility

Frequency

Graduate Student, 22 years old

Plan Completion Motivation

“The courses online are not suitable to me, but I need them to push me ahead.”

Set up a Plan

H

L

Prepare for work out

Work out in Gym

Evaluate and Reflect

Control Calories

Get up early for jogging and working out

User Behavior

Warm-ups and jogging

Import her data basing on self-evaluation

Follow the videos working out Set plans

User Thinking · Postive

· Negative

· Using Apps to set up a plan for me is necessary for me to restart working out. · There are always tasks impossible for me to complete according to the plan set up by Apps.

“A plan is a turning point that I restart my working out! It makes me excited! ”

Fluctuate distinctly in different periods

Physiological Preparation Seldom uses trainning equippment

· It is a good habit to get up early for jogging. · Working out after jogging is more effective. · When my “Period” comes, I have to stop my plan.

“ When I get used to go jogging, I feel preparations easy and it let me feel good. ”

· Gym’s atomosphere is encouraging. · Working out following the videos makes my aim clear.. · Working out with equipment is confusing.

· Warm-ups and Cool-downs are boring and unsufficent.

“ It is an immersive feeling and I can focus on my working out. ”

· I feel a sense of achievement when looking back my training data. · Self evaluation is not objective and precise enough.

“ I am proud of myself when I see my exercise data! ”

User Emotion “ I can never find a plan that suitable to me. How I wish to get more involved in setting my working out plan. ”

“ There are always tasks I can not complete. I hate push-ups!” “ I feel really sad when my monthly period comes when I see a little progress! ”

3


Motigym

User Research

On basis of the personas, we draw the User Journey Map of two primary target users to find out pain points during the process of working out in Gym.

Henry Tian

Flexibility

Frequency

25 years old

Plan Completion Motivation

“It is quite a relief to see my weight loss! ”

Set up a Plan

User Behavior

Talking with professional Trainer.

Discussing with Friends who also goes to Gym.

Prepare for work out

Work out in Gym

Making an appointment with a Trainer (sometimes).

Warm-ups ( 5mins ).

· Postive

· Negative

Evaluate and Reflect

Check and track via Apps (At Gym)

Anaerobic exercises (15mins ).

Looking for proper group courses.

Electronic Scale and its App.(At Home) Deal with the extra-curriculum things.

User Thinking

H

L

Aerobic exercises ( 20mins ).

· Tell the trainer about my personal goal is helpful in setting a suitable plan.

· Finding and booking free group courses in advance inspires me going to gym.

· The environment of gym is comfortable.

· Some data can be synchronized in detail to Apps. (e.g: calories consumed, BMI)

· If the trainer is not with me and I want to make some change to my plan, I still feel confused.

· Most of group courses are aerobic and are helpful in reducing fat.

· Following the routines lets me feel easier and in losing weight.

· In fact, I have no idea about the data’s meaning.

· There are always some meetings or activities organized in a sudden. So I have to cancle the fitness plan.

· It is annoying when I have to wait for the running machine more than 10 minutes.

· The data of anaerobic exercise which is hard to remeber has to be input manually.

· Friends’ fitness goal and physical status are different from mine.

“ Communication with trainer and taking part in group courses are not only encouraing but also interesting! ”

“ I can get rid of those worries while working out in the gym.”

“ I feel confused when I see those data. Not to mention plan’s adjustment on the basis of those data. ”

User Emotion “ In weekends, I usually will wait for running machine.” “ When some other plan interrupts my training plan, I will feel anxious. ”

4


Motigym

User Research

From the User Journey Map, the facts turning them down and excite them can be discovered. Here we analyze their disappointments and excitments.

Disappoinments And Improvments

Change and Customize the Plan

Work out without Disturbing

With

Without

Fitness Data Recorded

Waiting for too long

Fitness Periods

Input Data Manually

Fitness Goals

Reading too much while working out

Living State

Excitments And Reasons

Set a Plan

As a Supervisor Imagine the Success

A Metaphor of Trainer

Group

An interesting way to do Aerobics Encouragment and Competition 5

Records and Data

Sense of Achievement Encouragment and Alarm


Motigym

User Research

Inspired by the Disappointment and Excitment, we want to stretch out idea with the metaphor. Through the interaction among Equipment, Hand band and Application, both intrinsic and extrinsic motivation will be stimulated.

“A Metaphor of Trainer” Appoint

Track Data

Adjust Advice

Arrive At The Gym

Use Band

Fix The State and Period

Check In

Aerobics

Anaerobics

Continue

Appoint For Aerobics

Calories/Time ……

Categories/KG ……

Record/Goal ……

Intrinsic Motivation

Intrinsic Motivation

Restart

Evaluation/Goal ……

Intrinsic Motivation

Synced With Each Other 6

Encourage

Use APP

Use Band

Before&After Work out

During Work out

Evaluation/Rank ……

Vibration/Color ……

Extrinsic Motivation


Customize The Work out Plan Users can input their Aerobics and Anaerobics working out plan and it will be showned differently in the Moti Calendar.

How To Stay Motivated?

Cheer For Friends and See The Daily Plan Completion Rank There are Two parts for users to interact with their friends. The First part is for interacting with those who are Working Out At Gym Right Now. Users’ Cheer Can be Felt through the Vibration of the Hand Band.

NFC Tech Vibration Data Track Hand Band & Equipment

Record, Plan and Appointment can be put in Manually.

With the use of NFC Technology, Hand Band and Equipment can be Connected. Work out data can be converted in to different kinds.

Make An Appointment For Aerobics Aerobics Class in group and Aerobics Machine can be Appointed in advance at that very day.

The Second part is The Rank of Today’s Plan Completion. Through the competition and encouragment, users will be motivated.

Data Record And Analysis——Aerobics & Anaerobics Some Data of Working out Results are picked and showned both in General and Detailed ways. With grahpics and pictures, trend can be understand.

When Today’s Aerobics Goal is achieved, the Hand Band will turn a different Color.

Whether the Data has been Recorded can be checked in “ My Plan” as well.

Aerobics’ Data will be recorded in three aspects: Time/Calories/ Heart Rate (Average).

Only after entering the Gym and “ Check In ” via Motigym

The Gap of the Work Out Result between “ Ideal” and “Real” will be estimated.

7

Anaerobics’ Data will be recorded in three aspects: Kind(Equipment)/ Weight/Set.


Motigym

Prototype Considering the context of using Motigym, we pay more attention to shortening the path to a certain by inviting users to Card Sorting discussion. Since most Terms are too confusing to understand and remeber, we use more pictures and graphics rather than words to make it user friendly.

Contrast Neutral

8


Education Information Sharing Platform This project is supported by those who have already studied in Japan. This application is designed to let Chinese Seniors ( has been studying in Japanese Universities) work as tutors, giving precise and useful information to Chinese Examinees ( has been applying to Japanese Universities). With more information and advice, Examinees will have more chance to choose a proper University.

9


Education Information Sharing Platform

Competitive Analysis

We choose products ranging from Education platforms,to Forums for students studying abroad, Knowledge sharing platforms and Life & Service platforms.

Method

Information Architecture

The analysis is based on the Elements of User Experience.Besides, we also add the part of User feedback and data collected from the App Annie.

After the Competitive Analysis, we worked out the First Version of Information Architecture, which would be a reference for later User Research. 10


Education Information Sharing Platform

User Research

Quantitive & Qualitive Research

Help Comes From .....

Who has helped you most when you are preparing for the application? (Multiple chioces)

Teachers play an important role in helping examinees preparing for examination and application, including choosing major and school.

65.2%

However, Seniors are far more expected to be helpful comparing to current situation.

Who you expect will help you most when you are preparing for the application? (Multiple chioces)

59.7%

72.1%

24.8% 12.1%

Information Comes From ..... Seniors studying Japan has the most valuable and first-hand information. But their information is more personal which is not as universal as that from teacher.

Teacher

Seniors

Oneself Other Examinees

Seniors

Oneself Other Examinees

Examinee

Tell them about the details about life in Japan and share personal experience.

Share experience with teacher especially about questions of exam.

Teacher

Teacher

6%

who wants to apply for a university

Tutoring them in language, EJU and basic interview standards.

who works in China

10.6%

7%

Senior

who has already studied in Japan

11

Considering the accessibility of information and detailed experience about application, seniors have the potential to tutoring examinees.


Education Information Sharing Platform

User Research

Quantitive & Qualitive Research

Also Find .....

What do they need...

Stages of Application

As high school students, they prefer Traditional School rather thanOnline Courses when they are preparing for those examinations. They also lack of the ability to collect helpful information.

There are different Focuses during different stages of applying for universities. graduate from high school Prepare for JLPT Consider about Major

EJU admission

go to Japan

Prepare for TOEFL Prepare for EJU Prepare for EJU Choose Major and Uni Prepare for exams held by Uni

Attitude to Online School As high school students, they prefer Traditional School rather thanOnline Courses when they are preparing for those examinations. They also lack of the ability to collect helpful information.

Official Information The standard provided by universities are always too general to refer to.

Information Architecture (Adjust)

12


Education Information Sharing Platform

Design and Evaluation

Wireframes

首页

Hall

You can read and write Posts according to Categories

Information about EJU

Information about Major and Uni

Information about Exam held by uni

识日塾

名人堂

Homepage

Information about Life

You can find Seniors according to Uni and Major

My

University

Live

You can attend various Lives Held By Seniors as you need

Live’s Notice

Vote for Lives to be held later

Advice & Comparisons Around One General Topic, users can Vote for Specific Contents Scholarship/Second-hand Book/Discount & Coupon Points can be used to have lucky draws

Connect Seniors with Examinees Post

Major

Fukubukulo 13

1st Version


Education Information Sharing Platform

Design and Evaluation Wireframes

Final Version

Post 帖子

before We used Principle to make an animated Prototype helping us with User Evaluation. After times of Test and Evaluation, we worked out the Final Version and here are some important revisions.

My

after

The way of interaction with Seniors has been revised. Seniors relating to the topic and content of the Post will be recommanded after the text.Users can Invite Seniors for Comment and Text them.

Hall 名人堂

个人

before

after

before

after

The information about University and School are listed in a more direct way and the number of JUMP when a user want to go to specific school is reduced.

The former design was hard for users to understand the function of Lucky Draws and the IA was in disorder. So we decide use Japanese unique OMIKUJI to represent Lucky Draws. And instead of giving users objects for gifts, we add more Coupons and Experience Ticket used in the platform.

14


Education Information Sharing Platform

Prototype GUI

Icon Set

Information about EJU ( Japanese Map )

The inspiration comes from Japanese symbols: Japanese Map Crane Machine Ninja HelloKitty Temple Karaoke Pokemon Kimono.

Information about choosing majors and universities ( Crane Machine )

Information about independent exams held by universities ( Ninja )

Homepage

Lives

Hall

Information about coupon and scholarship ( Wallet with HelloKitty )

My

Homepage

15


Education Information Sharing Platform

Prototype

GUI

Post

Hall

Live

My

16


China Industry Museum

Promotional Design

China Industry Musueum locates in Shenyang City, Liaoning Province. With valuable and meaningful exhibits and real industrial sites, it deserves far more attention than now it does.

So I decided to make a serious of promotional design to gain more attention for the musuem and let more people know the historty of industry.

Guide and Artificial intelligence

Problems Analysis

Website/Mobile Application

Through interviews and investigation among 3 main types visitors ( those who are with related professional knowledge, common residents and travelers), we get more insignt into this project.

Professor

Resident

Logo Design

Traveler

Then we analyzed and summed up our conclusions using the method of SWOT. Exhibits on display are unique.

S

Most exhibits can be touched and felt personally. Pavilion sites contains the real former factory.

Lack of explanation and guidance.

W

No official website and advertising ways. Vistors easily get lost and confused in the musuem.

Brochure

Website/Mobile Application

O

Most musuems have introduced new technology into exhibition. Industry, especially heavy indutry is felt distanced to most people.

An exclusive logo and the official website is necessary, which will not only increase the reputation, but also provide important information about musuem. For example, its office hours, the address and contact method of the museum.

Promotional Strategy

The theme of this museum is rare to see in China. Getting in touch with the local culture has been more popular when people travel .

Introduce artificial robot guide to provide visitors with moreinformation relating to the exhibits. The website is needed for visitors getting a general understanding. Brochure share contain the museum’s map, general information about different musuems, which can help visitors plan their routes.

Multimedia

T

AR Animation

17

Introducing multimedia devices such as Ipad, wearble devices into musuems to spread knowledge in more vivid ways. Also, in the Cast Museum built on former factory sites, AR animation can be used to show the work condition and work routine in the past.


China Industry Museum

Promotional Design Main colors used in this series of design is inspired by the image of concrete, rust discoverd in the China Industry Museum.

Website

Brochure

The contents of website consist of: The general introduction about the musuem, The events held, Information about admission and tickets and The contact.

Museum Exhibition

LOGO Design

Move to the certain point which can trigger the AR animation ① The inspiration of this logo design comes from the configuration of the China Industry Musuem itself. With the combination of Line and Plane, the configuration of the musuem is before people’s eyes, which may attract them to visit the musuem in person. In terms of various uses of this logo, only single color is used so that it can be changedand adapt to different backgrounds.

The contents of brochure consist of: Basic information of musuem Brief introduction about those museums The map of the museum In the map, the location where multimedia devices and AR animation are avaliable for experience are also marked.

② ① The spot that AR animation can be triggered. ② Use museums’ application on smartphones scanning. ③ When the smartphone reach the certain mark pattern, the AR animation can be played. ③ The application of AR technology is mean to bring back the scenes of former product line. 18


Graphic Design

Posters

The Flu Poster for the Korean movie

Get Rid of High Heels Though wearing high heels is suffering, it is essential to women’s life. The knife is metaphor for heel stressing the harm in wearing high heels with impact. High heels also symbolize sexual stereotypes. So getting rid of high heels also encourages women to be truely themselves without living in the eyes of others.

19

Kabuki Poster paying honour to Ikko Tanaka


THANKYOU Han Jiawen UX/UI Designer

Portfolio(ux ui)  

This is my portfolio as a student of UX/UI.

Portfolio(ux ui)  

This is my portfolio as a student of UX/UI.

Advertisement