Final Project — Gratitude Pin


The final project is intended to let you expand on a prototyping technique or techniques that you learned previously in the course, but with fewer constraints on the application domain or design. Your project should utilize at least two of the prototyping techniques we have explored in the course. All projects will be required to have a video component as well.


We believe that the current model of achieving happiness is in need of revising:

  • Current concept: Goal → Action → Happiness (→ Gratefulness)
  • Our concept: (Gratefulness →) Happiness → Action → Goal

In this model, by being appreciative of things that we already have, we see more positive things in life and therefore happier. This leads to our action being more positive and being received more positively. Researches also show that the gratefulness is one of the main contributing factors to overall happiness and life satisfaction.

Therefore, the goal of the project is to help people practice gratefulness in their daily lives by simply taking time to say thank you to the things they already have no matter how small they are.

Brainstorming the idea

We approached this by creating a mobile application that would let people enter things that they are thankful for and a “gratitude pin” — a token of personalized design. This token acts as a reminder and a recording device. It can be pinned on clothing or carried in one’s pocket. Whenever user see this, they are reminded to take a moment to say or input what they are thankful for into the database. The pin will be synced with the mobile app and the website, therefore creating a documentation of user’s journey to gratitude.


These are the prototypes created for the project

  • A model prototype for the pin to evaluate desirability and compatibility
  • An interactive wireframe of the website to evaluate interaction and usability
  • A static wireframe of the mobile site to evaluate interaction and usability
  • A concept video to explain the concept of the model and practice
  • A demo video to take the audience through the app’s interactions
  • A hi-fi mockup of the mobile app to communicate the idea in a more refined and polished manner

These prototypes are from low-fi to hi-fi. They were usability tested every step of the process, with feedback being used to create design suggestions for the next phase of prototyping.


Model prototype of the pin

The pin was created using foam and markers. The design was chosen by our participant and can be drawn on with marker. The design can be pushed to activate the voice record function. It can be worn on a shirt of hold in pocket.

Wireframe for the website

The wireframe for the site is created with Figma and added interaction through InVision. The homepage communicates the model and guideline, allow users to create their own pin, and access their blessings.

The prototype can be found here:

Some of the screenshots of the site is included below.

Home page screenshot
Profile page screenshot

Mobile app

Wireframe of mobile app

From the feedback from our usability test sessions, a need for a mobile app is identified so that appreciations could be type in with users’ mobile devices in case of noisy surrounding or places that might be inconvenient to talk aloud. Based on that, an interactive wireframe for the mobile app is created with Axure RP

The wireframe can be found here:

Some of the screenshots of the wireframe are included below.

Screenshots for mobile app wireframe
Screenshots for mobile app wireframe

Interactive prototype of mobile app

The final prototype of mobile app is created with Adobe XD to represent visual and interactive components of an real-life mobile app.

The interactive prototype can be found here:

Some of the screenshots of the app are included below.

Mobile app screenshots


Because of the unique nature of the concept, 2 separate videos were created for this project: a concept video to explain the concept and the practice, and a demo video to walk users through the app’s interactions.

Concept video

Demo video


The project’s deliverables were subjected to several rounds of evaluations in and outside of class to assess usability, desirability, and usability of the product.

The evaluation include explanations of concept and user testing by having participants complete tasks on the website and the wireframe.

Since the concept of the model is very important, participants were first explained the concept and then taken through the prototype to complete tasks such as:

  • Register as a new user and upload your design on your the site
  • Log in on the mobile app, record a blessing
  • Access the blessings in the app

After each session, notes were taken and participants were asked follow-up questions to gather additional feedback.

Some users feedback include:

  • Desirability: the general reception of the idea was intrigue and desire to learn more about the practice.
  • Feasibility: the technology required for this is text-to-speech technology and bluetooth communication, which are widely available. Therefore, the product is deemed feasible. There are feedback concerning memory of the pin, which could lead to technical difficulty when building it.
  • Usability: usability was tested with each iteration and made adjustments accordingly. The general feedback was once the concept was understood, navigation was straightforward. Therefore, we put efforts in producing additional concept video to help guide users through the understanding of the concept and include a guideline to practice gratefulness.
Screenshots from user testing sessions


Overall, with the combination of different prototypes, the project’s goal was communicated clearly to users. The prototype had many facets that can provide users with a holistic understanding of the concept and the functionality of the product. However since the concept is not tangible and require more background information than an established application, there are still refinements to be done. If I was to do it again, I would focus on the two most important aspect of the concept and build from there, rather than deviating and changing course in the middle of the progress because it required additional steps to verify the usefulness of the content and information architecture.

It has been a long progress from forming the idea till the fruition. I’m proud of what was created and the learning process.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.