Building Privacy Mode
Have you ever wanted to share your investing approach or returns with others, but didn’t want to disclose your financial status?
We noticed our users facing this exact problem. Before sharing their screenshots on StashAway community groups (e.g. Facebook, Telegram), they would manually censor sensitive information.
At StashAway, we have multiple guilds that engineers can join if they have technical expertise and/or interest in specific domains. Guilds give our engineers the agency to brainstorm and work on enhancements for both user and developer experiences.
We kickstarted a conversation within the mobile guild on how we could provide our users with an in-app solution to hide their sensitive financial info.
Eyeing the Best Solution
Initially, we considered hiding asset values whenever a screenshot was taken. This would cover the use case we had seen in community groups but wasn’t viable for users sharing their app in-person or checking their returns in public. Furthermore, the technical complexity of implementing this would not be trivial.
We ended up going with a more straightforward approach, a button that would toggle their asset value visibility throughout the app.
The button was placed next to the “Total assets” to provide context for what it toggled, as well as being convenient and discoverable for our users.
Introducing a separate page in the settings helped to provide further detail, while also giving us the opportunity to create a new dynamic portfolio card design. We designed a more personalized experience by displaying the user’s actual asset value.
Redux and Persistence
After finalizing the designs, it was time to start implementation. The big question was figuring out how to toggle the display of specific components in a flexible manner, i.e. variable string lengths, supporting different currency formats.
Given that our app uses React Native (a UI framework for cross-platform development), Redux was a natural choice for app-level state management. A boolean to represent the toggled display state was created (isPrivacyModeEnabled) and exposed using a isPrivacyModeEnabledSelector function. This was then used to create a selector that returned a formatter function that accommodated the various display use cases.
Since privateStringFormatterSelector returned an anonymous function on each function call, it was important to memoize the result. Otherwise, every update to the redux store would cause any components that called privateStringFormatterSelector to re-render unnecessarily.
(createSelector is a function from Reselect that returns a cached value given the input selector values, e.g. isPrivacyModeEnabled and language, have not changed.)
Additionally, redux-persist was used to rehydrate the state from AsyncStorage whenever the application was re-initialized. This meant that even after restarting their app, users could rely on their privacy toggled state to be exactly the same as their previous session.
Socially Distanced Dots
With StashAway currently operating in five different countries, much of our content needs to be localized before launching new features.
We realized when localizing the feature for Hong Kong, the font we used for Traditional Chinese (NotoSansTC) rendered the dot character with too much spacing between characters, compared to the other fonts we used (NotoSans and NotoSansThai).
We experimented with a myriad of different characters to replace the dot character. Unfortunately, many of them suffered from the same spacing issue. Eventually, asterisks were chosen as a replacement because it rendered nicely and was also commonly used to represent sensitive information.
Publicly Releasing Privacy
Unexpected font issues now behind us, we officially released Privacy Mode on 1 June 2021. We made sure to launch with the necessary event tracking and metrics, so we could validate our solution’s effectiveness.
As of 1 Jan 2022, 67% of active users used privacy mode at least once, while 28% of them went to the new settings page to learn more about the feature.
On community groups, manual censoring has largely been replaced by Privacy Mode.
Having led this project from start to finish, it was extremely rewarding on a personal level to see it delivering value to so many of our users. Additionally, this is the first feature to be launched as part of a StashAway guild initiative. I’m excited to think of what other valuable features we can deliver to our users through guild-led initiatives.
Building and launching this feature from scratch wouldn’t have been possible without the work of my talented colleagues: Sharmaine and Alvin for leading feature design, Zi Xuan for product coordination, Joshua for technical review, Sam for kickstarting the initial feature discussion, and everyone else who contributed along the way. Lastly, thanks to Jensen, Junyu, and James for proofreading this article.
