With over 20 millions cards sent worldwide, TouchNote is a leading card-sending app. The Address book feature is part of the core experience of the app as it keeps track and stores all the users’ recipients.
Previous to this project, the address book was simply a collection of addresses, unable to provide insights on their relationships with the sender. TouchNote would then run separate surveys, reviews, and aggregate verbatim feedback to gather statistics.
The ultimate goal was to re-iterate the existing address book and give users new options to arrange their contacts. We wanted them to be able to associate an address with a matching relationship, so a new field was added based on a list of pre-set options we captured through our user research analysis. Introducing avatars made the experience even more enticing, giving us the opportunity to further improve their user journey by suggesting events associated with their addresses, such as birthday reminders etc.
The introduction of relationship made the app experience more personal and unique for the users. We started recommending content based on their relationship, and personalising the messaging by replacing the name/surname of their recipients with the relationship title they had chosen, both on the marketing content and within the app itself.
Capturing data behind their relationship also helps the business create engaging content, tailor made in-app offers and experiences, plus valuable insights to build community features, and where to focus the business effort.
For this exciting project I worked on the product discovery and User Experience testing, prototyping and UI structure. The design phase was completed in approximately 2 sprints, including iOS, Android and web adaptation.
A comparison of the previous basic address book flow compared to the new relationship based one. On the right, the mid-fidelity wireframes with the relationship banners newly introduced in the add address screen, followed by the flow to choose their relationship through a list of tags and avatars. Once a tag and avatar is selected, it would be also displayed in the address book list.
How can I add my own relationship?
Soon after the first round of user testing we realised not every user was able to find their relationship through the list provided. For this reason we introduced an additional option to create a custom relationship. The feature was highly appreciated and therefore we added this new functionality in the feature scope..
How can I edit my address or relationship?
The old address book did not allow user to edit their addresses, and we decided to also add this functionality as part of the restructuring. After testing different prototypes and iterations, we settled for a top menu item (Edit) as it was the least invasive yet simple to use. When selecting the option, the user will access an edit mode and is able to amend all their addresses.
Below is the final flow, fully tested and validated. The UI follows a simple yet playful design, where each tag follows a specific colour scheme that is kept consistent throughout. I’ve also added an example of the tooltips UI we designed after the user feedback session, and an example of an empty state to invite users to start adding their recipients and relationship:
The iconography set has been conceptualised to be gender neutral, and the icons have small visual clues hinting to the associated relationship. Quite ambitious but I had good fun creating it!
For this project I also created a set of animations and haptic feedback to enhance usability. Motion helps identify connections between interface elements and views and attract attention to important elements and functions of the flow.
Since the release in late August 2020, we have seen good uptake of the feature on all platforms, with over 50.000 relationships now added . Through our data analysis tools, we now know the top relationships added by our users, among which are Female Friends, Mum, Grandma, Sister, Female best friend. These insights are extremely important data which is being used by the company to create engagement content, tailor made in-app offers and experiences, and improve our personas.
