MacBook Mockup from Zan Ilic

Gift-a-Green — Case Study

Spring 2016 User Experience Professional, RED Academy

Casey L.
RED Academy
Published in
9 min readJul 3, 2017

--

Brief

Our project was to redesign Gift-a-Green’s e-commerce website, adding the feature to have the product easily customisable online. We interacted with the founders of the company, Cam Auge and Bryan Kinney, during this process.

Problem

A lot of people didn’t know what exactly the product was. After meeting with Cam and Bryan, we found out that their organic product serves four purposes: a greeting card (front), a postcard (back), a gift, and an edible treat, all in one pouch.

Front, back, and side view of the ‘Thank you’ pouch.
“Thank you” is one of the many greeting choices to choose from.

The edible feature takes time for it to form: the one receiving the pouch/gift (‘giftee’) will need to water the seeds and take care of the plant for less than two weeks. When fully grown, the seeds will become micro-greens, and they will be edible.

Time lapse of seeds growing to micro-greens (real time: less than two weeks). Courtesy of Gift-a-Green.

Because people were unaware of the product’s purpose and process, it was paramount for us to help the company improve their online presence and user experience of their website.

Project goals

Cam and Bryan stressed on how to keep it the visual tone ‘fresh and simple’ and other requirements:

  • An interactive website that tells a story
  • Have scrolling elements
  • Add a team profiles (to ‘Our Story’)
  • Create more awareness of the product and its purpose
  • Update FAQs
  • Explore the relevance of ‘Contact Us’

The project duration was three weeks.

(L-R) Lilla Mihalik, Casey Lam (hey, that’s me!), and Grace Gadston.

For this project, I collaborated with two talented individuals. Lilla and I were mainly in design, and Grace was lead on research. We all contributed to planning, testing, iteration and our presentation (first: to our clients, Cam and Bryan, and our UX instructors, and secondly: to the general public two weeks after the deadline).

The business goals included creating an efficient and interactive website that tells a story. Unique and out-of-the-box, with scrolling-styled pages that ultimately draws users to it’s main call-to-action: customisation. Easy to use and efficient. Our clients were very clear on keeping it fresh and simple. Some of the content to be included were:

  • Provide profiles of founders
  • Increase the content of ‘our story’
  • Create more awareness of the product and its purpose
  • Include an FAQ page to help users

To us, Gift-a-Green is quite unique but not foreign. It’s a mash-up of several existing products: postcard, micro-greens, gift, and plant. We felt that we needed to understand the product before we could to understand what our users wanted, so we did our own research on a number of things:

Edible gifts and microgreens

We started out with this to understand what popular edible gifts are in the market, the demographics that are purchasing them and the nutritional factors of micro-greens to see where they may fit into the buyers habits and values. We noticed that there was an apparent gap in what people knew about micro-greens. We felt it was extremely important to educate our users on this topic as it was paramount to Gift-a-Green’s product and its benefits.

Customisation within online shopping habits

To fully understand how we would include customisation and personalisation to the site, we had to look into what makes the process so appealing or what makes it a displeasing experience for the demographic we are targeting. The ability to influence the look and feel of a product tends to generate emotional attachment, which in turn can lead to increased chances to purchasing the product.

Customer experience with eCommerce sites

We managed to pull out some statistics on customer service, brand experience, cart abandonment, and mobile commerce. We have found that:

  • 71% of customers get a better deal online than in stores
  • 23% abandon their shopping cart if they are forced to register an account
  • 66% abandon their shopping cart because of the payment process

Nutritional value of micro-greens

Because many of our users were only familiar with the existence of micro-greens, and that they could not elaborate on what they actually were or their nutritional value, we saw it would be fitting to look further into this as a solid education system is a feature and future consideration we all agreed on being a paramount component of the product.

The psychology of giving

“Giving — and thoughtful, generous giving at that — may be more rewarding than receiving on numerous levels, from the neural, to the personal, to the social.”
Maria Konnikova

Gift-a-Green has a great advantage here as the greetings and messages on the product are tied with people sending their recipient a greeting card, a way to stay connected with loved ones, and, at the same time, giving him/her a healthy vegetable to consume.

After getting familiar with the product, we conducted 8 in-person
interviews and 2 surveys, as well as conducting a competitive/comparative analysis. Once we gathered all our data, we decided to sort the information out by creating an affinity diagram. We created this as a team, on a white board and discussed right after the sorting.

Our affinity diagram in progress. Photo taken by Grace G.

From the information we had, we then moved to creating our users’ persona.

The gifter’s goals and motivations would be:

  • To buy a unique gift that suits the receiver’s interests and hobbies
  • To hand-write greeting cards for family and friends
  • To buy a wallet-friendly gift that can be customised
  • To maintain active relationships with friends and family
  • To be environmentally friendly, and create less waste
  • To be able to freely contact the company she purchases the gift from, in case she needs support
  • To learn more about micro greens, their nutritional values and health benefits

The giftee/receiver would:

  • want to receive a useful and personal gift
  • value a handwritten greeting card much more than a card that was typed out and digitally printed
  • are not quite familiar with micro greens

After bringing our users to life, context was important in order to continue to the next step:

First, the scenario:

The scenario. Quickly drawn by yours truly.

Florence enjoys giving personalised gifts to her family. She is conscious of the environment, but is also conscious of money. When buying a gift for her loved ones she aims for something useful, personal, sustainable and wallet-friendly. Her sister Autumn, who lives in Ontario, has a birthday coming up but Florence doesn’t have the means to fly from Vancouver to surprise her. So, shopping online, Florence searches for a gift that can be generalised, nothing generic like a birthday card and pair of socks. She types into Google “personalised birthday gift” and is then prompted with Gift-a-Green’s Happy Birthday pouch and sees that they are environmentally friendly, which aligns with her values.”

Key Findings

“My sister wrote me a card for my birthday, it was very thoughtful. It touched me and (…) I treasure it.”

“I don’t want canned content that’s pre-written by a large company. It has no meaning for me.”

“I will always hand write because it’s more personal.“

We discovered that the product should primarily be catered to the gifter, and then secondarily for the giftee’s needs and desires. Both the gifter and the giftee want something personal, however the main difference between them is that while the gifter wants to save time and money, the giftee appreciates a handmade gift with more time and thought put into it.

Customer Journey Map

We looked at the general flow of purchasing a customisable gift online within the current industry to see where the pain points were, so we could potentially tackle them before diving into the design stage.

Text in yellow signifies the user’s hopes. Purple signifies their worries. Red are pain-points.

User flow

To move forward we have created a map of an ideal route that our persona would take in purchasing a product.

Sitemap

We organised our pages into a hierarchy so our users would have an easier time navigating through our site.

Features

With all of our ideas floating around, we didn’t want them to get lost in translation. So we created a feature list, and sorted them according to relevance. With this method we were able to effectively see how important our ideas were.

Feature bucket list

Once we were able to get into the shoes of our user, we started on our sketches. While we sketched we user-tested every iteration with a group of relevant demographics to help discover the pain-points. We conducted 6 user tests, and applied all feedback to produce a better solution.

Photo taken by Lilla. Those are my hands!

From further revisions, less and less errors appeared and we were able to tackle any hesitations. The user flow was more streamlined. With all the feedback we received we were confident in moving into digitising our designs. We were satisfied that it was simple, to the point, and natural to the user.

mid-fidelity wireframes

Few of the challenges we’ve faced were:

  • Conveying the correct order of how the product should be sold and understood by the user
  • Designing an easy and digestible customisation process
  • Creating engaging how-to instructions of the product
  • Keeping the customer and consumer’s needs in mind with the designs
  • Delivery options and how to effectively show this for the customer’s needs

Furthermore, when discussing our design solutions with our clients, we highlighted that the research shows many who are receiving gifts are much more delighted by a hand-written card from a loved one, due to the effort and time that was put into it. We knew our designs needed to include a personalised message feature (where the gifter can type their message as opposed to hand-writing it) to suit the gifter and stakeholders’ expectations, however we believed it should not be the primary CTA (Call To Action) when purchasing a gift online. We believe the giftee’s reflection of Gift-a-Green’s product is just as, if not more, important than the gifter who will purchase the product. Therefore, we felt it was essential to include the handwritten message system to help emphasise the intimate and exclusive feeling of receiving a hand-written message from a loved one.

Tone of voice

Both Cam and Bryan knew their style and tone of voice, they pinned themselves as:

  • Friendly and reliable
  • Modern and fresh
  • Out-of-the-box thinkers
  • Upbeat and accessible
  • Down-to-earth

We took the time to further create a tone of voice that we feel truly represents who Gift-a-Green are and the values they stand for.

First thing you see when you want to create a pouch. Prototype link here: https://projects.invisionapp.com/share/397R5QOMF

Future considerations

Through this process, we came across a few features to include in the website. Due to time constraints, this wasn’t in our scope of work. So we’ve noted them as future considerations:

  • Include an address book feature, so users can easily include their friends and families’ address when sending a pouch.
  • Once the pouch becomes compostable, we would like to provide sufficient information needed to understand what a compost bin is and how to effectively dispose of the pouch once it’s used.
  • Micro-greens meal suggestions/simple recipes
  • Pen/ink recommendations on the new compostable pouch to prevent the messages from smudging, or suggesting a more pen-friendly material for the pouch.

--

--

Casey L.
RED Academy

(she/her) INFJ · human-centered + multidisciplinary designer · http://madebycasey.com