lighten your load

1

Lighten Your Load process book

Suzanne ChoiTypography 2School of DesignCarnegie Mellon University

2

part 1: define problem

From interview and survey with other students at CMU and notes from John Hannon (dean of Student Affair)’s lecture, we defined that the current problem of the campus is students feel very embarrassed to talk about their problem. Students think that having a problem is abnormal because it makes them failure.

Another problem is that it is very difficult for student to get help right away because of the limited resources CAPS( counseling office at CMU) provides. Furthermore, many students don’t even know CAPS’s exis-tence, and even if they know it, they don’t know what it is. Therefore, we thought that enhancing the communication between school and student and an alternative solution that could help student deals with stress are needed.

Finally, we realized that many student think that they are the only one who are struggling. So, we thought that raising awareness that many people in this community struggle with the same problem would help student feel comfortable to speak about their problem.

For this project, we were assigned to a group of three people and our job was to create a system that helps well being of students at Carnegie Mellon University. We had approximately 4 & 1/2 weeks to complete the project.

A Large portion of our CMU community suffer from various issues including academic, financial, relationship, emotional, and physical problems. And, sadly, some of the students had very hard time handling the issues , and committed suicide. CMU community and Student Affair department realized its seriousness, and that is why they asked us to develop a system that could improve student’s healty living at CMU.

Our targeted audience was ourselves: undergraduate students at Carnegie Mellon University. And our defined context is, of course, CMU environment.

My teammate was Hyun Doug Kim and Ji-Young Lee.

project description current problem

We first sent out survey to get a sense of student’s current understanding of the resources available and to know whether they are willing to use the resources available on campus if they need a help. We also wanted to know how students are satisfied with the experience regarding resources available on campus.

In responses from the survey, it is evident that many students don’t even know whether they have resources available on campus to help them. This problem could be improved by making communication between school and student more efficient and friendly. Also, because of the limit-ed help CAPS ( counselling office at CMU) could give, we should find out alternative system/way to help students dealing with stress.

survey

We wanted to tackle mental health issues in Carnegie Mellon community, because we believed that mind is the root of every further problems such as behavior, physical, and academic.

Therefore, Hyun Doug, Ji-Young and I wanted to improve life at CMU by creating a support system within the CMU community, which helps students to get help when they needed, have a person to talk to when they are stressed, feel supported by the community, and realize it is normal to have problems.

intent and purpose

3

initial idea

After we thought about online chatting sytem between CAPS psychologistand students, we went to CAPS to meet dean of CAPS, Kurt Kumler, to ask about feasibility of our idea.

From interview with Mr. Kumler, we realized that counselling is better not be done in online space because the theraphy is most successful when communion between student and the psychologist is developed. Since facial expression of a student tells a lot of student’s feeling and level of stress, theraphiest need to see student face-to-face in order to fully under-stand student and give constructive advises.

We also realized that it is impossible for CAPS people to do everything because the ratio between CAPS’s limited number of staffs and number of student is too big. So we decided to move away from CAPS and create support system between students.

So, our three mediums are online chatting system, resource guide pam-phlet, and mobile version of online chatting and resource guide book.

In deciding whether we should create online version of the chatting or physical version of confession wall, we again asked CMU student which one would they feel more comfortable. About 70 % of student preferred sharing their problem through online.

And, to deciding medium to communicate school resource to students, we asked students whether they would prefer online form or physcial form in terms of receiving information. 97 % answered they would feel more friendly and attached to the physical form.

And we decided to create mobile app version of the chatting and resource guide book because mobiles are 24/7 with student, thus able students to access help anywehre at 24/7.

We realized that it is very difficult for student to feel supported by Carne-gie Mellon with current system because there are too many procedures and obstacles school requires to student when students seek a support from school - which is evident by long waiting line of CAPS and the fact that students cannot get the actual therapy until their 2nd appointment.

In order to resolve this problem, we thought about anonymous online chatting system where students can communicate with CAPS theratphists and other students about their problems immediately without showing their identity.

Also, we want to better communicate CAPS’s existence and school’s intent to support student by creating resource guide pamphlet or card, and mobile app version of chatting and pamphlet.

2nd idea

The top image served as our inspiration for our next idea, which is peer to peer online blog system where students can post their problem ananymously and other students who have gone through similar problem can give advise to the student who posted the problem by commenting on the post. Our blog also has encouraging quotes section because we found quotes are very helpful in cheering up people’s mind.

And since we moved away from CAPS and changed our idea to peer-to-peer helping system, we realized that our idea to advertise CAPS will be disconnected from our peer-to-peer blog idea. Therefore, we decided to create advertising card of our blog instead of school resource guide phamplet.

And from mobile app version of the resource guide book, we decided to make mobile app version of our online blog in order to help student access our blog whenever and wherever they are.

4

part2: visual languages

visual language color type study applying visual language

We first defined 6 adjectives that represent our idea: approachable, caring, comfortable, friendly, helpful, and honest. With the adjectives in mind, we created visuals that represent the meaning of the adjectives.

From the sketches, we realized that circular or organic shapes represents the meaning of our adjectives the most. And hand-written or imperfect lines give more approachable and friendly feeling.

After we sketched visuals, we looked for colors that will represent our ad-jectives. After we printed out our color pallet, we realized that light pastel colors evoke friendly and approachable feeling the most. And from those pastel colors, we felt green color has the most soothing effect.

We also looked at different typefaces to select typeface that has most matching voice with our adjectives. From the typefaces, we chose Adobe Devanagari and and Meta light because those typefaces evoke friendly and light feeling.

These are the first sketches of our blog idea. We used circle shapes and organic hand marks that we found successful in our visual sketches, and a personal diary image because we wanted to evoke personal feeling. However, we did not like the sketches because these sketches feel very out-dated : looks like 80s blogs. We realized that it may be because we put the visual sketches we did into the website without really thinking about layout or function of our blog. So we looked up other website examples to enhance our idea.

5

iteration 2 - building homepage of online blogiteration 1 - building homepage of online blog iteration 3 - building inside iteration 3 - mobile version

We first determinded the categories of issues that students might have: relationship, financial, academic, emotional, and physical. Then we designed the homepage with the color pallet and visual languages that we developed earlier.

We gave different colors to each category of the issues. Red for rela-tionship because red represents love, green for financial because green represents dollar bill, yellow for academic to reminiscent yellow college ruled note pad, light blue for emotional because many people say they are “feeling blue“ when they are having emotional issues, and purple for physical because purple represents bruises from physical abuses. And we added pencil shape to reminiscent the student of “writing” in their personal diary.

From this first iteration of the homepage, we received comment that the green background of the homepage may confuses the users whether they are in the financial section or in homepage. So we decided to give no hue to the background, so that we don’t cause any confusion and only the categories of issues pop up within the hompage.

We also got a comment that the pencil shape might cause discomfort to the users because of the angular corner of the pencil. Therefore, we decided to remove the pencil shape and keep our homepage more airy.

After we got pretty settled with the homepage, we designed individual section pages. We first ran into many problems because we didn’t think about wireframe before we design it. And we didn’t think about where to put the navigation bar and post boxes. I think what made us struggle the most was that we tried to put everything on one page.

After several sketches, we realized that central one column grid works the best for the individual section pages because it is consistent with our homepage layout. We put navigation on the top center and made brush strokes to represent sections. We made the post box pops up when user click on the post button. And we made users can see comments only when they click on the comment button. So if users click on the comment button, comments appear below the post and all the other posts move down.

From this iteration, we got comment that the navigation bar below sec-tion title is not working. And readability is hindered because color of the issue boxes are too dense. Also after long time looking at it, we realized that the typeface Meta is too clinical.

Mobile version of our website had same features and layout but white space and background are shrinked to fit into the narrow mobile screen. We moved navigation up next to the section title, so that brush stroke on left side of the title represent current section and right side represent other sections by color. In addition to change of the background color and removal of the pencil

shape, we also gave organic edges to the outer boxes to evoke more friendly and approachable feeling. We changed wording of the subtitle to make our blog feel more comfortable.

And from this iteration, we received comment that overlap of the words and marker marks hinders readability of the words. Therefore, we decided to separate marker marks and the words. ( See below)

So this is the revision from iteration 2. Words are more readable than before, and overall look became more comfortable. However, we started to question whether we need the marker marks next to the words.

PART 3: iterations

6

iteration 4 - online blog

PART 3: iterations

iteration 4 - mobile version

From iteration 3, we realized that Meta is little clinical looking, and thus we looked for more friendly and approachable typeface. The typeface we tried here is Pocket, a hand written font. We liked personal and friendly atmosphere this hand writtne font gives, however, we didn’t like the mix of upper case and lower case letters in this font. We also felt that it evokes friendly but childish feeling, so we asked to other people whether they feel the same way. Many people responded that it does feel little childish.

So we decided to change our font to more universal font. After serveral searches of the font, we found Rotis Sans Serif 45 Light gives very friendly and approachable feeling while ensure readability and legibility.

Also many people responded to this iteration that encouraging quote section feels disconnected from other pages because we put random en-couraging quotes from famous people. So we decided to keep everyting within CMU community. Therefore, we started collect quotes from CMU staff, professors, and students.

7

iteration 5 - online blog

PART 3: iterations

For this iteration we put water color marks on the background in order to make our visual language consistent with the cards. However, we realized that some of the water color marks create too much contrast ( see right bottom corner of the top image) that draws too much attention.

And, we changed our typeface to Rotis Sans Serif because it is legible while friendly. But we realized we need to control typesizes to give more heirarchy.

From last iteration, we started to question how users will know what they missed if the user comes in few days later. So we thought about notifica-tion system, but soon realized it will be annoying for someone. Therefore, for this iteration, we added dates on the issues to let users know what they missed while not bothering the users.

For this iteration, we got comment why navigation bar on section page runs horizontal while navigation bar on the homepage runs vertical. And we agreed that it is confusing. The other problem was that the navigation bar on the section pages only has colors of the section, which in other words mean users have to memorize the section names and its color.

For this iteration we added about us page to let students know that there are many people who cares about them. We first thought about having about us information pops up when users hover on the footer, but later realized having a separate page will makes more sense.

We also added a link to CAPS in the about us page to make sure students have resourse available if they need further assistance on their mental health.

This is the pop up post box that comes up when user click on the post button. We realized that the location of the pop up post box doesn’t have any system. So instead of making post box pops up on the screen, we decided to make the post box appear within the grid when student click the post button. When the post box appears, it pushes down other posts.

Since we changed our quote page to have quotes from CMU community only, we changed wording of the tap to cmu voices from encouraging quote. The word “cmu voices” would make people wonder and interest-ing to go in and read.

8

iteration 2 - advertising cards of the blog iteration 3 - advertising cards of the blogiteration 1 - advertising cards for the blog

PART 3: iterations

We decided to create 3”x3”advertising cards for our blog and app. We made the cards for display purpose. So, after student receive the cards, they find it pretty and display it on thier wall or desk, and refer to it later when they need help and want to go into our blog.

The advertising cards have encouraing quote on the outside, and infor-mation about our blog in inside. We decided to put encouraging quotes related to each sections - emotional, phsycial, academic, financial, and relationship in order to connect the cards and blog.

This is the first iteration of our cards. We used Adobe Devanagari as typeface for the qutoes and Meta light for information about our blog in-side. First, we tried hand drawn quotation mark as a background image, however, we realized that it looks like water drops or eyes. Furthermore, the quotation mark doesn’t have any meaning behind it. So we tried layers of brush strokes that we used in our blog to convey friendly and caring feelings. However, the brush stroke doesn’t feel friendly enough and didn’t have uplifting feeling because it was computer generated. Therefore, we decided to move off from computer and made real water color brush strokes by hand.

For this iteration, we scanned water color brush strokes that we made and used it as a background for our cards. These real hand generated brush strokes definately gives more friendly and approachable feeling. Moreover, the movement of the brush stroke energizes people. To give hierarchy, we tried big brush stroke with small quote and small brush stroke with large quote. And, we gave gradation on the quotes to make the quotes similar to water color brush strokes.

After we put together all five cards, we realized that the brush strokes are not working as a cohesive whole because all the brush strokes look the same. And realized the gradation on the quotes is unnecessary and we need to define system for the location of the quotes.

For this iteration, we used new brush stroke images that we generated after iteration 2. These brush strokes feels more vivid and uplifting than before ones, and works well as a cohesive whole because the brush strokes have similar voice but are different from each other. Quotes always are in same position.

The encouraging quotes are in different typeface from before ones (Pock-et) because we changed our typeface in our blog and wanted to match voice of the cards with the blog.

9

iteration 4 - advertising cards of the blog iteration 1 - 3 mobile app icon

For this iteration, we printed our cards on canson paper to make the water color stroke more real and alive. We also put soothing tea bags on the inside as a gift for students to show that we care about them.

From this iteration, we realized that we need to watch carefully for the negative space the words and brush stroke makes.

We again changed our typeface for the cards to speak consistent lan-guage to our viewers. Outside quotes are in Rotis Serif regular and inside is Rotis Sans Serif.

For mobile app icon, we first tried studies that are shown on the left side. We incorporated brush stroke of both blog and cards and realized that the brush stroke that we used in cards more accurately delivers the feeling we wanted to deliver. However, since our blog is not only about emotion-al section, we realized we need to put all the five colors. So we came up with the final web icon that is shown on the right side.

10

part 4: final outcome

cards website - see pictures on next page

For final, we designed our own tea tags. The tea tags has five different colors that represents each five sections in our blog and app ( relation-ship, financial, physical, academic, and emotional) We attached the tea tags on the tea bags and put those in the clear bag, then put the tea bags in each cards according to its color.

We printed our finals on canson paper to enhance the texture of the water color strokes. And adjusted negative space between quotes and brush storkes. The final cards came out subtle, calm, uplifting, friendly, and caring.

For final website, we added log in page just to make sure it is CMU private space and to ensure trustworthy of the comments. We made CMU gradu-ate psychology major student as a administrator and gave them 3 credits. The CMU graduate psychology major student will monitor the comments so that any bullying or mean comment could not be published. The grad student will have assistant grad student for one year and the assistant grad student will be in charge of monitoring the comments after one year of assist passed. When the grad student log in as admin, he will see “need approval“ buttons for any post that has new comment, and if he clicks on the button,he will see “approve“ and “disapprove“ buttons next to new comments. If he clicks on the “approve“ button, the comment will be published and if he clicks on “disapprove“ button, the comment will be deleted. (see right side.)

For final, we also changed navigation bar of the home page to horizontal layout in order to make the navigation bar consistent through out all the pages. Also, we changed the navigation bar in the section pages to be words instead of color, to make users don’t have to memorize all the section titles.

We changed comment button shape to more simple shape in order to ensure readabilty of the words.

When users click on “post your issue” button on the left, the users can write their issue on the box with drop shadow that just formed, and after they click “post“ button, it will go on the blog and move all the other post down. The system works the same for the “comment” button.

For “cmu voices“ page, students can read about quotes from CMU com-munity. And if they want to post their own quote, they can click “click here to submit your quote“ and can submit their quote through google doc.

share your issuescmu voices about us

relationships �nancial academic emotional physical

post your issue

I don’t know why but I am so tired. I haven’t done anything today, yet, I feel like as if I ran a marathon. I feel dizzy. I just want to stay in bed all day. I just want to sleep and I wish no one or work will wake me up. I get extremely mad at whomever woke me up.

2013.4.20

comments

When you don’t feel like getting out of bed, then don’t. Think of it as a gift to yourself. However, try not to exceed a day.

2013.4.21

write

approve

disapprove

I feel depressed lately, I don't want to see anyone. I don't want to go to classes but I go because I am scared of my GPA falling. I feel like too much is going on my life that I cannot control. I don't want to eat somedays, I can't fall asleep some nights.

2013.4.19

You should take care of your own problem. You go to CMU and you are adult. Don’t be childish!

2013.4.21

comments


relationships academic emotional physical

post your issue


2013.4.20

comments


2013.4.21

write


2013.4.19

comments

When I look at my mirror, I cannot take my eyes off, not because that I’m beautiful, but because I see too many defects in my face. help me out!

2013.4.19

comments


When I look at my mirror, I cannot take my eyes off, not because that I’m beautiful, but because I see too many defects in my face. help me out!

I realized that I don’t smile often thesedays. I don’t have any problems or concerns at this point, however, I don’t feel happy enough to laugh. also, I sometimes cry because of no reason. Am I having a depression?


2013.4.19

2013.4.19

2013.4.18

2013.4.17



post your issue

comments

comments

comments


2013.4.20

comments need approval



post your issue


2013.4.20

comments


2013.4.21

write

approve

disapprove

approve

disapprove


2013.4.19

You should take care of your own problem. You go to CMU and you are adult. Don’t be childish!

2013.4.21

comments

12


what is weighing you down?share your story & reduce your burden

issues :


student

everything will be anonymous! don’t worry!

CMU community private space

admin

student ID

password

suzanne1

***********


what is weighing you down?share your story & reduce your burden

issues :



When I look at my mirror, I cannot take my eyes off, not because that I’m beautiful, but because I see too many defects in my face. Help me out!

I realized that I don’t smile often thesedays. I don’t have any problems or concerns at this point, however, I don’t feel happy enough to laugh. Also, I sometimes cry because of no reason. Am I having a depression?

I am so afraid. my mood changes so drastically and so often. It is out of my control. What should I do.........ahh


2013.4.19

2013.4.19

2013.4.18

2013.4.17


comments

comments

comments

post




2013.4.19

2013.4.19


comments

comments

post

thank you for sharing!

post




2013.4.19

2013.4.19


comments


2013.4.20

comments

comments

I am so afraid. my mood changes so drastically and so often. It is out of my control. What should I do.........ahh

2013.4.17

post

I have been through a period, I regretted it later because after I had bad stomachaches. I know it's hard, but try to eat. Health matters!


2013.4.20

2013.4. 20

2013.4. 20

2013.4.17


comments

write



post

When I cannot fall asleep, I write down what’s in my mind, dump it all out on a paper and listen to calming music. It helps!

I have been through a period, I regretted it later because after I had bad stomachaches. I know it's hard, but try to eat. Health matters!


2013.4.19

2013.4.20

2013.4.20


comments

write


When you don’t feel like getting out of bed, thendon’t. Think of it as a gift to yourself. However, try not to exceed a day.

2013.4. 21

post

When I cannot fall asleep, I write down what’s in my mind, dump it all out on a paper and listen to calming music. It helps!

mobile app

Mobile app version of our online blog will have same features as the online blog: cmu voices page, share your issue page, and about us page. It has same central one column layout, but we reduced portion of background and white space in order to fit in the mobile screen. Mobile version is read and write only, so administrator should go into the website version in order to approve or disapprove comments.

13

part 5: self reflection

From this project, I learned how important the research is. Since this proj-ect is dealing with more sensitive issue compared to other project that i’ve done, I put more care on understanding people’s mind and what they need. The research - surveys and interview- helped me a lot in definding design opportunity and problem.

I also learned how important little details are. We explored various ideas and design at the first stage, but from the mid point, we spent our time fixing minor details - such as navigation bar, shape of comment button, type changes, texture of edge of the boxes, spacing between post boxes, font sizes and etc. - to build our idea more concret. As we fix those details, we saw our project getting better and better : all the design choices start-ed to makes sense as we go along with the project.

Third, I learned it is better to think about forms later. I tend to design first before settled in components or contents that go into the design. I real-ized every time I design first before settled with content, I ran into prob-lems. For this project, I did lots of reasearch and visual sketches before I go into a design part, and I believe that is why this project went smoother than other projects. I started to develop habit to think about content first from this project and I really appreciate that I learn this.

Fourth, I learned how important and interesting building a system is. For this project, we created complete cycle from start to end, which starts from users introduced to our project, then user get help from peers, and end with the user being a helper for other student. In this narrative, we needed to build a system that will influence user’s bahavior and mind. To influence user’s bahavior and mind, we put lots of attention to color, type, shapes, and overal atmosphere. I faced lots of difficulties during this process but I was interesting.

Lastly, I realized how CMU cares about us. When I first transferred to CMU, I feel so pressured because I felt school expect me to do better than I could do. However, from this project, I learned that school really cares about student’s well being and they put lots of effort to improve student’s life at CMU ( such as Carnival event and counselling services.) Just know-ing that school cares about me made me feel very warm and releaxed.

what did i learned

thank you.

lighten your load

Documents

students dont

cmu community

undergraduate students

students healty

cmu environment

student think

student deals

resources available