Random Acts of Kindness
Purpose
Random Acts of Kindness Week (RAOK) is a week to help promote kindness towards others & helps teach important skills of compassion. Within my professional business fraternity, Phi Chi Theta, we strive to emphasize this event. To promote RAOK and awareness of kindness, we wanted to create a platform that could showcase these acts being done around campus. To do so, I created little business cards that will be passed around whenever someone does an act of kindness for another person. The card lists our website and states the link to a dropbox where people can upload photos and see the acts of kindness in real-time on our website. We would be able to filter the photos to post on this webpage to mitigate the risk of having inappropriate photos on our webpage. The essential idea is that anyone who receives a card would then continue to pass that same card on to more people, so it ripples and creates more kind acts. They then will take a picture of that card and their act of kindness once they complete their compassion.
Planning
Now that we have our ideas and purpose in play, I wanted to sketch out how to formate the website in a way that is easy for users to recognize and navigate.
Before I start any design, I make sure to create an idea board in order to focus on a uniform color scheme. This helps me layout all the elements for me to utilize throughout the project. In this case, I made sure to find key colors in both the Random Acts of Kindness page as well as the marketing colors of Phi Chi Theta. My goal was to take one color (or secondary color) from each organization to create a nice blend of colors to use on the website. I also knew that there will be a lot of pictures within the website, so I wanted a nice neutral color throughout the website to balance out all the colors. Thinking through this process helps guide me in the direction of the vision I see for the webpage. Lastly, it creates a strong foundation for me to use within my design concepts.
To create a brand for PCT x RAOK, I wanted to develop the mood/theme for the website. I wanted to emit kindness as well as a playful emotion. This is because I wanted kindness to feel easy and simple. Having a brand before I create the actual layout of the website will help solidify the recognition of this project. When someone views this logo, I want them to immediately note the partnership between Phi Chi Theta and the Random Acts of Kindness Foundation. For this purpose, I wanted to make the design incorporate a story of the RAOK bird making friends through acts of kindness. With the circle bordering the greek letters of PCT, it creates motion and a cycle of kindness.
To begin the Website Layout, I wanted to take into consideration the idea board and part 1. I wanted to evenly spread out the two colors. At this point, I solidified the RAOK blue and the complementary neutral light grey; however, I still wanted to try the orange within the layout to see if the contrasting color would be better. I like to call this theTrial and Error stage. For the actual layout, I know I wanted to put the logo on the top and have a place for the pictures. This easily translated to the structure of Purpose -> Goal/Description -> Process -> Result -> Conclusion layout.
Building/Testing
Throughout the building process, I utilized the website layout to physically create the design. In addition to this, I wanted to test how user-friendly this website was. This was easily done with just giving a sample size of 20 people business cards (noting down their email) two weeks before RAOK week. After, I analyzed how many people uploaded photos to the dropbox and then emailing them afterward to see if they utilized the website. This had an accuracy of 18/20 people. I used this as a learning process to add more interactive elements to the website. This would include the scrollable gallery and the physically amount of numbers being showcased on the website.
This is a scrollable gallery which shows the different acts of kindness as well as a title and description of what the individual did.
Technique: I found a similar text to Foundation -> Week as well as made this into a ribbon banner.
Technique: I utilized javascript to increase the count.
Result
