REVIVE thesis process book (AAU MFA Graphic Design)

Page 1

GR830 Thesis Two

REVIVE MFA THESIS PROCESS BOOK Designed by Mintzu (Mindy) Yu

Mintzu (Mindy) Yu

04967525



REVIVE MFA THESIS PROCESS BOOK Designed by Mintzu (Mindy) Yu


Copyright©2022 by Mintzu (Mindy) Yu All Right Reserved. No part of this publication can be reproduced without expressed permission from Mintzu (Mindy) Yu. REVIVE is an MFA thesis project designed by Mintzu (Mindy) Yu at the Academy of Art University.


The thesis journey has been a valuable experience that allowed me to establish and integrate solid design skills, problem-solving, and project management techniques learned from the Academy of Art University. It is also a blessing to have supportive instructors, classmates, friends, and people I met from the coffee industry along the way. The thesis project would not be complete without their help and support.


CONTENTS

01

DISCOVER THE PROBLEM

12 Discover the Problem 14 Questions & Insights

02

PERSONAS

26 Defining the Market 28 Potential Audiences

03

STRATEGY DEVELOPMENT

46 Clarifying Project Direction 50 Deliverables Strategy Chart & Materials Matrix

04

USER EXPERIENCE DESIGN

64 User Experience 66 Storyboards for User Scenarios 68 Journey Map 70 UX Map of the App 72 Final App Wireframe 74 App Prototyping 76 Website Prototyping


05

VISUAL DEVELOPMENT

08

FINAL DELIVERABLES

80

Naming the Thesis

114 Store Displays

81

Keywords

152 App

82

Visual Inspirations

166 Website

84

The Exploration Process

174 Social Media

86

Color & Layout Exploration

186 Motion Graphic

90

Image Styles and Graphic Elements

06

USER TESTING REPORT

96

Participants & Methodology

98

User Testing Report

07

VISUAL SYSTEM GUIDELINES

110 The Logo & Logo Variations 114 Clear Space 116 Approved & Unapproved Uses 120 Typography 124 Color 128 Image Style 130 Brand Grids 134 Iconography 138 Applications


YOUR MORNING CUP OF COFFEE IS IN DANGER At least 60% of the coffee species might become endangered due to climate change. — Science.org


Chapter


01

DISCOVER THE PROBLEM



Discover the Problem Coffee is one of the most traded commodities globally and is rooted in our culture. It boosts conversations and creates connections between people. We share stories, memories, and experiences with others through coffee. Statistics showed that we consume 400 million cups of coffee in the United States per day, and coffee farms are the economic livelihood of over 25 million people. Since climate change strikes the environment causing at least 60% of the coffee species could become endangered by 2050, I realized it is important to raise people’s awareness of this issue and protect coffee immediately. This is what REVIVE aims for, to raise consumers’ awareness and protect coffee from becoming endangered in the future.

REVIVE

THESIS PROCESS BOOK

12


The climate change causing destruction in Brazil between the drought and the frost in 2021 damaged the crops on some 1.5 million square kilometers of land— an area the size of Peru. 1.3 billion pounds of coffee beans were destroyed: enough to brew every cup Americans drink over four months. (Fortune.com)

Discover the Problem

13


Questions & Insights To understand the coffee endangered impact, I generated 56 questions for clarification to research and gain insights into the coffee business and consumer behavior.

REVIVE

THESIS PROCESS BOOK

14


These are part of the notes from the 56 questions for the topic research. There are five questions that I found inspiring after the research.

Discover the Problem

15


What is Americans’ coffee-drinking behavior? 1. 64% of American adults currently consume coffee every day. (Reuters, NCA) 2.. An average American drinks 3.1 cups of coffee per day.(E-Imports) 3. Americans drink about 400 million cups of coffee every day.(E-Imports) 4. Americans drink about 146 billion cups of coffee per year. (Coffee-Statistics.com) 5. Americans consume 75% of all their caffeine in the form of coffee. (Coffee-Statistics.com) 7. More than half of all coffee consumers would rather skip a shower in the morning than skip their coffee. (HuffPost) 8. The percentage of people who drink coffee is greater among workers with a higher income. (CreditDonkey)

REVIVE

THESIS PROCESS BOOK

16


Americans’ Average Daily Coffee Consumption

Discover the Problem

17


Why do people drink coffee? 1. The Energy Boost A cup of coffee—or three—in the morning has enough caffeine to give the average-sized person a decent boost of energy. The caffeine in coffee blocks adenosine, a neurotransmitter that triggers sleepiness—and helps people go about their day when they really could use more sleep. Caffeine can also help boost focus and improve someone’s mood, both desirable effects for most people. 2. Health Benefits Studies have shown that caffeine has several brain health benefits, including protecting against neurodegenerative diseases like Parkinson’s and Alzheimer’s and improving longterm memory. 3. Physical Addiction Reducing coffee consumption for people physically addicted to caffeine produces withdrawal symptoms, making it difficult to dial back their coffee habit. 4. Psychological Dependence Some people become psychologically dependent on coffee because it is part of their routine. Coffee drinkers congregate around the coffee machine at work to catch up, meet at cafes to reconnect with friends and family, or put on a fresh pot when company comes over. These activities ingrain coffee as a part of connecting with people you care about and make it subconsciously an emotional and social dependency. 5. It’s Part of Their Culture In virtually every human culture on earth, coffee holds a central place in some traditions. Children are raised around a family that drinks coffee after a meal or as part of a holiday tradition, and the thought of removing coffee from these experiences seems foreign. 2. It Just Tastes Good!

REVIVE

THESIS PROCESS BOOK

18


What makes coffee drinkers give up coffee?

75%

give up coffee for a whole year for $1,000

71% 29%

Discover the Problem

give up caffeine if this means they will never get sick

19

pickup truck owners will give up coffee for a whole year rather than be cut off from their rig


What do non-coffee drinkers think about coffee? 1. Can’t sleep at night. 2. Do not like the taste. 3. Too expensive. 4. Proud of being a non-coffee drinker. 5. Do not like the coffee breath. 6. Drinks energy drinks in the morning instead. 7. Waking up energized enough.

REVIVE

THESIS PROCESS BOOK

20


Discover the Problem

21


What happens if people cannot drink coffee anymore? 1. Withdrawal Symptoms People could start experiencing caffeine withdrawal symptoms including headache, fatigue and poor concentration. 2. Tea and energy drinks will become more popular. Coffee shops might disappear or replace coffee with tea. 3. Millions of people might lose their jobs, causing hunger and starvation.

REVIVE

THESIS PROCESS BOOK

22


Discover the Problem

23


02

PERSONAS



Defining the Market Identifying the target audiences provides a clear focus on whom my project will serve and why those consumers need the services. Determining this information also keeps the target audiences at a manageable level. I looked for the coffee drinker demographics statistics, summarized and identified the personas, including six potential target audiences and two audience outliers.

REVIVE

THESIS PROCESS BOOK

26


According to s survey of coffee shares by age, nearly 70% of the coffee drinkers are from age 25+ to 60 years old. (2020, Statista.com)

Personas

27


The Coffeeholics “How am I supposed to live without coffee? It is a huge part of my life!”

REVIVE

THESIS PROCESS BOOK

28


Age: 35yrs Gender: Male Education Level: Bachelor degree Profession: Journalist Location: New York, NY Income: $55,000 Personality: Work hard, play hard. Straight forward. Full of life, energy, and positivity. Coffee Habits Coffee preference: Cappuccino, Espresso Cups of Coffee/day: At least three, sometimes more When & How: 1. Drink a cup of Espresso with breakfast at home. 2.Buy a cup of Cappuccino at a branded coffee shop during an afternoon break. 3. Drink another cup of coffee with dinner. 4.Buy a cup of coffee for the interviewee when having an interview. Why: Simply like the taste of coffee and he thinks that drinking coffee can boost his energy.

Personas

29


The Guardian “Coffee farming has been a family business. It will be hard for us to make a living if we can’t grow coffee anymore.”

REVIVE

THESIS PROCESS BOOK

30


Age: 50yrs Gender: Female Education Level: Primary school Profession: Coffee Farmer Location: Costa Rica Income: $247 annual profit selling at average market price *Most coffee farmers only have one hectare of land that yields 60kg/ bags of green coffee, meaning a $247 annual profit selling at average market price Personality: Take life as it comes, traditional in some ways Coffee Habits Coffee preference: Instant coffee Cups of Coffee/day: Take pride in her coffee but seldom drink it When & How: In the morning or at night Why: To stay focused

Personas

31


The Gourmet “The cost of coffee beans is raising. It will be difficult for me to provide good quality coffee in the future.”

REVIVE

THESIS PROCESS BOOK

32


Age: 40yrs Gender: Male Education Level: Bachelor’s degree Profession: Coffee Roaster Location: Portland, OR Income: $40,100 Personality: Outgoing and sociable. Sometimes moody and unpredictable. Coffee Habits Coffee preference: Cappuccino, Americano Cups of Coffee/day: One to two When & How: 1.Drink a cup of Americano with breakfast at home. 2.Have a cup of Cappuccino during lunch break. Why: Enjoy the taste of the coffee and like to treat himself.

Personas

33


The Trend Setter “I enjoy making the perfect cup of coffee. But I am afraid that there will only be limited coffee options to provide to people.”

REVIVE

THESIS PROCESS BOOK

34


Age: 26yrs Gender: Male Education Level: High school Profession: Barista Location: Seattle, WA Income: $25,562 Personality: Sociable, adventurous, and don’t shy away from trying new things. Coffee Habits Coffee preference: Cold Brew, Dutch Coffee Cups of Coffee/day: Two to three When & How: Drink coffee during work, to make the perfect cup of coffee for customers. Why: Like the taste of it and enjoy providing high quality coffee for people to make their day.

Personas

35


The Creatives “I can’t believe there will not be enough coffee for our demand soon. I wonder if there is a way to solve this problem?”

REVIVE

THESIS PROCESS BOOK

36


Age: 28yrs Gender: Female Education Level: Master Degree Profession: Designer Location: San Francisco, CA Income: $64,531 Personality: Playful yet disciplined. Easy going introvert. Coffee Habits Coffee preference: Latte, Pour Over Coffee, Specialty Coffee Cups of Coffee/day: One When & How: Drink a cup of coffee with breakfast or between meals, or when designing. Why: Enjoy the taste of coffee and it keeps her stay focused.

Personas

37


The Helper “I’ve been working on this issue for a long time. Helping the farmers and trying to find a solution.”

REVIVE

THESIS PROCESS BOOK

38


Age: 40yrs Gender: Male Education Level: Master Degree Profession: Executive Director in the Coffee association Location: Santa Ana, CA Income: $163,900 Personality: Enjoys life. Passionate. Caring. Coffee Habits Coffee preference: Specialty Coffee Cups of Coffee/day: One to two When & How: He likes to have a nice cup of drip coffee with breakfast. Sometimes another cup of coffee in the afternoon. Why: Likes the taste of coffee and thinks coffee has health benefits. Matching the optimum brew with the perfect meal makes him feel lifted.

Personas

39


The Penny Pincher (Audience Outlier) “Coffee is too expensive! The extinction of coffee might be a good thing for your wallet!”

REVIVE

THESIS PROCESS BOOK

40


Age: 23yrs Gender: Female Education Level: Bachelor’s degree Profession: Student Location: Los Angeles, CA Income: $0 Personality: Thrifty, organized, patient, and persevering. Coffee Habits Coffee preference: Instant coffee and blended coffee. Cups of Coffee/day: Almost never When & How: Only drink coffee when others buy her a cup of coffee or when discussing assignments in a coffee shop with friends. She drinks energy drinks instead of coffee when she wants to boost energy. Why: She thinks coffee is expensive and does not like the bitter taste.

Personas

41


The Tea Lover (Audience Outlier) “Sad to hear about this situation, but I’ve always believed tea has more benefits than coffee. I guess you can drink tea instead?”

REVIVE

THESIS PROCESS BOOK

42


Age: 38yrs Gender: Female Education Level: High school Profession: Sales Clerk Location: Charleston, SC Income: $29,179 Personality: Extraverts. A night person. Tidy. Coffee Habits Coffee preference: Prefer tea than coffee Why: She thinks tea has lower caffeine than coffee, and tea has more antioxidants.

Personas

43


03

STRATEGY DEVELOPMENT



Clarifying Project Direction The main reason coffee might become endangered is climate change, which causes abnormal weather conditions and increases the chances of plant diseases and pests, further accelerating numerous coffee plants dying. After I conducted the focus group and interviews with coffee drinkers, baristas, and coffee shop owners worldwide, I found there are knowledge gaps between the consumers and people in the coffee business. Many people who work in the coffee sector are already aware of the issue and have started taking action. The coffee drinkers were shocked to understand the impending crisis and eager to cut down their carbon footprint to protect coffee. So I realized that a possible solution is to raise people's awareness and encourage them to decrease their coffee carbon footprints.

REVIVE

THESIS PROCESS BOOK

46


Strategy Development

47


REVIVE

THESIS PROCESS BOOK

48


Since we were in a pandemic lockdown, I performed an online focus group. One advantage is that I had the chance to meet and interview baristas, and coffee shop owners from Hong Kong, Japan, and New York. They were also the world latte art champions that can provide professional insights into the topic.

Strategy Development

49


Deliverables Strategy Chart & Materials Matrix After the research, focus group, and interviews, I developed the strategies and design solutions. Again, there were several versions of the strategy chart. I initially intended to establish exhibitions but switched to store displays after the user and instructor feedback.

Topic

Audiences

Outcome

REVIVE

THESIS PROCESS BOOK

50

Your Morning Cup of Coffee is in Danger

1. Coffee drinkers (age 25+, drink ≥ 2cups/ day,live in the United States) 2. Baristas, Coffee Roasters, Coffee Shop Owners, Coffee organizations. Raise awareness to protect coffee from becoming endangered in the future.


Insights

Most people take drinking coffee for granted and do not realize the impact of their coffee drinking behavior.

Strategies Create experiences to make people more conscious of their coffee-drinking behavior.

Potential Store displays to promote Deliverables the digital platforms and

raise awareness of the coffee issue. Poster Brochure Website App Ticket Badge Way-Finding Exhibition Space/Wall Display Design Exhibition Booth Packaging

Strategy Development

There are knowledge gaps between coffee shop owners & roasters and the general public.

Among all possible solutions from the research, reducing coffee’s carbon footprint is the most acceptable way for consumers to protect coffee.

Develop a digital platform to educate them about coffee sustainability.

Design communication materials to encourage consumers to reduce their coffee carbon footprint

Digital platform that combine consumer behavior to gamify and educate them about coffee sustainability.

Design marketing materials, advertisements, social media campaigns, etc.

Website App Digital Publication

51

Poster Billboard Motion Graphic Social Media Campaigns Display Advertisement


Store Display At first my intention was to create an exhibition to educate, draw attention and attract the audiences, but based on the user testing results and the discussions in the class, I decided to cancel the exhibition design and instead design materials to place in coffee shops to promote the App and the brand. –Three 11x17 posters (place on the coffee shop walls) –Three Letter-sized signs (place on the counter or tables)

REVIVE

THESIS PROCESS BOOK

52


Strategy Development

53


App Evaluate consumers’ coffee carbon footprint and reward them when visiting sustainable coffee shops or share any sustainable coffee news. –Coffee habits evaluation –Sustainable coffee shop map –Order coffee (pickup) –Reward system –Sustainable coffee news –Personal profile –Settings –Wallet/Payment setup –About

REVIVE

THESIS PROCESS BOOK

54


Chapter

55


Website The website incorporates all aspects of the brand. –Landing page –About (Brand Introduction) –App introduction page –Barista Interviews –Organization Interviews –Articles & Newsletter (Subscribe) –Article pages x3 –Coffee statistics –Event introduction page (by other organizations) –Event pages x3 –Sustainable Coffee Shops –Contact Information.

REVIVE

THESIS PROCESS BOOK

56


Strategy Development

57


Social Media Using campaigns to promote and raise consumers’ awareness. Including taking actions such as decreasing coffee waste to lower carbon emissions, buying coffee in sustainable coffee shops.

Instagram –Instagram account –One Instagram story ads –At least nine posts about coffee sustainability Twitter –Twitter account –At least five tweets with imagery Newsletter –Coffee sustainability trends and news –Stories of people in the coffee industry –Sustainable coffee shops recommendation

REVIVE

THESIS PROCESS BOOK

58


Strategy Development

59


Promotional Video The video will be published on Revive’s website and used as YouTube and Facebook ad to promote and increase brand awareness and promote the App.. –One 1920x1080, 72dpi video –Revive brand promotion (About the brand, mission, and values.)

REVIVE

THESIS PROCESS BOOK

60


Strategy Development

61


04

USER EXPERIENCE DESIGN



User Experience User experience aims to provide positive experiences that keep users loyal to the product or brand. Additionally, a meaningful user experience allows me to define customer journeys on the project that could deliver successful design solutions.

REVIVE

THESIS PROCESS BOOK

64


Part of the think-map when brainstorming the scenarios and elements of the topic.

User Experience Design

65


Storyboards for User Scenarios Storyboards are visual representations of UX stories that capture attention, provide clarity.I developed the storyboards to understand better how users could react to the project.

REVIVE

THESIS PROCESS BOOK

66


User Experience Design

67


Journey Map A journey map is a strategic approach to better understanding customer expectations. It is also crucial for optimizing the customer experience. Below is an overview journey map when a general coffee drinker’s journey map when having contact for the coffee project.

REVIVE

THESIS PROCESS BOOK

68


User Experience Design

69


UX Map of the App The app is the most important deliverable of the project. I created the user experience map of it based on the journey map. On the right is the first draft. There were several refinements and various versions after the initial map when developing the app and after the user testing sessions.

REVIVE

THESIS PROCESS BOOK

70


Coffee App (Original Wireframe) Results Coffee Habits Evaluation

Profile

Habits vs Coffee Plant Survival

Sustainable Coffee Shops

Order Pickup

Redeem Rewards & Place Order

Save Coffee Plants & Earn Rewards

order no. X do you have a cup?

order

Coffee Shops/List Mode

Information to Protect Coffee

My Coffee Farm

order

my farm

Share the Message

rewards

Profile

plants saved

Favorites

rewards

plants saved

About

Order History

plants saved

User Experience Design

rewards

Notification

rewards

71

Wallet/Payment Method


Final App Wireframe After receiving feedback from the users, I decided to take out the coffee farm function and replace the article screen with a series of image cards. The red blocks on the image indicate the changes I made.

REVIVE

THESIS PROCESS BOOK

72


Chapter

73


App Prototyping The most important advantage of a prototype is that it simulates the actual and future product. You can test the design’s correctness before it comes into production and discovers design errors. Therefore, I created the prototypes of the digital deliverables to improve the overall understanding of the design.

REVIVE

THESIS PROCESS BOOK

74


User Experience Design

75


Website Prototyping

REVIVE

THESIS PROCESS BOOK

76


User Experience Design

77


05

VISUAL DEVELOPMENT



Naming The Thesis Coming up with a proper name for my thesis was challenging since I was struggling with whether the word could convey the project’s purpose. I brainstormed various names and eventually landed on the name REVIVE. The name is used in many other brands, but it presents the meaning of the project well.

Coffee Habit Protect Save Plant Bean, Beanery Roast Brew Froth Ritual Awake Arise Revival, Revive Rise Filter Pour Moka Connect Aroma Bistro Cafeteria Shine Harvest Coffeeaholic Boost

REVIVE

THESIS PROCESS BOOK

Thrive Pitcher Grinder Options Select Choose Pick Alter Favor Decide Specialty Derive Blend Bloom Cups Mug Coffee Club Drip Guard Bright Pure Coffee Pro Prospect Senses Reverse

80

Reboot Root Dialogue Conversation Fresh Base Think Simple Worthy Sustain Grow Stem Origin Change Arise Raise Coffea Bourbon Typica Evoke Educe Elicit Foster Coexist


Keywords Coffee is rooted in our culture. It boosts conversations and connects us. We have feelings for it. We share stories, memories, and experiences with others through coffee. We intend to protect, adapt and correspond to the coffee issue by creating similar experiences for the audiences.

Attachment Adaptation Interaction

Visual Development

81


Visual Inspirations I generated three moodboards from the keywords to gain visual inspirations. The development process took me a lot of time and discussions with instructors and peers to come up with the final solution. There were several visual attempts in the process which were very different from the visual system now.

REVIVE

THESIS PROCESS BOOK

82


This is the moodboard for keyword Adaptation.

Visual Development

83


This is the moodboard for keyword Attachment

REVIVE

THESIS PROCESS BOOK

84


This is the moodboard for keyword Interaction.

Visual Development

85


The Exploration Process During this phase, I explored variations of the logomark, different combinations of colors and typefaces, and different graphic and image styles to see which direction matches the project most.

I did not jump into sketches but started observing and experimenting with the coffee beans first, wanting to find a relation between the keywords and the coffee issue.

REVIVE

THESIS PROCESS BOOK

86


Visual Development

87


Then I created several sketches tried to capture the shape of a coffee bean and used outlines and gradients to represent the disappearance of coffee.

REVIVE

THESIS PROCESS BOOK

88


Visual Development

89


And I experimented with patterns.

REVIVE

THESIS PROCESS BOOK

90


Visual Development

91


Observed the form of the coffee plants including the texture of the leaves and fruits.

REVIVE

THESIS PROCESS BOOK

92


Visual Development

93


Combining the elements created interesting posters, but these directions could not convey REVIVE’s message. After more attempts, I decided to use bold and high contrast color palates, simple icons, and typefaces that suit the project. A few poster examples from my visual exploration process. I ended up using neither of these directions, but the process helped me filter out unworkable designs.

REVIVE

THESIS PROCESS BOOK

94


Visual Development

95


At this point I decided to modify the typeface, Alverata, to create the initial logo but realized the audiences found it difficult to relate it to the brand. Therefore, I explored more typefaces possibilities that could work for the project.

REVIVE

THESIS PROCESS BOOK

96


Visual Development

97


Color & Layout Exploration Six potential color palettes could work for the project. I experimented with them and applied the colors on the deliverable (App) to explore which color combination works best for the topic.

Direction One

Direction Two

Direction Three

Direction Four

Direction Five

Direction Six

Different color palette options for REVIVE

REVIVE

THESIS PROCESS BOOK

98


Visual Development

99


REVIVE

THESIS PROCESS BOOK

100


Visual Development

101


Image Styles and Graphic Elements

Formats and materials exploration.

REVIVE

THESIS PROCESS BOOK

102


Image style 1

Image style 2

Visual Development

103


Image style 3

REVIVE

Image style 4

THESIS PROCESS BOOK

104


Image style 5

Image style 6

Visual Development

105


After interviewing the audience and receiving feedback from other designers, I decided to use low contrast photography with a vintage quality. And the theme should include people doing activities in a coffee shop, the coffee production process, and coffee plants photography.

REVIVE

THESIS PROCESS BOOK

106


Visual Development

107


06

USER TESTING REPORT



Participants 4 Baristas Nick (HITW), Megan (Starbucks), Jasmine (Illy), John (The Coffee Movement)

2 Coffee Drinkers

Summer Xia, Catherines Sun

Methodology In-person interview

Instead of schedule an online meeting with the baristas, I decided to visit the shop in-person and interview the baristas. Most of the baristas are used to customers talking to them when they are working. I think it makes them feel more comfortable in that environment when interviewing them.

Virtual interview

Arranged Zoom meetings with coffee drinkers to conduct the user testing.

REVIVE

THESIS PROCESS BOOK

110


User Testing Report

111


REVIVE

THESIS PROCESS BOOK

112


illy cafe: Jasmine D. 220 Montgomery St Ste. 148, San Francisco, CA 94104

Occupation

Barista/Student

Experiences

3 years of coffee experiences

Why Coffee

Started with making tips but then fallen in love with coffee and latte art.

Consumption

3 cups of cappuccinos per day.

Feedback

• • • • •

She likes the idea of coffee carbon footprint evaluation at the beginning of the app. She likes the reward mechanism in the app, thinks it could create a competition. She likes the color palette, layout, overall concept. She is interested in reading more interviews about the baristas and coffee shop owners. She thinks it is important to collaborate with coffee shops to make the reward works.

Other Information

illy switched all of their cups and lids to biodegradable materials in mid-November, including the fruit cups they use. They also have their own recycle program on the pods. They only use substitute milk. Support farmers. She mentioned that she would like to introduce me to the manager since he knows more about coffee sustainability.

Insights

Some of the coffee shops and boba tea shops received the government’s announcement that they plan to ban the plastic cups by 2022, so the shops are trying to invent or find other materials for their packaging. This means I might need to change some of the contents in my app.

User Testing Report

113


REVIVE

THESIS PROCESS BOOK

114


Starbucks: Megan W. 49 Jefferson St P, San Francisco, CA 94133 Occupation

Manager

Experiences

14 years at Starbucks. She has been working in the coffee industry since she is 14 years old.

Why Coffee

She said that she enjoys interacting with people and having small conversations at work, and she is a big extrovert. She likes coffee and think big corporates like Starbucks could have more impact on the environment and the society.

Consumption

5 cups of espresso per day.

Feedback

• • • • • •

• • • •

Insights

She thinks the app is user friendly and easy to understand. She likes the clean layout and concept. She thinks the app prototype looks really nice and beautiful. “Wow!! This is really nice!” She said she wants to cut down on her coffee consumption after seeing the carbon footprint data on the website. She suggested switching the articles in the app to short videos to attract people’s attention since she thinks that many people don’t like to spend much time on reading. She thinks it is important to figure out how to integrate the app’s reward system to other coffee shop’s reward system. What makes them want to use my reward system instead of theirs? How to redeem the rewards in the coffee shops? Do they need bar codes? Do they need other machines? Could reference how music venues do when checking in the audiences. Maybe could try putting/linking the mission statements of the coffee shops when introducing them in the app. Could try several seasonal events in the app to boost interaction and engagement. To make people want to continue using the app. Where would someone know about the app, the website, the brand? How to promote it? Maybe using signage in the coffee shops and ask the coffee shops to promote? Asks the owner to train the baristas or employees? Instagram is a good platform for promoting especially the Instagram story. She suggested to establish Instagram story advertisements or create an account for the brand. Using short videos instead of articles in the app might be more user-friendly and easier to increase interactions. I need to figure out how to integrate the app’s reward system into other coffee shop’s reward systems, and how can the audiences redeem the reward? Also talk about promotion campaigns of the brand.

User Testing Report

115


REVIVE

THESIS PROCESS BOOK

116


The Coffee Movement: John O. 1030 Washington St, San Francisco, CA 94108

Occupation

Barista

Experiences

7 years of experiences in the coffee industry. He moved to SF from NY a year ago.

Why Coffee

He worked in vegan fine dining, but the diet style was not that popular before. He visited many coffee shops during that time and gain interest in coffee.

Consumption

2.5 cups of coffee during workdays, and 4 to 5 cups of coffee per day when not working.

Feedback

• He likes the concept of the app and the color. • He thinks the app is direct and easy to use.

Other Information

• He suggested in terms of raising consumers’ awareness of the coffee carbon footprint, it is more important to encourage the roasters to collaborate with farmers to make sure the farmers can gain more profit from coffee production. And to make the roasters more aware of the carbon footprint of the travel and transportation of the coffee beans.

Insights

He is too busy to finish all the user testing. So he only tested the app. Next time when doing a user testing or interview, I might need to write email or call to make appointment first.

User Testing Report

117


REVIVE

THESIS PROCESS BOOK

118


HITW Coffee: Nick 524 Union St, San Francisco, CA 94133

Occupation

Barista

Experiences

5 years of experiences in the coffee industry

Why Coffee

He loves coffee and likes to interact and have conversation with the customers. Being a barista can make many friends.

Consumption

4 to 5 cups of espresso per day.

Feedback

Other Information

Insights

• • • • • •

He likes the color and the mockup on the website. He thinks the concept is good. He suggested I could focus more on small coffee shops as the target audience. Taking out the farm page in the app would be better. Using images and videos instead of articles would be better. He thinks creating social media accounts to raise more awareness and can promote the app (ex. Instagram story and Instagram advertisements). He started sharing my coffee thesis with customers after our conversation. The customers started cheering, and they wanted to know if there were ways to protect coffee. Need to do user testing on the coffee consumers next time. Talking and sharing the coffee issue can raise awareness. How to create more conversation and interaction could be my next step of refining the deliverables. People are familiar with social media, so that I could use the platform as the promotion channel.

User Testing Report

119


REVIVE

THESIS PROCESS BOOK

120


Summer Xia Corvallis, Oregon

Occupation

Vehicle Sales at Mazda&Toyota / Student

Consumption

2 cups of Espresso per day.

Feedback

Insights

• Like the competition concept. He can engage his friends. • Felt a bit weak just to purchase coffee to safe coffee plants. Maybe just ask people stop drinking coffee or provide more ways to lower carbon footprint. • Why coffee pass? Maybe load money into the coffee pass can earn rewards so people will want to use the pass. • Separate the map and the coffee shop list • Add search button on the coffee map cause he wants to know which coffee shop REVIVE collaborates with • Change the content “Help”. Should be more of how to use the app, how to redeem rewards, and report system error. • My favorite screen showing leaves using multiply symbol. • Show the distance of the coffee shops. • Order screen should add a cancel button and back to last screen button. • Separate apple pay and Paypal and the coffee pass. • Also give rewards or coffee to the top three ranking and change the ranking to weekly ranking.

Could develop more screens about how to reduce carbon footprint, focus on not only coffee but more aspects.

User Testing Report

121


REVIVE

THESIS PROCESS BOOK

122


Catherine Sun San Francisco, California

Occupation

Art Director at Papyrus

Consumption

4 to 5 cups of Americano per day.

Feedback

Insights

• She likes the color palette and clean typography. • She thinks I can design marketing strategies and campaigns for the App. • Not sure about how to integrate the coffee reward system into the coffee shops’ reward system if they already have one. • Adding more ways to reduce carbon footprint could work for the concept too. But need to be careful about making the applications too complicated. • She mentioned some user interface changes to make the overall experience smoother, including adding another cancel & return page, a report error page for the audiences to contact REVIVE. • Considering developing illustrations for the brand in the future could work too. • Suggesting that I could design seasonal events in the future. • Developing an achievement system for the audiences to collect badges could be exciting and can keep them engaged constantly.

Could design different badges for the audience to collect in the App in the future.

User Testing Report

123


07

VISUAL SYSTEM GUIDELINES



The Logo A logo is being used to aid and promote public identification and recognition of a brand. There are different kinds of logos, and we can group them into categories. It may be of an abstract or figurative design or include the text of the name it represents as in a wordmark. In our logo, Vive means long live and lively. Revive is to restore, regain and give new strength or energy to life or consciousness. It also represents our immediate impression after drinking coffee—feeling refreshed and alive.

REVIVE

THESIS PROCESS BOOK

126


The Wordmark

REVIVE

Visual System Guidelines

127


Logo Variations The mark has black & white and colored versions. The black & white version can be reversed out to white for use on dark backgrounds. The colored versions are the brand color red, green and yellow.

Black & White

The black & white version can be reversed out to white for use on dark backgrounds.

REVIVE

THESIS PROCESS BOOK

128


Color Version

The color versions are the brand color red, green and yellow.

Visual System Guidelines

129


Clear Space Always keep a minimum of clear space around the logo to ensure legibility. This space isolates the mark from any competing visual elements such as text or graphics that might conflict or overcrowd the logo. This space should be the minimum safe distance in most cases, and more room should be given when available. The minimum clear space is defined as half the height of the logo and is shown as X. The space must be maintained around the logo.

x

x

REVIVE REVIVE

THESIS PROCESS BOOK

130

x

x x


Sum eaquasim eum aut ommos nis am re culpa et rae dis et eos eum aut et, site num quis por aut venimil maio. Nequia conecusciis re maximaximus quiaerum il incto tendit verchic illatem venis dit quis quis nullum ipsapid et quo que nus ma dolendi tatus, omnis prae doleseniet a consequ aestrum volupta tionsequi num aspernatis et od qui deseque porum nate est, samet, voluptum elique natum nost eaquiditati nos volor accum cum et ium aute sim explictam ut eaque corrovi deligni omniendam quis etur, con rate pliquunti beature icatinvernat porem nobissus. Evellab ium venturi berorehent. Optaspedio et fugiand electo et faccumentur rernatenimus sed minullescim qui ut et, sit modi restiur mos adit rae volore quo quiatur magnihit, quo dis recatat haruntia sit et rectem et fuga. Nam fugit, sitiat voluptat volum evenim auda culluptis quos dolorae vellaut moluptatur resciuntias eicab ident ut autasinis aut estibus, te laboribus audam quo totatur, quo molorep udantibus autaque esti dit maiosae et hillupt atenimusa que omnihita adis qui iusantem ute nimus praecti cum

REVIVE

Sum eaquasim eum aut ommos nis am re culpa et rae dis et eos eum aut et, site num quis por aut venimil maio. Nequia conecusciis re maximaximus quiaerum il incto tendit verchic illatem venis dit quis quis nullum ipsapid et quo que nus ma dolendi tatus, omnis prae doleseniet a consequ aestrum volupta tionsequi num aspernatis et od qui deseque porum nate est, samet, voluptum elique natum nost eaquiditati nos volor accum cum et ium aute sim explictam ut eaque corrovi deligni omniendam quis etur, con rate pliquunti beature icatinvernat porem nobissus. Evellab ium venturi berorehent. Optaspedio et fugiand electo et faccumentur rernatenimus sed minullescim qui ut et, sit modi restiur mos adit rae volore quo quiatur magnihit, quo dis recatat haruntia sit et rectem et fuga. Nam fugit, sitiat voluptat volum evenim auda culluptis quos dolorae vellaut moluptatur resciuntias eicab ident ut autasinis aut estibus, te laboribus audam quo totatur, quo molorep udantibus autaque esti dit maiosae et hillupt atenimusa que omnihita adis qui iusantem ute nimus praecti cum

REVIVE

Visual System Guidelines

131


Unapproved Uses Do not compromise the logo by rotating, skewing, or distorting in any way, including adding unnecessary decorations such as drop shadows and outlines. A. Do not rotate the logo. B. Do not warp or skew the logo. C. Do not add drop shadows or any other decorations. D. Do not resize individual parts. E. Do not rearrange parts or create alternate compositions. F. Do not use off-brand colors. G. Do not place the logo where there is insufficient contrast. H. Do not place elements inside of the logo clear space. I. Do not alter the typeface.

REVIVE

THESIS PROCESS BOOK

132


A.

B.

C.

D.

E.

F.

RE VIVE

RE VIVE

H.

G.

RE VIVE

I.

REVIVE

Visual System Guidelines

133


Approved Uses The logo can be used on photographic backgrounds, but need to make sure the logo is legible and clear space is maintained.

A. Do use the logo on interesting photography with sufficient contrast behind it B. Do keep the required amount of clear space around the logo. C. .Do use the all white version of the logo on top any of the company colors.

REVIVE

THESIS PROCESS BOOK

134


A.

B.

Sum eaquasim eum aut ommos nis am re culpa et rae dis et eos eum aut et, site num quis por aut venimil maio. Nequia conecusciis re maximaximus quiaerum il incto tendit verchic illatem venis dit quis quis nullum ipsapid et quo que nus ma dolendi tatus, omnis prae doleseniet a consequ aestrum volupta tionsequi num aspernatis et od qui deseque porum nate est, samet, voluptum elique natum nost eaquiditati nos volor accum cum et ium aute sim explictam ut eaque corrovi deligni omniendam quis etur, con rate pliquunti beature icatinvernat porem nobissus. Evellab ium venturi berorehent. Optaspedio et fugiand electo et faccumentur rernatenimus sed minullescim qui ut et, sit modi restiur mos adit rae volore quo quiatur magnihit, quo dis recatat haruntia sit et rectem et fuga. Nam fugit, sitiat voluptat volum evenim auda culluptis quos dolorae vellaut moluptatur resciuntias eicab ident ut autasinis aut estibus, te laboribus audam quo totatur, quo molorep udantibus autaque esti dit maiosae et hillupt atenimusa que omnihita adis qui iusantem ute nimus praecti cum

REVIVE

C.

Visual System Guidelines

135


Typography Type is a powerful tool when used appropriately. The brand typefaces are Scala Pro and Scala Sans Pro. The typefaces should be used across all print, web, and digital applications. Both typefaces are designed by Dutch designer Martin Majoor. Scala Pro is an old-style serif typeface with 12 styles and Scala Sans Pro is a humanist sans-serif typeface that contains 20 styles.

Scala Pro Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Scala Pro Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Scala Pro Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

REVIVE

THESIS PROCESS BOOK

136


Scala Sans Pro Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Scala Sans Pro Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Scala Sans Pro Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 Scala Sans Pro Light

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Visual System Guidelines

137


Typography Examples

Scala Pro Bold

Scala Sans Pro Bold

HEADER 2

Scala Pro Bold

HEADER 3

Scala Pro Bold

HEADER 4

Scala Sans Pro Regular

REVIVE

Header 1

THESIS PROCESS BOOK

HEADER 5

138


Scala Sans Pro Light

Scala Sans Pro Regular

This is the body copy. Tur seque vita consequ iatiae plab ipsa et fuga. Et et delit hil endus reium facient omnimusant.Ratibust, cus rehenduciur moles ent reptate pa eumquia doles ex elignatem volessit explit placcabo. Tate prae

This is the link. This is the link.

Visual System Guidelines

139


Colors The primary colors of the brand reflect the three keywords: Adaptation, Attachment, Interaction.

100%

90%

80%

Pantone 316C

CMYK

90.60.50.35

RGB

Hex

104a55

15.75.85

100%

Pantone 7626C RGB

CMYK

210.50.20 Hex

100%

Pantone 7411C RGB

REVIVE

90%

225.155.75 Hex

60%

50%

40%

30%

20%

10%

70%

60%

50%

40%

30%

20%

10%

70%

60%

50%

40%

30%

20%

10%

10.95.100.0 d33316

90%

CMYK

80%

70%

80%

10.45.80.0 df9a4d

THESIS PROCESS BOOK

140


100%

90%

80%

70%

60%

50%

40%

30%

20%

10%

40%

30%

20%

10%

40%

30%

20%

10%

30%

20%

10%

Pantone Black 4C

CMYK

65.65.70.70

RGB

Hex

2b2622

45.40.35 100%

90%

80%

Pantone 2314C RGB

CMYK

185.115.80 Hex

100%

90%

80%

Pantone 468C RGB

70%

60%

25.60.75.5 ba754e

70%

60%

CMYK

222.200.160 Hex

100%

90%

80%

50%

70%

50%

15.20.40.0 dec6a2

60%

50%

40%

Pantone 9202C

CMYK

0.10.10.0

RGB

Hex

f7e9dc

245.235.220

Visual System Guidelines

141


Image Style The visual style should always contain low contrast photography with a vintage quality. The theme includes people doing activities in a coffee shop, the coffee production process, and coffee plants photography.

REVIVE

THESIS PROCESS BOOK

142


Visual System Guidelines

143


Grids for Print This is the standard grid for all of the brand’s printed deliverables and should be followed to create a consistent brand image.

Letter Size 6 columns x 9 rows 0.7874 inches margin

REVIVE

THESIS PROCESS BOOK

144


Visual System Guidelines

145


Grids for Digital This is the standard grid for all of the brand’s digital deliverables and should be followed to create a consistent brand image.

Responsive Grids 12 column grid for desktop 8 column grid on tablet 4 column grid on mobile

20 px

80 px

REVIVE

THESIS PROCESS BOOK

146

20

80 px


0 px

20 px

80 px

20 px

80 px

20 px

80 px

20 px

80 px

20 px

80 px

Visual System Guidelines

20 px

80 px

20 px

20 px

80 px

147

80 px

20 px

80 px

80 px


Iconography & Buttons for UI Icons should have a consistent and minimum level of detail with a roundness to them in solid brand colors. There should not be any dimension given to them, or outlined. The buttons, input boxes, and icons for the user interface should follow the same standard.

Buttons

Buttons

Buttons

Buttons

Buttons

Buttons

Buttons

Input

ype T

Typing...

REVIVE

THESIS PROCESS BOOK

148


Visual System Guidelines

149


Applications All of these branding items together create the visual system for REVIVE to give a cohesive look and feel. Here are some examples of the system in action.

REVIVE App

REVIVE

THESIS PROCESS BOOK

150


Visual System Guidelines

151


REVIVE

THESIS PROCESS BOOK

152


Visual System Guidelines

153


08

FINAL DELIVERABLES



Store Displays At first my intention was to create an exhibition to educate, draw attention and attract the audiences, but based on the user testing results and the discussions in the class, I decided to cancel the exhibition design and instead design materials to place in coffee shops to promote the App and the brand. –Three 11x17 posters will be placed on the coffee shop walls –Three Letter-sized signs to place on the counter or tables

REVIVE

THESIS PROCESS BOOK

156


Final Deliverables

157


REVIVE

THESIS PROCESS BOOK

158


Final Deliverables

159


REVIVE

THESIS PROCESS BOOK

160


Final Deliverables

161


REVIVE

THESIS PROCESS BOOK

162


Final Deliverables

163


REVIVE

THESIS PROCESS BOOK

164


Final Deliverables

165


REVIVE

THESIS PROCESS BOOK

166


Final Deliverables

167


REVIVE

THESIS PROCESS BOOK

168


Final Deliverables

169


Final Deliverab

REVIVE

THESIS PROCESS BOOK

170


bles

Final Deliverables

171


App Evaluate consumers’ coffee carbon footprint and reward them when visiting sustainable coffee shops or share any sustainable coffee news. –Coffee habits evaluation –Sustainable coffee shop map –Order coffee (pickup) –Reward system –Sustainable coffee news –Personal profile –Settings –Wallet/Payment setup –About

REVIVE

THESIS PROCESS BOOK

172


Chapter

173


REVIVE

THESIS PROCESS BOOK

174


Chapter

175


Welcome/ Login Screen

REVIVE

THESIS PROCESS BOOK

A series of evaluations to understand your coffee carbon footprints.

176


Final Deliverables

177


REVIVE

THESIS PROCESS BOOK

178


Final Deliverables

179


REVIVE

THESIS PROCESS BOOK

180


Final Deliverables

181


REVIVE

THESIS PROCESS BOOK

182


Final Deliverables

183


REVIVE

THESIS PROCESS BOOK

184


Final Deliverables

185


REVIVE

THESIS PROCESS BOOK

186


Final Deliverables

187


REVIVE

THESIS PROCESS BOOK

188


Final Deliverables

189


REVIVE

THESIS PROCESS BOOK

190


Final Deliverables

191


Website The website incorporates all aspects of the brand. –Landing page –About (Brand Introduction) –App introduction page –Barista Interviews –Organization Interviews –Articles & Newsletter (Subscribe) –Article pages x3 –Coffee statistics –Event introduction page (by other organizations) –Event pages x3 –Sustainable Coffee Shops –Contact Information.

REVIVE

THESIS PROCESS BOOK

192


Final Deliverables

193


REVIVE

THESIS PROCESS BOOK

194


Chapter

195


REVIVE

THESIS PROCESS BOOK

196


Final Deliverables

197


Home

Articles

APP

Full Articles & Shared Link

About

REVIVE

THESIS PROCESS BOOK

198


Interviews

Events

Full Interviews & Shared Link

Event Details

Facts

Final Deliverables

199


REVIVE

THESIS PROCESS BOOK

200


Final Deliverables

201


REVIVE

THESIS PROCESS BOOK

202


Final Deliverables

203


REVIVE

THESIS PROCESS BOOK

204


Final Deliverables

205


REVIVE

THESIS PROCESS BOOK

206


Final Deliverables

207


Social Media Using campaigns to promote and raise consumers’ awareness. Including taking actions such as decreasing coffee waste to lower carbon emissions, buying coffee in sustainable coffee shops.

Instagram –Instagram account –One Instagram story ads –At least nine posts about coffee sustainability Twitter –Twitter account –At least five tweets with imagery Newsletter –Coffee sustainability trends and news –Stories of people in the coffee industry –Sustainable coffee shops recommendation

REVIVE

THESIS PROCESS BOOK

208


Final Deliverables

209


Instagram Light mode view of REVIVE’s Instagram account and posts. (Acount: @revive.thesis)

REVIVE

THESIS PROCESS BOOK

210


Final Deliverables

211


Dark mode view of REVIVE’s Instagram account and posts. (Acount: @revive.thesis)

REVIVE

THESIS PROCESS BOOK

212


Final Deliverables

213


Twitter REVIVE’s Twitter account and tweets. (Acount: @revive.thesis)

REVIVE

THESIS PROCESS BOOK

214


Final Deliverables

215


REVIVE

THESIS PROCESS BOOK

216


Final Deliverables

217


Newsletter The newsletter contains articles about coffee sustainability, recommended coffee shops, coffee events, and all the latest news from REVIVE.

REVIVE

THESIS PROCESS BOOK

218


Final Deliverables

219


REVIVE

THESIS PROCESS BOOK

220


Final Deliverables

221


REVIVE

THESIS PROCESS BOOK

222


Final Deliverables

223


Promotional Video The video will be published on Revive’s website and used as YouTube and Facebook ad to promote and increase brand awareness and promote the App.. –One 1920x1080, 72dpi video –Revive brand promotion (About the brand, mission, and values.)

REVIVE

THESIS PROCESS BOOK

224


Final Deliverables

225


Colophon

Typography Scala Sans Pro Scala Pro Design Tools Adobe Indesign CC Design Mintzu (Mindy) Yu Class Graphic Design MFA Instructors Phil Hamlett, William Culpepper, Jeremy Stout


Chapter

227


LET’S PROTECT COFFEE TOGETHER


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.