TouchNote is a best-in-class card sending app helping the world maintain precious relationships. Sharing cards with family has always been at the core of the TouchNote experience. With Family plans we offered our users a unique way of sharing a pot of paid cards with their family or friends.
For this ambitious project I worked on the User Experience, UI structure and branding. It can be explored as two complementary user flows: the first one is about the activation of the family plan subscription, including emails, entry points, payment flow and invite flow for their loved ones. The second part is all about the them redeeming the shared cards and learning how to send them. The design phase was completed in approximately 2 sprints, including iOS, Android and web adaptation.
After conducting some user research with our marketing team, we have identified two important use cases for family plans:
Long distance families
Sharing a card allowance with family members in a different location or country e.g. kids at university or family who live abroad.
Mums and grandparents
Rather than mums signing their kids up to TouchNote, we discovered that the main audience was more likely be families, from University age to grandparents.
After conducting many email survey and user interviews, we established the following functionalities:
– Plan promotion Design a simple, inviting promotion landing page to showcase how the plan works, its values and benefits and how to invite family members.
– Inviting Members Build a seamless flow to invite a family member or friend by adding their details. Build a page to check their invitation status and integration with social media for sharing.
– Sharing and spending Give the admin functionalities for adding, removing or swapping invited family members. Communicate their stats and remaining cards allowance through a dedicated page or in-app alerts.
The project involved several wireframing iterations and prototypes. Below the final iteration of the Plan promotion flow with an overview of the plan page, payment and family member invite flow:
The picture below shows the invite flow. If the invitee is an existing user the offer will be shown via modal (see screen 01) otherwise the same content is displayed via email or social media message. The new member of the family gained access to a pot of cards shared by the family plan owner. All the informations required are available in the account section where users can opt to leave the plan:
The visuals help enforcing the strength of the feature combining the existing brand colour palette with authentic photos shared by our own users.
For this project I also created a set of animations to enhance usability. Animations help users identify connections between interface elements and views and attract attention to important elements and functions of the flow.
The new iconography set is built to be clear and informative but also to reflect the TouchNote brand and enforce consistency across the app.
Below the final design fully tested and validated. The first image shows the Plan promotion flow UI with an overview of the promo landing page, the payment screen and family member invite flow:
The image below shows the final UI of the invite redemption flow. The invite screen is displayed through a deeplink via email immediately after the existing sign up flow.
