Interaction Design Portfolio

Page 1

P O R T F O L I O JIAMING

ZHANG



EXPERIENCE

EDUCATION Anticipated graduation - May 2017

Cornell University, College of Human Ecology Bachelor of Science Design & Environmental Analysis Major Human Factors and Ergonomics Concentration

SKILLS

VISUAL Adobe Illustrator | Indesign | Photoshop | AutoCAD

USER INTERFACE Sketch 3 | InVision | Handsketching HTML + CSS | Adobe Dreamweaver

Information Science (HCI) Minor

3D MODELLING WORK

Google Sketchup | Rhinoceros | Solid Works Keyshot | Vray for Sketchup

June 2016 - August 2016

Product Design Intern - Shanghai, China WOW Design, United Design Group Co. Ltd. (UDg)

LANGUAGES English | Mandarin

June 2015 - August 2015

Web Front End Designer - Ithaca, NY Cornell University, Department of Design & Environmental Analysis

HOBBITS & INTERESTS

September 2015 - October 2015

Web Front End Designer - Ithaca, NY Cornell China Club

Calligraphy

Badminton

BasketballS

inging

Tea-tasting



TABLE OF CONTENTS

TvOS

IOS App

The Elder Stick HueBeats

Web

Cornell China Conference

UX

Visual Brainstorming Tool

UX

Experience Map

Product

Stream

Product

Hand-Sketching Tableware

Product

“Do0OoT“ Candy Jar

Product

Dispersion



THE ELDER STICK TvOS App User Experience Design | 2016 Fall A significant proportion of the elderly have been and are being left behind by the communications technologies of the twenty-first century. We have built a smart TV-based communications device with functionality such as voice call, appointment management, instant messaging, and smart personal assistant that directly, deliberately addresses each challenge faced by elderly users, from the choice of interface size—the television—to the use of speech recognition to sidestep impairments in vision.

Group

Ethan Arnowitz | Albert Liuqing Zhang | Xin Lin | Jiaming Zhang

Color Scheme #


Interview

Roberta| Samantha | Mark | Nick (Pseudo Names from Brookdale Nursing Home) Interview Settings The setting for the interviews at Brookdale were conducted in the interviewee’s room. The room of the residents provided a comfortable, familiar, and contextual environment for the interview. Since the interviewees often use technology in their room, this seemed an appropriate setting for the interview. Our fourth interview was conducted via video chat. The interviewee was asked to sit in a comfortable spot within her home. This interview used video chat because our project is exploring usage with communication tools. This interview provided unique contextual observational opportunities.

Consent Procedure Before starting the interview, we asked each participant to review the printed consent form. After reading the consent form, interviewees were asked to sign and date it. Copies of these signed consent form are located at the end of this assignment. If the interviewees had any questions or reservations they were allowed to ask the interviewer for clarification.

Interview Questions and Tasks After the consent form was signed, the interviewee was read a short introduction on the interview process and themes that would be addressed throughout the course of the interview. Three main themes were covered including interviewees personal experiences and health, experiences with technology, and communication.

End-of-Interview Wrap-Up At the conclusion of the main interview questions, the interviewer asked a series of wrap-up questions, providing an opportunity for the interviewee to ask the interviewer any questions. All of the interviewees said they had a comfortable experience during the interview. Some asked questions about us and what we hope to achieve.

Analysis + Social Model


UNDERSTAND USERS Persona

Sheila Gonzales, 87

Bio

Family

Goals

Sheila is a vibrant and witty woman who was born in Eastern Germany in 1929. Sheila escaped to America at the beginning of WWII. When she arrived , Sheila met her husband of 66 years in Pittsburgh. Sheila and her husband relocated to Ithaca, NY when her husband began a job as a History professor at Cornell University. Besides a stay-at-home mom, Sheila worked part time as a secretary in a local architecture firm. During her career, Sheila had minimal interaction with technology and did most of her work by hand with pen and paper. Sheila retired in 1975, when she started spending a lot with her daughters, Samantha, Jessica, and Crystal. Crystal recently moved in California, and Sheila misses her dearly. When she was younger, Sheila was an all-star softball player, and was one of the top female pitchers of her day. These days Sheila likes to knit, play shuffle board, and spend time with her grandchildren.

Sheila’s husband died 10 years ago. After his passing, Sheila remained in her home until she fell and displaced her hip last year. Sheila has three daughters, two who live locally and one who lives in California. Sheila has 7 grandchildren, who she admires very much. 2 of these grandchildren live in California, and Sheila wishes she could see them more.

As a 87-year-old woman, Sheila’s life goals are centered around creating meaningful memories and enjoying the time she has left. Something that is very important to Sheila is leaving a legacy behind, especially for her 7 grandchildren. Sheila has a lifetime worth of memories and stories, and she wants to record and save them for future generations.

Occupation

Physical Limitation Sheila has limited mobility and uses a walker to assist her in walking. Additionally, Sheila’s hearing and visual capabilities are severely limited. When watching the TV, Sheila sets the volume to maximum. Additionally, Sheila’s severe arthritis makes it difficult for her to use small interfaces and devices.

Retired (Former secretary in architecture firm)

Cognitive Limitation Technology Usage

Overall, Sheila’s cognitive health is good. Besides being slightly slower than average to process information, she is articulate, well spoken, and aware of her surroundings.

Current Techonology Currently, Sheila’s only technology use is a flip-phone and a TV set located in her room. She uses the flip-phone to communicate with her family, and doctors. Although Sheila has a TV, she often doesn’t use it. Additionally, Sheila does has an email account, but only uses it when her daughter comes to visit.

Currently Sheila feels stigmatized, intimidated, and limited by the technology she has. Additionally, Sheila’s end goal is to communicate with family, especially with her long-distance grandchildren. Because of these two main problems, Sheila needs a universally accessible, de-stigmizized and enjoyable communication tool. Sheila’s desires a light and portable device. Because of Sheila’s limited vision and hearing, Sheila desires large font sizes with increased audio assistance. Sheila often has trouble unpacking and setting up new products. Because of this, the product needs to be easy to open and set-up as her experience goal.

Communication Currently, all of Sheila’s communication is done via a flip-phone. Sheila video-chatted once on her daughter’s computer, and would like to be able to do this on her own. She misses her grandchildren that recently moved away, and was hoping to see them. Sheila visits her doctor twice a week, and communicates with him in person. Additionally, the staff at Clearwater checks in on Roberta multiple times a day. Sheila is often disoriented by her schedule and doesn’t know when her different appointments and visits are.


Affinity Diagram (Interview Analysis + Topic Catergorizing)


DESIGN IDEATION

Storyboarding (Converging)

Selected Features Easily Setting Up

R e a l -T i m e V i d e o S u b t i t l i n g

Conversation Archiving


Paper Prototype


IMPLEMENTATION + EVALUATION

Heuristic evaluation - Neilsen’s heuristics

Violation

Description of Violation

Speak the user’s language

The product requires the user to interact via voice command (remote can be used later on) in order to proceed.

User in control

There is no undo or redo. There is no way to quickly withdraw the request. The user must wait for the call to either connect or fail.

Visibility of system status

There is no indication of how far the user is in the setup process.

Error recognition and recovery

There is no indication of what would happen if the appointments conflict.

Help and Documentation

If the user is lost of needs help, there’s no place for them to provide more information.

Error Prevention

During the video chatting, the user could say “end“ to end of conversation. However, the user could accidentally say the word and stop the conversation.

Visibility of system status

Although the appointment are listed, and the color is used to match the conatcts, there’s no way to see the detail of the appointments.

Invision Prototype


User Testing

Improvements

1 Facilitator | 1 Note taker | 1 Interviewer | 5 Participates

1 Transition from the set-up section to the home page with added tutorial

Task 1

· Smoother transition from set-up to the main calendar page · Recur voice input button and text

Set up Elderly Stick 1. Tap the microphone button on remote and say “hello” / Press “begin” button on remote 2. Tap the microphone button on remote and say “[name]” / Enter Name using the remote Final State: set up complete page

· Increase the learnability and predictable transition to the new interface.

Task 2 Execute an upcoming appointment 1. Tap the microphone button on remote and say “Take” / Press “take” button on remote 2. Talks to the person from other end 3. Press “end” button on remote to end the conversation 4. A window pops up - “Are you sure you want to end this conversation?”; Press “yes” button to confirm.

Task 3

2 Better introduction to the “archive conversation” function. ​

Simulate leaving a legacy

· Change the button option to “end and save/end/cancel”. · Preview image to the save to the category confirmation page · Add profile picture to the saved conversation.

1. Tap the microphone button on remote and say / Press “yes” button 2. Save the session into a category: Tap the microphone button on remote and say “stories”/ Press down button two times, and then press “yes” button

More “clickable“ visual affordance

Findings from User Testing

1

2

3

4

5

In the name input interface, the microphone button does not offer enough visual cue to allow user to understand that it refers to voice input on remote. The color coding in the calendar interface, instead of offering clear mapping for participants, it complicates the interface by making mapping from contact to appointment more difficult. Lack of visual indication on calendar interface that informs users of voice as a means of input. Participants were unaware that they can use voice in the calendar interface. The monthly/weekly view option is not apparent to users and the information presented on monthly view lack appointment details for elderly users. Some participants did not notice the existence of weekly view and complained about the lack of information on monthly views. The transition from the completion of setup to calendar interface is too abrupt.

3

Weakening past events

Color coding matching between the contact list and the event in the calendar · Add online/offline status before the name · More visible cues and affordance by using both color and text · Reduce memory load increased

Difference between sele events and unselected e


DESIGN IMPROVEMENTS + EVALUATION Reivised Designs

Online/Offline status

s

ected events

Consistent Icon


DJ Y


H U E B E AT S Ios App Design | 2015.September “HueBeats”, a music and light controlling app finished within 24 hours for RPI’s second Hackathon, aims to create ultimate home disco with music ble light most intuitive user interface and user experience to deliver the function and purpose of the app clearly.

OUR LIGHT.

Color Scheme #


PROBLEM & RESEARCH

Phillips Hue App to control the color of the light

Use Bluetooth to connect to the speaker + Play Music

Phillips Hue Color Changing Light bulb



MID-FIDELITY


HIGH-FIDELITY MOCKUP

Retrieve



CORNELL CHINE CONFERENCE Web Front End Design and Development | 2015 Summer

The biggest annual event, Cornell China Conference has received prominent guests from a variety of industries and top universities. I was in charge of the whole front end web design for the professional conference, rebranded the Cornell Chine Club, and also designed the most of the marketing materials. website link: http://cornellchinaclub.com

Color Scheme #


ABOUT PAGE UI

Sub-title of section

Side menu helps with sub-sections Breadcrumb helps with navigation

Indented title and plus icon showing members in subteams

Back to top icon to help with navigation

Square shape with join us text to resonate with member’s profile picture

Consistent foot section


HOME PAGE UI

Highlighted section directs to tickt page

Direct to Conference page Back to Home page

Contact Information and social media

Involvemnt statistic showing impact

Direct to About page

Featured Guest speaker: Name & Title

QR code directs to offcial wechat account



E N T E R TA I N M E N T S PA C E CARD DECK Creative Product Design | 2015 Fall As a creative solution to increase the efficiency of design brainstorming session, this card deck helps both designers and client to brainstorm about college amenity spaces by using images, verbal description, and installation notes. Our group was focusing on research and develop a card deck for entertainment aspect of amenity space, other groups were working on gallery, gathering, food, information, making, nature, and work-life-balance spaces. Group Rebecca Merenbach | Madeline Winer | Kayla Wong | Jiaming Zhang

Color Scheme #


CASE STUDY

STANFORD UNIVERSITY

ROCHESTER INSTITUTE OF TECHNOLOGY

“The Arts District”

“The Global Village”

ART GYM

GALLERIES

OUTDOOR PLAZA

RETAIL SPACE

Working out the creative mind in an open, collaborative space

Stop by and check out the work of local artists and students

Sit outside, watch a performance, or even go ice skating in the winter

Go pick up some groceries and send out mail all in one place

THE COFFEE HOUSE

ART MUSEUM

RESTAURANTS

LAWN “BEACH”

Grab a cup of coffee and enjoy open-mic sessions

Get the experience of viewing the works of famous artists on campus!

Try out new foods from a variety of global cuisines

Soak up the sun during the warmer months

MULTIPURPOSE DINING HALL

PERFORMANCE HALLS

FITNESS CENTER

FIRE PIT LOUNGE

Eat dinner on Monday and go dancing on Saturday

Top notch, state-of-the-art concert halls for all to enjoy

Get a quick workout in before grabbing a bite to eat

In the cold winter months, sit back and relax by the fire


RESEARCH + INTERVIEWS

CO MP E T IT IO N IS FIE RC E TO AT T RAC T T H E BE ST ST U DE N TS

“When I go back to Cornell I like to explore the outdoor spaces rather than try to seek out entertainment indoors.”

STU D EN TS ’ P R E F E R E NC E S

Cornell Alumna, Class of 1984

A R E D I V E R S I F Y I NG

“I think it could be really cool to implement A ME N T IT Y S P E N DIN G IS

a mini-town on campus like Facebook has at

C LOS IN G IN O N AC A DE MIC

their headquarters. There are so many options

S P E N DIN G

that are conveniently located in one space.” Cornell Student, Class of 2017

I N C R EAS ED ST R E SS L E V E L A N D M EN TA L H E ALT H I SS U E S A M O N G CO LL EG E ST U D E NTS

“I love going to the Dairy Bar when I visit

AC R OSS T H E U. S .

Cornell but it would be nice if there were more activities to do there, like an ice cream making E N T E RTA IN ME N T S PAC E S RE DU C E ST U DE N TS ’ ST RE SS

demonstration.” Cornell Parent


PERSONAS

THE BUSY STUDENT

T H E I N V E S T E D PA R E N T

THE ATTACHED ALUMNI

THE DEDICATED PROFESSOR

THE PROSPECTIVE CO-ED


SCENARIOS

THE BUSY STUDENT

THE DEDICATED PROFESSOR

“I like to get out of my office in between classes.”

“I want a lot of options in one place.”

TIME

TYPOLOGY

9 AM

AQUATIC CENTER

12 AM

ACTIVITY

TIME

TYPOLOGY

ACTIVITY

Exercising

9 AM

THE BAZAAR

Coffee Before Class

THE BAZAAR

Eating Lunch

12 AM

DISPLAY SPACE

Displaying Class Projects

3 PM

REFRESHMENT INVESTMENT

Talking to Friends

3 PM

POP-UP SHOP

Chatting with Student

6 PM

THE BAZAAR

Watching a Game

6 PM

BAR

Socializing with Faculty



AMENITY SPACE - CARD DECK


Bef

Per


Streamline Experience

fore

After

rsonalization, Space Efficiency

STREAM Product Design | 2017 Spring Time is the most valuable commodity, therefore we envision an effortless experience in the bathroom of the future. STREAM is designed to remove the clutters of gadgets in your bathroom. the STREAM tiles will increase the space ef ciency in the bathroom that are also easily adaptable to different user needs. It is also a sustainable approach to bathroom design, as it saved materials from all the additional gadgets you have to buy. Group Lily Shi | Jiaming Zhang Color Scheme #


Make Up Mirror Tile

Hair Dryer Tile

Speaker Tile

The smart mirror tile allows you to zoom in and out with the pinch of your fingers. It can also simulate different lighting conditions to get you ready for any occasion.

The dryer tile will blow warm air when you gently lift its cover. It can be used to dry hands or hair wire free.

The speaker tile will connect to your electronic devices via bluetooth so you can listen to your favourite songs anytime and anywhere you want.


To w e l H a n g e r T i l e

Shelving Tile

Scale Tile

The hanger tile consists of 6 hooks that can be pulled down or concealed, and it can be relocated anywhere to fit your needs.

The shelving tile can be pulled down and locked to provide that extra shelving space around the bathroom.

The scale tile will display your weight onto the mirror while you stand on the tile.


ENTRICE

EXPERIENCE MAP

Satisfied See the entire store

Experience Design | 2015 Fall This project is to understand customers‘ experience of drinking bubble tea at Old Tea House, a beverage shop located near Cornell University. We’ve created an experience map to find design problems through “low experience point” and “missing experience point”. Ultimately, we’ve came up with design solutions to the problems.

Group

Jiaming Zhang | Janelle Jiun Chung |

Mané Mehrabyan | Giulia Reversi

ENTER

Wait in line

Neutral

SEE THE ENTIRE STORE

Dissatisfied

ORDER

Read Menu Menu is too small and placed in the place for ordering


ENGAGE

EXIT

EXTEND

Socialize and drink tea

Delight Spot Hot Spot Missing Experience

Wait, check phone, hear TV and people, pickup order, and put in straw

Design Solution 1 separate the places for reading the menu, ordering, and pickup

TV and Machinary too loud

Pickup and order are in the same Straws are location, creates unsanitary and congestion open for touch

Design Solution 2 remove the extraneous TV in the back and lower volume of the one in the front

Design Solution 3 limit touching of the straws ends by hands



H A N D - S K E T C H I N G TA B L E W A R E Graphic + Product Design | 2016 Summer Inspired by Marrimekko’s Maija Louekari’s Räsymatto motif tableware, this product uses hand sketching modern ripple lines motif to redefine the border between the plates and bowls. When being put together, the ripple lines are spreading out from both top and side views.



TABLEWARE



“ D o 0 O oT “ C A N D Y J A R Product Design | 2016 Summer

I worked with a group of designers during my summer internship. This “Do0Oot” candy jar is one of my independent bone China product development. I designed the jar shape for better opening experience, and the pattern on the jar for the WOWU’s branding.

Color Scheme #



PRODUCT DETAIL



DISPERSION Lighting Design | 2016 Spring “Love is not consolation. It is light.”

— Simore Weil

The modular and rectangular desk light fixture creates unexpected, layered, and distinguishable lighting effect reflecting on walls, to emphasis the invisibility of the LED multiple light source, and to explore the blurred boundary of the fixture and the light.



GRAPHICS + DRAWINGS



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.