Qi Jin's Portfolio

A DESIGNER WHO IS TECHNICALLY CURIOUS

A DESIGNER WHO IS TECHNICALLY CURIOUS

TECHNOLOGY IS A TOOL, CURIOSITY IS THE CORE

INTRODUCTION

Mastering various design techniques is the basis for creating good designs. To generate good design, you need to be curious about your work and your audience in order to better understand your work and audience. As a designer, I am curious about new things, technologies, and willing to keep trying new things. Also, I like to talk with my audiences, listen to their stories. Curiosity constantly drives me to learn more new techniques, and then I can turn my creativity into powerful work.

TABLE OF CONTENTS

p. 13 p. 38 p. 56 p. 72 p. 98 p. 122

WHAT IF TRASH COULD BE REUSED?

WHAT IF LEARNING ENGLISH WERE EASIER?

WHAT IF A REPORT CONTAINED MORE THAN JUST DATA?

WHAT IF WE COULD USE BETTER DESIGN TO INCREASE PUBLICITY?

WHAT IF WE COULD USE DESIGN TO PROMOTE A DESIGN CONFERENCE?

WHAT IF ARTISANS COULD EASILY ACCESS INFORMATION ONLINE?

UI/UX, Web Design

WHAT IF TRASH COULD BE REUSED?

Photo from Google image

PROJECT 1 : RESCULPTURE ONLINE GALLERY DESIGN

OBJECTIVE

Design an online gallery or journal about some designers and artists. It should combine web editorial, a mobile app, and a social media compo nent to offer a comprehensive user experience.

APPROACH

In order to help my audience to learn about eco-friendly sculptors and introduce the designers’ works, I created an online gallery—ReSculpture. Before I started the visual design for the project, I did a lot of research to find out how and why these designers created eco-friendly designs. The app incledes a gallery feature that tells the designers’ stories and show their works. Also, I interviewed target audiences to assess their interests for the online gallery. In order to meet the needs of the audience, there is a chat function in the app that allow users to communicate with designer. My goal is to understand the principles of user-centered design and pro vide a great user experience for the target audience.

PERSONAS

GOALS 1. Get more information and background for an artist.

Learn how an artist create their works.

Look at some new artworks very quickly

HABITS

FRUSTRATION

Photo by Charlie Firth

FRUSTRATION

Photo by James Barr

Images courtesy of Gilles Cenazandotti

ReSculpture is a convenient, integrate platform created to help audiences learn

WHAT IF LEARNING ENGLISH WERE EASIER?

Images by Aaron Burden

PROJECT 2: RE-DESIGN AN APP FOR ESL STUDENTS

OBJECTIVE

Re-design an app for non-native speakers to learn English. I selected an app called ESL for my user experience re-design, and I re-designed it to make it more user friendly and functional. The new design reflects user-centered design principles and provides a comprehensive user experience.

APPROACH

ESL is a convenient, fully functional, and effective platform created to help non-native speakers to learn English. The original app is too simple and disorganized to use, and some of the users' needs are not met. Thus, I redesigned the home page to allow easy navigation, and I added flash cards note-taking functions. My goal is to learn how to analyze, interview, and research, as well as to understand the principles of user-centered design and provide a successful user experience.

HOW TO IMPROVE

• Add a search bar at the top of the page.

• Reorganize this page and rename some of classification.

• Redesign the logo and use another solid color.

• User other outline styles for icons.

• Turn the original picture form into flash card.

• Add a sound function on the word side and put explanation on the image side.

• Reorganize this page and rename some of classifications.

ESL is an English learning application. It provides relatively complete resources of vocabulary and grammar for users who have different purposes for learning English. Also, this app has a test function, so people can use it to consolidate their studying.

PERSONAS

Mateo Ruiz

34

Chiapas, Mexico

Coffee Seller

Married, with a kid

GOALS

L earning English in order to sell his coffee to US supermarket.

FRUSTRATION

W hen he views some business contracts, he can’t quickly understand the profes sional words. Also he can’t fluently com municate with partner in English.

Xiao Chen

22

San Francisco,CA

International Student Single

GOALS

Complete her studies in the United States and visit all states in the country.

FRUSTRATION

She just came to the United States to study and doesn’t quite understand spoken English very well.

Vytenis

56

Warsaw, Poland

Manager

Married, two children

GOALS

V isit all United States and other countries.

FRUSTRATION

He is a beginner of learning English, and is busy at work. He don’t know to read and speak in English, even very simple one.

TARGET AUDIENCES

Xhulio Kola

22

San Francisco, CA

AAU Student Single

FEEDBACK

1. T he view design is terrible, and some part look crowded and can’t see clearly.

2. The pages design has so continuity, such as color and type, and should redesign.

3. The original icons don’t fit the app.

Ping Yang

58

He Fei, China Retirees

Married, a kid is living in the USA.

FEEDBACK

1. T he size of the type is too small and unclear for old people.

2. The images of vocabulary page are too large to let users ignore the words, and there is no voice that people can listen.

3. Adding translate subtitles might help new users to access this app.

Shanna Zhao

30

San Francisco, CA

UX Designer Married

FEEDBACK

1. T he aesthetics of the app can be im proved. Like, polish the icons by adjusting the size, color, line weight of those icons.

2. Decide on a primary and secondary but ton, so the users don’t need their actively search for the important button.

USER STORY

Xiao Chen

22 San Francisco,CA International Student Single

It is 2:00 pm (PDT), on Monday. Miao is studying with her classmate in the library. She thinks the grammar that her teacher taught today is a bit difficult, so she decides to review it.

Luckily, the ESL-lounge app has some contexts which she wants. Miao opens up the app and types “Pres ent perfect tense” in the search bar. After clicking the “search” button, the grammar explanation and exercis es appear on the screen. She click connects the gram mar explanation and begins to review it. After review the grammar explanation, she clicks the “note” button at the bottom of this page. When the “note board” page shows on the screen, she types “Sbj+has/have+V” in and save the note. After that, the page shows her note has been saved.

Images from Unsplash

STORYBOARD

Scenario: Miao is teaching her classmate how to resetting language in the ESL app.

On Monday 2:00 pm, Miao is studying with her classmate Yu at library.

Then she taps “language” to enter into the “language” page. Then she highlights a circle which beside of “Chinese”.

Miao is teaching Yun how to change language from English to Chinese in the ESL App.

On the homepage, Miao clicks the “setting” icon to enter into the “setting” page.

After 2 seconds, the page has already automatically trans lated into Chinese.

Lastly, Miao press “check” icon

USER FLOW 1

Change app’s language from English to Chinese in “Settings”

Open the ESL APP.

Click the “Settings” icon.

Highlight a circle which in side of “Chinese.”

Press “Done” button.

Press the “Languages” button.

Automatically return to the homepage that has already translated into Chinese.

USER FLOW 2

Type “present perfect” in search bar and then take a note in the Grammar Guides page.

Open the ESL app.

Type “present perfect tense” in the search bar.

Tap the “Notes” icon

Press the “Grammar Guides” bar

Type “ Sbj+has/have+V” on the note board

The screen show an Popups which explain how to working with “Notes” function

Press “Save” button.

USER FLOW 3

Search"promote" in flashcards of TOEFL unit one, then delete it.

Open the ESL APP.

Press "TOEFL Unit One" image.

Search"promote" in search bar.

Click "Flashcards" button.

Press"Delete" button. The app shows the word has been delete.

Editorial Design

WHAT IF A REPORT CONTAINED MORE THAN JUST DATA?

Images from Unsplash, by Daudio Luiz

PROJECT 3: NINTENDO ANNUAL REPORT RE-DESIGN

OBJECTIVE

Re-design an annual report for a company your choice. The report should be developed with a unique visual system, but should also be appropriate for the content and audience.

APPROACH

The Nintendo Annual Report is a focused and visually appealing booklet that helps people quickly extract useful information. The colors yellow and red come from the brand colors, and these two colors better reflect the dynamism and energy of the brand. For the typography, I used Milo Serif and Milo as part of series because they make the body copy clean and easy readable. My goal is to understand how to organize information, choose appropriate fonts, and practice typesetting, as well as how to present data visually.

Visual Design, UI/UX

WHAT IF WE COULD USE BETTER DESIGN TO INCREASE PUBLICITY?

Images from Unsplash, by Ray Chan

PROJECT 4: ART CLASS PUBLICITY RE-DESIGN

OBJECTIVE

Re-design a poster advertising an art class at the local library. The original poster was not prominent enough to generate publicity. Working from the original poster, I designed a brochure, poster and web page so that people can get information through different media.

APPROACH

Art Is All Round Us is an art class that was organized by a local library. My goal is to understand how to organize information, choose appropriate fonts, and practice typesetting, as well as learn how to maintain consis tency when designing items in a series and understand the importance of supporting text and photos.

Focus

Intentions

1. Describes the theme is art is everywhere

2. Promotes there are several events of art on March

3. Denotes all ages can take part in the celebration.

4. Describes when and what kind of events will hold online

5. Denotes that people can get free watercolor sheets.

6. Provide contact phone number.

7. Remind that people can get booklists on the website

8. Denote get more information from the website.

Images from Unsplash, by Alp Ancel

Sophia

Sophia is 12 years old. She has stud ied painting for five years, and likes art so much. She actively participates in various artistic events. She hopes she can hold her own painting club at one day.

Sam Collier

Smith is 68 years old, he retired last year and found art is his hobby during the year. He want to take part in some events to make more friends.

Patti Herroz

Patti is 35 years old , and she has two kids . Because the school still be shutted down, she needs to find some online activities for her children to learn more things.

Visual Design, UI/UX

WHAT IF WE COULD USE DESIGN TO PROMOTE A DESIGN CONFERENCE?

Images from Unsplash, by Edwin Andrade

PROJECT 5: CONFERENCE VISUAL DESIGN

OBJECTIVE

Design graphic materials for single year of a hypothetical annual design conference based on a real world scenario. The conference materials I created included a poster, a program pamphlet, a mobile app, a website, and event space signage.

APPROACH

FITD is a professional celebration of the best the world has to offer in the field of design, digital development, media, innovation and creative tech nologies. To reflect that this is a pioneering, creative design conference I used Yorkten Slab and Adelle Sans in the series of products. My goal is to understand how to organize information, choose appropriate fonts and practice typesetting, as well as learn how to maintain consistency when design a series.

Images from Unsplash, by Atharva Tulsi

PROJECT 6: INTRECCIATO MARKETING PLATFORM

OBJECTIVE

Find an organization or a group of people who need to do branding work. Help the organization or the group to discover, design,develop, and deploy solutions.The outcome is a comprehensive set of deliverables which repre sent the brand.

APPROACH

Since the topic I chose was traditional wicker weavers who live in rural areas, I created a cohesive visual system to present this topic. The name of the band is IMKT, and it is a platform to provide traditional artisans with useful professional information about how to do marketing online and open an online store. The project has three deliverables: a workshop, a You Tube channel, and an app. The three deliverables are intend to help wicker weavers launch their business online.

1. This YouTube Tutorials going to show you how to take amazing product photos on a budget, by simply harnessing the power of your smartphone.

2. So before you start your own Online store you need to have high quality product photos to show your professionalism.

3. At the same time, the photos of your products should be beautiful, so as to attract more customers.

4. Before starting photography, we must prepare the relevant equipments.

5. A smart phone. The higher , the mega pixel count, the better. 6. A mini tripod. It stops camera shake and can help you standardize product photo angles.

7. A white backdrop and a white bounce board. Your back drop should always be white because it reflects natural light onto the product resulting in an evenly lit photo. We need white bounce board to reflect the light back into the shadow, brightening it up.

8. A scotch tape and some angle brackets. You will want them to hold things down.

9. A right room with windows. The bigger the window the more natural light , you’ll get in.

10. Build the background board.

11. Arrange required items.

13. Place your table as close to the window as possible. You want to start with the window 90 degrees to the right or left your set up.

12. Proper use of natural light can make your photos more realistic and help better showcase your products.

14. If the sun is too strong, hold a thin white sheet that light can pass through. A lot of sunlight is going to create a really blown out image. This will soften the light and create a less harsh effect.

15. If it is an overcaset day, make sure your have your white foam board on hand. You can bounce and intensify the light to fill shadows and using white surface reflect natural light from the sun back onto the product.

16. Turn off all the other light inside the room you are shooting in. As other light will contanminate the set.

17. Turn off all the other light inside the room you are shooting in. As other light will contanminate the set.

18. We want visually ansower any question that your cus tomer might have that product description don’t fully explain. That’s why having a variety of camera angles is so

19. There are the main camera angles you should be aware of and experiment with during your photo shoot. Straicht on shows the product exactly the way you see it in reality. This is recommended for your hero image.

20. High angle shows the product from above as if you’re looking down at it from an angle.

21. Top down shows the product directly from above as if you are standing directly over it.

22. Low angle from below. As if you are looking up at the product.

23. The ultimate goal is to shoot your product from every angle, giving your customers a 360 degree view of the product. Be sure to highlite the detailed elements of your product, especially the ones that customers might want to inspect.

24. For those new to product photography, I recommend moving around the product rather than moving around the phone. Keeping the product on roughly the same place each time.

25. Now, before we start busting at our phone, here’s a checklist of tips we’re going to run through to ensure your phone is ready to shoot.

26. Ensure your phone is charged and you have backup storage to store your images.

27. Set up your white balance to properly set the white balance according to the light temperature in your setup. Touch the WB button and then touch the white background.

28. Check your exposure. Touch the circular exposure but ton and then touch your product.

29. Keep things in focus. Touch the button and then touch your product so that the camera knows to properly focused on the product.

30. Make sure you lock your setting when you’re finished adjusting parameters. This will help the camera from auto adjusting the setting while you taking your images.

31. Avoid using the flash as this will overexpose your photo and distort the colors.

THANK YOU

( Acknowledgements)

TO MY FAMILY

Mom and Dad thank you for always giving me infinite love and patience. Thank you for you came to America to take care of my little family while I go back to school.

Jin Chen, my love, thank you for encouraging me while I work on my graduate degree. Whenever I am angry or sad because of my homework, you buy me my favorite snackes to make me feel better. It is because of your encouragement, tolerance, and love that I have been able to complete my studies.

TO MY INSTRUCTORS

Mary Scott, thank you for your patience and the pro fessional guidance you provide for every student. Thank you for patiently pointing out various problems in my portfolio, and for pushing me to solve these problems as soon as possible. I am very happy to be able to com plete my portfolio under your guidance.

James O’Hara, thank you for helping me with my writing and providing in-class support. Your class notes and timely replies in the chat have helped me a lot. I always review your notes before refining my work, and I can enjoy peace of my mind when you are in the class.

Hunter Wimmer, thank you for your patience and humor with every student. Thank you for providing a lot of materials for us to make better designs, they are all very useful. It touched me when you said you cared about your students and not just about the assignments.

Sandra Isla, thank you for your patience and warmth. Thank you for taking the time to patiently analyze the problem and for offering help suggestions whenever I was stuck on my topic.

David Hake, thank you for your patience and profes sional. Thank you for patiently pointing out my typeset ting problems and pushing me to solve these problems.

Ariel Grey, thank you for your patient guidance with me. I am very happy have been your student because you are so nice and warm. You spend extra time with me to discuss and solve problems with my assignments.

Ryan Medeiros, thank you for showing us what UI/UX is. You taught us how to interview others, collect and analyze information. Thank you for your patience.

Phil Hamlett, thank you for the professional guidance you provide to every student. Thank you for always patiently out various problems in my work. I am very happy to have been able to complete my integral UI design with you.

TO MY FRIEND

Xueping Ma, Jingjing Yang, Yue Sun and Essie Zeng, I feel very happy to have you by my side. Thank you for chatting with me and relieving me of my worries whenever I am sad. Thank you for your helpful com ments and suggestions about my homework.

TO ACADEMY OF ART UNIVERSITY

Thanks to the Academy of Art University for allow ing me to study with many professional and friendly teachers. Thanks to the school for allowing me to meet classmates from all over the world and learn about different cultures. Thanks to every faculty and staff member of the school for their help. I love the Academy of Art University.

COLOPHON

CONTACT

Q i J in qijindesign.com SCHOOL A cademy of Art University School of Graphic Design MAJOR MA, Graphic Design

INSTRUCTOR M ary Scott

Copyright 2022 by Qi Jin

A ll right reserved. No part of the pub lication may be reproduced, stored, in retrieval system, or transmitted in any form by any means electronic, mechanical, photocopying, recoding or other wise without expressed writ ten permission from Qi Jin.

BOOK TITLE

Technically Curious

TYPOGRAPHY

URW DIN

PHOTOGRAPHY U nsplash.com

PRINTING B lurb.com

PAPER STOCK

Mohawk Superfine Eggshell Texture 100# Text