Guanyun UX Portfolio

GUANYUN CHEN

PORTFOLIO 2020 UX, Industrial Design

kane33370846@gmail.com

NCSU Printing System Posture Monitor Design for Dignity Headphone Practical Work Experience

UX / UI 1.

NCSU Printing system A project to realize the requirements of the user and improve the adding fund function of NCSU printing system.

Original Process

1. Log in the printing 2. Click on the add fund button 3. Choose the option of online payment 4. Log in money system 5. Choose add more or less than 6. Type in the amount 7. Fill the form of billing information 8. Check the receipt 9. Return to the printing system and start to

Journey Map

Stages

Activities

Clicking On Add Fund Option

Choosing Online Payment

Logging In The Account System

Choosing More than $10 Or Not

Filling Bill Information

Returning To The Pringting Page

On the home page of the printing system, users have to click on the add fund option on the left of the page.

With too much information on the page, users need to scroll down to the end of the page to find the option of online payment which is easy to miss.

A totally different website than the printing system shows up. The website is about the account of the money that students can use on the campus.

Due to the different handling fee, users need to choose to add more than $10 or not, then type in how much the users want to add.

Filling in the form of the bill information.

The information of the receipt shows up. Then google the printing system in the browser and finally start to print.

Confused Why I am in a different website.

Annoyed Too many unnecessary process.

Tired Am I done?

How can I get back?

‧ Apply same system or at least, same style of the page.

‧ Calculate automatically how much users have to pay depends on the amounts that users type in.

‧ A significant icon to represent that the proccess has been done.

Emotions ‧ Show the most important info only. ‧Let users see all the options in one glance then choose what info they want to go forward.

Ideas

‧ A button for returning the printing system.

Interviews

Interviews

After experiencing the process with Tim, we interviewed other three users to confirm and discover the user need.

Then we defined the pain points.

Pain Points NCSU students need a simpler and more intuitive process to add funds to their WolfPrint account.

Raunak “I often have to reset my password to add funds to my account, because I tend to forget the associated password.”

Unnecessary steps

Lack of consistency in text and layout

Lack of navigation

Lack of efficiency

Lack of action indicators

Unnecessary information

Abby “I’m not sure where I am supposed to click since there are no real action indicators.”

Jack “Often, the information isn’t relevant to what you want to do. I have to constantly go back and forth between pages.”

T

hen we applied variety of maps to concluded how people think in each step, what does Tim really need, what feature can hit the need and we should focus on.

What does Tim need?

One Click to Add Funds

Clear Actions

Simple Continuity

No Hassle Printing

Those who have established a preferred online buying default should be able to add funds to their Wolf Print accounts through the click of 1 button.

The balance should be clearly stated and act as an actionable item for ease of adding funds.

A clear and direct path to online payment needs to eliminate unnecessary logins, information and website redirection, while establishing consistency in language, icons and other visuals.

Once the user has added funds, printing should be easy and fast with no need to navigate back to the Wolf Print site.

W Prototype

Paper Prototype

e did paper prototype to confirm the features. In mid-fidelity prototype, we remove extra machine learning feature and keep layout and process simple and consistent.

Mid-Fidelity Prototype

W

e defined the style guide as a concise style because we hope the whole process could be sense as an easy process, easy as the icons they see.

Pattern Library

Colors

Icons

Low balance

Good balance

Print summary

Home

Finance

Print jobs

Plus icon

Minus icon

Checkmark

Typography: Helvetica Neue

Pages summary

Final Design

finish Two steps to

Auto calculate the total fee

Red color and icon remind user to add fund

Strong color guides user to pay online

Back to print job easily

d fund

one click ad

2.

Posture Monitor A collaboration project with engineer and business background student. Not only reach the different views from other teammates, but management and collaboration also make the experience of envolving in this project special.

Intro

Project Goal

Primary Market

Improve the quality of posture in working adults by developing a wearable device that accurately measures and analyses posture position, then gives feedback to the user with the ability to coach beneficial exercises to strengthen and correct posture.

Businesses and corporations have the motivation to improve employer health. Within this market, businesses and corporations have a strong desire to avoid employee injuries, promote healthy habits, and increase employee productivity.

80%

of U.S. citizens will exhibit back problems

50%

of U.S. citizens will report back pain every year

10%

of U.S citizens experience back pain at any given time

2,000$

per year on average; U.S. employer healthcare costs associated with back health problems

Interviews

Current Product User 1 “Incessant vibrations and sticky application to skin was annoying.

I ultimately wanted to take the device off or turn the vibrations off which I think defeats the purpose of the device.”

Current Product User 2 There is only a single point of reference and calibration is based on what I think is correct posture and how do I know I am right? I wish these kinds of products were more accurate.”

Doctor “No direction on how to fix posture other than sitting up straighter.

If there was a way to connect to exercises that would be prescribed by physical therapists to the state of my posture.”

Current Market

Product

Basic Description

Pros

Cons

Cost

Where do we see improvement

Posture Monitor,

A application that utilizes the Intel RealSense 3D camera to monitor when you start to slouch or have been sitting too long.

N/A

Only works with Intel Realcase 3D camera, not a apple product user

$19.99 (Lifetime License)

Wearable deviceLicense

Upright go

Small wearable device that sticks to the back of the upper neck/back and gives tactile feedback when you start to slouch.

Instant feedback

-Annoying, constant buzzing -Only gives feedback during training sessions -Purges data after 24 hours if not synced

$79.95

Training programs, feedback system, and comfort

Lumo Lift

Magnetic wearable sensor that’s worn on the front of the body just below the collarbone.

Uses vibrations to alert user to posture issues.

Also counts steps, training session

Hard to tell what buzzing means without looking in the app, has to sync at least once every 6 hours by opening the app.

$120 (have since ceased selling)

Manual calibration, only measures one data point on the body

Back Brace

Physical wearable brace that forces correct posture

No need for continuous feedback or power sources

Lack of tracking or data, physically restraining

$12-100

Comfort and tracking capability

Align Med Posture Shirt

Compression shirt that retrains Straightforward and muscles involved with posture in easy to use, forces you to order to improve make improvements just by wearing it.

Not everyone likes to wear undershirts, expensive, needs to be washed regularly.

$95

Potentially add sensors.

posturermonitor.org

O

ur team decided to apply multi-sensors to fix the problem of accurately detecting the shape of the spine. After that, we start our ideation from how to mount the sensors on our body.

Ideation

2.

Install the velcro in the housing

1.

Velcro mounts the sensors

3.

Shape and structure definition

Final Design

Stretchy material to fit most of people Place four sensors to reach precise shape of spine

The cover hold the sensors to avoid falling

Features

Charging Slot Velcro

Velcro for the cover

Align on the paint according to the the back length

Exploded View

Top Housing

Li Battery attach PCB by tape Pogo pins for charging PCB

Velcro Snaps to assemble with the top housing Back Housing Bosses for fixing the velcro pad and PCB

Top Housing

by Overmolding

TPE Polycarbonate

Top

Ribs for fix the PCB

Draft Analysis

Space for battery

Back

Second Shot for TPE

Parting line

Side action

Side action

0.32”

1.6”

Back Housing

by Insert Molding

Charger Slot

Polycarbonate

Top

Pins for fix the PCB

Pins for fix the velcro pad

Back

Draft Analysis

Insert pogo pins

Parting line Internal lifter

0.27�

1.55�

User Interface

S

pina can distinguish different shapes between standing and sitting by learning of the different shapes in the sitting time and standing time that users set. Therefore, users are allowed to understand their posture detaily. Spina app can also customize the posture training for user according to different spine shapes.

Connecting with device

Training Mode

Posture Sensing

Time of standing and sitting

Data Visualize

Design for Baby Boomers 3.

Design for Dignity Utilize research methods within the design development process to develop meaningful, commercially viable products for Baby Boomers as they head into senior citizenship.

What means to design for dignity?

Feel Old With products for aging populations so frequently designed out of necessity, design has the tendency to make people “feel old� and, ultimately, devalued or disrespected.

Confidence Products should be designed in a way that include the aging population, and affirm their confidence and dignity.

Source of Inspiration: The Dignity of Living | Dr. Bryce Rutter | TEDxGatewayArch

Research

Interviews

Insights

Interviewees are aged between 57 to 81 which included teachers, veterans, engineers, designers, administrators and more.

Interviewees were asked to rank our Primary Source Research Insights by level of importance in their lives, and to rank each of our individual concepts.

8 females

9 males

Health Productivity Community Technology Cleaning

Initial concepts Feedback from seniors on Initial Concept Ideas were shared with the users and they were asked to vote on the concept they liked the most My concept is a transformable vacuum cleaner. It can change the type between regular type and L type to assist the users to reach specific areas, which are hard for them to reach, like under the sofa.

Market Research

W

hat we can access on current market is the vacuum cleaner with mutiple joints to clean specific place, extensible tube, replacable cleaning head for different place, changable tube for different place or releaseable small one from main body. All of them allows user to reach more place in the house but there is no one similar with L shape vacuum cleaner can reach the lower place. If the transforming process is simple like just press a button, maybe the new L shape vacuum cleaner will be better than current products.

1. mutiple joints 2. extensible tube 3. replacable cleaning head 4. changable tube 5. releaseable body

1

2

3

4

5

User Testing

Manually folding the inner tube into inside of outer tube need users bend their back to complete whole process of operation.

Press the button to release the inner tube to allow it slide down automatically is simple but the process of sliding is not smooth and also hard to fold it back.

Seniors don’t mind to lift the outer tube to pull the inner tube out as long they don’t raise their arm too high.

Final Design

I

develop the volume and appearance after decide the operate type.

Then did VR sketches to confirm details.

T

ransforming to the L type by grabbing the button under the dust box to unlock the internal tube and then pull it out.

Operating

Regular Type

Operating Regular Type

Fold the tube back by doing the same way but without pressing the button to allow the tube lock automatically.

Lifting

Transforming

Operating L Type

Features

Accordion tube allows users to elongate and fold the device.

Dust box

Grasp here to unlock the mechanism by pressing this button and lift the tube to transform.

Unlock button of the dust box.

By rotating the blue knob, power on and off the device.

Mechanism

The springs be screwed on the red metal part, and return the button after the button be pressed.

The track on the outer tube does not run through at the bottom. Therefore it can hold the inner tube at the bottom.

There is a hook connect with button and allows the inner tube be released after the button is pressed.

Exploded View

dust box

outer tube

accordion tube

inner tube

cover for the joint

4.

Design Elements Apply the design elements of Jaguar to design a digital product. The project focus on understanding the style of a specific brand and apply it to headphone design.

J Design Language

aguar has lot beautiful and high quality attributes on the material, exterior and interior, but the company do not provide this with an unattainable prise as what it looks like.

So the position of the headphone would be same as Jarguar.

Dramatic Graceful Exaggerated Stance & Graceful line

Powerful Passionate Bold Surface Break, Clean& Glossy

Luxurious Luxurious Style, Metal, Leather & Technical

Market Analysis Price

Target Market

Sound Quality

S

ince most higher class headphone are for professional audio appreciating, therefore, they tend to have bigger dimension and the materials, the components are considered to performed the best sound.

Also, they do not have that much functions and buttons as others headphone which is in the lower class then them.

Lighter Smaller

Beats Studio $350

Bluetooth

stereo 3.5mm

BOSE QuietComfort 35 II Bluetooth stereo 3.5mm $350 DENON AH-D5200 Heavier Bigger

$699

stereo 3.5mm

Ideation

Sketch Trying to simulate different portion of JAGUAR as the exterior of headphone. I pick the graceful hood, which I think is the most distinguished part of JAGUAR.

VR Sketch Then go to VR sketch to inspect relative dimensions and the detail design.

Prototype Finally, built the prototype to confirm the real dimensions and features.

Final Design

T

he headphone is in Jaguar classic green and black.

The leather and string on the headband are like the seat of Jaguar. Contrastive color between them are symbolize the passion of Jaguar. Special leather of earpad allow air circulation to avoid the uncomfortable from swelter.

Features

Adjustable Headband

Adjustable Earpad

Volume Slide

Slot

T

he headphone has flexible steel, adjustable headband and earpad can fit to anyone.

Intutive control the volume by using the slide. Long press the slide to connect and deconnect bluetooth. Classical audio jack and universal micro USB slot are avalible as well.

3.5mm Jack Micro USB recharging

Exploded View

Cusion Steel

Aluminium Cover Battery & PCB Earpad

Diaphragm

Slide Plastic Cover Button

Iron Tube Dipping Aluminum Tube Iron Tube Painting Iron Tube Bending Iron lathing & electroplating

Dual Color Injection Molding Housing Iron Tube Bending

5.

Work Experience The projects from my work experience in DK City Corporation from 2015 to 2018 as a industrial designer. I learned what the manager care and think for the designings and manufacturing, also, how to work with engenier.

T

he style design of spin bike. In the several design, people prefer the compact housing because that makes people feel lightly and easy to control. But the challenge is it is harder to place all the machnism in a small housing and still have a strong structure.

Spin Bike

Exposed Frame

Fully Covered

light wheel rim Dual Color Housingh

Compact Housing

T Variable Stride Elliptical

his product is my first project which go from concept to production. I learn a lot about the fabrication of plastic housing like injection moding, vacuum forminig or how to design the parting line.

Template Console

Template Handle bar

Rotatable multi-joint housing design

PU handle assembling Vacuum Forming Housing PU Handle ABS Injection Molding Housing Rubber Pad

Feature of the joint housing

BRE Fan Series

F

an series applies the fan mechanism which is used on the rowing machine to produce resistence on Bike, Recumbent and Ellipstical. Therefore, we can see a big, round plastic cover at somewhere of equipment. All three can apply the same plastic housing on fan part which means we only need one mold for three product.

T Stepmill

his design apply a lot vacuum forming housing which can only strengthen the structure by the bumpy shape. Since it is flexible, we try several ways to allows the components to restrict each other.

Remote Controller

T

he remote controller is designed for the adjustable bed to set the incline degree and massage intensity. The translucent silicone keypads, which LED light can go through them, allow users use it in the dark.

Seven-segment display & PP cover Compression molding Silicone keypad Screen Printing Injection molding ABS cover

Joint for back cover

Mounting point for plastic pin from top cover

Mounting point for screw

Top Cover

Keypad

Mounting point for plastic pin from top cover Joint for back cover Mounting point for screw

PCB

Back Cover

Battery Lid

Movement Trainer

T

he movement applies vacuum forming to produce the housing. Therefore, the parts are flexible than injection molding. I make them overlap to limit each other and bumpy contour can also allow them to have solid structure.

Vacuum forming cover with bumpy contour

Treadmill

Interchangeable Mold Insert

Extrusion Molding Parts Assembling

Thanks For Your Time