top of page
See Kindness
UX/UI, User Research & Branding
OVERVIEW
The Challenge
During times of social distancing and isolation amid COVID-19, we've noticed kindness emerging throughout communities around the globe like never before. Our challenge was to design a platform that connects people through these acts in a way that inspires others to be kind, helps those who are struggling cope with the fear and anxiety, and nurtures this spirit of kindness during this time and into the future for whatever is to come.
The Outcome
A global Map of Kindness. Users can post acts of kindness that they have done, witnessed or received and attach it to a drop pin on the map. This has been proven to boost oxytocin levels in the person sharing, receiving, and just reading about the kindness.
Role
Lead UX Designer
RESEARCH
Research Goals
-
What are the benefits of sharing acts of kindness, and is this something of value?
-
How do people feel about and identify their own acts of kindness, and will they be inclined to share these stories?
-
How can we create a social platform that is non-self-serving and unlike existing social media, is not about building a personal brand?
Secondary Research
I read articles on how and why random acts of kindness impact our well being. Understanding the positive impacts kindness can have on us, both mental and physically, confirmed that there is a need and opportunity space for a platform like See Kindness.
Primary Research
As a team, we conducted a set of user testing interviews done in two part sessions. Part one was a conversation with users around their personal experiences with acts of kindness during this pandemic, and the second part was a cognitive walkthrough of our site MVP. Our two user groups were people who were highly active on social media and people who had very limited use or knowledge of social media to gauge the accessibility and intuitiveness of the platform.
The aim of the sessions was to investigate user motivations in using social media in relation to acts of kindness - why they do it, how it makes them feel, etc. as well as gauging the accessibility and intuitiveness of the platform. Cognitive walkthroughs allowed us to be agile because they provided useful insight into our users reactions and understanding of our product before I created a fully functioning prototype. Based on key findings, we were able to pivot in a new direction easily before a lot of time and resources were spend on our original design and workflow.
Research Assumptions:
-
People would not be likely to share on social media, acts of kindness they had done for someone else.
-
People will be most interested in the interactive map when using the site regardless of their social media experience.
-
Understanding the importance and reasoning for this platform would make people more likely to engage.
Key Findings:
-
is perceived as an external act rather than an intrinsic value.
-
This is Twitter for kindness.
-
The concept of mapping acts of kindness was compelling
-
Categorizing acts of kindness added a playful and intriguing dimension.
-
The overall playfulness of the UI was appealing.
-
People will be most interested in the interactive map when using the site regardless of their social media experience.
Persona of target consumer based on user research.
DEFINE & IDEATE
Version 1.0
The first phase of See Kindness was based on the teams collective secondary research and discussions.
Goals
-
Create a social media platform that allows users to share acts of kindness they had experienced.
-
Pin posts to a map to create an interactive "Map of Kindness".
-
Make the focus on content rather than users and creating a personal brand
Version 1.1
The second phase of See Kindness was based on the user interviews and cognitive walkthroughs of the version 1.0 prototype.
Goals
-
Make the site visuals different from existing social media to limit interaction expectations and create a different experience.
-
Make the interactive "Map of Kindness" the main feature.
-
Highlight the story and create a stronger CTA of "why" it's important to share kindness.
SITE MAP
WEB WIREFRAMES
Version 1.0
The first version of the wireframes is similar to existing social media platforms as the original goal was for the interactions to be intuitive and familiar.
The home page had a bold banner with a CTA to create a post and a brief intro of what See Kindness is. Below was the interactive Map of Kindness and the option to toggle between the map and list view.
Version 1.1
The insights and key findings from the user research and Cognitive walkthroughs presented opportunities to create a better user experience for the next version of the site.
​
-
The interactive map was the most interesting part for users. To increase engagement for version 1.1 I made the map the entire page with sliding drawers to keep the Kindness Counter and trending hashtags. I also used the category pins attached to individual posts to create a playfulness and allow all interactions to be done from one window.
-
Because kindness is perceived as an external act rather than an intrinsic value, proposing the CTA to create a post as a question will help users think of personal experiences and they will be more likely to share.
-
The “why” was really important to users and in version 1.0 they were always drawn to the Mission and Vision page. For version 1.1 I created a banner that housed this information and would be open by default on a users first visit so they wouldn’t need to search for this.
Changes on Home Page
Work Flow Changes to Create a Post User
​
-
Creating a post in version 1.0 was all done from one pop-up window, but for version 1.1 I broke this down into three steps to simplify the tasks required for users.
-
To avoid having repeating information for the categories, I created larger buttons that could include the description within them and added some explainer text to guide users.
-
To continue increasing engagement, users can now write their post right from the home screen.
-
Rather than typing in a location, users can now drop a pin on the map to make the whole process more interactive.
New Additions
​
-
On this version, we started to think about different revenue streams and ways to monetize the site. We decided on different filters for the map, one where sponsors would be able to pay for a branded pin where they can attach a kindness message.
-
We also added the ability to purchase Thank You Cards. These pins are shown in the "gratitude" filter on the map and users are able to purchase different packages, depending on the number of signatures they want. When a Thank You Card is bought, purchasers can personalize their map colours and message box. They will then receive a custom URL to share with whoever they would like to sign the card before sending the completed card to the recipient.
MOBILE WIREFRAMES
UI Kit
Logo
WORKING WITH A REMOTE CROSS-FUNCTIONAL TEAM
Internal Team Board
Working remotely with a cross-functional team requires organization and good communication. Our team used Trello to create our backlog, QA tickets and document our progress across departments. This made assigning and handing off tasks from one team member to another seamless.
Dev Board
As the UX/UI, I worked with the developers and the internal team. I was responsible for running design reviews on the live site to find any errors or bugs. I would create tickets for the Devs that included screenshots of the issue, a visual or description of how it should be fixed, and a link to our Google Drive with any assets that they would require to make changes.
bottom of page