FOR ALL G I RL S WH O ARE CHA S I NG TH E I R DRE AM S
Written, edited and designed by Yu Rong Directed and advised by Phillip Hamlett, Jeremy Stout, Bob Slote School Academy of Art University, School of MFA Graphic Design Typeset in Proxima Nova Printed and bound in the United States of America For more information about HerSTEM, please visit herstem.us To view design work by Yu Rong, please visit yurong.us To contact me, please send an email to cn.rongyu@gmail.com Copyright Š 2016, Yu Rong All rights reserved. No part of this book may be produced or transmitted in any form or by any means, electronic or mechanical, including photocopy or any storage and retrieval system, without permission in writing from the owner. Respect copyright, encourage creativity!
TABLE OF CONTENTS
005
Table of Contents
1
2
Problem Problem Statement Background and Facts
Research 008 012
3
Questions 032 Discussion 038 Interview 052 Events 054 Museum 062 Insights 064
4
Exploration
Implementation
Naming 080 Visual Exploration 082 Deliverable Contract 094 Deliverable Development 098
Visual System 142 Deliverables 158
1
PROBLEM Defining and clarifying a problem is the foundation of MFA thesis. A good problem for this course should be unique, impactful and broad. These attributes bring more possibilities and public attention into the problem solving process.
008
HerSTEM
Problem Statement
GENDER INEQUALITY IN THE STEM FIELDS Supporting female STEM students is an essential part of America’s strategy to out-innovate, out-educate, and out-build the rest of the world. Women in STEM jobs earn 33 percent more than those in non-STEM occupations and experience a smaller wage gap relative to men. In addition, STEM careers offer women the opportunity to engage in some of the most exciting realms of discovery and technological innovation. Increasing opportunities for women in these fields is an important step towards realizing greater economic success and equality for women across the board.
Problem_ Problem statement
009
S for
Science T for
Technology E for
Engineering M for
Mathematic
010
HerSTEM
Problem_Background and facts
011
“One of the things that I really strongly believe in is that we need to have more girls interested in math, science, and engineering. We’ve got half the population that is way underrepresented in those fields and that means that we’ve got a whole bunch of talent…not being encouraged the way they need to.” — President Barack Obama
012
HerSTEM
Problem_Background and facts
013
Background and Facts
WHAT’S GOING ON IN THE STEM FIELDS? According to the Census Bureau’s 2009 American Community Survey (ACS), women comprise 48% of the U.S. workforce but just 24% of STEM workers. In other words, half as many women are working in STEM jobs as one might expect if gender representation in STEM professions mirrored the overall workforce.
014
HerSTEM
GENDER SHARES OF TOTAL AND STEM JOBS, 2009
WO M E N
SOURCE_ESA calculations from American Community Survey public-use microdata. // NOTE_Estimates are for employed persons age 16 and over.
A LL JO B S
STE M JO B S
100%
100%
80%
80%
60%
60%
40%
40%
48%
20%
0%
24%
20%
0%
015
Problem_Background and facts
WOMEN IN SELECTED STEM OCCUPATIONS, 2011
WO M E N
SOURCE_U.S. Department of Labor. Bureau of Labor Statistics (2011). Women in the labor force: A databook (Report 1034. Table 11). Washington, DC.
45.8%
B I O LOG I CA L SC I E NTI STS
33.5%
C H E M I STS & M ATE R I A L S SC I E NTI STS
26.2%
E N V I RO N M E NTA L SC I E NTI STS & G E OSC I E NTI STS
36.4%
DATA BA S E A D M I N I STR ATO RS
30.5%
CO M PUTE R SC I E NTI STS & SYSTE M S A N A LYSTS
22%
CO M PUTE R PROG R A M M E RS
20.9%
CO M PUTE R SO F T WA R E E N G I N E E RS
10.3%
CO M PUTE R H A R DWA R E E N G I N E E RS
20%
I N DUSTR I A L S E N G I N E E RS
17.4%
C H E M I CA L E N G I N E E RS
9.7%
C I V I L E N G I N E E RS
10.8%
A E ROS PAC E E N G I N E E RS
7.2%
E LE C TR I CA L & E LE C TRO N I C S E N G I N E E RS
6.7%
M E C H A N I CA L E N G I N E E RS 0%
10%
20%
30%
40%
50%
016
HerSTEM
WHY ARE WOMEN UNDERREPRESENTED IN THE STEM FIELDS?
REASON 1
Lack of Encouragement & Mentorship REASON 2
Lack of Support REASON 3
Cultural Bias
Problem_Background and facts
017
018
HerSTEM
Problem_Background and facts
019
Reason 1
LACK OF ENCOURAGEMENT & MENTORSHIP Girls in the science classes are less encouraged than boys — teachers ask more questions to boys and boys get more chances to do experiments. Besides in school, many parents tend to encourage their sons to do a better job in the STEM subjects. In fact, 66% of 4th grade girls said they like science and math, but only 18% of all college engineering majors are female. Moreover, studies 20 years ago showed girls and boys did equally well on math in elementary school, but girls fell behind in high school.
020
HerSTEM
WOMEN & GIRLS SAID...
82%
Females believe they are smart enough to pursue STEM careers
66%
Fourth grade girls said they like science and math
HOWEVER...
13%
Girls view STEM as their first options
021
Problem_Background and facts
FEMALE COMPUTER SCIENCE GRADES
WO M E N
SOURCE_UC Berkeley and Stanford, 2013
UC B E R K E LE Y
STA N FO R D
100%
100%
80%
80%
60%
60%
40%
40%
20%
23.5% 20%
16.2% 0%
0%
022
HerSTEM
Problem_Background and facts
023
Reason 2
LACK OF SUPPORT Having fewer girls in the science, physics and math classes causes an uncomfortable environment for female students — peer-power is important to build confidence. For example, Joy Lee, a rising senior at Thomas Jefferson High School for Science and Technology in Alexandria, Virginia, says she always felt confident about math, but remembers how it felt to walk into a science class full of boys. "Maybe I was a little bit apprehensive about being the only girl, I spent a little bit of time to learn how to fit into the class and it’s important to have girl classmates to be with," said Lee.
024
HerSTEM
PERFORMANCE ON A CHALLENGING MATH TEST, BY STEREOTYPE THREAT CONDITION AND GENDER
WO M E N MEN
SOURCE_ Spencer et al., 1999, “Stereotype threat and women’s math performance,” Journal of Experimental Social Psychology, 35 (1), p. 13.
30
30
25
25
Score 25
20
20
15
15
10
10
5
5
Score 5
Problem_Background and facts
Stereotype threat: If participants are told that women are worse than men at math, the women’s scores worsen, men’s improve...
025
026
HerSTEM
Reason 3
CULTURAL BIAS Children are educated and raised with different expectation for decades — girls usually grow up with Barbies and boys would build Legos. This is a huge impact on children to decide their future careers. Different types of toys give different messages about what's appropriate for boys and girls to do, and have different educational content — both elements are important and might have a bearing on schooling and career choices later.
Problem_Background and facts
027
028
HerSTEM
“Gender-specific toys risked turning girls off science and math and urged parents to buy their daughters Legos to get them interested in engineering.” — Elizabeth Truss
Elizabeth Mary "Liz" Truss is a British Conservative Party politician who has been the Member of Parliament for South West Norfolk since the 2010 general election.
Problem_Background and facts
029
2
RESEARCH The research phase included self-exploration, discussion, a one-on-one interview, attending events that were STEM field-related and visiting museums. By doing this, I found many insights that could be developed as the ideal solution for the problem.
032
HerSTEM
Research_Questions
033
Self Exploration
QUESTIONS Asking myself questions about the topic helped me to decide on the methods of research. It started as free-writing, and questions were classified into six categories — questions for clarification, questions that probe assumptions, questions that probe reasons and evidence, questions about viewpoints and perspectives, questions that probe implications and consequences, and questions about the question. I selected the most insightful question from each category for which to find the answer in my later research.
034
HerSTEM
Research_Questions
035
QUESTIONS ABOUT THE QUESTION
QUESTIONS THAT PROBE REASONS AND EVIDENCE
// 01 Are these questions for present or for the future? // 02
// 01 What happen to female scientists by bias? Any examples?
What are the necessary questions? Why? // 03 Are the ques-
// 02 What did I hear about working experience from my male
tions clear? If not, how to clarify them? // 04 Is it too early to
scientist friend? // 03 Why I care about gender bias in the field of
ask solutions of gender bias in the field of science? If so, when is
science? // 04 What are interview questions about gender bias
the right time? // 05 Who would care about these questions? //
in the field of science to scientists? // 05 What is kind of online
06 How deep can these questions bring me into gender bias in
resource are valuable? // 06 Who else I could interview about
the field of science? // 07 How could these questions influence
gender bias in the field of science? // 07 How to prepare women
the solution? // 08 How can these questions encourage men to
for science, technology, engineering and math careers? // 08
involve gender bias in the field of science? // 09 How do female
Do we need more female scientists? If so, why? // 09 Do many
scientists think / feel about gender bias in the field of science?
women like science, technology, engineering and math careers?
// 10 Is gender bias in science a global issue? If so, what global
If they don’t, why? And how to encourage more girls embrace to
locations are the most affected? // 11 What do I think / feel about
science? // 10 What are the solutions for getting more girls inter-
gender bias in science?
ested in science, technology, engineering and math careers? // 11 What are the resolving gender bias in the field science programs
QUESTIONS FOR CLARIFICATION
or campaigns exist? // 12 Why engineering and science gender
// 01 What does “bias” mean? // 02 What is the difference
gap persists?
between “bias and discrimination”? // 03 What is the difference between gender bias in the field of science compared to gen-
QUESTIONS ABOUT VIEWPOINTS AND PERSPECTIVES
eral gender issues in society as a whole? // 04 If gender bias is
// 01 How would non-scientists respond to gender bias in the
an issue in many different ways, why only explore gender bias
field of science? // 02 Whose perspectives of gender bias in
in science? // 05 What is science? What does science include?
the field of science I would agree? Why? // 03 What are the
Who are the scientists? // 06 Do male scientists realize that gen-
viewpoints of western and asian people? // 04 What are the
der bias in science exists? If scientists are bias, is it a conscience
perspectives of religious and monk? // 05 Who would like to be
decision, or not? // 07 How do male scientists feel about women
gender bias? // 06 How can a designer help and resolve issues
that are not scientists? // 08 How does gender bias in the field
of gender bias in science? // 07 Is it possible to integrate science
of science hurt our society as a whole? // 09 How do female
subjects with other subject? // 08 What are the perspectives of
scientists think / feel about gender bias in the field of science?
leaders in computer science (such as Google, Facebook and Mic-
// 10 Is gender bias in science a global issue? If so, what global
rosoft)? // 09 Recording to Rebecca Parsons, chief technology
locations are the most affected? // 11 What do I think / feel about
officer at ThoughtWorks, a Chicago-based software design firm.
gender bias in science? // 12 Does bias in science exist because
“Women bring a different perspective to solving problems.” What
of gender jealousy? // 13 What is the first step we can to solve
is the difference perspectives of women and men in science? //
gender issues in the field of science? // 14 Am I going to focus
10 Is it true that female scientists are nerdy? If so, why? // 11 How
more on certain science subjects or even?
do men think about women scientists? Do they think women scientists aren’t sexy or attracted enough?
QUESTIONS THAT PROBE ASSUMPTIONS // 01 What if woman and man has the same interest in the science
QUESTIONS THAT PROBE IMPLICATIONS & CONSEQUENCES
subjects? // 02 What if females are bias towards male scientists?
// 01 Why does STEM (science, technology, engineering and
// 03 What if bias only exists in the field of science? // 04 What if
math) matter? // 02 What is the probability of solving gender
woman and men share the same bias? // 05 Are male scientists
bias in the field of science by designer? // 03 What could result
that fall in love with female scientists still bias towards them ? //
from men being part of the solution of gender bias in the field in
06 If male scientists are gay, do they have gender bias? // 07 If
science? // 04 Recording to Harvard, there is only 7 percent of
gender bias in the field science can be solved, what is the first
venture capitalists are women. How this impacts what companies
step we could do? // 08 If gender bias in the field of science can
get funded? // 05 Do female scientists have high demanded by
be solved in the future 10 years, what will be effected? // 09 If
professions in science? // 06 Which science subjects has the
female scientists can’t be social and sexy is true, why? // 10 If a
most women involve in the US? // 07 Why designer should care
girl isn’t interested in science, what we could do?
about gender bias in the field of science?
036
HerSTEM
Research_Questions
037
038
HerSTEM
Listening to Others
DISCUSSION People like to talk, so let them be. I hosted a ten-person event to gather different thoughts and opinions on the topic. The nearly two-hour event that had four parts — guests introduction, event introduction, free discussion and question card discussion. By listening to different voices, I received answers for some selfexploration questions and inspirations. The participants come from different fields. Some of them are college students and some of them are professionals in marketing and engineering.
Research_Discussion
039
040
HerSTEM
Research_Discussion
041
GUEST LIST Helen Lp_Interaction designer at Astro Studios // Devon James O'Reilly Stern_Animation designer // Diego Tc_Software Engineer at Tesla Motors // Lindsey Bourcier_Marketing & Outreach Coordinator at Koshland Pharm // Alice Gu_College student // Lorena Margarita Prieto_Interior designer // Humberto Bravo Oviedo_College student // Ruonan Fan_ College student // ByrneErica_Consultant and engineer at Green Consulting PHOTOGRAPHER_Lee Li VOLUNTEER_Fin Wang
042
HerSTEM
QUESTIONS CARDS What is your definition of gender bias? // Have you feel bias? // Do you think women against their own sex? // Do you think bias just in science? If not, what is field do you think bias existing the most? // How many women in your working place? // What do scientists and engineers do? // Do you like science? Why? If you like, when do you starting like it? // If you are a woman, How do your male co-workers give you feedback? If you are a man, do you give feedback? // How do you feel work with male co-workers? How do they give you feedback on the work? // How do you like work with women? // How does a scientist/engineer day to day job like? // What do you do and how do you like work with women/men? // What was/is the proportion of women in your degree / company? // You are a manager. You have to hire a new person. Two people equally talented have passed the interview. One is a man, the other, a woman. Would you hire any of those depending on the gender? // Would you pay less to a woman compared to a guy if the market allows you to? // Do you see any benefit in working with a woman? // Do you think we need more women in STEM fields? Why? // In general, how do you feel the gender equality in the US? Examples. // Do you think gender bias in science is a global issue? // Do you know any girls who interested in science? If so, how does she get into it? // Do you think gender bias in science is a more serious issue than any other fields? // Do you think girls don’t like science by nature? If so, how to let them more get into science? // Have you have any scientist girlfriends? What do they different from the other girl to you? // Do you think female scientists can’t be social and sexy? Have you hear about any gender bias stories from your friends or your own experience? // Do you care about gender bias? Why? Do you care about science? Why? // Do you know any gender bias programs or campaigns?
Research_Discussion
043
044
HerSTEM
Research_Discussion
045
046
HerSTEM
“In my company, female co-workers usually avoid to negotiate their salaries. It may a reason of women in STEM fields making lower salaries than males.” — Diego Tc Diego Tc is a software engineer at Tesla Motors
Research_Discussion
047
048
HerSTEM
Research_Discussion
049
050
HerSTEM
“Education departments should explain job incomes to the students that could ensure teenages making better decisions of study subject.” — Byrne Erica
Consultant and engineer at Green Consulting
Research_Discussion
051
052
HerSTEM
Research_Interview
053
Face-to-Face
INTERVIEW I conducted an interview with PhD Nathaniel Fernhoff at Stanford Stem Cell Institute. One of the most interesting stories that he shared with me in the interview was he fired a female researcher not long ago because she couldn’t stay in the lab late and she had to take care of her five year old kids after work. It was an incredible experience being in the lab and talking to professionals in the STEM fields. Stanford Stem Cell Institute_291 Campus Drive, Stanford
INTERVIEW QUESTIONS What is your definition of gender bias? // Does the women decrease or increase in your working place? // How many women in your working place? // How many women in your collage? // How do you like work with women? // How does your day-today work look like? // Do you see any benefit in working with a woman? // When do you starting interested in what do you doing now? // Do you think we need more women in STEM fields? Why? // Have you hear any gender bias stories from your friends or your own experience? // What is the imagery of female scientists in your head? Describe a typical female scientist persona. // What do you think should be done to attract this job? // Have you have any scientist girlfriends? What do they different from the other girl to you? // What is the reason more men in the STEM fields? // In general, how do you feel the gender equality in the US? Examples. // Any suggestions for my topic? // One sentence to describe what do you think about gender bias // What is the point of you think that more men are in STEM fields? // Do you think women are minority in STEM fields that affect gender bias?
054
HerSTEM
Event #1
SOFTWARE DEFINED NETWORKING TECH TALK I found this event on Meetup, a social platform. It was hosted at the Open DNS office and about thirty people attended this event. Philip gave a talk for the first twenty minutes about the impact of software in networking, and then attendees were given time to network. I was one of the only two girls at the event. All of the other attendees were males who work in computing-related fields. Philip I. Thomas_Organizer and speaker Open DNS_135 Bluxome St, San Francisco
Research_Events
055
056
HerSTEM
Research_Events
057
Event #2
VALUING DIVERSITY IN DESIGN AND TECHNOLOGY I received the event invitation from my professor Phillip Hamlett, who also is the president of AIGA SF. In the event, six panelists shared their opinions and experience about the gender issue in tech, openly discussed why the problem exists and created a platform to support solutions moving forward. PANELISTS Kimberly Bryant_Founder, Black Girls Code John Maeda_Design Partner, KPCB Joelle Emerson_CEO, Paradigm Jason Mayden_Designer, Accel Partners and former Global Design, Nike: Jordan brands Julio Martinez_Diversity Chair, AIGA SF; Creative Director SFJAZZ Center_201 Franklin Street, San Francisco
058
HerSTEM
Event #3
MAKING IT HAPPEN WITH KELLY HOEY ‘Dreamers and Doers’ is a high-impact community of trailblazing women. The Making-it-Happen Soirée event focused on taking your dreams to the next level. At this event, I had the opportunity to connect with other dreamers and doers as well as learn important personal development and tactical skills. Kelly Hoey, the panelist, is an angel investor, writer, advisor and speaker. She discussed the ins and outs of pitching press and investors. Some of the attendees also shared their hands-on advice and experiences. Kelly Hoey_Angel Investor, Writer, Advisor, Speaker General Assembly, NY_10 East 21st Street, 4th Floor, New York
Research_Events
059
060
HerSTEM
“If we want to change the economic dynamics for women, we need to start investing in female founded companies at a much earlier stage.” — Kelly Hoey
Research_Events
061
062
HerSTEM
Research_Museum
063
Be inspired
VISITING THE EXPLORATORIUM The Exploratorium is a public learning laboratory that allows people to explore the world through science, art, and human perception. I met more girls than boys in the museum that day. By talking to some girls, I could see that they’re open-minded and would love to study science subjects and some of them enjoy science class. Exploratorium_Pier 15, San Francisco
064
HerSTEM
From the Sharpest Minds
TOP EIGHT INSIGHTS From the research, self-exploration questions, interview, hosting and attending events and reading, I narrowed my findings down to the eight most impactful insights about the topic. Each of them helped me to come closer to reaching solution.
Research_Insights
065
066
HerSTEM
“Most books focus on what women are doing wrong. Such as giving advice: Ask for more money! Network more! Stop being such a doormat!” — Joan C. Williams Joan C. Williams wrote in her book ‘What works for women at work’ in January, 2014
Research_Insights
067
EXAMPLES OF BOOKS ADVISE WOMEN HOW TO DO BETTER
068
HerSTEM
TOCA BOCA, A GENDER-NEUTRAL FOCUS TOY BRAND Toca Boca made a conscious decision to be gender-neutral when naming their apps and in the gender balance of characters. It’s for parents and kids to decide what to use.
Research_Insights
069
“Toys are more divided by gender now than they were 50 years ago.” — Elizabeth Sweet Elizabeth Sweet wrote on theatlantic.com on December 9th, 2014
070
HerSTEM
“By the time kids reach middle school, boys are twice as likely to be interested in science, technology, engineering, and math. This is not acceptable.” — Adam Mordecai Adam Mordecai wrote on upworthy.com
Research_Insights
IN HIGH SCHOOL, SCIENCE TEACHERS SPEND UP TO ALMOST 40 PERCENT MORE TIME ADDRESSING MALE STUDENTS IN CLASS.
Science teachers spend time to address female students in class
SUPPORTING POINT_ LEE SHUMOW AND JENNIFER A. SCHMIDT WROTE IN THEIR BOOK
071
072
HerSTEM
PROFESSIONAL DRESSING STYLE IS A CHALLENGE Women scientists face a much more challenging task when they set out to assemble a professional wardrobe. Women must navigate a much wider latitude of styles, colors, and suitable designs, and women’s styles pop in and out of fashion with frightening velocity.
Research_Insights
“If a woman is too attractive or feminine, she’ll have a hard time being taken seriously in STEM fields.” — Adam Ruben Adam Ruben wrote on Science Careers magazine
073
074
HerSTEM
“Senior male scientists hitting on younger women colleagues appears to be the norm.” — Meg Urry Meg Urry wrote on CNN, she is the Israel Munson professor of physics and astronomy at Yale University.
Research_Insights
075
MEG URRY’S RESEARCH Of the 142 men and 516 women surveyed, 64% said they had experienced inappropriate sexual remarks, comments about physical beauty, jokes about cognitive sex differences or other kinds of sexual harassment while doing field work in anthropology, archaeology, geology and related scientific disciplines.
64%
experienced sexual harassment
076
HerSTEM
Research_Insights
077
3
EXPLORATION To develop an ideal solution based on the research. It included naming, a visual system, a deliverables contract and deliverables development. Quantity of exploration is one the most essential part of this phase. It ensures that the visual language communicates to the audience accurately, and the deliverables meet the audience’s needs.
080
HerSTEM
Bright Her
Bright-ess landing page
Ignite Her
Talent Diversity HeroHer BringIn
HeroStation
Inspire Her
BlendIn
Boomess
landing page
Booming Share Diversity
Science Pool
LetHerUp
Science Diversity
Bridge Builder Hyp-Her
HerSTEM
Future Genius
Future Genius
STEM for All
Systema New Blood
Science Hero
Bridger LeadHer
SciencePath
Beyond Share Equality
WeaveMix
Hypa
Couragess
Exploration_Naming
081
Hello, What's Your Name?
NAMING Naming is the first step starting an identity system. The name itself should have personality and meaning. Brainstorming and listing as many names as possible on a blank sheet of paper was my approach. By talking to my peers and my professor, HerSTEM was decided as the project name.
082
HerSTEM
Feel and Tone
MOODBOARD Creating a moodboard helped me to visualize how the brand would look like. This page shows the feel and tone of HerSTEM. The sharp colors and dynamic graphic elements showed a bold, playful yet scientific art direction.
Exploration_Visual exploration
083
084
HerSTEM
Exploration_Visual exploration
085
086
HerSTEM
Ideas
LOGO EXPLORATIONS In this phase, the goal was to explore different ideas and possibilities for the logo. It should have a range from the craziest approach to the most conservative approach.
DIRECTION 1
Exploration_Visual exploration
DIRECTION 2
087
088
DIRECTION 3
HerSTEM
Exploration_Visual exploration
DIRECTION 4
089
090
HerSTEM
Exploration_Visual exploration
091
092
HerSTEM
Make It Perfect
LOGO REFINEMENTS Refinement is all about the detail. I tested various compositions of the graphic elements with type. I paid a lot of attention to the stroke weights, leading and kerning.
COMPOSITION 1
EXPLORATION 1
COMPOSITION 1 IN COLORS
Exploration_Visual exploration
COMPOSITION 2
EXPLORATION 2
COMPOSITION 2 IN COLORS
093
094
HerSTEM
Make A Promise
DELIVERABLES CONTRACT By making a deliverables contract, I clarified my timeline and details of final deliverables. It helped me to track each milestone and visualize the final project.
DRAFT 1
OVERALL
FINISHED ITEMS
UNFINISHED ITEMS
Exploration_Deliverable contract
095
096
DRAFT 2
HerSTEM
Exploration_Deliverable contract
DRAFT 3
DRAFT 4 & TIMELINE
097
098
HerSTEM
Make It Happen
DELIVERABLE DEVELOPMENT I have three deliverables for the HerSTEM project — a website, an app and STEM kits. They all work together and were created based on my research. The website is a STEM project platform that is worth four points. The app is a social media platform that is worth three points. Lastly, STEM kits is worth two points.
A WEBSITE
TO DISCOVER
Exploration_Deliverable development
AN APP
STEM KITS
TO SHARE
TO BUILD
099
100
HerSTEM
HerSTEM website is a platform for teenage girls to discover STEM projects. All these projects are posted by the professionals in the STEM fields.
Exploration_Deliverable development
HEADER
☐ LOGO (HOME) ☐ LOGIN / CREATE ACCOUNT ☐ SHARE Your Projects Upload Projects Sell Projects Shine Projects ☐ DISCOVER Girls Picks Subjects Easy or Hard ☐ CART
LANDING PAGE
☐ WHO WE ARE (VIDEO) ☐ PROJECT THUMBNAILS
SHARING PAGE
☐ ☐ ☐ ☐
YOUR PROJECT THUMBNAILS EDITING PROJECT (UPLOAD / CHANGES / DELETE) FOLLOWER / FOLLOWING SHINE YOUR PROJECT (BUY TOOLS FROM US TO MAKE YOUR PROJECT BEING EASILY UNDERSTOOD)
DISCOVER PAGE
☐ ☐ ☐ ☐ ☐ ☐
PROJECT (PICTURES / VIDEO / TEXT) ABOUT THE PROJECT (TEXT) ABOUT THE SCIENTIST (PHOTO & TEXT) HOW TO GET IN SCIENCE? (TEXT) LIKE / SAVE / SHARE (BUTTONS) BUY THE PROJECT KIT
SECTIONS
☐ MORE Get App SiteMap FOOTER
☐ ABOUT Contact Us Blog Volunteer & Donation
☐ HELP Basic FAQ Privacy
101
102
HerSTEM
Exploration_Deliverable development
103
104
HerSTEM
WEBSITE OUTLINE & SITEMAP The overall outline and sitemap are the skeleton for a website. The outline included four sections: goals, contents, priorities and users. They were organized and visualized as a sitemap. The sitemap described the overall relationship between each section.
01
02
GOALS_ WHAT DOES SUCCESS LOOK LIKE?
CONTENTS OUTLINE
STAKEHOLDER High school girls and Women in the STEM fields High school students are willing to experiment / participate the project /// High school students are excited to interact with the potential mentor /// Women scientists who have social Responsibility and proud to share their projects /// Women scientists are willing to interact with the high school users METRICS Signups are up /// Page views are up /// STEM project likes/saves/shares are up /// STEM project discussions are up /// STME kit sales are up /// HerSTEM app downloads are up /// Seilfish /// Design is portfolio quality
About HerSTEM /// HerSTEM’s mission /// Intro/Promo Video(s) /// How It work /// STEM Projects Showcase /// HerSTEM App Promotion /// Science Kit Shop /// Product checkout /// STEM Project Individual Page /// Project creator short bio /// Project overview /// Project method /// Project expectation: What skills you will gain after experimenting this project (Skill chart) /// Project result /// Project discussion: Interaction/conversion with students /// User profile /// User account /// Interest search tool /// Contact /// Sign up/Login /// Search /// Become a Role Model /// Become a (future) Scientist
03
04
PRIORITIES_ MOST VALUABLE TO THE BUSINESS
USERS_WHO MIGHT BE VISITING
HIGH SCHOOL STUDENTS Sign up for learning STEM projects from mentors /// Participate the project WOMEN IN THE STEM FIELDS Post STEM project /// Interact with the student
TEENAGE GIRLS IN HIGH SCHOOL FROM WHERE TO KNOW HERSTEM? Googled the keywords: science/mentor /// Why visit us? Interested in science subject and looking for inspirations /// What next? Find a interesting science project and get in touch with the project creator HOW? Sign up /// experiment the project /// share the result with the creator WHAT ELSE? Gain skills
Exploration_Deliverable development
REGISTER STEPS
REGISTER
STUDENT
MENTOR
SOICAL MEDIAS
QUESTIONS
REQUIREMENTS
SOICAL MEDIAS SOICAL MEDIAS
SOICAL MEDIAS SOICAL MEDIAS
APPROVED
APPROVED
NOT APPROVED
USER PROFILE
USER PROFILE
EXPLORE P ROJECTS
LANDING PAGE
STUDENT
MENTOR
105
106
HerSTEM
01 FIRST TIME USER
HOME
DISCOVER PROJECTS
PROJECT
P ROFILE SOICAL MEDIAS SOICAL MEDIAS
SIGN UP LOGIN
-HERSTEM INTRO -VIDEO: WHY STUDY STEM -PROJECT SHOWCASE -HOW IT WORKS -APP INTRO
KITS SHOP
KIT SHOWROOM
SOICAL MEDIAS SOICAL MEDIAS
SEARCH
BECOME A MENTOR
INTRO & PROMO
-INTRO -WHY MENTOR -HOW TO START
STUDENT SIGN UP
BUY KIT
LANDING PAGE SAVE PROJECTS
CONFIRMATION
CONTENT PAGE
or
SHARE PROJECTS
or
DO PROJECTS
SUCCESS
107
Exploration_Deliverable development
02 LOGIN AS A STUDENT -PROJECT SHOWCASE HOME
-Unfinished -Saved -Liked -Recommended
DISCOVER PROJECTS
KITS SHOP
PROJECT P ROFILE
KIT SHOWROOM
BUY KIT
SAVE PROJECTS or SHARE PROJECTS or DO PROJECTS
CONFIRMATION
-YOUR PEERS -Doing the same projects -Saved same projects -APP PROMO
-MY PROJECTS -PROFILE -SIGN OUT
ACCOUNT
SEARCH
YOUR PEERS
ABOUT
-INTRO -VIDEO -BLOG
-PROJECT PROFILE -Unfinished -Saved -Liked -APP PROMO
DOWNLOAD APP
03 LOGIN AS A MENTOR
-YOUR STUDENTS HOME
-Who is working on -Who liked/saved
-OTHER CREATORS -In the same fields -Their stories -SHARE IT
-MY PROJECTS -PROFILE -SIGN OUT
ACCOUNT
SEARCH
CREATE A NEW PROJECT
STEPS
YOUR STUDENTS
OTHER MENTORS
PROJECT P ROFILE
PROJECT P ROFILE
ABOUT
-INTRO -VIDEO -BLOG
108
HerSTEM
WIREFRAMING Wireframing is an important step in any screen design process. It primarily allowed me to define the information hierarchy and allowed me to see the relationship between each screens.
Exploration_Deliverable development
109
110
HerSTEM
search projects
SCIENCE
FEATURED
NEWEST
TECH
ENGINEERING
Login
MATH
POPULAR
KIT SHOP
search projects
KIT SHOP
STUDENTS:
KIT SHOP
Experiment STEM projects and become a (future) scientist
PROFESSIONS IN STEM:
Share your STEM projects and be a role model
GET STARTED AS A STUDENT
GET STARTED AS A PROFESSION
KIT SHOP
Our Featured Experiments
search projects
Login
SEE ALL
FIND PROJECTS JUST FOR YOU
HER ALL PROJECTS
LINKEDIN OR email password SIGN UP Remeber me! SAVE IT
DOWNLOAD THIS HANDBOOK
OVERVIEW
METHODS
SHARE
Why HerSTEM?
LAB NOTES
HER STUDENTS
Why experiement project with us?
RESULTS FROM STUDENTS
LEARN FROM A REAL ROLE MODEL
INTERACT WITH WOMEN IN STEM
DISCUSSION ask questions about this project
Connect your mentors from anywhere. APPLE STORE
Login
KNOWING THE REALITY IN STEM
111
Exploration_Deliverable development
DISCOVER PROJECTS
search projects
ABOUT
DISCOVER PROJECTS
SCIENCE
TECH
ENGINEERING
search projects
ABOUT
MATH
HER ALL PROJECTS FEATURED
DISCOVER PROJECTS
NEWEST
POPULAR
KIT SHOP
search projects
ABOUT
MY PROJECTS IN PROGRASS
SAVED
COMPLETED
SAVE IT
DOWNLOAD THIS HANDBOOK
OVERVIEW
SHARE
LAB NOTES
METHODS
HER STUDENTS KIT SHOP
KIT SHOP
RESULTS FROM STUDENTS
RECOMMENDED PROJECTS
SEE ALL
KIT SHOP
DISCUSSION ask questions about this project
NEWEST PROJECTS
SEE ALL
share your progress here...
add photo
add video PUBLISH
PREVIOUS NOTES
creator’s feedback
STEP 1
OR
STEP 2
STEP 3
Who do you want to be? Select 6 skills to put into the skill chart, and become a super girl in the STEM fields.
STEP 1
STEP 2
STEP 3
What are you interested in? Choose 3 subjects you’re interested, we'll recommend projects that you are interested.
OR
password
password
LOGIN
SIGN UP
Keep me signed in until I sign out
Remeber me!
STEP 1
STEP 2
save it
save it
save it
save it
save it
save it
sign up CONTINUE
STEP 1
STEP 2
STEP 3
Who do you want to be? Select 6 skills to put into the skill chart, and become a super girl in the STEM fields.
STEP 1
STEP 2
CONTINUE
STEP 3
What are you interested in? Choose 3 subjects you’re interested, we'll recommend projects that you are interested.
STEP 1
STEP 2
CONTINUE
STEP 3
Sign up
Projects are just for you! Save 5 projects then get started!
save it
save it
save it
LINKEDIN OR email
save it
save it
save it
password SIGN UP Remeber me!
CONTINUE
APPLE STORE (third party site)
CONTINUE
CONTINUE
STEP 3
Projects are just for you! Save 5 projects then get started!
112
HerSTEM
Exploration_Deliverable development
113
114
HerSTEM
INTERFACE The website interface is based on the visual system. To match the visual system keywords, it should be bold, encouraging and delightful. Therefore, I explored modular layouts to divide different information to give a dynamic feel and tone.
STYLE EXPLORATIONS
DIRECTION 1 & 2
DIRECTION 3
Exploration_Deliverable development
DIRECTION 4
DIRECTION 5 & 6
115
116
EVOLUTION
HerSTEM
Exploration_Deliverable development
117
120
HerSTEM
PROTOTYPE I used the application Sketch to create layouts and interface. I uploaded the screens to the online application Invision for the prototype.
Exploration_Deliverable development
121
122
HerSTEM
Prove It
USER TESTING From user testing, I understood my user’s needs deeper. I tested the HerSTEM website with users online and in person. I invited four users on the InVision app where they could browse the website by themselves. The face to face testing had four parts. I gave the user a short introduction in the beginning, asked them some general questions, and then I asked them to explore the website by themselves. In the end, I asked them specific questions about their experience using the website.
Exploration_Deliverable development
INTRODUCTION
123
TASK 2_Please give me your initial reactions to this page. Feel
Hello, my name is Yu Rong. I would like to introduce a social web-
free to explore this page as you normally would. You can scroll
site in science. The website is called HerSTEM. Before to show
around with your mouse, but please don't click on anything just
you the website, may I ask you some questions?
yet. // Please give me your initial impressions about the layout of
PRE-TEST QUESTION So first question have you hear about the STEM fields? Do you know what is STEM stands for? // What kind science projects/ experiments that mostly interests you in the school? // What resources do you use to learn things? What do you like them? What do you dislike them? // How long have you been use them? PARTICIPANT TASKS TASK 1_I'm going to give you five minutes to freely explore this Web site. You may go anywhere you would like to go on the Web site, but please remember to speak aloud as you do so. I will tell you when the five minutes are up.
this page and what you think of the colors, graphics, photos, etc. What do you like/dislike of the visual style? // Without clicking on anything yet, please describe the options you see on the home page and what you think they do. Feel free to move around the page, but again I’ll ask you not to click on anything right now. // Without clicking on anything yet, if you were exploring, what would you click on first? // What do you think is the purpose of this site? // Who do you think this site is intended for? // Whose Web site is this?
124
HerSTEM
Exploration_Deliverable development
125
126
HerSTEM
COMMENTS 1
COMMENTS 2
Looks good. No call to action on the page though. Should there
Note clear to me how this notes area works, who has access to it,
be a way to connect with this project? I’m not clear if there
who posts notes and so on.
should/shouldn’t be because the purpose of the platform isn’t completely clear to me.
Exploration_Deliverable development
127
OVERALL COMMENTS FROM ALICE LEI Pick one side of the market and optimize for that. Either students or professionals // All caps is hard to digest. People don’t read, they scan. I don’t know what the key value proposition is for students or professionals. So the copy needs to be fixed. // Overall design needs to be cleaner and more crisp // “Check out what do scientists care about” should be “Check out what scientists care about” (grammatically). // “Check out what scientists care about” - how this connects to the purpose of the website is unclear, what action do you want people to take on this page? // Project listings need a better balance of image to text. // See All and Find Projects buttons look odd side by side // Can’t see video boundary against the current background image // Colors under “Why Experiment With Us?” are hard to look at. // Overall the user narrative needs to be stronger // I’d shrink the app image and hand // Call to action and value proposition for getting the app needs to be stronger. Also, is there an app yet? If not then an email signup would probCOMMENTS 3 Nice bio page. Having links to her professional work would make a lot of sense. Like any papers she has authored. Is there a LinkedIn for scientists? If so linking there would be good. Depending on what you want people to do I’d suggest a messaging feature here.
ably make more sense
128
HerSTEM
☐ LOGIN / SIGNUP SCREEN
LANDING SCREENS
☐ ☐ ☐ ☐ ☐
☐ BUILD YOUR PROFILE SCREEN
SCHOOL & GRADE YOUR SCIENCE KIT PROFILE PHOTO YOUR LOCATION YOUR SCIENCE TAGS
YOU’RE READY TO GO
FIND PARTNERS
MESSAGE
DASHBOARD SCREENS
☐ NEARBY ☐ PROJECTS
☐ MESSAGE LIST
SECTIONS
SETTING
☐ PROFILE ☐ NOTIFICATIONS ☐ HELP ☐ PRIVACY & TERMS ☐ SIGN OUT
Exploration_Deliverable development
HerSTEM app is a social media platform for teenage girls to connect their peers.
129
130
HerSTEM
DESIGN BRIEF & WIREFRAMING Design brief described the app’s general information, its goal and its users. Wireframing outlined the relationship of each screen.
01 I AM BUILDING...
2
3
Find Peers
1
Conntect A Peer
Tap ConnectHer or PassHer to find your peers who has common interests or montors with you.
If she tapped the ConnectHer on you, she’ll be on your peers list and vice versa. You both can interact anytime and anywhere.
Message Your Peers
4
Meet Your Peers Eventually, you may meet your peer to discuss STEM subjects or do a experiment together. HerSHAM community will grow stronger!
Go to your Peers List to message anyone you want to have a conversation.
Read Again
an app for high school girls to connect with their peers who are interested in the STEM subjects
Log in
Register
Log in
Nanghiti Aviankoi
Register
Peers
Profiles
Log in
Settings
Discovery Setting
Nanghiti Aviankoi
San Francisco University High School
San Francisco University High School
02 IN ORDER TO...
icon
icon
icon
Agriculture
Zoology
Only show me we have common connections
icon Agriculture
Connect Her
off on
off on
Location San Francisco, CA
I am interested in...
interested in common ...
Pass Her
off on
Blurb (Who I am & What I am looking for...)
Invite Friends Support
Only show me who has common interests Only show me we have same experiments
Send Feeback0.8 mi away I am interested in...
Computer Science
Log in
Profile
Nanghiti Aviankoi
Settings
Register
icon
icon
icon
Computer Science
Agriculture
Zoology
Maximum Peers’ Distance
35mi.
My HerSTEM Experiments (I am working on / I saved )
1
Push Notifications
New Messages off on
build a better community by peers’ power
2
New Connections off on
Email Notifications
3
New Messages off on
My mentors on HerSTEM
Sign out First Name Last Name
First Name Last Name
First Name Last Name
My Peers on HerSTEM
First Name Last Name
First Name Last Name
First Name Last Name
Support
Need some help? We’re here.
03 BY... Encourage high school girls to interact with other students. The interaction includes but not limited to online discussion, meeting in person and doing experiments together.
Call HerSTEM Support Email HerSTEM Support Frequently Asked Questions
Sign Up
131
Exploration_Deliverable development
Welcome back!
Hey, nice to meet you!
Log in with Facebook
Log in with Facebook
or
or
Email Address
Full Name
Password
Email Address
Forgot your password?
Password Repeat Password
Log in
Sign Up
Peers
Peers
Peers
0.8 mi Full Name San Francisco University High School
Nanghiti Aviankoi
Finding peers for you to connect...
Full Name
Jan 23, 2016 4.10 pm
Jan 28, 2016 6.05 pm
Profile Jan View 28, 2016 6.05 pm
Your experiments are so smart...
San Francisco University High School
Full Name
0.8 mi away
21 mi San Francisco University High School
Your experiments are so smart...
I am interested in...
Just A Moment
Full Name
Jan 23, 2016 4.10 pm
icon
icon
icon
Computer Science
Agriculture
Zoology
Profile
Full Name
2.3 mi San Francisco University High School
Your experiments are so smart... interested in common ...
Nanghiti Aviankoi
icon
San Francisco University High School
Agriculture
Disconnect Her
Full Name
0.8 mi San Francisco University High School
Report Her
0.8 mi away Blurb (Who I am & What I am looking for...) Pass Her
0.8 mi Full Name San Francisco University High School
Connect Her
Cancel New Message
SEND
New Message
SEND
My HerSTEM Experiments (I am working on / I saved )
1 Peers
Full Name
2
Nikki Delaney
Pass Her
Cancel
Disconnect
Why do you want to disconnect Her?
Jan 23, 2016 4.10 pm
Connect Her
Galileo Academy of Science & Technology
3
0.8 mi away
She is He (Inappropriate profile) Inappropriate messages
I am interested in...
My mentors on HerSTEM
icon
icon
icon
Computer Science
Agriculture
Zoology
Accidentally connected First Name Last Name
First Name Last Name
First Name Last Name
New Message
interested in common ...
Other
SEND Jan 28, 2016 6.05 pm
Our common Peers on HerSTEM icon Agriculture First Name Last Name
Pass Her
First Name Last Name
First Name Last Name
I am interested in...
Connect Her
icon
icon
icon
Computer Science
Agriculture
Zoology
Disconnect Her will remove them from your Peers list and vice versa. If you think they've been inappropriate, offensive, or spammy, please report them instead.
interested in common ... icon
Peers
Cancel
Report
Agriculture
Why do you want to report Her?
Jennifer Wang
Chinese Central High School
Feels like spam
1.8 mi away
Inappropriate or offensive I am interested in... icon
icon
icon
Computer Science
Agriculture
Zoology
Other
interested in common ... icon Agriculture
Pass Her
Connect Her
Thank you for helping keep the quality of our community high. HerSTEM manually reviews every report. You'll automatically be removed from Her peers list and vice versa.
132
HerSTEM
PROTOTYPE I used Flinto to build the HerSTEM app. Flinto is a tool for prototyping iOS app designs. By adding screen images, and linking them together in Flinto's editor, I was allowed to make realistic transitions between each screen on the app.
Exploration_Deliverable development
133
134
HerSTEM
E D I T PR O F I L E
S U P P O RT
LARA CARNEVALE Galileo Academy of Science & Technology
NEED SOME HELP? WE’RE HERE. We're here day and night to make sure all the social activities happen securely and equally.
WHO I AM AND W H AT I A M L O O K I N G F O R . . .
Hilla vitatumque sitatecest esequi bea dolupti aut expe dolor mod et vel el eaquide lant asperibus ea qui offici sa sunto vel essum que offictio int reptio. Rio.
CALL US I’M INTERESTED IN...
EMAIL US
Q & A
MINERALOGY
ZOOLOGY
A G R I C U LT U R E
135
Exploration_Deliverable development
JENNIFER WANG Chinese Central High School
FIND PEERS Tap ConnectHer or PassHer to find your peers who has common interests or montors with you.
YO U B OT H A R E I N T E R E S T E D I N . . .
EARTH SCIENCES
LOG IN
SIGN UP
1 . 2 M I A W AY
MINERALOGY
ZOOLOGY
6 PEERS CONNECTED
NIKKI DELANEY Galileo Academy of Science and Technology
YO U B OT H A R E I N T E R E ST E D I N . . .
PAT H O L O G Y
A G R I C U LT U R E
WELCOME BACK!
FINDING PEERS FOR YOU TO C O N N E C T. . .
LOGIN WITH FACEBOOK
OR
Just A Moment... Email Address
Password
Forgot your password?
LOG IN
CONNTECT A PEER If she tapped the ConnectHer on you, she’ll be on your peers list and vice versa. You both can interact anytime and anywhere.
N I KKI D ELA N EY JA N 1 3, 201 6
3: 4 5 P M
Hilla vitatumque sitatecest esequi bea dolupti aut expe dolor mod et vel el eaquide lant asperibus ea qui offici.
Hilla vitatumque sitatecest esequi bea dolupti aut!
LOG IN
SIGN UP
0 . 8 M I A W AY
12 PEERS CONNECTED
CHRISTINA SMITH San Francisco University High School
136
HerSTEM
Herstem Kits give teenage girls a hands-on experience.
Exploration_Deliverable development
TECH KIT
☐ GUIDELINE BROCHURE (PRINT) Introduction What are in the kit Steps Reference ☐ PACKAGING Key visual Copy ☐ LABELS FOR THE COMPONENTS Numbering Information
SCIENCE KIT
☐ GUIDELINE BROCHURE (PRINT) Introduction What are in the kit Steps Reference ☐ PACKAGING Key visual Copy ☐ LABELS FOR THE COMPONENTS Numbering Information
ENGINEERING KIT
☐ GUIDELINE BROCHURE (PRINT) Introduction What are in the kit Steps Reference ☐ PACKAGING Key visual Copy ☐ LABELS FOR THE COMPONENTS Numbering Information
137
138
HerSTEM
UNO R3 BOA R D F LAS H M E M O RY 32kb SR A M 2KB (ATmega328) E E P R O M 1KB (ATmega328) C LO C K S P E E D 16 MHz L EN GT H 68.6mm W I DT H 53.4mm W E I GT H 25g
4 0 0 POINT B R EA DB OA R D
MI C R O C O N T R O L L E R ATmega328 O P E R AT I N G VO LTAGE 5V I N P U T VO LTAG E ( L IM I TS) 6-20V D I G I TA L I / O P I N S 14 A N A LO G I N O U T P I NS 6 D C C U R R E N T P E R I /O P I N 40mA D C C U R R E N T F O R 3.3V P I N 50mA
3
RESI STORS
RGB LED
1
6
4
6 5 F F J U M PER W IR E S
PUSHBUTTON SWITCH
7
2
US B CA B L E
5
7 3
1
4 2
5 6 WHAT IS THE BOX? 1 2 3 4
Uno R3 board 400 point breadboard Resistors 65 FF jumper wires
5 USB Cable 6 RGB LED 7 Pushbutton Switch
U N O R3 BOARD FL AS H ME MO RY 32kb SRAM 2KB (ATmega328) EE P RO M 1KB (ATmega328) C LO C K S P E E D 16 MHz L E NGTH 68.6mm W I DTH 53.4mm W EI GTH 25g
Sourcing From Robotlinking©
MIC RO C O NTRO L L E R ATmega328 O P E RATING VO LTAG E 5V INP UT VO LTAG E (L I MI TS) 6-20V DIG ITAL I/ O P INS 14 ANALO G INO UT P I NS 6 DC C URRENT P E R I / O P I N 40mA DC C URRENT FO R 3. 3V P I N 50mA
4 0 0 POINT B READB OARD stick
PUSHBUTTON SWITCH RGB LED
USB CAB LE 65 F F JUMPER WI R E S RE S I STO R S
5 USB Cable 6 RGB LED
1 Uno R3 board 2 400 point breadboard
139 Exploration_Deliverable development
WHAT IS THE B OX?
140
HerSTEM
Exploration_Deliverable development
141
4
IMPLEMENTATION The final visual system and deliverables are shown in this chapter. The visual system can guide you to use the HerSTEM identity. Final deliverables were laid out dynamically. They were meant to give the viewer an exciting experience.
144
HerSTEM
HerSTEM’s look
VISUAL SYSTEM Our brand identity is more than a logo. It is a design scheme made up of a number of core elements and guiding principles that combine to create a distinctive look and feel that is immediately recognizable as HerSTEM.
Implementation_Visual system
145
THE PRIMARY LOGO This is the primary HerSTEM logo. The logo and its typography style are precisely positioned and proportionally fine-tuned. It will work across digital media and print materials.
146
HerSTEM
LOGO CLEAR SPACE Clear space is the area surrounding the logo that must be kept free of other graphic elements. The minimum required clear space is defined by the measurement “X”, as shown.
3¾X
X ¼X X
Implementation_Visual system
LOGO MINIMUM SIZE To ensure the HerSTEM logo is reproduced legibly at smaller scales, we’ve established various minimum sizes, as shown. The minimum sizes included here should accommodate most applications, but whatever the reproduction technique, be sure the logo is never smaller than what can be clearly executed.
147
SECONDARY LOGO VARIATIONS The secondary HerSTEM logo has three variations. The secondary logo consists of three dots which are connected by two lines. Be sure the logo is never smaller than what can be clearly executed.
PRINT MIN: 0.5IN
VERSION A
DIGITAL MIN: 36PX
VERSION B
VERSION C
148
HerSTEM
LOGO BACKGROUNDS The HerSTEM logo should work with various contexts and environments, so I created examples of the logo on different backgrounds with brand colors applied. The black logo should be on the purple or pink background, whereas the white logo should be on the orange or black background.
149
Implementation_Visual system
GRAPHIC ELEMENTS These are the HerSTEM brand graphic elements. It is a supporting element for advertising, digital and environmental applications. It should not overpower the core visual or message. Its role is to add playfulness and excitement to any visual expression of the brand.
VERSION A
SCIENCE
VERSION B
TECHNOLDGY
VERSION C
ENGINEERING
MATH
152
HerSTEM
ORANGE PMS 2567U CMYK 0 80 90 0 RGB 247 87 46 WEB #D0B7D7
PURPLE PMS 7604U CMYK 60 65 0 0 RGB 139 105 241 WEB #FDE3D2
WHITE
PMS 7604U CMYK 0000 RGB 255 255 255 WEB #FDE3D2
BLACK
PMS BLACK CMYK 0 0 0 100 RGB 000 WEB #000000
PINK PMS 2567U CMYK 20 100 0 0 RGB 246 46 246 WEB #D0B7D7
GREEN PMS 2567U CMYK 80 4 50 0 RGB 27 176 153 WEB #D0B7D7
LIGHT BLUE PMS 2567U CMYK 60 0 0 0 RGB 38 223 235 WEB #D0B7D7
BLUE PMS 2567U CMYK 65 20 0 0 RGB 78 146 223 WEB #D0B7D7
Implementation_Visual system
153
COLORS The primary colors of the HerSTEM brand are pink and orange. Purple should be considered as the alternate primary color when pink and orange are overused. The secondary colors are green, light blue and blue. All colors can be used in digital media and print materials.
154
HerSTEM
ABCDEFGHIJKLMNOPQR STUVWXYZ1234567890 ABCDEFGHI JKLNOPQR STUVWXYZ abcdefghi j k l m n o p q rstuv wxyz 1234567890
HEADLINE Evaporation occurs when a liquid turns into vapor (a gas). It happens on a large scale in bodies of water all over the world. But it also happens in your house. But do all liquids take the same amount of time to evaporate? Jennifer Penn-Chiu is currently a college student with a deep interest in science who is aspiring to become a writer. She writes about all sorts of things across all subjects including, but not limited to; science, crafts, and fashion. She hopes to become a good writer so she can share her thoughts and experiences with the world and future generations.
ABCDEFGHI JKLNOPQR STUVWXYZ a b cd efg hi j k l m n o p q r s tuv w x y z 1234567890
HEADLINE Evaporation occurs when a liquid turns into vapor (a gas). It happens on a large scale in bodies of water all over the world. But it also happens in your house. But do all liquids take the same amount of time to evaporate? Jennifer Penn-Chiu is currently a college student with a deep interest in science who is aspiring to become a writer. She writes about all sorts of things across all subjects including, but not limited to; science, crafts, and fashion. She hopes to become a good writer.
Implementation_Visual system
155
TYPOGRAPHY & TYPESETTING The HerSTEM brand uses the Proxima Nova Family as the brand font which has a wide range of type styles. Brand slogans or quotes should use bold to get attention. They should be set in all uppercase, and be large in contrast to the headline(s). Headlines should be set in all uppercase. Body copy should be set in Proxima Nova Light.
156
HerSTEM
PHOTO STYLE The HerSTEM brand photo style should be clean and express a scientific visual message to the viewer. To keep composition rational, there shouldn't be more than four objects in one image. High contrast between the objects and background should be highly awarded. For example, a black object should be placed on an orange background.
Implementation_Visual system
157
158
Deliverable 1
HERSTEM WEBSITE
HerSTEM
Implementation_Deliverables
159
160
HerSTEM
Implementation_Deliverables
161
162
HerSTEM
POPULAR PROJECTS SECTION
Implementation_Deliverables
163
164
HerSTEM
Implementation_Deliverables
165
“I like this site very much and I think it's really interesting. Because the STEM kit and STEM project are all together, I don't have to worry about the kit's resource.” — Megha Jain
166
HerSTEM
Implementation_Deliverables
STEM KITS SECTION
167
168
HerSTEM
Implementation_Deliverables
MENTOR SIGN UP PAGES
169
170
HerSTEM
Implementation_Deliverables
171
172
HerSTEM
Deliverable 2
HERSTEM APP
Implementation_Deliverables
173
174
HerSTEM
Implementation_Deliverables
175
176
HerSTEM
Implementation_Deliverables
177
178
HerSTEM
“This app is so cool because it allows me to meet someone who has the same interests as me!” — Louise Hessel Holmén
Implementation_Deliverables
179
180
HerSTEM
Implementation_Deliverables
181
182
HerSTEM
Implementation_Deliverables
183
184
HerSTEM
Implementation_Deliverables
Deliverable 3
STEM KITS
185
186
HerSTEM
Implementation_Deliverables
187
188
HerSTEM
Implementation_Deliverables
189
190
Spread Out
PROMO VIDEO
HerSTEM
Implementation_Deliverables
191
192
HerSTEM
BIG THANKS Thanks to all my instructors at the Academy of Art University, especially to Phillip Hamlett, Mary Scott, Jeremy Stout, Hunter Wimmer, Bob Slote, Kathrin Blatter, David Hake, Christopher Morlan, Anne Kitzmiller and Andrew Loesel. Thanks to all my peers who shared your sharpest minds and supportive spirit with me. We worked hard together and made things happen. Without you, I couldn’t be Yu.
YU RONG Academy of Art University, School of MFA Graphic Design Student ID_03869623 // Spring 2016