E-Cards Interface

Employer
AllPosters.com

Role
UX/UI Design, Art Direction, Development

Year
2006

User Research

This was an established feature on most product-based e-commerce sites at the time. As a result, there really wasn't much debate as to whether or not we wanted to launch this feature on the website. The debate regarding this feature centered around what to include in the iterative releases to come. There was also a desire to confirm from users how they feel about submitting their name and personal email on the website.

So these two issues became the focus of a series of user surveys that were conducted in parallel to the design and development work. What was discovered was that people felt reasonably comfortable with submitting their name and personal email into the website. Based on feedback, it seemed as though the threshold for what the users would be comfortable submitting stopped at payment-related information or other types of Personally Identifiable Information (PII). The other aspects to this feature that were inquired about via customer surveys had to do with understanding what additional functionality or increased scope they would like to see with the e-cards feature.

The two take-aways here were that users wanted the ability to send gift-cards that the recipient could then redeem and buy merchandise with. Anther option that was suggested was to include a unique coupon code in the recipient's e-card for a discount on their next purchase.

Define

Business Rules

Required values for sending e-card:
1. Sender's name
2. Sender's email address
3. Recipient's name
4. Recipient's email address
5. Date to send e-card
6. Selected product image
7. Message (if applicable)
‍

Values to display after e-card has been sent:
1. Sender’s name
2. Sender’s email address
3. Recipient's name
4. Recipient's email address
5. Date to send e-card
6. Selected product image
7. Message (if applicable)
8. Link to buy featured product image
9. Links to set of related categories

Values included in the recipient's e-card:
1. Sender’s name
2. Recipient's name
3. Selected product image
4. Message (if applicable)
5. Link to buy featured product image

Confirmation Email Delivered to Sender

This email is intended to serve as a confirmation of the e-card being sent. It is also a merchandising opportunity. The values included in this email is abbreviated in comparison to other use-cases. The focus of this confirmation email is to try and push sales of the product used in the ecard.

Messaging in this email will be more generic in nature. It will contain a basic message of: "An e-card that you just sent has been delivered to the recipient.", and "The e-card featured this product image:". The product image will also be included along with links showing related categories and 3-4 related product images below the featured product image.

Business Concerns with E-Card Product

Flagging inappropriate messages such as profanity, hate-speech, threats, etc. In order to ensure the integrity of the product, we needed to put filters in place that would scan through any outgoing e-card. In the event of an e-card being blocked from being sent due to it containing inappropriate messages, the sender would be presented with an error message on the website.
Flagging abuse of sending multiple e-cards to same person (harassment). This was a difficult use-case to define. On one hand, it is important to get as many e-cards sent out as possible in order to increase brand awareness. On the other hand, it would be a negative experience for a user who received a large number of harassing e-cards from AllPosters. That would do harm to the company's brand. This use-case was resolved by limiting the number of times a single recipient could receive an e-card per a 24 hour period.
Filtering out suspected Personal Identifiable Information (PII) in messages. Outgoing messages in e-cards were also scanned for the precense of PII. We primarily looked for values such as SSNs, Driver License numbers, and other values that resembled ID numbers of any kind.
Preventing people from sending out ecards who are behind proxies. In an effort to minimize abuse of the feature, an easy way to do this was to prevent users from sending out e-cards who are behind proxy firewalls.

Customer Workflow

The diagram below outlines the customer workflow of sending a personalized e-card.

Ideate

Wireframe Mockups

E-card Landing Page (Unpopulated)
Default state of e-card page when there is no pre-populated image selected.

Modal Interface to Select Image
When user comes to e-card page with no pre-populated image selected, user clicks on placeholder image and that will bring up a modal window to select an image to send as e-card.

E-card Landing Page (Populated)
Default state of e-card page when there is pre-populated image selected. This is the case when the user clicks on the e-card link existing on the product details page.

E-card Confirmation Page
Last step in e-card process where user can make edits before sending e-card.

E-card That Recipient Receives
Mockup of e-card that recipient will receive in their email.

E-card Page - Success Message
State of e-card page showing user that e-card has been successfully sent out.

Confirmation Email To Sender
Mockup of email that sender will receive as a confirmation of e-card being sent. This is a merchandising opportunity that will include related products and links.

Validate

Implementation and Post-Launch Evaluation

The sending of the e-cards was able to be fully automated. This enabled us to quickly confirm that the system was functioning properly. Following the launch, there were a series of metrics identified to measure success.

Metrics to be tracked post-launch:

Sales against tracking ID in URL of confirmation email
Sales against tracking ID in related product links in confirmation email
Sales against tracking ID in URL of actual e-card
Sales against tracking ID in related product links in success screen on website
Site traffic when tracking ID is present

Conclusion

Results From Initial Launch - The launch of the e-cards product saw a some noticeable successes across the website. We started tracking sales of items used in the e-card interface when the usage went up over 20 instances. After reaching that 20 use threshold, we started tracking sales lift. For product images that were repeatedly sent out as e-cards, we saw an average of a 5% sales lift for the given products.
Due to the fast adoption of the e-cards product, this opened up the possibility of exploring other products that could be sent out through automated back-end processes. This gave way to the next feature addition which was the development of online gift cards.