introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/grad...

52

Upload: others

Post on 28-May-2020

9 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 2: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

I’m Sherly a passionate UX designer create intuitive and delightful user experience in San Francisco Bay Area.

Currently, I’m a graduate student in School of Web Design & New Media, in Academy of Art University. I’ll be graduating in May 2017. I really want to have the opportunities to work on a project through the entire life-cycle. And also, I’d like to create a site or app which is effortless and intuitive for helping user to navigate, beginning with thoughtful research, sketches, testing with target audience, wireframes, high fidelities, prototyping, and more testing to ensure the end goals are being accomplished.

I had 1 year UX design experience in MediaTek (Beijing) Inc. from 2011 to the end of 2012. During the employment, I focused on User Centered Design for both feature phone and smartphone. I worked closely with designers and engineers to help company to release the new mobile phone platforms with simple, useful, and intuitive design.

My skill set as a UX designer includes requirements gathering, information architecture, creating personas, sketching wireframes, designing high fidelities, creating functional prototypes, usability testing, user interviews, and communicat-ing with team members proactively. I’d like to share my thoughts and inspirations with my classmates and colleagues. Also I’d like to observe details in my life, and always try my best to make it better.

Introduction

Page 3: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

PERSONAL

SILLS

Sketch ⁄ Omnigraffle ⁄ Adobe Creative Suite ( Experience Design, Illustrator, Photoshop,

Indesign, After Effects, Premiere Pro ) ⁄ Flinto ⁄ InVision ⁄ Marvel ⁄ Keynote

HTML / CSS / JavaScript

UX

METHODS

User Centered Design ⁄ Competitive Analysis ⁄ Information Architecture ⁄ Card Sorting ⁄

Personas ⁄ User Task Flow ⁄ Wireframes ⁄ UI Design ⁄ Interaction Design ⁄ High Fidelity

Mockups ⁄ Usability Testing ⁄ Prototyping ⁄ Storyboarding ⁄ Motion Graphics ⁄ Video

Editing ⁄ Photography

EDUCATION

AirPlan (Thesis Project)—http://sherlyliu.com/airplan.html

An original product design provides passengers an accurate visualizable time from their location

to the boarding gates. Finally helping user catching up their flights in time, and arranging

their time appropriately.

Academy of Art University, School of Web Design & New Media, San Francisco

Master of Arts ⁄ Major in UX Design ⁄ GPA 3.7 ⁄ June 2015–May 2017

Beihang University, School of New Media Art and Design, Beijing, China

Master of Arts ⁄ Major in Creation of Animation Art ⁄ Sep 2009–Jan 2012

Bachelor of Arts ⁄ Major in Creation of Animation Art ⁄ Sep 2005–Jul 2009

WORKING

EXPERIENCE

I worked on user interface and user experience design for mobile phone platform on top of chips.

Two of my concept designs were chose by VP, and I worked as a core role to finish all the UX

design. Cooperated with UX team members and engineers to deliver the products.

MediaTek (Beijing) Inc.

UX Designer II ⁄ Dec 2011–Nov 2012 ⁄ Full Time

We redesigned over 30 retail store’s websites to help them increased at least 50% of the

conversion rate and sales performance on taobao.com. We helped KELA(m.kela.cn) which is our

biggest client and one of the biggest diamond retail store in taobao.com achieved over 10

million(cny) revenue in Valentine’s Day 2011.

Special Miao Technology, Beijing

Co-Founder & UI Designer ⁄ Oct 2010–Oct 2012

I designed over 100 items in the Mafia game, which was published on Facebook in 2010.

I made a stop-animation to help preparation of bmw X1 proposal.

kaixin001.com, Beijing

Game Designer Intern ⁄ Jul 2010–Aug 2010

bates 141, Beijing

Designer Intern ⁄ Jun 2009–Aug 2009

Resume

03

Page 4: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Spring 2016

WNM 643 —Alexander Pineda

Page 5: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Concept Video: https://vimeo.com/169757230

Page 6: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

06

Page 7: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Full Screen Mood Board: https://drive.google.com/open?id=0ByYQH4HNToeVUnFiX2t3TVI4QUU

Page 8: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

All Researches: https://drive.google.com/open?id=0ByYQH4HNToeVYlplRFVDdERYWlU08

Page 9: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

09

Page 10: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

10

Page 11: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

11All Wireframes: https://drive.google.com/open?id=0ByYQH4HNToeVME1kZm1mdnNQWkE

Page 12: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Interactive Prototype: https://marvelapp.com/204b21412

Page 13: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Interactive Prototype: https://marvelapp.com/204h2ce13

Page 14: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 15: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Interaction Design: https://vimeo.com/193658178 Interaction Design: https://vimeo.com/193658482

Page 16: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Fall 2015

WNM 606 —Gilberto Gutierrez

Page 17: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

17

Page 18: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

18

Page 19: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 20: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 21: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

21

Page 22: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

All Wireframes: https://drive.google.com/file/d/0ByYQH4HNToeVNGpwOFBLQ05ZYXc/view22

Page 23: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

All High Fidelities: https://drive.google.com/open?id=0ByYQH4HNToeVZ29aSGlWQ1prQW8

Page 24: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Interactive Prototype: https://projects.invisionapp.com/share/X9579G2WR#/screens24

Page 25: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

25

Page 26: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

26

Page 27: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

27

Page 28: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Front-End Prototyping: http://sherlyliu.com/AAU/final_review/redfin/index.html

Page 29: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Fall 2015

WNM 600 —Emilie Drumm

Page 30: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

30

Page 31: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

31

Page 32: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

32

Page 33: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 34: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

34

Page 35: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

35

Page 36: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

All Wireframes: http://sherlyliu.com/deyoung.html

Page 37: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

37All High Fidelities: http://sherlyliu.com/deyoung.html

Page 38: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

38

Page 39: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

39

Page 40: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

40

Page 41: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

41

Page 42: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Front-End Prototyping: http://sherlyliu.com/AAU/final_review/deYoung/index.html

Page 43: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

Fall 2015

WNM 606 —Gilberto Gutierrez

Page 44: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative
Page 45: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

45

Page 46: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

46

Page 47: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

All Wireframes: http://sherlyliu.com/tripit.html

Page 48: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

48

Page 49: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

49

Page 50: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

50

Page 51: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

51All High Fidelities: https://issuu.com/sherlyliu/docs/tripit_all_high_fidelities-ilovepdf

Page 52: Introduction - gradshowcase.academyart.edugradshowcase.academyart.edu/content/dam/Grad Showcase/Schools/Web... · Introduction. PERSONAL SILLS Sketch ⁄ Omnigraffle ⁄ Adobe Creative

04284768 :Student ID

Xiaoli Liu :Student Name

http://sherlyliu.com/ :Profolio