Yi-Wei Hsu HCI Portfolio

HCI MS APPLICATION

PORTFOLIOS “I certify that the work included in this portfolio is my own original work. Work included which was conducted as part of a team or other group is indicated and attributed as such—the other team members are named and a true description of my role in the project is included.”

MY JOURNEY TO

UI & UX Through my college time, I had done several projects and they gave me chances to learn user interface and user experience. I really enjoy working on those design projects, and I’m glad to share them with you. I hope you enjoy my journey and that by the end you would like to be part of it.

YI WEI HSU PORTFOLIOS

•

MOBILE PLATFORM DEVELOPMENT …….p4

•

USER INTERFACE DESIGN……………….P6

•

CAMPUS RECRUIT PROMOTION………….p8

•

MUSEUM GUIDER APPLICATION…………p10

3

MOBILE PLATFORM DEVELOPMENT

4

I took the class “Mobile platform development” in my sophomore year. We learned techniques and concepts of building an application on smart phones. I built this iOS app “iHealther” by myself at that time, which has a simple function to calculate people’s BMI, BMR and REE. In addition, it will provide the advice based on the result.

I appreciate the class for giving me the opportunity to know deeper about how an application is developed, and also many design concepts. It was the beginning stage that I started to grow interests in the UI and UX fields.

WHAT I’VE LEARNT Xcode, Objective-C

MOBILE PLATFORM DEVELOPMENT iHealther

5

USER INTERFACE DESIGN Later on, in my senior year, I took the class “User Interface Design” in order to explore more in the design field. The professor in this course gave us more background knowledge and theories about the user interface. I then realized that the whole concept of user interface design is not merely about the aesthetically attraction, but also the usefulness and user’s engaging.

The professor would like to give us some assignment to do, making sure we understand the concepts and theories. Although we did not learn about the technical skills and tools, but we did learn a lot through having researches for assignments and having discussions during the class. I appreciate choosing this course, for it allowed me to know more details about the user interface design and found out my interests in the field.

WHAT I’VE LEARNT Apple iWork suite: Pages, Keynote

6

USER INTERFACE DESIGN

7

Responsive Web Design Assignment

As the percentage of surfing Internet on smart phones and tablets becomes higher and higher, responsive web design makes the users have a better user experience in all kinds of devices. I believe this concept will become essential for more wearable and portable devices become popular.

CAMPUS RECRUIT PROMOTION

8

I joined the promotion team of our school’s campus recruit event at my senior year. My job included the whole promotion activities and the design. For the Internet promotion, we had an advertising banner on our school’s home page, an official website, and Facebook fan page.

I was in charge of designing the home page advertising banner and the official website layout.

Working with the website programmer was a fun and interesting experience for me. In the end, the campus recruit event was a really successful one.

WHAT I’VE LEARNT Adobe Photoshop, Illustrator

CAMPUS RECRUIT PROMOTION

9 Home page advertising banner It was an advertising display on the home page of our school’s Home page (National Chengchi University), and it could link directly to the Official Website of the Campus Recruit. The “airplane” image was the meaning that the students will take off and fly higher after graduation just like an airplane.

Official Website of the event For the home page of official website of the Campus Recruit, I used the oversized imagery design. This could make the visitors clearly see the image and feel the spirit of this event.

MUSEUM GUIDER APPLICATION

10

For the graduation project, my team built a guiding application for our school’s historic museum, and I was in charge of the user interface design.

There are four different functions in the application, including showing the historic documents, the information of our sister schools, the theme music of our school and photography with our principles by using AR(Augmented Reality) technology.

Our application “Museum Guider” eventually won the third place in the graduation project competition, and the application is still in the use in our school.

WHAT I’VE LEARNT Apple iWork suite: Pages, Keynote Adobe Photoshop, Illustrator

The poster and icons of Museum Guider

MUSEUM GUIDER APPLICATION

Partner Schools Information UI design Users can easily scroll up and down to select the different countries on the left side, meanwhile, they can scroll right and left to search for different schools in the bottom.

Other functions include changing languages (Mandarin or English), link to the school’s official website and the link of that school’s promotion video clip.

11

MUSEUM GUIDER APPLICATION

Partner Schools Backend DataBase The backend side, database of the partner schools information system allows the manager to input and manage the information of the partner school. The manager can locate the school by the world map provided in the system.

12

MUSEUM GUIDER APPLICATION

Another function of the Museum Guider is “Photo with the Principles”, allowing users to take a photo with every principles of our school by the technology of AR(Augmented Reality).

User stands beside a AR marker, and on the tablet’s screen will show up a image user standing beside the principle.

13

THANK YOU YI-WEI, HSU

- 886-939-984351 - willy04201991@gmail.com