Empathize

Competitive Analysis

I reviewed book sharing applications and companies that offered similar solutions by pinpointing the strengths and weaknesses of each which in turn will help me with any gaps in features that my app might address.

See full competitive analysis here:

Competitive Analysis

Here are the main competitors of Kinder NYC:

Competitive Analysis Summary:

• Upon concluding a competitive analysis, I found that there are various companies that have the same idea as the one I have for my application idea.

• I found that the company that is the closest to my idea is “Karmic”. They have a lot of the features that I would like to include in my app which include daily reminders as well as create a positive community.

• Some of the market opportunities that are worth exploring is any gamification aspect of the application where it may keep users coming back to use your product. 

• I found that many sites that have the similar ideas were all webpages that promoted their mobile app. None of the apps were a functional webpage but rather a promotional site.

User Interviews

Building on a general understanding of the market and the audience, I continued to dive deeper and build a real connection with our users in order to gain direct insights about them. I interviewed 6 participants about their acts of kindness experiences (if there is any) in the past.

Here are my results from the user interviews:

User Persona

Based on the feedback and insights gained from research, I created a user persona who might use the Kinder NYC web application. This persona demonstrates the key users goals and frustrations that appeared in my findings. This will help me focus on tackling the most important problems in order to address the major needs of the most important user goals. It is both fictional and realistic.

Here is my user persona:

Define

Defining the problem

Now that I have a good idea of who my users are and what their wants, needs, and pain-points are, I am ready to turn my empathy findings into an actionable problem statement. By doing so, it ensures that I have fully understood the goal of the design project and in turn steering me in the right direction towards a proper solution.

Here are few problem statements:

• NYC citizens need an app to spread small acts of kindness so that NYC becomes a kinder place to live in.

• NYC millennials need a product to share with others the acts of kindness they do so that it inspires others to do the same.

• NYC citizens need a platform where they can give back to the community through small acts of kindness so that they create a feel-good feeling not only for themselves but for others around them.

Final problem statement:

How might we help people feel encouraged to do more acts of kindness in NYC?

Hypothesis

I then came up with a hypothesis statement:

Molecule

Creating a molecule helps me quickly identify a person, with a problem and a proposed solution. This helps me create alignment and focus on who I am targeting, what problem I think they have and gives me the opportunity for a possible solution.

Here is the molecule:

User Stories

• As a citizen of NYC, I want to spread some kindness so that I can lighten someone’s day.

• As a kind person, I want to see what kind acts others are doing so that I can become inspired to do more kind acts.

• As a citizen of NYC, I want to do more acts of kindness so that NYC can become a kinder place to live in.

Ideate

Crazy 8s

Crazy 8s is a fast sketching ideation method that challenges people to sketch eight possible ideas in eight minutes. The goal is to build beyond your first idea in order to come up with a variety of solutions to your problem.

Here is my crazy 8s ideation method:

Wireframes

I created the low fidelity wireframes which helped me focus on the visual consistency and hierarchy before applying styles. Creating low fidelity wireframes helped me visualize my ideas as well as give me the basic structure for how users would use the web app for finding daily inspiration for random acts of kindness. I included annotations to each screen just to get into the habit of expressing my designs for future interactions with developers.

Here is a screenshot of the low-fidelity wireframes:

Prototype & Test

Visual Design

Once I gathered all the necessary information needed from the wireframe and all the previous steps, it was time to implement a visual design to the web app all while taking into account the feedback and changes that needed to be done as a result of the previous findings.

Here is my visual design inspiration:

Initial Prototype

Once I had an idea of what direction my web app was going to go design wise, I created the high fidelity prototype which was ready for testings.

Here is the initial prototype:

Prototype Usability Testing

After I finished designing high fidelity screens, I conducted usability testings with 3 participants which as a result will be useful for detecting issues in flows before designing the final prototype.

Here is a list of testing tasks I gave my participants:

1. On the homepage, what would your first step be?

2. On the homepage, can you identify how to get to the other pages?

3. On the homepage, are you able to identify how to sign in if you had an account?

4. On the About page, is the flow clear to follow?

5. On the About page, are you able to see how to get to the next page?

6. On the Ideas page, is the flow clear to follow?

7. On the Ideas page, are you able to tell if this list will be updated daily?

8. On the Ideas page, is it clear what you can do with the random acts of kindness?

9. On the Stories page, is the flow of reading the stories easy to follow?

10. On the Stories page, are you able to tell if these stories will be updated daily?

11. (Go ahead and try to sign in) On the Sign In page, is the sign in button clearly visible?

12. On the Profile page, are the trackers easy to follow and serve their purpose?

13. (Try to upload a story) Where can you upload a story?

14. (Try to complete an act of kindness) Where can you complete more acts of kindness?

15. (Go ahead and sign out) Can you sign out?

Usability Testing Evaluations

Based on the results from the usability test, I was able to find aspects of my prototype that needed to be improved. These improvements came after I found that my users had a hard time navigating or using my product. 

• I found that my site was hard to navigate, specifically for going back or forward on any given page. From this, I found that adding back and forward buttons made navigation easier. 

• I found that my users had a difficult time finding a way on how to complete acts of kindness. From this, I decided that I would add buttons next to each act of kindness and a small description on top which states that one must sign in to complete the acts of kindness. 

• I found that users had no way of signing up if they were a new user. I decided to fix this issue by adding another sign up page which allows you to create a new account. 

• The usability test showed me that anything that looks like a button will be clicked by the user, and so buttons that are non-functional must be functional. I decided to fix this by removing any buttons that served no purpose. 

• I found that on the profile page, the trackers were difficult to understand or weren’t immediately distinguishable. I decided that the best way to fix this is by adding a brief description to the top of each tracker.

•  Finally, by adding micro-interactions to my site I was able to add more realism to my prototypes. 

Prototype Changes

Based on the results from the usability test, I was able to find aspects of my prototype that needed to be improved. These improvements came after I found that my users had a hard time navigating or using my product. I found that my site was hard to navigate, specifically for going back or forward on any given page. From this, I found that adding back and forward buttons made navigation easier. I found that my users had a difficult time finding a way on how to complete acts of kindness. From this, I decided that I would add buttons next to each act of kindness and a small description on top which states that one must sign in to complete the acts of kindness. I found that users had no way of signing up if they were a new user. I decided to fix this issue by adding another sign up page which allows you to create a new account. The usability test showed me that anything that looks like a button will be clicked by the user, and so buttons that are non-functional must be functional. I decided to fix this by removing any buttons that served no purpose. I found that on the profile page, the trackers were difficult to understand or weren’t immediately distinguishable. I decided that the best way to fix this is by adding a brief description to the top of each tracker. Finally, by adding micro-interactions to my site I was able to add more realism to my prototypes.

Final Prototype

Now that I have addressed all of the issues that resulted from the usability testing, I moved on to designing the final prototype of my web app.

Here is my final prototype: