Finale — Gratitude Pin Concept
As expected, the “Mastering Prototyping Techniques” has come to an end. It has been an engaging 10 weeks since the first episode was aired. In this final episode, I teamed up with my colleague and dived deep into the realm of concept development. We developed a concept to encourage people to express their appreciations around them. Without further ado, let’s start this episode!
Here is all the prototypes we created for this concept:
Let’s talk about each prototype in detailed below!
Concept — Gratitude Pin
Quick summary — concept video!
Intro
Gratitude pin is a pin that can be carried around or worn by the users. It is a simple and easy-to-use pin that has a big button on it. By pushing the button, users could record whatever they say. However, this is not to let users record random words, but appreciations they have to the objects around them. The pin data is connected with users’ online account that allows them to track their appreciations.
What does appreciation entail?
Appreciation can be anything! It does not have to be fancy — a simple thank you to what is around you is appreciation! See that coffee in front of you? Notice how that coffee has wake you up? Appreciate that coffee then!
Where does this appreciation idea come from?
This similar concept was first mentioned in the first episode of “Mastering Prototyping Techniques”, where I designed an app to remind people with reasons to be grateful. However, the concept was inspired by Rhonda Byrne’s “The Magic”. I encountered “The Magic” in my late high-school time, and was introduced with 28 hands-on gratitude practices. In the book, there is a practice in which the users assign a special object to be their “gratitude object”. Whenever the users see the “gratitude object”, they say “thank you” to one thing that is around them.
So how is this better than the “gratitude object”?
The Gratitude Pin is connected to users’ online account via WiFi. When the users record their appreciations, they are automatically uploaded to the online account. This provides a certain level of feedback and helps users to develop the habit of appreciation.
How do users know the pin is for appreciations only?
When users order their pin online, we allow them to upload a picture/pattern that is most important and meaningful to them. That way the pin will hold some personal significance. Together with it linking to the gratitude pin mobile app, the pin serves as a physical reminder as well as a special recorder for appreciations around them.
Design Process
Brainstorming
We started the project by discussing our personal perspectives on gratitude — what it meant to us and how we normally expressed it. Then, we dived deep into “The Magic” and picked out several gratitude practices we found interesting and listed them on a google doc. This was tremendously helpful as it provided us with a platform to brainstorm on. We were then able to discuss and free-form ideas from this platform and our personal experience.
Forming initial concept
After sharing our personal experiences, we came to agreement that appreciating “small” things has the biggest impact to our lives. Together with our positive experience on journaling appreciation around us, we decided to develop a concept that would record users’ gratitude towards the objects around them. From our concept, we envisioned the users to achieve something such as “wow I am so grateful for this coffee, because it really energizes me!”
Why recording on electronic device?
From this initial idea, we started to think about if we had previously encountered any problems while recording our appreciations. We eventually agreed that sometimes we were not able to journal our appreciations down, because we did not always have our pens and journals with us. Thus, an electronic device seemed fit for our concept. As different individuals might have different preference on recording, we decided that the options of voice input together with text input are appropriate.
Why a pin?
Since we want this object to be visible to users often, we decided to design something that users could bring with them easily. Since our concept is customizable, a pin that fit into users’ personal style seemed appropriate.
Sketching
After lengthy discussion and brainstorming of our concepts, we started our design process for the interface. Of course, to visualize our ideas, we sketched them out as we were discussing them. Since the goal was to create a prototype, we decided that the pin would be really simple — possibly a circle cut from a foam board — thus we focused our discussion on the app.
Rapid usability testing!
After having the interface sketched out on paper, we decided to evaluate the usability of the interface before we moved forward. To make the feedback process effective, we created the wireframe using Axure really fast and sent it to some of our colleagues online. We then asked them to perform a series of tasks around the feature of the prototype.
Here is a Link to our wireframe in case you are curious.
Concept presentation and feedback
After editing the interface based on the feedback we received, we presented our concept idea to a larger set of our peers. This time we focused on the concept itself instead of the usability.
To our surprise, a majority group of people in our department really enjoyed our concept, as this was something they had never seen. Knowing that our concept could be a little abstract, and may be difficult to explain in a non-verbal way, we let our peers to explain this concept to us after they interacted with our prototype. We thus gathered a list of ideas on how we could communicate this idea to others.
Implementation
Here is a list of final prototypes we implemented:
Video prototype
Since our design consisted of two parts — the concept and the app / pin, we decided to make two separate videos to communicate each part of the design.
For the concept video, we aimed to communicate why our concept mattered. Using the feedback we received from the concept presentation shown above, we generated multiple scripts and storyboards.
After that, we shot the video! I was the director as well as the editor of the concept video. For shooting, I used Nikon D7200 as well as Sony Alpha5000. For recording voice over, I used the built-in voice memo app in iPhone. iPhone is actually a really good recording device — I will recommend you to try it! For editing, I used adobe premiere pro (edit the clips), after effects (adding text effects and animation) and adobe audition (audio processing).
Hi-fi mockup
For the hi-fi mockup, we first discussed and decided on the style, e.g color, impressions, etc. Then, we simply added the colors into the designed layout (wireframe)! Of course, we added some extra such as background images to make our hi-fi mockup more visually appealing.
Evaluation & Analysis
After creating all the prototype above, we recruited real world users and presented to them our prototypes. For the concept video, we asked the participants to describe what the concept was after they watched the video. For the hi-fi mockup, we asked participants to carry out some tasks that were designed around the features of the app.
Overall, participants really enjoyed the concepts as well as the prototypes we generated. The videos received very positive feedback. However, participants reported that they found some features of the app confusing. For example, they did not know why “voice” and “type” would be two separate input methods. They suggested that we could integrate them into one page and had a microphone icon for the voice input.
