Coffee’s On Me: A Mobile Application for Gift-Giving & Communication
What follows is documentation on my group’s work from start to finish as we aided local developer Ray Kanani in adjusting the focus of his B2B mobile app, “Coffee’s on Me” to a more P2P social gesture / communications application with greater potential commercial applications, together we would work on redefining a platform facilitating acts of appreciation and kindness.
The Opportunity
This project marks the fifth and final project in my time as a student at RED Academy in their UX Design program, and happens to be my third time collaborating with a student from RED’s UI Design program, as well as with a real-world client. In addition to my previous projects (here and here) we too with his project developed a high-fidelity model.
Working with me on this project were my classmates Jeff Wasson, Jessica Zannona, Juhi Khatri, and Kim Marlena from RED Academy. Coffee’s on Me (or “COM” as it shall occasionally be referred to in this study) was born out of the unsuccessful efforts our community partner Ray had engaged in with a professional partner of his. They did not hit the minimal level of success they had aimed for in their work, and so as a gesture of thanks towards their customers and investors, they developed a simple B2B app with a simple-but-noble spirit behind it. The original COM allowed users to communicate a simple message too peers and colleagues along with a gift of a free coffee. Ray had thought it would be a neat and simple way to communicate appreciation between work colleagues, or to maybe extend as far as being a unique way to schedule informal meetings between other working professionals.
The idea was a simple one, yes, but proved to be an exciting one nonetheless, as it had a large potential for a peer-to-peer format with a variety of expansion options. Ray recognized that there was a demand for small tangible gifts to be immediately delivered between friends and colleagues as expressions of appreciation, however no current app focuses exclusively on this goal. Our group was tasked with designing this P2P edition of the application. We figured at this point that whatever form it took, it would have a clean and simple design with an aesthetically playful tone, and we would have the freedom to establish company colours, logo, typography, and even a new name for COM itself.
Together, we would enable customers to quickly and easily express their appreciation for the action of someone they knew.
Research
Domain research was our first task on hand, and proved to cover a relatively broad range of items. We explored other apps capable of delviering gifts, onboarding processes, interactive tutorials and walkthroughs, app permissions, signups, emails and push notifications, customer service support, emotional impressions of apps on new users, common market mistakes, user retention statistics all too name a few. Shortly after this we researched retailers that conduct part of their business through some sort of e-gift service (think “Starbucks” or “iTunes”) and come up with approximately 50 specific retailers. This specific research also included typical payment and billing options as well as ideas for greater efficiency of these options.
A competitive / comparative analysis was also conducted by Juhi, who discovered some curious items about COM’s competitors.
Juhi had discovered that Giftly was ironically designed for gift-giving with a message component, but was doing both poorly. Email is obviously capable at sending message, can be paired with all sorts of attachments, gift-related ones included, but doesn’t work anywhere as efficiently as COM because of all the decentralized leg-work involved for the user. And while Snapchat is also in the above-left figure, and doesn’t include a gift-giving component in any way, we did consider it worthy of investigation because of how incredibly efficient it is at communicating impulsively motivated messages. WeChat was perhaps the application I and my group were most interested in because of how we heard it almost acted like an internet within an internet. It’s capable of a lot of ecommerce and instant messaging, and saw a lot of overlap in that and what I and my team were aiming for.
We quickly moved on to a user experience survey, whose creation and delivery I constructed (feel free to view it here). The results were rich in content and spoke a lot of details to us.
One of the things that struck me right away as I began assembling the affinity diagram for our group was that a number of similar words were popping up in regard to emotional responses from a gift giving experience.
- appreciated
- touched
- grateful
- happy
- thankful
People really appreciated the gesture of an unsolicited gesture of thanks by someone they knew.
When we inquired to survey participants what their ideal token of appreciation might be to receive they all leaned towards items of relatively immediate gratification. They mentioned things that by their nature are easy to find and easy to “consume” in a relatively quick period of time (less than a day). They could include hot drinks, pastries, alcoholic drinks, movie tickets and other foods such as ice cream, sweets, and miscellaneous snacks.
Other statistical findings from our survey were equally fascinating:
- 75% prefer the service take the form of a mobile app; whereas 22% said desktop website; 3% said both
- 50% chose email as their prefered way to receive a gift code; 36% said text message; 14% in app message
- 72% would like their “thank you” to take the form of a written message; 14% said a short video; 14% said a picture
- 42% said they would like the inclusion of pre-written messages; 36% said maybe; 22% said no
Additionally, there was Jessica’s persona image, formulated from all the data we had gathered from our survey and additional research.
Our super-user, the “Gracious Giver” as Jessica referred to our persona as, is someone whom likes to build and maintain strong relationships with people that impact her and affect a strong personal influence. This persona not only appreciates others, but very much likes to express that appreciation. Our persona is a very feeling person that very much wants to recognize gestures of kindness upon others when she feels it is warranted.
Before I outline my group’s chosen development path, it’s important to review a few specific statistics first. 75% of survey respondents said they would prefer that a gift-giving application to take the form of a mobile entity. 50% of respondents also communicated that they would prefer an e-gift to take the form of a code communicated via email. The top alternative choice to this was via text message, but not one we deemed important enough to include in our final minimum viable product (although this is easily an option to include for future consideration). 72% of respondents also communicated that they would prefer their accompanying messages to be written out (as opposed to something like an audio-visual component, which is also an option for future consideration, and one we included in our prototype). 42% of respondents would enjoy the option of potentially employing pre-written messages in their egift packages to be sent.
Planning & Design
Based on all this data, we settled on developing a mobile application that delivered food-related, customizable, e-gift cards. There would be an onboarding process for new users, but generally, users with already established accounts and payment methods would open the app and engage in the following sequence:
Choose a person to receive a gift > choose a gift item itself > proceed to the message-composing phase of the app.
Jessica had conducted a contextual inquiry with some paper-based screen mockups. She circulated amongst the students at RED and tested 20 of them to in completing the tasking of sending a gift with a message. These participants were given three different paper screens reflecting a major phase / function of the app and it’s gift-giving process and were asked order them in a sequence that they would naturally expect to occur in such an app. 15 of the 20 participants settled on the above-outlined flow.
So together I and my team agreed to pursue this sequence. After an onboarding process for new users, returning users would start on a screen prompting them with “Whose day are you going to make today?” with an accompanying call-to-action button to begin the process of arranging a gift package. This process begins with a user specifying a receiver either from a carousel of recently-chosen receivers or through a search of a users imported contacts. Once this is complete users move on to the gift marketplace where they choose a vendor and a value amount for receivers to spend at that vendor’s real-world location. The final phase is to move on to composing a message for the receiver, either in written or audio-visual format. Templated messages were included in our consideration because research indicated that users generally needed assistance in verbalizing their emotions. For video messages, users can record and preview greetings, can switch between front-facing or back-facing cameras and can include themed filters and stickers to overlay their video or picture. This would be managed through an accompanying drop-down menu. Users can now proceed to a summary page to review their contents, make changes, before proceeding to move on and send their egift package (screens for this can be seen in the prototype section further down this article).
Sending the gift package will take you to a confirmation screen, and will result in the receiver getting an email with all the information that was selected in the app. I drafted screens of the email using Sketch, formatting them for both mobile and desktop email clients, seen below.
In terms of features to include with COM, there was a fair bit to consider. During the onboarding process, users would of course be prompted to enter and store payment information so that future uses of the app are made more efficient. Users can enter in Paypal information, or credit card information through manually filled in fields, or a card-detecting camera function (such as what iTunes does by allowing users to scan their gift cards with the camera of an Apple device). Users will also be provided the option to important contacts from their phone’s address book. This is to facilitate a more efficient experience later on when users are selecting a potential receiver, as contacts will be right there to choose, rather then them having to manually enter in information.
Prototype
Prototyping for COM took a few phases. Given the relatively simplicity of the app and its services, I and my team felt we could afford to spend some time right away to draw up some low-fidelity paper-based diagrams for the purposes of importing them into a Marvel/Popp-based prototype scene below.
Immediately, you’ll see that at this stage we had already conceptualized a receiver-selection screen, a message composition screen, and a vendor offerings screen, even a pre-sending gift-package review screen. We weren’t married to any specific design per-se, but we were fairly certain about the the main functions we wanted the app to carry out. We just hadn’t settled on a sequence (if any specific one). This is something we went back and forth on for a while.
Additionally, we had eventually transitioned to a mid-fidelity level of prototyping mid-way through the course of the project. Most of the functioning and design had been settled. Screens of the prototype can be seen below.
Final elements at this stage are taking shape. This was as close as we were going to get before beginning the step of importing Kim’s UI design elements. In the above figure, in the bottom corners of the left-most screen, you will notice a camera icon, and a gift icon. These were action buttons designed to deliver the user to message and vendor pages, respectively. The checkmark circles you see in between them were pagination-like indicators to denote the progress of the user in assembling their gift package for a receiver they’ve chosen. One for choosing a receiver, one for messages, one for vendor. Upon each of these being complete, the app would have delivered the user to the summary screen (seen in the above figure on the far right) before sending everything off to a receiver.
In transitioning from our mid-fidelity to our high fidelity we made a fairly assertive shift in the userflow of our app. Originally we had defaulted as a group to the idea that users would choose when they go to a specific function of the app, any sequence of choose receiver > choose gift > compose message. But through input from our instructor and our own discussions we came to the conclusion that this would be a design choice that would undermine fluid movement through the app, undermine it’s efficient use, and risk a large amount of off-boarding. This last items was of particular concern to us, since we were focusing very much on creating as painless on on-boarding process for new users as we could. So gone were the camera and gift icons from the bottom corners of our mid-fidelity app. So we shifted to a pre-determined sequence of actions choose receiver > choose gift > compose message > finish, such as what occurs when one uses to take a photo and post it to Instagram.
Hi-Fidelity Prototype — Click here
Our community partner Ray had communicated from the outset of this project that he wanted a clean and minimal UI setup, that also came with a sense of playfulness to it. As mentioned earlier, our user survey from our research indicated to us that users would prefer a mobile app in a quick gift-giving scenario, so we were sure to keep this in mind. Our hi-fidelity prototype begins with an on-boarding process for new users where after a greeting screen with a call-to-action button, they are shepherded through the process of importing their contacts, as well as inputting their billing and login information. From here, they are brought to the beginning of our pre-determined sequence of choose receiver > choose gift > compose message > finish.
When choosing a receiver, users can use the search field to select a receiver imported from their address book, or choose from a carousel of recently utilized contacts. Once a user is selected, they use the yellow call-to-action button in the bottom left of the screen to move forward to the next phase.
Users are then moved on to select a gift for their recipient. From the first-time on-boarding process, users already have a sense of what sorts of products are offered. They can browse through categories of vendors or items or use the search field to suss out a specific item, read descriptions of these, and alter value amounts of the item they’re delivering to receivers. When ready, users press the same call-to-action button to move forward.
At this point, users arrive at their final step, composing a message. They can compose their own written message, or if they’re so inclined, choose a pre-written message, such as what people do with greeting cards. Users are also enabled to choose a video or picture message. For the purposes of exploring the apps potential functionality, we went with a simulated video message for our prototype. We also felt this feature would help differentiate COM from other apps we researched, such as JustWink. Video messages are capped off at 30-second lengths, and can be previewed before being sent off. When choosing the video option, users choose a sentiment they wish to express, then an occassion all so they can be provided with the appropriate camera filters and other such accoutrement.
When users are done, they hit the call-to-action button, they are taken to a gift-package review / summary where they can alter it’s content or move forward with the package’s delivery. From here they’re taken to a confirmation screen, and emails such as what were displayed earlier are sent out.
On the subject of new names for “Coffee’s on Me”
The challenge of renaming and redeveloping an app is not an insignificant one, nor is it a task to be taken lightly. The needs for Coffee’s On Me are such that in brainstorming a name for their redeveloped app, that it had to be short, memorable, and something that could be repurposed as a verb (ex. Users of Twitter having sent a tweet, say akin to “I tweeted it”).
In our goal, we wanted to settle on something that reinforces a friendly and appreciative tone, and promotes communication between friends and colleagues. Initially, our group employed a no-bad-ideas approach to brainstorming over several ideas and came up with a number of curious options:
While much fun was being had, none of these titles in the end seemed appropriate for what we were aiming for. Nothing was quite hitting the tone we wanted just right, while at the same time acting as something that could potentially be repurposed as a verb. We eventually narrowed options down to four likely choices: “Gusto”, “Boon”, “Gratis”, and “Token”. At this point, we conducted an informal school-wide word-association survey amongst the majority of our classmates and asked them to give us their impression of each word we posed to them. The results are shown in the figure below, but the short summary is that people were heavily favouring “Gratis”. Students explained to us more-or-less that this was because it sounded the most pleasant, and had little-to-no peculiar associations with it. The problem with “Gratis” is that it translates very awkwardly to verb form, was not warmly received by Ray, and thus was something we ultimately couldn’t recommend.
The search continued and included such possibilities as:
- Aimable
- Eidos
- Naz
- Rhapsodic
- Aeonian
Our groups main focus throughout this particular task was to focus on themes of gifts, thanks, and appreciation. We ultimately ended up favoring something leaning a bit more towards the abstract, “Poppns”. A variation of the word “Poppins” which in itself was partially meant to be a reference to the popular literary character “Mary Poppins”, a figure often associated with helpfulness, caring, and affection. We settled for the misspelled version as an act of distinction and also for litigious reason that “Poppins” as an app name was already claimed.
So if renaming of Coffee’s On Me remains a priority, it’s important to keep in mind what we’ve learned in this process, that framing, language, and personalization are very important in this process.
Future Considerations
COM doesn’t have to stop with what we developed, rather, it is an app with potential for greater amounts of revenue. I and my team agreed in our recommendations to Ray the following:
- Expand to offer vendor items beyond food, such as services, clothing, cosmetics.
- Based on input from our community partner Ray and his communications with a local bank, there’s potential to send not just egifts, but monetary gifts as well (like with what Venmo does).
- Featured items could highlight certain vendor options, allowing COM to charge vendors for prominent display of their products, thus allowing for extra revenue options.
- Limited time or exclusive items. Such as seasonal themes for the camera, or seasonal food items that would expire after a certain period of time, thus motivating customers to engage with the app more frequently.
- Since the app is important contacts information, COM could potentially alert users to friends’ birthdays, creating an occasion to use COM for giving a small treat to a friend.
Summary
To reiterate quickly, Ray come to us with the request of exploring the potential of transforming his simple B2B app into a commercial P2P operation with the intention of promoting communication, gratitude, and appreciation. Through our research we determined what form that service should take, what capabilities it should include, what user flow it’s use should occur on, and what commercial offerings it should offer to users. We believe that the new platform we created for Coffee’s On Me is one with an exciting amount of potential to it in being a very engaging and unique mobile app experience for a wide range of potential users and scenarios. Little-to-no mobile apps have really cornered this specific section of the market, that of communicating appreciation in a real and tangible way, I and my group mates believed we have filled that gap when virtually no one else has.
