Case Study: Developing a mobile app for expressing gifts of Gratitude

Jeff Wasson
RED Academy
Published in
10 min readApr 7, 2017

--

This is a case study documenting the process I went through as part of a five member team of students from RED Academy working together on our third and final community partner project for Coffee’s on Me.

One More Time With Feeling

Here I was, three weeks out from graduating from RED Academy’s UX Design program and ready to embark on my fifth and final project. There was a mixture of anticipation and nervousness. Not only for these being our final days as students and what to expect as we find ourselves back out in the real world. But also for our final project itself!

As the projects we could choose from were revealed it came down to two choices, with one of them being shrouded in mystery. Our instructor was hesitant to give us any details at the time but he did say that it was a pretty cool idea. Seeing as the other community partner project was somewhat similar to a previous project I worked on I decided to throw caution to the wind and dive in blindly with both feet.

The final project mystery box

Community Partner — Reveal Thyself!

It was only once our community partner arrived for our initial interview on the first day of the project that it was revealed we would be working on… Coffee’s on Me.

It began as a B2B product that rose from the ashes of a previous small business idea that ultimately didn’t pan out. The founders wanted to stay in touch with customers and investors from the former business and have a way to say “thank you”. The B2B version of Coffee’s on Me gave people the ability to send messages with an attached gift of a free coffee. This was a fun idea that had a lot of potential for a peer to peer version and not just for sending coffees. It was the inherent promise of a version for the general public that our group was tasked with exploring and to develop a working prototype.

There was little to no branding for the product not even so much as a logo! So it was up to us to develop the entire UI look and feel. With our community partner also being a UX Designer he didn’t want to effect our decision making and preferred to leave it up to our research to see what the answers would be to questions such as:

“What form would the product take?”

“What types of items could users choose from to send as gifts of appreciation?”

“What form of sending messages should be used — text or video?”

The Research Phase — Let’s get this party Started

Seeing as we were going out into uncharted waters our first step was to put together a general survey covering things such as common expressions of thanks, what types of gifts of gratitude do people like to send or receive and how much would people look to spend on a token of appreciation.

Our key findings from these surveys and interviews included:

User Survey

  • 75% prefer the service take the form of a mobile app; 22% said desktop website; 3% said both
  • 50% chose email as their preferred 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
  • The most popular amounts that people would think to spend on a gift of appreciation ranged from $5 (11%) to $20 (25%)

(*Based on a total of 36 respondents)

With responses from our survey and some follow up interviews we got busy with filling up our portion of the white board in class to create our affinity diagram.

Affinity Diagram based on general user survey and follow up interviews
Affinity Diagram highlight

An interesting insight we found was that the items selected as ideal tokens of appreciation all fell under the category of what we deemed “relatively immediate gratification”. These are things people can buy, that are easily findable, easily consumable in a quick time period (less than one day to consume). They include the following: hot drinks, pastries, alcoholic drinks at a bar/pub, alcohol from LCBO, food, ice cream, sweets, snacks and movie tickets.

From there our group explored what e-gift card options were available that Coffee’s on Me could potentially offer on it’s platform. An extensive list was put together that fell into the following categories: Food, Beverages, Entertainment, Services, Housewares, Clothing, Cosmetics and Outdoors.

We also looked into the subject of payment methods and came across a listing of Mobile Payment Processing Frameworks to enable in app transactions. These include options such as Stripe, Braintree Payments, PayPal, Google Wallet and Amazon Payments. Stripe and Braintree Payments appeared to be the current leaders in this space.

We found that the following are some ways in which to make the online payment process easier for customers:

  • Provide a number of payment methods based on what your customer base wants
  • Allow them to make a purchase without an account; as a “guest user”
  • Deliver a seamless design, ensure your branding is unified on your checkout page
  • Have a clear CTA

Along the way we discovered a useful tool for scanning credit cards in your mobile app that is currently being used by such services as Uber, TaskRabbit and GrubHub. This was something we wanted to look at incorporating into our mobile app design.

I took part in conducting a competitive/comparative analysis of various services (WeChat, JustWink, Giftly and Gyft) that in different ways allow people to send messages and gifts. We looked at how do people send and receive messages and gifts; In what ways did people pay for sending things; What things did they offer for people to send and what their target audiences were.

Competitive/Comparative Analysis — between services sending messages and gifts

During the research phase we confirmed that potential users would want the ability to choose more than just coffee as ways to express their thanks to people so we brainstormed and came up with a list of several different names to call the product. We initially were focusing our thoughts around the ideas of gifts, thanks and appreciation. Along the way we came up with a list of most favoured choices and asked people to let us know what came to mind when they heard the different options.

Brainstorming ideas for rebranding Coffee’s on Me

The Planning Phase — Starting to put the pieces Together

Based on our research we determined that our user persona would be known as Jenni — The Gracious Giver. Her goals would include maintaining strong relationships and showing people how much she appreciates them. What frustrates her is at times being unsure what to send to someone as a gift as well as not knowing what to say in a thank you message. She would want to send items that can be easily obtained and consumed. Make sure that the process was simple and easy and would look at spending a maximum of $25 as part of her token of appreciation.

We also came up with the following list of features and things to plan for the Coffee’s on Me mobile app design.

  1. Provide multiple options for payment through the app including credit card and PayPal. Also give users the ability to us the app as a guest first without having to go through signing up as a user.
  2. As part of the onboarding process walk a user through the process of picking a recipient, choosing a gift item and composing a message. Provide the ability to import contacts information to make the process more easy as they go along.
  3. Showcase recent recipients and gift vendors that the user has selected to make it quicker to go through the process in the future.
  4. Give the options of sending a message either as text based or video/photo.
  5. Provide sample text messages organized by subject in the event that a user doesn’t want to write their own custom message.

I eventually went on to generate the final version of the mobile app sitemap based on the functionality we discussed as a group.

Coffee’s on Me mobile app Sitemap

The Design Phase — Let’s make this presentable shall We?

At this point we were ready to transform our thoughts and ideas into pretty pictures! I started the process by drawing some pencil sketches outlining choosing a recipient, picking a gift item, writing a text message and the final confirmation screen where the user gets a virtual thumbs up for using the app.

Low fidelity mobile app screen sketches

Then other members of the team threw their hats into the ring and composed sketches of their own. We eventually incorporated the best ideas of each and prepared to move forward to mid fidelity. I started the ball rolling by building a template file including the initial screens with the exception of the onboarding and landing screens.

Initial round of mid fidelity screens

As the mid fidelity screens were being divided up and completed by other members of our merry band of UX designers I took on the task of creating a logo design for Coffee’s on Me. At this point, after kicking around a number of different names, we hadn’t reached a consensus on something else to rebrand it. I developed a few variations that utilized different fonts and presented them to the rest of the group.

It was decided to continue to look at other font options and eventually the logo evolved to it’s final glory as a collaboration between my teammate Jess and me.

But not so fast! That isn’t the end of the story. As legend tells it, on one fateful subway commute home from school Jess and I continued discussing other name options. Jess mentioned that she had been thinking about the idea of using the names of literary figures as inspiration. People who were shown to be warm, welcoming and kind. That coupled with her talking about sugar put the song “A Spoon Full of Sugar” from the movie Mary Poppins in my head.

I half jokingly blurted out “Mary Poppins — Poppins!” Much to Jess’ delight. Even though the two of us enjoyed the idea I wasn’t sure it would pass muster with the rest of our crew. But much to my surprise we finally hit upon something that everybody liked and thought would be a good option.

From there I worked up the following logos for what would be know as Poppns.

Eventual feedback from our community partner lead to a revision to the design where I replaced the gift box icon with a happy face.

Here Ye, Here Ye! We Have a Prototype

The finished high fidelity mobile app prototype as built using InVision incorporated both the onboarding screens as well as the main functionality screens for choosing a recipient, selecting a gift and composing a message.

High fidelity screens

Usability Testing — What do people make of our Work?

The first bit of testing was centred around determined the optimal user flow for the process of sending someone a gift of appreciation. This was done by asking users to sort our low fidelity screen sketches in the order that they thought they should go in. 74% said that the order should be Person > Gift > Msg.

As the high fidelity screens were being worked on I built a clickable prototype with our mid fidelity screens and usability testing was conducted with the following feedback:

  • Is the tone too conversational?
  • They would have wanted to say “maybe later” — for inputting the payment method
  • Maybe shorten the pop up for allowing access to contacts
  • Can I do a text instead? — I don’t ever take selfies.
  • Can I turn the camera around then and take a video with audio as a solution to not wanting to take a video of myself?

Summary — Before we fade to Black

On our final day of class we presented our research findings and prototype to our community partner for Coffee’s on Me. He expressed pleasure and thankfulness for the work we had done. — What a relief… Now on to Prom!

Through our research we explored the possibilities of extending the current B2B version of Coffee’s on Me and identified a peer to peer mobile app experience that could be used to promote communication and gratitude. We determined the optimal user flow for the process of sending someone a gift of appreciation along with offering options in which to communicate the message of thanks by way of either text or video. We believe that the Coffee’s on Me platform is one that has great potential to catch on as a peer to peer mobile app experience for a wide range of users and offer extensive possibilities in regards to the kinds of gifts that could be shared with one another.

--

--