“The Power of Kindness” Mobile App Interface Case Study
Let’s acknowledge people for their kindness, one Kindness Card at a time.
I’ve been working on a three-part project for a few months now and it has challenged me in a number of ways. The hardest part of this semester-long project has been coming up with a theme that I could follow through with while keeping a consistent theme across all three projects. The topic I decided to stick to was on kindness. Why? Someone that I absolutely admire is Ellen Degeneres because she’s the definition of a genuine and kind person whose goal is to simply… spread kindness. I decided to do something on a topic that was interesting to me and on something that I wanted to help promote because hey, there’s never enough kindness in the world.
In my article, Creativity is not like a faucet that can be turned on and off, I give brief overviews of all three projects — kinetic typography video, interactive infographic, and a mobile app interface — so if you would like to learn more about those, go check that out! In this article, I’ll only be going over the last part of this project — mobile app interface.
Approach
I needed a more specific topic and approach for my mobile app, something that still tied into kindness. As I brainstormed my ideas, I came up with a few options:
- Suspended coffee/menu item purchases off of an app
- Random facts on kindness app (like my previous interactive infographic project)
- Kindness card tracking app
After spending a few days conceptualizing everything and researching, I came to the conclusion that my best option would be to have some type of app that would be able to track Kindness Cards — cards that are passed on from one person to another for being kind. I was first inspired to do this because of a card that I received from a friend:
As I did my research to see if someone had already come up with a similar idea, I came across the organization, The Kindness Card Experiment, an initiative that was established to recognize, reward, and spread kindness in New York City and beyond. What’s interesting about this experiment is that people who are a recipient of one of the cards will have an option to either redeem $10 or to have the organization donate $10 to a charity of their choice. I loved this! So, building off of this initiative, I did something similar (just without the rewards). Shown below, is the landing page of The Kindness Card Experiment website.
Concept
Essentially, every Kindness Card would first be activated when someone purchases a suspended menu item — something that is paid for in advance for a stranger in need. Luckily, I happened to remember this concept from a post that I had seen on Pinterest several years ago. Yes, Pinterest is a great platform for inspiration. :)
Once something is purchased off the menu for someone else, that person would receive a Kindness Card that they would have to activate through the app. During the activation process, they would have to input their Kindness Card number, name (or anonymous name), location, and a brief summary of what they did to receive the card. After that point, it’s that person’s responsibility to pass the card onto some other kind person and they would repeat the same process. If everyone who received a card were to follow through with all of these steps, people would then be able to track the journey of their cards.
Navigation Outline
What were the possible steps that people were going to go through when using the app? What was the navigation of the app going to look like? In order to get a better feel for the overall structure, I sketched out a mobile app navigation outline so that I knew what pages I wanted to include.
Sketches
With a solid foundation of what I envisioned, I then began sketching out the layout of my app.
Wireframes
After sketching out the layout on paper, I went to Adobe XD (for the first time) to begin wireframing. I usually use Sketch to create wireframes but I decided to try something new; I’m glad that I did because I didn’t realize how simple and easy it was to use Adobe XD!
Design Comps
Now to the really fun part: adding the colors and visuals to the design. My original design had a lot more darker shades of blue so I decided to step away from that and use lighter colors instead. I chose to stick to a blue color palette because it gives off feelings of calmness and peacefulness.
Style Guide
Prototype
I created a very simple prototype using Adobe XD.
After creating a prototype in Adobe XD, I then recreated everything in Tumult Hype so that I could add more features to it.
I added swipe features, simple transitions, and HTML text entry widgets to the prototype to make it more interactive for users.
Conclusion
Keeping a cohesive experience across multiple projects was a lot harder than I had realized, but it is doable! Experimenting with Tumult Hype has opened up my eyes even more to see that there are so many other tools out there that you could use to make your project even better. Implementing simple interactions and animations through Hype is a great way to make a project even more powerful and engaging. The possibilities of what you can build in Hype are endless so with a lot of practice and experimentation, I would like to continue to learn the tools and features offered in this application to fine-tune my projects.
To read about another project where I used Hype widgets, please go to my article: “eBook content is not meant to be consumed, it’s meant to be experienced”
Ellie Hoyt is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web Design with an emphasis in Interaction & Design. This article explains the Product Design Process that was implemented for “The Power of Kindness” Mobile App built in the DGM 2280 Digital Effects course.
