Relationship feature
The project
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.
User behaviour impact
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.
Benefits
Introducing relationships enhanced the app's personalisation, providing a unique experience. This extended to both marketing content and within the app. Capturing data behind this feature also helped the business create engaging content, tailor made in-app offers and valuable insights to build community features. For this exciting project As lead designer, I covered the entire end to end design process, from ideation workshops to the polished UI. The design phase was completed in approximately 2 sprints, including iOS, Android and web adaptation.
Wireframes
Below I compared the previous basic address book flow and the new relationship-based one. On the right, you'll find mid-fidelity wireframes featuring the newly introduced relationship banners on the "add address" screen. This is followed by the process of selecting one's relationship through a list of tags and avatars. Once a tag and avatar are chosen, they will also be displayed in the address book list.
UX Research & Validation
Soon after the first round of 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 add my own relationship? "
" 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.
Final design
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:
Iconography
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!
Motion design
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.
Metrics & data
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.
