UX/UI | Figma
Alo Yoga e-gift card
Improving the e-gift card experience.
Overview
UX goals
Create a seamless e-gift card experience onsite that [1] fills the gaps in the current design [2] allows the user to customize as much as they would like [3] brings delight to the gifting process
My role
As Designer for my project, I was involved in the entire process, including the overall strategy, user research, website hierarchy and visual designs.
User sentiments
Alo Yoga’s customer base is loyal and excited about all things Alo. This also means that they are very vocal about the types of features they would like to see implemented or improved.
Here are some customer grievances on the current e-gift card experience.
“There is no way to send the card to the recipient. And you don’t allow for denominations except in designated amounts, so you are limiting options”
“It is a nuisance when you order a gift card, to have to wait for 30 minutes to have it sent to me and THEN I send it on to who I want to have it.”
“It was very easy to shop but I didn’t see a way to send the gift card directly to someone else.”
“I didn’t get my e-gift card immediately to send to a friend”
Competitive analysis
To get a good understanding of what the “table stakes” were I looked at a few of our direct competitors to create a baseline.
I quickly realized that direct competitors like Outdoor Voices and Lululemon are not using home grown solutions. They were partnering with third party vendors like Rise.ai who provide a full E2E solution for gift cards.
Key Points to bring into design experience:
1. Ability to send e-gift card direct to recipient
2. Scheduler for future dates
3. Send a custom message
4. Amount $ Customizations
Outdoor Voices example:
Click to enlarge
User flow
There are two pieces to the user flow detailed blow [1] purchaser journey [2] recipient redemption.
The recipient redemption work flow is a new experience that we are introducing to the work flow. Currently the purchaser has to forward the email confirmation to their recipient.
Solutions + Wireframes
Due to resource constraints + other project dependencies, I worked with the product manager to identify the MVP and ideal end state. By doing this we are able to meet some of the goals in the short term and look to satisfy other needs at a later date apply insights from usability tests.
MVP Feature list:
Capture recipient address and name
Add gift message field
Ideal end state feature list
Multiple delivery options (email, text, print)
Card design choices
Custom amounts
Scheduled deliveries specified by date and time
MVP wireframes:
Click to enlarge
Ideal end state wireframes:
Click to enlarge
Emails for sender + recipient
Emails play another key part in the experience because they are the primary communicator of status post purchase.
Purchaser email confirmation - this email notification lets the sender know that the email has been sent to their recipient.
Click to enlarge
Recipient email - this is the email that the recpient will get as their official gift. Custom with the gift message, card amount, code for easy redemption.
Click to enlarge
Next steps
Usability testing!
Gift card landing page with balance checker
Email confirmations (for sender + receiver)
Error states + messages